Skip to content

Commit 5895295

Browse files
thevuongthevuong
committed
feat(ui): update badge, button, and toggle styles
Enhanced the badge, button, and toggle components by updating their size classes and SVG handling for better consistency and usability. Removed unnecessary compound variants and adjusted class names for elements within these components to streamline the codebase. Also refined the implementation of the DataTableColumnHeader for improved readability and functionality.
1 parent 5c9694c commit 5895295

File tree

5 files changed

+80
-86
lines changed

5 files changed

+80
-86
lines changed

‎packages/ui/src/components/badge.tsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import { tv, type VariantProps } from 'tailwind-variants';
77

88
const badgeVariants = tv({
99
base: [
10-
'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md px-2.5 font-medium',
10+
'inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md px-2.5 text-sm font-medium',
1111
'[&>svg]:shrink-0',
1212
],
1313
compoundVariants: [
14-
{ className: 'w-8', icon: true, size: 'xs' },
15-
{ className: 'w-9', icon: true, size: 'sm' },
16-
{ className: 'w-10', icon: true, size: 'md' },
17-
{ className: 'w-11', icon: true, size: 'lg' },
18-
{ className: 'w-12', icon: true, size: 'xl' },
14+
{ className: 'w-8', icon: true, size: 'sm' },
15+
{ className: 'w-9', icon: true, size: 'md' },
16+
{ className: 'w-10', icon: true, size: 'lg' },
17+
{ className: 'w-11', icon: true, size: 'xl' },
18+
{ className: 'w-12', icon: true, size: '2xl' },
1919
],
2020
defaultVariants: {
2121
icon: false,
@@ -25,11 +25,11 @@ const badgeVariants = tv({
2525
variants: {
2626
icon: { false: '', true: 'px-0' },
2727
size: {
28-
xs: ['h-5', '[&>svg]:size-3', 'text-xs'], // 20px
29-
sm: ['h-6', '[&>svg]:size-3', 'text-xs'], // 24px
30-
md: ['h-7', '[&>svg]:size-4', 'text-sm'], // 28px
31-
lg: ['h-8', '[&>svg]:size-4', 'text-sm'], // 32px
32-
xl: ['h-9', '[&>svg]:size-4', 'text-sm'], // 36px
28+
sm: 'h-5 [&>svg]:size-3', // 20px
29+
md: 'h-6 [&>svg]:size-3', // 24px
30+
lg: 'h-7 [&>svg]:size-4', // 28px
31+
xl: 'h-8 [&>svg]:size-5', // 32px
32+
'2xl': 'h-9 [&>svg]:size-5', // 36px
3333
},
3434
variant: {
3535
default: 'bg-primary text-primary-foreground',

‎packages/ui/src/components/data-table.tsx

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -191,64 +191,65 @@ function DataTablePagination<TData>({
191191
* Component: DataTableColumnHeader
192192
* -------------------------------------------------------------------------- */
193193

194-
interface DataTableColumnHeaderProps<TData, TValue>
195-
extends HTMLAttributes<HTMLDivElement> {
194+
interface DataTableColumnHeaderProps<TData, TValue> {
196195
column: ReactTable.Column<TData, TValue>;
197196
title: string;
198197
}
199198

200199
function DataTableColumnHeader<TData, TValue>({
201200
column,
202201
title,
203-
...props
204202
}: DataTableColumnHeaderProps<TData, TValue>): JSX.Element {
205203
if (!column.getCanSort()) {
206-
return <div {...props}>{title}</div>;
204+
return <>{title}</>;
207205
}
208206

209207
return (
210-
<div {...props}>
211-
<DropdownMenu>
212-
<DropdownMenuTrigger asChild>
213-
<Button
214-
className="data-[state=open]:text-accent-foreground -mx-4 hover:bg-transparent"
215-
size="xs"
216-
suffix={<SortIcon sorted={column.getIsSorted()} />}
217-
variant="ghost"
218-
>
219-
{title}
220-
</Button>
221-
</DropdownMenuTrigger>
208+
<DropdownMenu>
209+
<DropdownMenuTrigger asChild>
210+
<Button
211+
className={cn(
212+
'text-muted-foreground p-0',
213+
'hover:bg-transparent',
214+
'data-[state=open]:text-accent-foreground',
215+
'focus-visible:text-accent-foreground focus-visible:bg-transparent focus-visible:outline-0',
216+
)}
217+
size="xs"
218+
suffix={<SortIcon sorted={column.getIsSorted()} />}
219+
variant="ghost"
220+
>
221+
{title}
222+
</Button>
223+
</DropdownMenuTrigger>
222224

223-
<DropdownMenuContent align="start">
224-
<DropdownMenuItem
225-
onClick={() => {
226-
column.toggleSorting(false);
227-
}}
228-
>
229-
<ChevronUpIcon className="text-muted-foreground" />
230-
Asc
231-
</DropdownMenuItem>
232-
<DropdownMenuItem
233-
onClick={() => {
234-
column.toggleSorting(true);
235-
}}
236-
>
237-
<ChevronDownIcon className="text-muted-foreground" />
238-
Desc
239-
</DropdownMenuItem>
240-
<DropdownMenuSeparator />
241-
<DropdownMenuItem
242-
onClick={() => {
243-
column.toggleVisibility(false);
244-
}}
245-
>
246-
<EyeNoneIcon className="text-muted-foreground" />
247-
Hide
248-
</DropdownMenuItem>
249-
</DropdownMenuContent>
250-
</DropdownMenu>
251-
</div>
225+
<DropdownMenuContent align="start">
226+
<DropdownMenuItem
227+
onClick={() => {
228+
column.toggleSorting(false);
229+
}}
230+
>
231+
<ChevronUpIcon className="text-muted-foreground" />
232+
Asc
233+
</DropdownMenuItem>
234+
<DropdownMenuItem
235+
onClick={() => {
236+
column.toggleSorting(true);
237+
}}
238+
>
239+
<ChevronDownIcon className="text-muted-foreground" />
240+
Desc
241+
</DropdownMenuItem>
242+
<DropdownMenuSeparator />
243+
<DropdownMenuItem
244+
onClick={() => {
245+
column.toggleVisibility(false);
246+
}}
247+
>
248+
<EyeNoneIcon className="text-muted-foreground" />
249+
Hide
250+
</DropdownMenuItem>
251+
</DropdownMenuContent>
252+
</DropdownMenu>
252253
);
253254
}
254255

‎packages/ui/src/styles/button-variants.ts

Lines changed: 9 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
33
const buttonVariants = tv({
44
base: [
55
'inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-md px-4 text-sm font-medium transition',
6-
'[&>svg]:size-4 [&>svg]:shrink-0',
6+
'[&>svg]:shrink-0',
77
'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1',
88
'disabled:pointer-events-none disabled:opacity-50',
99
],
@@ -16,9 +16,6 @@ const buttonVariants = tv({
1616
{ className: 'w-11', icon: true, size: 'lg' },
1717
{ className: 'w-12', icon: true, size: 'xl' },
1818
// --
19-
{ className: '[&>svg]:size-3', size: 'xxs' },
20-
{ className: '[&>svg]:size-3.5', size: 'xs' },
21-
// --
2219
{ className: 'h-6', inside: true, size: 'xxs' },
2320
{ className: 'h-6', inside: true, size: 'xs' },
2421
{ className: 'h-7', inside: true, size: 'sm' },
@@ -43,12 +40,12 @@ const buttonVariants = tv({
4340
icon: { false: '', true: 'px-0' },
4441
inside: { false: '', true: '' },
4542
size: {
46-
xxs: 'h-7', // 28px
47-
xs: 'h-8', // 32px
48-
sm: 'h-9', // 36px
49-
md: 'h-10', // 40px
50-
lg: 'h-11', // 44px
51-
xl: 'h-12', // 48px
43+
xxs: 'h-7 [&>svg]:size-3', // 28px
44+
xs: 'h-8 [&>svg]:size-3.5', // 32px
45+
sm: 'h-9 [&>svg]:size-4', // 36px
46+
md: 'h-10 [&>svg]:size-4', // 40px
47+
lg: 'h-11 [&>svg]:size-5', // 44px
48+
xl: 'h-12 [&>svg]:size-5', // 48px
5249
},
5350
variant: {
5451
default: [
@@ -82,12 +79,12 @@ const buttonVariants = tv({
8279
'focus-visible:bg-destructive/80',
8380
],
8481
outline: [
85-
'bg-background text-foreground border-input border shadow-sm',
82+
'text-foreground border-input border shadow-sm',
8683
'hover:bg-accent hover:text-accent-foreground',
8784
'focus-visible:bg-accent focus-visible:text-accent-foreground',
8885
],
8986
ghost: [
90-
'text-foreground bg-background',
87+
'text-foreground',
9188
'hover:bg-accent hover:text-accent-foreground',
9289
'focus-visible:bg-accent focus-visible:text-accent-foreground',
9390
],

‎packages/ui/src/styles/input-variants.ts

Lines changed: 7 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const inputVariants = tv({
44
slots: {
55
root: [
66
'border-input bg-background flex w-full grow cursor-text items-center gap-2 rounded-md border px-3 text-sm shadow-sm transition',
7-
'[&>svg]:text-muted-foreground [&>svg]:size-4 [&>svg]:shrink-0',
7+
'[&>svg]:text-muted-foreground [&>svg]:shrink-0',
88
'focus-within:outline focus-within:outline-2 focus-within:-outline-offset-1',
99
'has-[input:disabled]:cursor-default has-[input:disabled]:opacity-50',
1010
],
@@ -17,18 +17,14 @@ const inputVariants = tv({
1717
},
1818
variants: {
1919
inputSize: {
20-
xxs: { root: 'h-7', input: 'file:py-0.75' }, // 28px
21-
xs: { root: 'h-8', input: 'file:py-1.25' }, // 32px
22-
sm: { root: 'h-9', input: 'file:py-1.75' }, // 36px
23-
md: { root: 'h-10', input: 'file:py-2.25' }, // 40px
24-
lg: { root: 'h-11', input: 'file:py-2.75' }, // 44px
25-
xl: { root: 'h-12', input: 'file:py-3.25' }, // 48px
20+
xxs: { root: 'h-7 [&>svg]:size-3', input: 'file:py-0.75' }, // 28px
21+
xs: { root: 'h-8 [&>svg]:size-3.5', input: 'file:py-1.25' }, // 32px
22+
sm: { root: 'h-9 [&>svg]:size-4', input: 'file:py-1.75' }, // 36px
23+
md: { root: 'h-10 [&>svg]:size-4', input: 'file:py-2.25' }, // 40px
24+
lg: { root: 'h-11 [&>svg]:size-5', input: 'file:py-2.75' }, // 44px
25+
xl: { root: 'h-12 [&>svg]:size-5', input: 'file:py-3.25' }, // 48px
2626
},
2727
},
28-
compoundVariants: [
29-
{ className: '[&>svg]:size-3', inputSize: 'xxs' },
30-
{ className: '[&>svg]:size-3.5', inputSize: 'xs' },
31-
],
3228
defaultVariants: {
3329
inputSize: 'md',
3430
},

‎packages/ui/src/styles/toggle-variants.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { tv, type VariantProps } from 'tailwind-variants';
33
const toggleVariants = tv({
44
base: [
55
'inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-md px-4 text-sm font-medium transition',
6-
'[&>svg]:size-4 [&>svg]:shrink-0',
6+
'[&>svg]:shrink-0',
77
'focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1',
88
'disabled:pointer-events-none disabled:opacity-50',
99
],
@@ -27,12 +27,12 @@ const toggleVariants = tv({
2727
variants: {
2828
icon: { false: '', true: 'px-0' },
2929
size: {
30-
xxs: 'h-7', // 28px
31-
xs: 'h-8', // 32px
32-
sm: 'h-9', // 36px
33-
md: 'h-10', // 40px
34-
lg: 'h-11', // 44px
35-
xl: 'h-12', // 48px
30+
xxs: 'h-7 [&>svg]:size-3', // 28px
31+
xs: 'h-8 [&>svg]:size-3.5', // 32px
32+
sm: 'h-9 [&>svg]:size-4', // 36px
33+
md: 'h-10 [&>svg]:size-4', // 40px
34+
lg: 'h-11 [&>svg]:size-5', // 44px
35+
xl: 'h-12 [&>svg]:size-5', // 48px
3636
},
3737
variant: {
3838
default: [

0 commit comments

Comments
 (0)