remove --focus-ring

shoelace-style · Aug 27, 2021 · f4c472e · f4c472e
1 parent 719d62b
commit f4c472e
Show file tree

Hide file tree

Showing 7 changed files with 5 additions and 13 deletions.
diff --git a/docs/components/form.md b/docs/components/form.md
@@ -186,8 +186,8 @@ The `invalid` attribute reflects the form control's validity, so you can style i
     border-color: rgb(var(--sl-color-danger-500));
   } 
 
-  .custom-input[invalid] {
-    --focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
+  .custom-input[invalid]:focus-within::part(base) {
+    box-shadow: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-danger-500) / var(--sl-focus-ring-alpha));
   }
 </style>
 ```

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
@@ -10,6 +10,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 
 - 🚨 BREAKING: fixed a bug where `--sl-color-neutral-0` and `--sl-color-neutral-1000` were inverted (swap them to update)
 - 🚨 BREAKING: removed the `no-fieldset` property from `sl-radio-group` (fieldsets are now hidden by default; use `fieldset` to show them)
+- 🚨 BREAKING: removed `--focus-ring` custom property from `sl-input`, `sl-select`, `sl-tab` for consistency with other form controls
 - Added `--swatch-size` custom property to `sl-color-picker`
 - Added `date` to `sl-input` as a supported `type`
 - Added the `--sl-focus-ring` design token for a more convenient way to apply focus ring styles

diff --git a/src/components/input/input.styles.ts b/src/components/input/input.styles.ts
@@ -7,7 +7,6 @@ export default css`
   ${formControlStyles}
 
   :host {
-    --focus-ring: 0 0 0 var(--sl-focus-ring-width) rgb(var(--sl-color-primary-500) / var(--sl-focus-ring-alpha));
     display: block;
   }
 
@@ -41,7 +40,7 @@ export default css`
   .input.input--focused:not(.input--disabled) {
     background-color: rgb(var(--sl-input-background-color-focus));
     border-color: rgb(var(--sl-input-border-color-focus));
-    box-shadow: var(--focus-ring);
+    box-shadow: var(--sl-focus-ring);
   }
 
   .input.input--focused:not(.input--disabled) .input__control {

diff --git a/src/components/input/input.ts b/src/components/input/input.ts
@@ -42,8 +42,6 @@ let id = 0;
  * @csspart password-toggle-button - The password toggle button.
  * @csspart suffix - The input suffix container.
  * @csspart help-text - The input help text.
- *
- * @cssproperty --focus-ring - The focus ring style to use when the control receives focus, a `box-shadow` property.
  */
 @customElement('sl-input')
 export default class SlInput extends LitElement {

diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
@@ -7,8 +7,6 @@ export default css`
   ${formControlStyles}
 
   :host {
-    --focus-ring: var(--sl-focus-ring);
-
     display: block;
   }
 
@@ -42,7 +40,7 @@ export default css`
   .select.select--focused:not(.select--disabled) .select__box {
     background-color: rgb(var(--sl-input-background-color-focus));
     border-color: rgb(var(--sl-input-border-color-focus));
-    box-shadow: var(--focus-ring);
+    box-shadow: var(--sl-focus-ring);
     outline: none;
     color: rgb(var(--sl-input-color-focus));
   }

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -53,8 +53,6 @@ let id = 0;
  * @csspart menu - The select menu, a <sl-menu> element.
  * @csspart tag - The multiselect option, a <sl-tag> element.
  * @csspart tags - The container in which multiselect options are rendered.
- *
- * @cssproperty --focus-ring - The focus ring style to use when the control receives focus, a `box-shadow` property.
  */
 @customElement('sl-select')
 export default class SlSelect extends LitElement {

diff --git a/src/components/tab/tab.ts b/src/components/tab/tab.ts
@@ -20,8 +20,6 @@ let id = 0;
  *
  * @csspart base - The component's base wrapper.
  * @csspart close-button - The close button, which is the icon button's base wrapper.
- *
- * @cssproperty --focus-ring - The focus ring's box shadow.
  */
 @customElement('sl-tab')
 export default class SlTab extends LitElement {