Merge pull request #127 from ensdomains/fet980-add-icons-to-action-sheet

Add icon support to action sheet
ensdomains · Sep 5, 2023 · 96908e9 · 96908e9
2 parents 0a92162 + fd143b0
commit 96908e9
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/components/src/components/molecules/Dropdown/ActionSheet.tsx b/components/src/components/molecules/Dropdown/ActionSheet.tsx
@@ -29,6 +29,10 @@ const ActionSheetOptions = styled.div(
 
 const ActionSheetItem = styled.div(
   ({ theme }) => css`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: ${theme.space['2']};
     width: 100%;
     padding: 20px;
     position: relative;
@@ -75,6 +79,7 @@ export const ActionSheet = React.forwardRef<HTMLDivElement, Props>(
               return DropdownChild({ item, setIsOpen })
             }
 
+            const icon = (item as DropdownItemObject).icon
             return (
               <ActionSheetItem
                 key={(item as DropdownItemObject).label}
@@ -85,6 +90,7 @@ export const ActionSheet = React.forwardRef<HTMLDivElement, Props>(
                   setIsOpen(false)
                 }}
               >
+                {icon}
                 <Typography>{(item as DropdownItemObject).label}</Typography>
               </ActionSheetItem>
             )

diff --git a/docs/src/reference/mdx/molecules/Dropdown.docs.mdx b/docs/src/reference/mdx/molecules/Dropdown.docs.mdx
@@ -71,6 +71,14 @@ import { Dropdown } from '@ensdomains/thorin'
         raw: 'boolean | Colors',
       },
     },
+    icon: {
+      name: 'icon',
+      description: 'An icon that leads the label.',
+      type: {
+        raw: 'ReactNode'
+      }
+    }
+
   }}
 />
 
@@ -266,3 +274,25 @@ import { Dropdown } from '@ensdomains/thorin'
   label="Custom"
 />
 ```
+
+## Items with icons
+
+```tsx live=true minHeight=300px
+<Dropdown
+  items={[
+    {
+      label: 'None',
+      onClick: () => null,
+      color: 'text',
+      icon: <DotGridSVG />,
+    },
+    {
+      label: 'Default',
+      onClick: () => null,
+      color: 'text',
+      icon: <CogSVG />,
+    },
+  ]}
+  label="Custom"
+/>
+```