enhance(Switch): ensure that disabled also affects styling in active …

…state
uzh-bf · Oct 3, 2023 · 47cfa1e · 47cfa1e
1 parent f2386fd
commit 47cfa1e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/src/Switch.stories.tsx b/src/Switch.stories.tsx
@@ -24,6 +24,18 @@ export const Disabled = () => {
   )
 }
 
+export const DisabledActive = () => {
+  const [isChecked, setIsChecked] = useState(true)
+  return (
+    <Switch
+      disabled
+      checked={isChecked}
+      label="Unchecked"
+      onCheckedChange={(newValue) => setIsChecked(newValue)}
+    />
+  )
+}
+
 export const Sizes = () => {
   const [isChecked1, setIsChecked1] = useState(false)
   const [isChecked2, setIsChecked2] = useState(false)

diff --git a/src/Switch.tsx b/src/Switch.tsx
@@ -96,6 +96,7 @@ export function Switch({
           'relative rounded-full border-0 bg-uzh-grey-80',
           disabled && 'cursor-not-allowed bg-uzh-grey-40',
           checked && 'bg-primary-60',
+          checked && disabled && 'bg-primary-20',
           rootSize[size || 'md'],
           className?.element
         )}