feat: remove Toggle from apps/ui (#3332)

iotaledger · Oct 17, 2024 · 26bbbb8 · 26bbbb8
1 parent e0a9c70
commit 26bbbb8
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 48 deletions.
diff --git a/apps/explorer/src/components/ui/DropdownMenu.tsx b/apps/explorer/src/components/ui/DropdownMenu.tsx
@@ -2,9 +2,10 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text, Toggle } from '@iota/ui';
+import { Text } from '@iota/ui';
 import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu';
 import { type ReactNode } from 'react';
+import { Root, Thumb } from '@radix-ui/react-switch';
 
 type DropdownMenuProps = {
     content: ReactNode;
@@ -46,20 +47,24 @@ export function DropdownMenuCheckboxItem({
     checked = false,
     ...radixRootProps
 }: DropdownMenuCheckboxItemProps): JSX.Element {
+    const handleCheckedChange = (checked: boolean) => {
+        if (radixRootProps.onCheckedChange) {
+            radixRootProps.onCheckedChange(checked);
+        }
+    };
     return (
         <RadixDropdownMenu.CheckboxItem {...radixRootProps} asChild>
             <div className="flex cursor-pointer select-none items-center gap-4 rounded-md p-2 text-steel-dark outline-none transition-colors data-[highlighted]:bg-iota-light/50 data-[highlighted]:text-steel-darker">
                 <div className="flex-1">
                     <Text variant="body/medium">Show System Transactions</Text>
                 </div>
-                <Toggle
-                    onClick={(e) => {
-                        e.stopPropagation();
-                    }}
+                <Root
+                    className="relative h-3.75 w-[26px] rounded-full bg-gray-60/70 transition-colors data-[state=checked]:bg-success"
                     checked={checked}
-                    /* eslint-disable-next-line react/jsx-handler-names */
-                    onCheckedChange={radixRootProps.onCheckedChange}
-                />
+                    onCheckedChange={handleCheckedChange}
+                >
+                    <Thumb className="block h-[11px] w-[11px] translate-x-0.5 rounded-full bg-white transition-transform will-change-transform data-[state=checked]:translate-x-[13px]" />
+                </Root>
             </div>
         </RadixDropdownMenu.CheckboxItem>
     );

diff --git a/apps/ui/src/Toggle.stories.tsx b/apps/ui/src/Toggle.stories.tsx
diff --git a/apps/ui/src/Toggle.tsx b/apps/ui/src/Toggle.tsx
diff --git a/apps/ui/src/index.ts b/apps/ui/src/index.ts
@@ -8,5 +8,4 @@ export * from './LoadingIndicator';
 export * from './Heading';
 export * from './IconButton';
 export * from './Placeholder';
-export * from './Toggle';
 export * from './Combobox';