Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit6a6e1ec

Browse files
authored
feat: add support for icons and warning variant in Badge component (#17350)
<img width="172" alt="Screenshot 2025-04-10 at 23 11 32"src="https://github.com/user-attachments/assets/2556feb1-bf49-4044-90fd-6ac15582c258"/>
1 parent9e2af3e commit6a6e1ec

File tree

2 files changed

+48
-18
lines changed

2 files changed

+48
-18
lines changed

‎site/src/components/Badge/Badge.stories.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
importtype{Meta,StoryObj}from"@storybook/react";
2+
import{Settings,TriangleAlert}from"lucide-react";
23
import{Badge}from"./Badge";
34

45
constmeta:Meta<typeofBadge>={
@@ -13,3 +14,25 @@ export default meta;
1314
typeStory=StoryObj<typeofBadge>;
1415

1516
exportconstDefault:Story={};
17+
18+
exportconstWarning:Story={
19+
args:{
20+
variant:"warning",
21+
},
22+
};
23+
24+
exportconstSmallWithIcon:Story={
25+
args:{
26+
variant:"default",
27+
size:"sm",
28+
children:<>{<Settings/>} Preset</>,
29+
},
30+
};
31+
32+
exportconstMediumWithIcon:Story={
33+
args:{
34+
variant:"warning",
35+
size:"md",
36+
children:<>{<TriangleAlert/>} Immutable</>,
37+
},
38+
};

‎site/src/components/Badge/Badge.tsx

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,26 @@
22
* Copied from shadc/ui on 11/13/2024
33
*@see {@link https://ui.shadcn.com/docs/components/badge}
44
*/
5+
import{Slot}from"@radix-ui/react-slot";
56
import{typeVariantProps,cva}from"class-variance-authority";
6-
importtype{FC}from"react";
7+
import{forwardRef}from"react";
78
import{cn}from"utils/cn";
89

910
exportconstbadgeVariants=cva(
10-
"inline-flex items-center rounded-md border px-2 py-1 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
11+
`inline-flex items-center rounded-md border px-2 py-1 transition-colors
12+
focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
13+
[&_svg]:pointer-events-none [&_svg]:pr-0.5 [&_svg]:py-0.5 [&_svg]:mr-0.5`,
1114
{
1215
variants:{
1316
variant:{
1417
default:
1518
"border-transparent bg-surface-secondary text-content-secondary shadow",
19+
warning:
20+
"border-transparent bg-surface-orange text-content-warning shadow",
1621
},
1722
size:{
18-
sm:"text-2xs font-regular",
19-
md:"text-xs font-medium",
23+
sm:"text-2xs font-regular h-5.5 [&_svg]:size-icon-xs",
24+
md:"text-xs font-medium [&_svg]:size-icon-sm",
2025
},
2126
},
2227
defaultVariants:{
@@ -28,18 +33,20 @@ export const badgeVariants = cva(
2833

2934
exportinterfaceBadgeProps
3035
extendsReact.HTMLAttributes<HTMLDivElement>,
31-
VariantProps<typeofbadgeVariants>{}
36+
VariantProps<typeofbadgeVariants>{
37+
asChild?:boolean;
38+
}
3239

33-
exportconstBadge:FC<BadgeProps>=({
34-
className,
35-
variant,
36-
size,
37-
...props
38-
})=>{
39-
return(
40-
<div
41-
className={cn(badgeVariants({ variant, size}),className)}
42-
{...props}
43-
/>
44-
);
45-
};
40+
exportconstBadge=forwardRef<HTMLDivElement,BadgeProps>(
41+
({className, variant, size, asChild=false, ...props},ref)=>{
42+
constComp=asChild ?Slot :"div";
43+
44+
return(
45+
<Comp
46+
{...props}
47+
ref={ref}
48+
className={cn(badgeVariants({ variant, size}),className)}
49+
/>
50+
);
51+
},
52+
);

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp