Add disabled functionality in dropdown item

the-deep · Nov 29, 2022 · 7760b64 · 7760b64
1 parent 4c07e29
commit 7760b64
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/src/components/DropdownMenuItem/index.tsx b/src/components/DropdownMenuItem/index.tsx
@@ -39,6 +39,7 @@ export function Separator({ className }: { className?: string }) {
 
 interface BaseProps extends ElementFragmentProps {
     className?: string;
+    disabled?: boolean;
 }
 
 export type Props<N extends string | number | undefined> = BaseProps & ({
@@ -61,12 +62,14 @@ function DropdownMenuItem<N extends string | number | undefined>(props: Props<N>
         actionsContainerClassName,
         spacing = 'comfortable',
         href,
+        disabled = false,
     } = props;
 
     const className = _cs(
         styles.dropdownMenuItem,
         spacingToStyleMap[spacing],
         classNameFromProps,
+        disabled && styles.disabled,
     );
 
     const content = (
@@ -116,6 +119,7 @@ function DropdownMenuItem<N extends string | number | undefined>(props: Props<N>
             name={props.name}
             // eslint-disable-next-line react/destructuring-assignment
             onClick={props.onClick}
+            disabled={disabled}
         >
             {content}
         </RawButton>

diff --git a/src/components/DropdownMenuItem/styles.css b/src/components/DropdownMenuItem/styles.css
@@ -27,8 +27,13 @@
     &.loose-spacing {
         --spacing: var(--dui-spacing-large);
     }
-}
 
+    &.disabled {
+        pointer-events: none;
+        opacity: var(--dui-opacity-disabled-element);
+        filter: saturate(var(--dui-saturation-disabled-element));
+    }
+}
 .separator {
     margin: var(--dui-spacing-extra-small) 0;
     border: var(--dui-width-separator-thin) solid var(--dui-color-separator);

diff --git a/storybook/stories/DropdownMenu/DropdownMenu.stories.tsx b/storybook/stories/DropdownMenu/DropdownMenu.stories.tsx
@@ -216,6 +216,35 @@ export const Variants: Story = () => (
                         Goto Togglecorp
                     </DropdownMenuItem>
                 </DropdownMenu>
+                <DropdownMenu
+                    variant="general"
+                    label="Disabled items"
+                >
+                    <DropdownMenuItem
+                        name={undefined}
+                        onClick={handleMenuItemClick}
+                        disabled
+                    >
+                        Home
+                    </DropdownMenuItem>
+                    <DropdownMenuItem name={undefined} onClick={handleMenuItemClick}>
+                        Profile
+                    </DropdownMenuItem>
+                    <DropdownMenuItem name={undefined} onClick={handleMenuItemClick}>
+                        Projects
+                    </DropdownMenuItem>
+                    <Separator />
+                    <DropdownMenuItem name={undefined} onClick={handleMenuItemClick}>
+                        Logout
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                        href="https://togglecorp.com"
+                        actions={<IoExitOutline />}
+                        disabled
+                    >
+                        Goto Togglecorp
+                    </DropdownMenuItem>
+                </DropdownMenu>
             </div>
         </section>
     </div>