status-im
/
wakuconnect-chat-sdk
mirror of https://github.com/status-im/wakuconnect-chat-sdk.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add dark grey dropdown button (#588) 

* a dark grey dropdown button

* Create nasty-dots-eat.md
This commit is contained in:
Jakub Kotula 2024-10-01 19:10:02 +02:00 committed by GitHub
parent 4452f0524f
commit 273db4ed9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/nasty-dots-eat.md Normal file
View File

@ -0,0 +1,5 @@
---
"@status-im/components": patch
---
add dark grey dropdown button

6
packages/components/src/dropdown-button/dropdown-button.stories.tsx
View File

@ -22,7 +22,8 @@ export default {
render: args => ( render: args => (
<div className="grid gap-4"> <div className="grid gap-4">
{(['primary', 'grey', 'outline', 'ghost'] as const).map(variant => ( {(['primary', 'grey', 'darkGrey', 'outline', 'ghost'] as const).map(
variant => (
<div key={variant} className="flex items-center gap-4"> <div key={variant} className="flex items-center gap-4">
{(['40', '32', '24'] as const).map(size => ( {(['40', '32', '24'] as const).map(size => (
<DropdownButton <DropdownButton
@ -33,7 +34,8 @@ export default {
/> />
))} ))}
</div> </div>
))} ),
)}
</div> </div>
), ),
} satisfies Meta<typeof DropdownButton> } satisfies Meta<typeof DropdownButton>

6
packages/components/src/dropdown-button/dropdown-button.tsx
View File

@ -13,7 +13,7 @@ type ButtonProps = Extract<
type Props = ButtonProps & { type Props = ButtonProps & {
variant?: Extract< variant?: Extract<
ButtonProps['variant'], ButtonProps['variant'],
'primary' | 'grey' | 'outline' | 'ghost' 'primary' | 'grey' | 'outline' | 'ghost' | 'darkGrey'
> >
iconAfter?: never iconAfter?: never
} }
@ -53,6 +53,10 @@ const iconStyles = cva({
'text-neutral-100 dark:text-white-100', 'text-neutral-100 dark:text-white-100',
'[&>path[fill="#E7EAEE"]]:dark:fill-neutral-80', '[&>path[fill="#E7EAEE"]]:dark:fill-neutral-80',
], ],
darkGrey: [
'text-neutral-100 dark:text-white-100',
'[&>path[fill="#E7EAEE"]]:dark:fill-neutral-80',
],
}, },
}, },
}) })