From f4c472e7ded853e94b27d7e029cae9a0d549f2b5 Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Fri, 27 Aug 2021 09:07:42 -0400
Subject: [PATCH] remove --focus-ring

---
 docs/components/form.md                | 4 ++--
 docs/resources/changelog.md            | 1 +
 src/components/input/input.styles.ts   | 3 +--
 src/components/input/input.ts          | 2 --
 src/components/select/select.styles.ts | 4 +---
 src/components/select/select.ts        | 2 --
 src/components/tab/tab.ts              | 2 --
 7 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/docs/components/form.md b/docs/components/form.md
index fbf504209..e0fa1b188 100644
--- 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
index 18bbe4721..56f9f2a42 100644
--- 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
index 5752d0c53..83490c818 100644
--- 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
index 3dda3ba02..d807b21bd 100644
--- 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
index 748db3e9e..40a6c8d9e 100644
--- 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
index 2a93169bb..5cc2de267 100644
--- 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
index e2a26a5f8..8bbd9e35b 100644
--- 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 {