Inlining focus ring behavior into components

0xsequence · Apr 11, 2024 · dbdf86a · dbdf86a
1 parent 55094ff
commit dbdf86a
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 66 deletions.
diff --git a/src/components/Button/styles.css.ts b/src/components/Button/styles.css.ts
@@ -12,13 +12,27 @@ const outlineStyle = {
 } as const
 
 export const buttonVariants = recipe({
-  base: atoms({
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    alignItems: 'center',
-    border: 'none',
-    textDecoration: 'none',
-  }),
+  base: [
+    atoms({
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      alignItems: 'center',
+      border: 'none',
+      textDecoration: 'none',
+    }),
+    {
+      selectors: {
+        '&:focus': {
+          outline: 'none',
+        },
+
+        '&:focus-visible': {
+          outline: 'none',
+          boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`,
+        },
+      },
+    },
+  ],
 
   variants: {
     variant: {

diff --git a/src/components/Checkbox/styles.css.ts b/src/components/Checkbox/styles.css.ts
@@ -1,27 +1,42 @@
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes'
 
-import { atoms } from '~/css'
+import { atoms, vars } from '~/css'
 
 export const checkboxVariants = recipe({
-  base: atoms({
-    borderRadius: 'xs',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 'thin',
-    borderStyle: 'solid',
-    borderColor: 'borderFocus',
-    background: 'transparent',
-    opacity: {
-      base: '100',
-      hover: '80',
-      disabled: '50',
-    },
-    cursor: {
-      base: 'pointer',
-      disabled: 'default',
+  base: [
+    atoms({
+      borderRadius: 'xs',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      borderWidth: 'thin',
+      borderStyle: 'solid',
+      borderColor: 'borderFocus',
+      background: 'transparent',
+      opacity: {
+        base: '100',
+        hover: '80',
+        disabled: '50',
+      },
+      cursor: {
+        base: 'pointer',
+        disabled: 'default',
+      },
+    }),
+    {
+      selectors: {
+        '&:focus': {
+          outline: 'none',
+        },
+
+        '&:focus-visible': {
+          outline: 'none',
+          boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`,
+          borderColor: 'transparent',
+        },
+      },
     },
-  }),
+  ],
 
   variants: {
     size: {

diff --git a/src/components/Form/Form.stories.tsx b/src/components/Form/Form.stories.tsx
@@ -9,6 +9,7 @@ import { ControlledSelect as Select } from '~/components/Select'
 import { ControlledSwitch as Switch } from '~/components/Switch'
 import { Text } from '~/components/Text'
 import { ControlledTextInput as TextInput } from '~/components/TextInput'
+import { TextArea } from '../TextArea'
 
 import { Form } from './Form'
 export default {
@@ -96,6 +97,14 @@ export const Default: Story = {
               <Text color="negative">{errors.fileInput.message as string}</Text>
             )}
 
+            <TextArea
+              defaultValue=""
+              label="Message"
+              labelLocation="top"
+              name="message"
+              placeholder="Enter a message"
+            />
+
             <Select
               control={control}
               defaultValue={selectOptions[0].value}

diff --git a/src/components/RadioGroup/styles.css.ts b/src/components/RadioGroup/styles.css.ts
@@ -1,24 +1,39 @@
 import { style } from '@vanilla-extract/css'
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes'
 
-import { atoms } from '~/css'
+import { atoms, vars } from '~/css'
 
 export const radioItemVariants = recipe({
-  base: atoms({
-    background: 'transparent',
-    borderRadius: 'circle',
-    borderStyle: 'solid',
-    borderColor: 'borderFocus',
-    padding: '0',
-    cursor: {
-      base: 'pointer',
-      disabled: 'default',
-    },
-    opacity: {
-      hover: '80',
-      disabled: '50',
+  base: [
+    atoms({
+      background: 'transparent',
+      borderRadius: 'circle',
+      borderStyle: 'solid',
+      borderColor: 'borderFocus',
+      padding: '0',
+      cursor: {
+        base: 'pointer',
+        disabled: 'default',
+      },
+      opacity: {
+        hover: '80',
+        disabled: '50',
+      },
+    }),
+    {
+      selectors: {
+        '&:focus': {
+          outline: 'none',
+        },
+
+        '&:focus-visible': {
+          outline: 'none',
+          boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`,
+          borderColor: 'transparent',
+        },
+      },
     },
-  }),
+  ],
 
   variants: {
     size: {

diff --git a/src/components/Select/styles.css.ts b/src/components/Select/styles.css.ts
@@ -30,13 +30,13 @@ export const triggerStyle = style([
         opacity: 0.5,
       },
 
+      '&:focus': {
+        outline: 'none',
+      },
+
       '&:focus-within': {
+        outline: 'none',
         opacity: '1 !important',
-        // outlineColor: vars.colors.borderFocus,
-        // outlineStyle: 'solid',
-        // outlineOffset: `calc(${vars.borderWidths.thick} * -1)`,
-        // outlineWidth: vars.borderWidths.thick,
-
         boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`,
         borderColor: 'transparent',
       },

diff --git a/src/components/Switch/styles.css.ts b/src/components/Switch/styles.css.ts
@@ -24,6 +24,15 @@ export const root = style([
         cursor: 'default',
         opacity: '0.5',
       },
+
+      '&:focus': {
+        outline: 'none',
+      },
+
+      '&:focus-visible': {
+        outline: 'none',
+        boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`,
+      },
     },
   },
 ])

diff --git a/src/css/global.css.ts b/src/css/global.css.ts
@@ -12,33 +12,13 @@ globalStyle('*', {
   fontVariant: 'unset',
   fontWeight: 'unset',
   margin: 0,
-  outline: 'unset',
   padding: 0,
 })
 
 globalStyle('*, *::before, *::after', {
   boxSizing: 'border-box',
 })
 
-globalStyle('*:focus', {
-  outline: 'none',
-})
-
-globalStyle('*:focus-visible', {
-  // outlineColor: `${vars.colors.borderFocus} !important`,
-  // outlineStyle: 'solid',
-  // outlineOffset: `calc(${vars.borderWidths.thick} * -1)`,
-  // outlineWidth: vars.borderWidths.thick,
-
-  outline: 'none',
-
-  // Safari does not apply a border radius to outlines so we will use a boxShadow instead to acheive that same inset effect
-  boxShadow: `0 0 0 ${vars.borderWidths.thick} ${vars.colors.borderFocus} inset`,
-
-  // Because we use a semi transparent focus ring we want to set any border color to transparent so it doesnt show through
-  borderColor: 'transparent',
-})
-
 globalStyle('body', {
   fontSize: '1rem',
 })