cerc-io/snowballtools-base
16
0
Fork 2
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor: put the icon size to icon theme

Browse Source
This commit is contained in:
Wahyu Kurniawan 2024-02-22 17:34:09 +07:00
parent 022ffbe589
commit 33cd907455
No known key found for this signature in database
GPG Key ID: 040A1549143A8E33
2 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/frontend/src/components/shared/SegmentedControls/SegmentedControlItem.tsx
View File

@ -55,8 +55,7 @@ const SegmentedControlItem = forwardRef<
}, },
ref, ref,
) => { ) => {
const iconSize = size === 'sm' ? 16 : 20; const { item, icon } = segmentedControlsTheme({ size, type });
const { item } = segmentedControlsTheme({ size, type });
return ( return (
<button <button
@ -65,10 +64,9 @@ const SegmentedControlItem = forwardRef<
className={item({ className })} className={item({ className })}
data-active={active} data-active={active}
> >
{leftIcon && cloneIcon(leftIcon, { width: iconSize, height: iconSize })} {leftIcon && cloneIcon(leftIcon, { className: icon({ size }) })}
{children} {children}
{rightIcon && {rightIcon && cloneIcon(rightIcon, { className: icon({ size }) })}
cloneIcon(rightIcon, { width: iconSize, height: iconSize })}
</button> </button>
); );
}, },

3
packages/frontend/src/components/shared/SegmentedControls/SegmentedControls.theme.ts
View File

@ -38,14 +38,17 @@ export const segmentedControlsTheme = tv({
'data-[active=true]:shadow-field', 'data-[active=true]:shadow-field',
'data-[active=true]:hover:bg-controls-tertiary-hovered', 'data-[active=true]:hover:bg-controls-tertiary-hovered',
], ],
icon: [],
}, },
variants: { variants: {
size: { size: {
sm: { sm: {
item: ['px-3', 'py-2', 'text-xs'], item: ['px-3', 'py-2', 'text-xs'],
icon: ['h-4', 'w-4'],
}, },
md: { md: {
item: ['px-4', 'py-3', 'text-sm', 'tracking-[-0.006em]'], item: ['px-4', 'py-3', 'text-sm', 'tracking-[-0.006em]'],
icon: ['h-5', 'w-5'],
}, },
}, },
type: { type: {