feat(switch): update switch input to match facelift designs (#1146)

sanity-io · Oct 2, 2023 · 199e4af · 199e4af
1 parent c0d7d78
commit 199e4af
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 32 deletions.
diff --git a/src/primitives/switch/styles.ts b/src/primitives/switch/styles.ts
@@ -38,11 +38,11 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
   const {theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.switch
-  const color = theme.sanity.color.button.default
+  const color = theme.sanity.color.input
 
   return css`
-    --switch-bg-color: ${color.default.enabled.bg};
-    --switch-fg-color: ${color.default.enabled.fg};
+    --switch-bg-color: ${color.default.enabled.border};
+    --switch-fg-color: ${color.default.enabled.bg};
     --switch-box-shadow: none;
 
     &:not([hidden]) {
@@ -79,25 +79,30 @@ export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof
     }
 
     input:checked + && {
-      --switch-bg-color: ${color.positive.enabled.bg};
-      --switch-fg-color: ${color.positive.enabled.fg};
+      --switch-bg-color: var(--card-focus-ring-color);
+      --switch-fg-color: ${color.default.enabled.bg};
     }
 
     @media (hover: hover) {
       input:not(:disabled):hover + && {
-        --switch-bg-color: ${color.default.hovered.bg};
-        --switch-fg-color: ${color.default.hovered.fg};
+        --switch-bg-color: ${color.default.hovered.border};
+        --switch-fg-color: ${color.default.hovered.bg};
       }
 
       input:not(:disabled):checked:hover + && {
-        --switch-bg-color: ${color.positive.hovered.bg};
-        --switch-fg-color: ${color.positive.hovered.fg};
+        --switch-bg-color: var(--card-focus-ring-color);
+        --switch-fg-color: ${color.default.enabled.bg};
       }
     }
 
     input:not([data-read-only]):disabled + && {
-      --switch-bg-color: ${color.default.disabled.bg};
-      --switch-fg-color: ${color.default.disabled.fg};
+      --switch-bg-color: ${color.default.disabled.border};
+      --switch-fg-color: ${color.default.disabled.bg};
+    }
+
+    input[data-read-only]:disabled + && {
+      --switch-bg-color: ${color.default.readOnly.border};
+      --switch-fg-color: ${color.default.readOnly.bg};
     }
   `
 }
@@ -150,6 +155,7 @@ export function switchThumbStyles(
     transition-timing-function: ${input.switch.transitionTimingFunction};
     background: var(--switch-fg-color);
     transform: translate3d(0, 0, 0);
+    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
 
     ${checked &&
     css`

diff --git a/src/theme/studioTheme/theme.ts b/src/theme/studioTheme/theme.ts
@@ -46,9 +46,9 @@ export const studioTheme: RootTheme = {
       focusRing: {offset: -1, width: 1},
     },
     switch: {
-      width: 33,
-      height: 17,
-      padding: 4,
+      width: 21,
+      height: 13,
+      padding: 2,
       transitionDurationMs: 150,
       transitionTimingFunction: 'ease-out',
       focusRing: {offset: 1, width: 1},

diff --git a/stories/primitives/Switch.stories.tsx b/stories/primitives/Switch.stories.tsx
@@ -2,6 +2,7 @@
 import type {Meta, StoryObj} from '@storybook/react'
 import {useCallback, useState} from 'react'
 import {Flex, Stack, Switch} from '../../src/primitives'
+import {matrixBuilder} from '../helpers/matrixBuilder'
 
 const meta: Meta<typeof Switch> = {
   args: {
@@ -35,21 +36,23 @@ export const Indeterminate: Story = {
   render: (props) => <Switch {...props} />,
 }
 
+const ControlledSwitch = (props: React.ComponentProps<typeof Switch>) => {
+  const [checked, setChecked] = useState(!!props.defaultChecked)
+
+  const handleChange = useCallback(() => {
+    setChecked((prev) => !prev)
+  }, [])
+
+  return <Switch {...props} checked={checked} onChange={handleChange} />
+}
+
 export const Controlled: Story = {
   parameters: {
     controls: {
       include: ['indeterminate'],
     },
   },
-  render: (props) => {
-    const [checked, setChecked] = useState(false)
-
-    const handleChange = useCallback(() => {
-      setChecked((prev) => !prev)
-    }, [])
-
-    return <Switch {...props} checked={checked} onChange={handleChange} />
-  },
+  render: (props) => <ControlledSwitch {...props} />,
 }
 
 export const InputStates: Story = {
@@ -61,15 +64,45 @@ export const InputStates: Story = {
   render: (props) => {
     return (
       <Stack space={3}>
-        <Flex gap={3}>
-          <Switch {...props} />
-          <Switch {...props} indeterminate />
-          <Switch {...props} defaultChecked />
-        </Flex>
-        <Flex gap={3}>
-          <Switch {...props} disabled />
-          <Switch {...props} disabled indeterminate />
-          <Switch {...props} defaultChecked disabled />
+        <Flex direction={'row'} wrap={'wrap'} gap={4} align={'center'}>
+          {matrixBuilder({
+            scheme: 'light',
+            columns: ['default', 'checked'],
+            rows: ['enabled', 'disabled', 'readOnly'],
+            title: '',
+            renderItem({row, column}) {
+              return (
+                <Flex justify="center" marginTop={2}>
+                  <ControlledSwitch
+                    {...props}
+                    defaultChecked={column === 'checked'}
+                    disabled={row === 'disabled'}
+                    readOnly={row === 'readOnly'}
+                    key={row + column}
+                  />
+                </Flex>
+              )
+            },
+          })}
+          {matrixBuilder({
+            scheme: 'dark',
+            columns: ['default', 'checked'],
+            rows: ['enabled', 'disabled', 'readOnly'],
+            title: '',
+            renderItem({row, column}) {
+              return (
+                <Flex justify="center" marginTop={2}>
+                  <ControlledSwitch
+                    {...props}
+                    defaultChecked={column === 'checked'}
+                    disabled={row === 'disabled'}
+                    readOnly={row === 'readOnly'}
+                    key={row + column}
+                  />
+                </Flex>
+              )
+            },
+          })}
         </Flex>
       </Stack>
     )