Merge pull request #754 from adobe/perf-improvement-focus-ring

Perf improvement focus ring

Author: misterbrownlee

components/button/index.css

@@ -96,7 +96,6 @@ governing permissions and limitations under the License.
     max-block-size: 100%;
     flex-shrink: 0;
   }
-
 }
 
 %spectrum-ButtonWithFocusRing {
@@ -111,7 +110,7 @@ governing permissions and limitations under the License.
     top: 0;
     margin: calc(var(--spectrum-alias-focus-ring-gap) * -1);
 
-    transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
+    transition: opacity var(--spectrum-global-animation-duration-100) ease-out,
                 margin var(--spectrum-global-animation-duration-100) ease-out;
   }
 

components/button/skin.css

@@ -17,10 +17,14 @@ governing permissions and limitations under the License.
 
 .spectrum-LogicButton,
 .spectrum-Button {
+  &:after {
+    box-shadow: 0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus) var(--spectrum-button-primary-focus-ring-color-key-focus);
+    opacity: 0;
+  }
   &:focus-ring,
   &.is-focused {
     &:after {
-      box-shadow: 0 0 0 var(--spectrum-button-primary-focus-ring-size-key-focus) var(--spectrum-button-primary-focus-ring-color-key-focus);
+      opacity: 1;
     }
   }
 }

components/checkbox/index.css

@@ -160,9 +160,9 @@ governing permissions and limitations under the License.
     top: 0;
     margin: var(--spectrum-alias-focus-ring-gap);
 
-    transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
+    transition: opacity var(--spectrum-global-animation-duration-100) ease-out,
                 margin var(--spectrum-global-animation-duration-100) ease-out;
- 
+
     /* force ff to render on the pixel grid */
     transform: translate(0, 0);
   }

components/checkbox/skin.css

@@ -103,12 +103,18 @@ governing permissions and limitations under the License.
 
 /* Focus */
 .spectrum-Checkbox-input {
+  + .spectrum-Checkbox-box {
+    &:after {
+      box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) var(--spectrum-checkbox-focus-ring-color-key-focus);
+      opacity: 0;
+    }
+  }
   &:focus-ring + .spectrum-Checkbox-box {
     &:before {
       border-color: var(--spectrum-checkbox-box-border-color-key-focus);
     }
     &:after {
-      box-shadow: 0 0 0 var(--spectrum-checkbox-focus-ring-size-key-focus) var(--spectrum-checkbox-focus-ring-color-key-focus);
+      opacity: 1;
     }
   }
   .spectrum-Checkbox.is-indeterminate &,

components/radio/index.css

@@ -141,7 +141,7 @@ governing permissions and limitations under the License.
     top: 0;
     margin: var(--spectrum-alias-focus-ring-gap);
 
-    transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
+    transition: opacity var(--spectrum-global-animation-duration-100) ease-out,
                 margin var(--spectrum-global-animation-duration-100) ease-out;
   }
 }

components/radio/skin.css

@@ -146,14 +146,23 @@ governing permissions and limitations under the License.
 /* Focus Overrides all */
 .spectrum-Radio,
 .spectrum-Radio--quiet {
+  & .spectrum-Radio-input,
+  &:hover .spectrum-Radio-input {
+    & + .spectrum-Radio-button {
+      &:after {
+        box-shadow: 0 0 0 var(--spectrum-radio-focus-ring-size-key-focus) var(--spectrum-radio-focus-ring-color-key-focus);
+        opacity: 0;
+      }
+    }
+  }
   & .spectrum-Radio-input:focus-ring,
   &:hover .spectrum-Radio-input:focus-ring {
     & + .spectrum-Radio-button {
       &:before {
         border-color: var(--spectrum-radio-circle-border-color-key-focus);
       }
       &:after {
-        box-shadow: 0 0 0 var(--spectrum-radio-focus-ring-size-key-focus) var(--spectrum-radio-focus-ring-color-key-focus);
+        opacity: 1;
       }
     }
     &:checked + .spectrum-Radio-button {

components/toggle/index.css

@@ -16,7 +16,7 @@ governing permissions and limitations under the License.
   /* Hardcoded for wrapping study.
   Will be a DNA token in https://jira.corp.adobe.com/browse/SDS-4466 */
   --spectrum-switch-label-margin-top: var(--spectrum-global-dimension-size-65);
-  
+
   /* Fix for inconsistent line-height between browsers that would push the label 1px below the intended baseline */
   /* more info: https://stackoverflow.com/questions/47700568/css-fonts-render-differently-in-firefox-and-chrome */
   --spectrum-switch-label-line-height: 1.49;
@@ -148,7 +148,7 @@ governing permissions and limitations under the License.
     inset-block-start: 0;
     margin: 0;
 
-    transition: box-shadow var(--spectrum-global-animation-duration-100) ease-out,
+    transition: opacity var(--spectrum-global-animation-duration-100) ease-out,
                 margin var(--spectrum-global-animation-duration-100) ease-out;
   }
 }

components/toggle/skin.css

@@ -128,10 +128,18 @@ governing permissions and limitations under the License.
 /* Key Focus */
 .spectrum-ToggleSwitch,
 .spectrum-ToggleSwitch:hover {
-  .spectrum-ToggleSwitch-input:focus-ring {
+  .spectrum-ToggleSwitch-input {
     & + .spectrum-ToggleSwitch-switch {
       &:after {
         box-shadow: 0 0 0 var(--spectrum-switch-focus-ring-size-key-focus) var(--spectrum-switch-focus-ring-color-key-focus);
+        opacity: 0;
+      }
+    }
+  }
+  .spectrum-ToggleSwitch-input:focus-ring {
+    & + .spectrum-ToggleSwitch-switch {
+      &:after {
+        opacity: 1;
       }
       &:before {
         border-color: var(--spectrum-switch-emphasized-handle-border-color-key-focus);