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

u

This commit is contained in:
Felicio Mununga 2024-10-11 16:38:01 +02:00
parent bc299b098a
commit f029428a0f
No known key found for this signature in database
GPG Key ID: B8A18D62FCD9EA6E
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
packages/components/src/button/button.tsx
View File

@ -72,8 +72,8 @@ function Button(
className={styles({ className={styles({
variant, variant,
size, size,
placement: iconPlacement:
(iconBefore && 'before') || (iconAfter && 'after') || undefined, (iconBefore && 'before') || (iconAfter && 'after') || 'unset',
})} })}
> >
{iconBefore && ( {iconBefore && (
@ -127,14 +127,15 @@ const styles = cva({
'dark:bg-danger-60 dark:hover:bg-danger-50 dark:pressed:bg-danger-50/[.9]', 'dark:bg-danger-60 dark:hover:bg-danger-50 dark:pressed:bg-danger-50/[.9]',
], ],
}, },
placement: { iconPlacement: {
before: '', before: '',
after: '', after: '',
unset: '',
}, },
size: { size: {
'40': 'h-[40px] rounded-12 px-4 text-15', '40': 'h-[40px] rounded-12 text-15',
'32': 'h-[32px] rounded-10 px-3 text-15', '32': 'h-[32px] rounded-10 text-15',
'24': 'h-[24px] rounded-8 px-2 text-13', '24': 'h-[24px] rounded-8 text-13',
}, },
iconOnly: { iconOnly: {
true: 'aspect-square !px-0', true: 'aspect-square !px-0',
@ -143,33 +144,48 @@ const styles = cva({
compoundVariants: [ compoundVariants: [
{ {
size: '40', size: '40',
placement: 'before', iconPlacement: 'unset',
className: 'px-4',
},
{
size: '32',
iconPlacement: 'unset',
className: 'px-3',
},
{
size: '24',
iconPlacement: 'unset',
className: 'px-2',
},
{
size: '40',
iconPlacement: 'before',
className: 'pl-3 pr-4', className: 'pl-3 pr-4',
}, },
{ {
size: '40', size: '40',
placement: 'after', iconPlacement: 'after',
className: 'pl-4 pr-3', className: 'pl-4 pr-3',
}, },
{ {
size: '32', size: '32',
placement: 'before', iconPlacement: 'before',
className: 'pl-2 pr-3', className: 'pl-2 pr-3',
}, },
{ {
size: '32', size: '32',
placement: 'after', iconPlacement: 'after',
className: 'pl-3 pr-2', className: 'pl-3 pr-2',
}, },
{ {
size: '24', size: '24',
placement: 'before', iconPlacement: 'before',
className: 'pl-[6px] pr-2', className: 'pl-1.5 pr-2',
}, },
{ {
size: '24', size: '24',
placement: 'after', iconPlacement: 'after',
className: 'pl-2 pr-[6px]', className: 'pl-2 pr-1.5',
}, },
], ],
}) })