Toggle styles

reaviz · May 14, 2024 · 695298b · 695298b
1 parent 3f2554a
commit 695298b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/src/form/Toggle/Toggle.story.tsx b/src/form/Toggle/Toggle.story.tsx
@@ -11,10 +11,15 @@ export const Simple = () => {
   return <Toggle checked={state} onChange={setState} />;
 };
 
-export const Disabled = () => {
-  const [state, setState] = useState(true);
-  return <Toggle disabled checked={state} onChange={setState} />;
-};
+export const Disabled = () => (
+  <div
+    className="bg-panel p-20"
+    style={{ display: 'flex', gap: '1rem', flexDirection: 'column' }}
+  >
+    <Toggle disabled checked />
+    <Toggle disabled checked={false} />
+  </div>
+);
 
 export const Sizes = () => {
   const [stateSmall, setStateSmall] = useState(true);

diff --git a/src/form/Toggle/Toggle.tsx b/src/form/Toggle/Toggle.tsx
@@ -1,8 +1,7 @@
 import React, { FC, forwardRef, LegacyRef } from 'react';
 import { motion } from 'framer-motion';
-import { twMerge } from 'tailwind-merge';
 import { ToggleTheme } from './ToggleTheme';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 
 export interface ToggleProps {
   /**
@@ -66,11 +65,14 @@ export const Toggle: FC<ToggleProps & ToggleRef> = forwardRef(
         {...rest}
         ref={ref}
         tabIndex={0}
-        className={twMerge(
+        className={cn(
           theme.base,
-          disabled && theme.disabled,
-          checked && theme.checked,
           theme.sizes[size],
+          {
+            [theme.checked]: checked,
+            [theme.disabled]: disabled,
+            [theme.disabledAndChecked]: disabled && checked
+          },
           className
         )}
         onClick={() => {
@@ -86,7 +88,10 @@ export const Toggle: FC<ToggleProps & ToggleRef> = forwardRef(
         }}
       >
         <motion.div
-          className={twMerge(theme.handle.base, theme.handle.sizes[size])}
+          className={cn(theme.handle.base, theme.handle.sizes[size], {
+            [theme.handle.disabled]: disabled,
+            [theme.handle.disabledAndChecked]: disabled && checked
+          })}
           layout
           transition={{
             type: 'spring',

diff --git a/src/form/Toggle/ToggleTheme.ts b/src/form/Toggle/ToggleTheme.ts
@@ -2,13 +2,16 @@ export interface ToggleTheme {
   base: string;
   disabled: string;
   checked: string;
+  disabledAndChecked: string;
   handle: {
     base: string;
     sizes: {
       small: string;
       medium: string;
       large: string;
     };
+    disabled: string;
+    disabledAndChecked: string;
   };
   sizes: {
     small: string;
@@ -18,16 +21,20 @@ export interface ToggleTheme {
 }
 
 const baseTheme: ToggleTheme = {
-  base: 'flex items-center justify-start cursor-pointer bg-surface box-border border border-panel-accent rounded-full',
-  disabled: 'cursor-not-allowed opacity-60',
+  base: 'flex items-center justify-start cursor-pointer bg-surface box-border border border-panel-accent rounded-full hover:bg-primary-hover transition-[background-color] ease-in-out duration-300',
+  disabled: 'cursor-not-allowed bg-transparent hover:bg-transparent',
   checked: 'justify-end bg-primary',
+  disabledAndChecked:
+    'bg-gray-600 hover:bg-gray-600 light:bg-gray-400 light:hover:bg-gray-400',
   handle: {
     base: 'rounded-full bg-panel',
     sizes: {
       small: 'w-3 h-full',
       medium: 'w-5 h-full',
       large: 'w-6 h-full'
-    }
+    },
+    disabled: 'bg-gray-600 light:bg-gray-400',
+    disabledAndChecked: 'bg-black light:bg-white'
   },
   sizes: {
     small: 'w-8 h-4 p-px',