Let's have a choice of colors for the ToggleSwitch component (themesb…

…erg#407) ✨ let's have a choice of colors for the ToggleSwitch component
spiderbox · Oct 24, 2022 · 1fd1d61 · 1fd1d61
1 parent efc0156
commit 1fd1d61
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 3 deletions.
diff --git a/src/lib/components/Flowbite/FlowbiteTheme.ts b/src/lib/components/Flowbite/FlowbiteTheme.ts
@@ -270,7 +270,9 @@ export interface FlowbiteTheme extends Record<string, unknown> {
       active: FlowbiteBoolean;
       toggle: {
         base: string;
-        checked: FlowbiteBoolean;
+        checked: FlowbiteBoolean & {
+          color: FlowbiteColors;
+        };
       };
       label: string;
     };

diff --git a/src/lib/components/FormControls/ToggleSwitch/ToggleSwitch.stories.tsx b/src/lib/components/FormControls/ToggleSwitch/ToggleSwitch.stories.tsx
@@ -1,7 +1,10 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
+import theme from '../../../../lib/theme/default';
 import type { ToggleSwitchProps } from './ToggleSwitch';
 import { ToggleSwitch } from './ToggleSwitch';
 
+const colors = Object.keys(theme.formControls.toggleSwitch.toggle.checked.color);
+
 export default {
   title: 'Components/FormControls',
   component: ToggleSwitch,
@@ -12,3 +15,12 @@ const Template: Story<ToggleSwitchProps> = (args) => <ToggleSwitch {...args} />;
 export const DefaultToggleSwitch = Template.bind({});
 DefaultToggleSwitch.storyName = 'Toggle switch';
 DefaultToggleSwitch.args = {};
+DefaultToggleSwitch.argTypes = {
+  color: {
+    description: 'Control defaults for colors',
+    control: {
+      type: 'radio',
+      options: [...colors],
+    },
+  },
+};
diff --git a/src/lib/components/FormControls/ToggleSwitch/ToggleSwitch.tsx b/src/lib/components/FormControls/ToggleSwitch/ToggleSwitch.tsx
@@ -1,11 +1,13 @@
 import classNames from 'classnames';
 import type { ComponentProps, FC, KeyboardEvent, MouseEvent } from 'react';
 import { useId } from 'react';
+import { FlowbiteColors } from '../../Flowbite/FlowbiteTheme';
 import { useTheme } from '../../Flowbite/ThemeContext';
 
 export type ToggleSwitchProps = Omit<ComponentProps<'button'>, 'onChange'> & {
   checked: boolean;
   label: string;
+  color?: FlowbiteColors;
   onChange: (checked: boolean) => void;
 };
 
@@ -16,6 +18,7 @@ export const ToggleSwitch: FC<ToggleSwitchProps> = ({
   name,
   onChange,
   className,
+  color = 'blue',
   ...props
 }) => {
   const theme = useTheme().theme.formControls.toggleSwitch;
@@ -48,7 +51,13 @@ export const ToggleSwitch: FC<ToggleSwitchProps> = ({
         className={classNames(theme.base, theme.active[disabled ? 'off' : 'on'], className)}
         {...props}
       >
-        <div className={classNames(theme.toggle.base, theme.toggle.checked[checked ? 'on' : 'off'])} />
+        <div
+          className={classNames(
+            theme.toggle.base,
+            theme.toggle.checked[checked ? 'on' : 'off'],
+            !disabled && theme.toggle.checked.color[color],
+          )}
+        />
         <span
           data-testid="flowbite-toggleswitch-label"
           id={`${id}-flowbite-toggleswitch-label`}

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -455,8 +455,27 @@ const theme: FlowbiteTheme = {
       toggle: {
         base: 'toggle-bg h-6 w-11 rounded-full border group-focus:ring-4 group-focus:ring-blue-500/25',
         checked: {
-          on: 'border-blue-700 bg-blue-700 after:translate-x-full after:border-white',
+          on: 'after:translate-x-full after:border-white',
           off: 'border-gray-200 bg-gray-200 dark:border-gray-600 dark:bg-gray-700',
+          color: {
+            blue: ' bg-blue-700 border-blue-700',
+            dark: 'bg-dark-700 border-dark-900',
+            failure: 'bg-red-700 border-red-900',
+            gray: 'bg-gray-500 border-gray-600',
+            green: 'bg-green-600 border-green-700',
+            light: 'bg-light-700 border-light-900',
+            red: 'bg-red-700 border-red-900',
+            purple: 'bg-purple-700 border-purple-900',
+            success: 'bg-green-500 border-green-500',
+            yellow: 'bg-yellow-400 border-yellow-400',
+            warning: 'bg-yellow-600 border-yellow-600',
+            cyan: 'bg-cyan-500 border-cyan-500',
+            lime: 'bg-lime-400 border-lime-400',
+            indigo: 'bg-indigo-400 border-indigo-400',
+            teal: 'bg-gradient-to-r from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-br focus:ring-4',
+            info: 'bg-blue-600 border-blue-600',
+            pink: 'bg-pink-600 border-pink-600',
+          },
         },
       },
       label: 'ml-3 text-sm font-medium text-gray-900 dark:text-gray-300',