feat: utilize outline instead of box-shadow for :focus-visible …

…pseudo-style rendering
trendmicro-frontend · Oct 7, 2023 · 280c405 · 280c405
1 parent 27e18a7
commit 280c405
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 35 deletions.
diff --git a/packages/react/src/checkbox/CheckboxControlBox.js b/packages/react/src/checkbox/CheckboxControlBox.js
@@ -100,7 +100,7 @@ const CheckboxControlBox = forwardRef((
     const checkedAndDisabledBorderColor = disabledBorderColor;
 
     // outline color
-    const focusOutlineColor = {
+    const focusVisibleOutlineColor = {
       dark: `${variantColor}:60`,
       light: `${variantColor}:60`,
     }[colorMode];
@@ -121,8 +121,8 @@ const CheckboxControlBox = forwardRef((
         opacity: 0.28,
       },
       [getCheckboxControlBoxSelector(':focus-visible')]: {
+        outlineColor: focusVisibleOutlineColor,
         outlineStyle: 'solid',
-        outlineColor: focusOutlineColor,
         outlineWidth: '1h',
       },
       [getCheckboxControlBoxSelector(':checked')]: {
@@ -181,7 +181,7 @@ const CheckboxControlBox = forwardRef((
     }[colorMode];
 
     // outline color
-    const focusOutlineColor = {
+    const focusVisibleOutlineColor = {
       dark: `${variantColor}:60`,
       light: `${variantColor}:60`,
     }[colorMode];
@@ -196,8 +196,8 @@ const CheckboxControlBox = forwardRef((
         color: hoverColor,
       },
       [getCheckboxControlBoxSelector('[data-indeterminate]:focus-visible')]: {
+        outlineColor: focusVisibleOutlineColor,
         outlineStyle: 'solid',
-        outlineColor: focusOutlineColor,
         outlineWidth: '1h',
       },
       [getCheckboxControlBoxSelector('[data-indeterminate]:disabled')]: {

diff --git a/packages/react/src/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/react/src/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -82,8 +82,8 @@ input[type="checkbox"]:disabled+.emotion-4 {
 }
 
 input[type="checkbox"]:focus-visible+.emotion-4 {
-  outline-style: solid;
   outline-color: var(--tonic-colors-blue-60);
+  outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }
 
@@ -208,8 +208,8 @@ input[type="checkbox"]:disabled+.emotion-16 {
 }
 
 input[type="checkbox"]:focus-visible+.emotion-16 {
-  outline-style: solid;
   outline-color: var(--tonic-colors-blue-60);
+  outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }
 
@@ -316,8 +316,8 @@ input[type="checkbox"]:disabled+.emotion-28 {
 }
 
 input[type="checkbox"]:focus-visible+.emotion-28 {
-  outline-style: solid;
   outline-color: var(--tonic-colors-blue-60);
+  outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }
 
@@ -418,8 +418,8 @@ input[type="checkbox"][data-indeterminate]:hover:not(:disabled)+.emotion-52 {
 }
 
 input[type="checkbox"][data-indeterminate]:focus-visible+.emotion-52 {
-  outline-style: solid;
   outline-color: var(--tonic-colors-blue-60);
+  outline-style: solid;
   outline-width: var(--tonic-sizes-1h);
 }
 

diff --git a/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap b/packages/react/src/menu/__tests__/__snapshots__/Menu.test.js.snap
@@ -201,7 +201,10 @@ exports[`Menu should render correctly 1`] = `
 }
 
 .emotion-16:focus-visible {
-  box-shadow: inset 0 0 0 .125rem #1e5ede;
+  outline-color: var(--tonic-colors-blue-60);
+  outline-offset: calc(var(--tonic-space-1h) * -1);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
 }
 
 .emotion-16[aria-selected=true],

diff --git a/packages/react/src/menu/styles.js b/packages/react/src/menu/styles.js
@@ -1,7 +1,6 @@
 import { sx } from '@tonic-ui/styled-system';
 import { useColorMode } from '../color-mode';
 import { useColorStyle } from '../color-style';
-import { useTheme } from '../theme';
 
 const useMenuStyle = () => {
   return {
@@ -96,7 +95,6 @@ const useMenuGroupStyle = () => {
 };
 
 const useMenuItemStyle = ({ tabIndex }) => {
-  const { colors, sizes } = useTheme();
   const [colorMode] = useColorMode();
   const color = {
     dark: 'white:primary',
@@ -106,7 +104,7 @@ const useMenuItemStyle = ({ tabIndex }) => {
     dark: 'rgba(255, 255, 255, 0.12)',
     light: 'rgba(0, 0, 0, 0.12)',
   }[colorMode];
-  const focusBoxShadowColor = {
+  const focusVisibleOutlineColor = {
     dark: 'blue:60',
     light: 'blue:60',
   }[colorMode];
@@ -134,7 +132,10 @@ const useMenuItemStyle = ({ tabIndex }) => {
     userSelect: 'none',
     width: '100%',
     _focusVisible: {
-      boxShadow: `inset 0 0 0 ${sizes?.['1h']} ${colors?.[focusBoxShadowColor]}`,
+      outlineColor: focusVisibleOutlineColor,
+      outlineOffset: '-1h',
+      outlineStyle: 'solid',
+      outlineWidth: '1h',
     },
     _hover: {
       backgroundColor: hoverBackgroundColor,

diff --git a/packages/react/src/radio/RadioControlBox.js b/packages/react/src/radio/RadioControlBox.js
@@ -72,7 +72,7 @@ const RadioControlBox = forwardRef((
     const checkedAndDisabledBorderColor = disabledBorderColor;
 
     // focus color
-    const focusOutlineColor = {
+    const focusVisibleOutlineColor = {
       dark: `${variantColor}:60`,
       light: `${variantColor}:60`,
     }[colorMode];
@@ -83,7 +83,9 @@ const RadioControlBox = forwardRef((
         borderColor: hoverBorderColor,
       },
       [getRadioControlBoxSelector(':focus-visible')]: {
-        boxShadow: `0 0 0 2px ${theme?.colors?.[focusOutlineColor]}`,
+        outlineColor: focusVisibleOutlineColor,
+        outlineStyle: 'solid',
+        outlineWidth: '1h',
       },
       [getRadioControlBoxSelector(':disabled')]: {
         borderColor: disabledBorderColor,

diff --git a/packages/react/src/radio/__tests__/__snapshots__/Radio.test.js.snap b/packages/react/src/radio/__tests__/__snapshots__/Radio.test.js.snap
@@ -66,7 +66,9 @@ input[type="radio"]:hover+.emotion-4 {
 }
 
 input[type="radio"]:focus-visible+.emotion-4 {
-  box-shadow: 0 0 0 2px #1e5ede;
+  outline-color: var(--tonic-colors-blue-60);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
 }
 
 input[type="radio"]:disabled+.emotion-4 {
@@ -150,7 +152,9 @@ input[type="radio"]:hover+.emotion-14 {
 }
 
 input[type="radio"]:focus-visible+.emotion-14 {
-  box-shadow: 0 0 0 2px #1e5ede;
+  outline-color: var(--tonic-colors-blue-60);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
 }
 
 input[type="radio"]:disabled+.emotion-14 {
@@ -225,7 +229,9 @@ input[type="radio"]:hover+.emotion-24 {
 }
 
 input[type="radio"]:focus-visible+.emotion-24 {
-  box-shadow: 0 0 0 2px #1e5ede;
+  outline-color: var(--tonic-colors-blue-60);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
 }
 
 input[type="radio"]:disabled+.emotion-24 {

diff --git a/packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap b/packages/react/src/tabs/__tests__/__snapshots__/Tabs.test.js.snap
@@ -53,9 +53,9 @@ exports[`Tabs should render correctly 1`] = `
 
 .emotion-4:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-width: var(--tonic-sizes-1h);
-  outline-style: solid;
   outline-offset: calc(var(--tonic-space-1h) * -1);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-primary);
 }
 
@@ -106,9 +106,9 @@ exports[`Tabs should render correctly 1`] = `
 
 .emotion-6:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-width: var(--tonic-sizes-1h);
-  outline-style: solid;
   outline-offset: calc(var(--tonic-space-1h) * -1);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-primary);
 }
 
@@ -160,9 +160,9 @@ exports[`Tabs should render correctly 1`] = `
 
 .emotion-8:focus-visible {
   outline-color: var(--tonic-colors-blue-60);
-  outline-width: var(--tonic-sizes-1h);
-  outline-style: solid;
   outline-offset: calc(var(--tonic-space-1h) * -1);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
   color: var(--tonic-colors-white-disabled);
 }
 

diff --git a/packages/react/src/tabs/styles.js b/packages/react/src/tabs/styles.js
@@ -24,7 +24,7 @@ const useTabStyle = ({
   if (variant === 'default') {
     // border color
     const disabledBorderColor = 'transparent';
-    const focusVisibleBorderColor = {
+    const focusVisibleOutlineColor = {
       dark: 'blue:60',
       light: 'blue:60',
     }[colorMode];
@@ -141,10 +141,10 @@ const useTabStyle = ({
         color: getColorStyleWithFallback(hoverColor),
       },
       _focusVisible: {
-        outlineColor: focusVisibleBorderColor,
-        outlineWidth: '1h',
-        outlineStyle: 'solid',
+        outlineColor: focusVisibleOutlineColor,
         outlineOffset: '-1h',
+        outlineStyle: 'solid',
+        outlineWidth: '1h',
         color: getColorStyleWithFallback(focusColor),
       },
       _selected: {
@@ -188,7 +188,7 @@ const useTabStyle = ({
       dark: 'gray:80',
       light: 'gray:20',
     }[colorMode];
-    const focusVisibleBorderColor = {
+    const focusVisibleOutlineColor = {
       dark: 'blue:60',
       light: 'blue:60',
     }[colorMode];
@@ -328,7 +328,7 @@ const useTabStyle = ({
       _focusVisible: {
         backgroundColor: getBackgroundColorStyleWithFallback(focusBackgroundColor),
         color: getColorStyleWithFallback(focusColor),
-        outlineColor: focusVisibleBorderColor,
+        outlineColor: focusVisibleOutlineColor,
         outlineWidth: '1h',
         outlineStyle: 'solid',
         outlineOffset: '-1h',

diff --git a/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap b/packages/react/src/tree/__tests__/__snapshots__/Tree.test.js.snap
@@ -31,7 +31,10 @@ exports[`Tree should render correctly 1`] = `
 }
 
 .emotion-4:focus-visible {
-  box-shadow: inset 0 0 0 .125rem #1e5ede;
+  outline-color: var(--tonic-colors-blue-60);
+  outline-offset: calc(var(--tonic-space-1h) * -1);
+  outline-style: solid;
+  outline-width: var(--tonic-sizes-1h);
 }
 
 .emotion-4:hover,

diff --git a/packages/react/src/tree/styles.js b/packages/react/src/tree/styles.js
@@ -1,5 +1,4 @@
 import { useColorMode } from '../color-mode';
-import { useTheme } from '../theme';
 
 const useTreeItemStyle = () => {
   return {
@@ -11,7 +10,6 @@ const useTreeItemContentStyle = ({
   isSelected,
   tabIndex,
 }) => {
-  const { colors, sizes } = useTheme();
   const [colorMode] = useColorMode();
   const color = {
     dark: 'white:primary',
@@ -21,7 +19,7 @@ const useTreeItemContentStyle = ({
     dark: 'rgba(255, 255, 255, 0.12)',
     light: 'rgba(0, 0, 0, 0.12)',
   }[colorMode];
-  const focusBoxShadowColor = {
+  const focusVisibleOutlineColor = {
     dark: 'blue:60',
     light: 'blue:60',
   }[colorMode];
@@ -51,7 +49,10 @@ const useTreeItemContentStyle = ({
       backgroundColor: !isDisabled ? hoverBackgroundColor : undefined,
     },
     _focusVisible: {
-      boxShadow: `inset 0 0 0 ${sizes?.['1h']} ${colors?.[focusBoxShadowColor]}`,
+      outlineColor: focusVisibleOutlineColor,
+      outlineOffset: '-1h',
+      outlineStyle: 'solid',
+      outlineWidth: '1h',
     },
   };
 };