Couple chips follow ups (#42411)

* Fix some disabled

* Disable smooth scroll to start

diff --git a/scss/_config.scss b/scss/_config.scss
index cdab5f393d56c4ef91cdb9a2ec725ecb95b51c8c..96667f43da4f352ffc48242b61b4c7bdd137252d 100644 (file)
--- a/scss/_config.scss
+++ b/scss/_config.scss
@@ -31,7 +31,7 @@ $enable-shadows:              true !default;
 $enable-gradients:            true !default;
 $enable-transitions:          true !default;
 $enable-reduced-motion:       true !default;
-$enable-smooth-scroll:        true !default;
+$enable-smooth-scroll:        false !default;
 $enable-grid-classes:         true !default;
 $enable-container-classes:    true !default;
 $enable-cssgrid:              true !default;

diff --git a/scss/forms/_chip-input.scss b/scss/forms/_chip-input.scss
index 7236c0d0bdf17387c3a359e5fb98c36f31cc9717..1fb6db310194c566bf327258def5528d06dfea0c 100644 (file)
--- a/scss/forms/_chip-input.scss
+++ b/scss/forms/_chip-input.scss
@@ -60,6 +60,11 @@ $chip-input-tokens: defaults(
       background-color: var(--bg-2);
       opacity: 1;
 
+      &:focus-within {
+        border-color: var(--control-border-color);
+        outline: 0;
+      }
+
       > .chip {
         pointer-events: none;
         opacity: var(--control-disabled-opacity);

diff --git a/site/src/content/docs/forms/chips.mdx b/site/src/content/docs/forms/chips.mdx
index 5c90cd563d2e0f0bf04bf4847d4ab14343c53cc1..331aaf8fb7d398b0012a4e26a148ffeb514e2b77 100644 (file)
--- a/site/src/content/docs/forms/chips.mdx
+++ b/site/src/content/docs/forms/chips.mdx
@@ -136,16 +136,16 @@ Use a form label for better accessibility.
 
 ### Disabled
 
-Disable the ghost input to prevent adding new chips. Existing chips become non-interactive.
+Disable the ghost input to prevent adding new chips, and disable the dismiss buttons on existing chips. Existing chips become non-interactive.
 
 <Example code={`<div class="chip-input theme-primary" data-bs-chips>
     <span class="chip">
       Read only
-      <button type="button" class="chip-dismiss" aria-label="Remove">
+      <button type="button" class="chip-dismiss" aria-label="Remove" disabled><!--[!code highlight]-->
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>
       </button>
     </span>
-    <input type="text" class="form-ghost" placeholder="Disabled..." disabled>
+    <input type="text" class="form-ghost" placeholder="Disabled..." disabled><!--[!code highlight]-->
   </div>`} />
 
 ## Usage