diff --git a/components/src/components/molecules/Dropdown/ActionSheet.tsx b/components/src/components/molecules/Dropdown/ActionSheet.tsx index af142880..fc3959f9 100644 --- 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( return DropdownChild({ item, setIsOpen }) } + const icon = (item as DropdownItemObject).icon return ( ( setIsOpen(false) }} > + {icon} {(item as DropdownItemObject).label} ) diff --git a/docs/src/reference/mdx/molecules/Dropdown.docs.mdx b/docs/src/reference/mdx/molecules/Dropdown.docs.mdx index 8a4f3271..f85e69c7 100644 --- 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 + null, + color: 'text', + icon: , + }, + { + label: 'Default', + onClick: () => null, + color: 'text', + icon: , + }, + ]} + label="Custom" +/> +```