From 2631fded97d06d770ba003bb1348327e7d514c22 Mon Sep 17 00:00:00 2001 From: Rob Snow Date: Thu, 4 Jun 2020 18:34:52 -0700 Subject: [PATCH] Smooth checkbox focus animation If you try to scroll in tableview with the arrow keys while on the checkbox column it becomes very jumpy because of the box-shadow transition Instead, have the box-shadow always there and only change it's opacity We should be doing this to more items... it's a huge savings --- .../spectrum-css-temp/components/checkbox/index.css | 2 +- .../@adobe/spectrum-css-temp/components/checkbox/skin.css | 8 +++++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css index fceda3fb5d7..5a6f12c69c5 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/index.css +++ b/packages/@adobe/spectrum-css-temp/components/checkbox/index.css @@ -165,7 +165,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; } } diff --git a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css b/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css index ecd0d374b11..d6337ed72c7 100644 --- a/packages/@adobe/spectrum-css-temp/components/checkbox/skin.css +++ b/packages/@adobe/spectrum-css-temp/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 &,