refactor(toggleswitch.tsx): toggleSwitch optional props (#928)

* refactor(toggleswitch.tsx): toggleSwitch optional props

ToggleSwitch optional props

#925

* refactor(better sintax): improved quality of code

improved quality of code

Author: andreaTarascioSophany

app/docs/components/forms/forms.mdx

@@ -456,6 +456,7 @@ Use the `<ToggleSwitch>` component to ask users to enable or disable an option s
     <ToggleSwitch checked={props.switch1} label="Toggle me" onChange={props.setSwitch1} />
     <ToggleSwitch checked={props.switch2} label="Toggle me (checked)" onChange={props.setSwitch2} />
     <ToggleSwitch checked={false} disabled label="Toggle me (disabled)" onChange={() => undefined} />
+    <ToggleSwitch checked={props.switch3} onChange={props.setSwitch3} />
   </div>
 </CodePreview>
 

app/docs/components/forms/index.tsx

@@ -8,12 +8,15 @@ import FormDocs from './forms.mdx';
 const FormsPageContent: FC = () => {
   const [switch1, setSwitch1] = useState(false);
   const [switch2, setSwitch2] = useState(true);
+  const [switch3, setSwitch3] = useState(true);
 
   const state = {
     switch1,
     setSwitch1,
     switch2,
     setSwitch2,
+    switch3,
+    setSwitch3,
   };
 
   return (

src/components/ToggleSwitch/ToggleSwitch.tsx

@@ -26,7 +26,7 @@ export interface FlowbiteToggleSwitchToggleTheme {
 export type ToggleSwitchProps = Omit<ComponentProps<'button'>, 'onChange'> & {
   checked: boolean;
   color?: keyof FlowbiteColors;
-  label: string;
+  label?: string;
   onChange: (checked: boolean) => void;
   theme?: DeepPartial<FlowbiteToggleSwitchTheme>;
 };
@@ -58,7 +58,9 @@ export const ToggleSwitch: FC<ToggleSwitchProps> = ({
 
   return (
     <>
-      {name && checked && <input checked={checked} hidden name={name} readOnly type="checkbox" className="sr-only" />}
+      {name && checked ? (
+        <input checked={checked} hidden name={name} readOnly type="checkbox" className="sr-only" />
+      ) : null}
       <button
         aria-checked={checked}
         aria-labelledby={`${id}-flowbite-toggleswitch-label`}
@@ -80,13 +82,15 @@ export const ToggleSwitch: FC<ToggleSwitchProps> = ({
             !disabled && checked && theme.toggle.checked.color[color],
           )}
         />
-        <span
-          data-testid="flowbite-toggleswitch-label"
-          id={`${id}-flowbite-toggleswitch-label`}
-          className={theme.root.label}
-        >
-          {label}
-        </span>
+        {label?.length ? (
+          <span
+            data-testid="flowbite-toggleswitch-label"
+            id={`${id}-flowbite-toggleswitch-label`}
+            className={theme.root.label}
+          >
+            {label}
+          </span>
+        ) : null}
       </button>
     </>
   );