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,
) => {
const iconSize = size === 'sm' ? 16 : 20;
const { item } = segmentedControlsTheme({ size, type });
const { item, icon } = segmentedControlsTheme({ size, type });
return (
<button
@ -65,10 +64,9 @@ const SegmentedControlItem = forwardRef<
className={item({ className })}
data-active={active}
>
{leftIcon && cloneIcon(leftIcon, { width: iconSize, height: iconSize })}
{leftIcon && cloneIcon(leftIcon, { className: icon({ size }) })}
{children}
{rightIcon &&
cloneIcon(rightIcon, { width: iconSize, height: iconSize })}
{rightIcon && cloneIcon(rightIcon, { className: icon({ size }) })}
</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]:hover:bg-controls-tertiary-hovered',
],
icon: [],
},
variants: {
size: {
sm: {
item: ['px-3', 'py-2', 'text-xs'],
icon: ['h-4', 'w-4'],
},
md: {
item: ['px-4', 'py-3', 'text-sm', 'tracking-[-0.006em]'],
icon: ['h-5', 'w-5'],
},
},
type: {