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

Commit8a3a79f

Browse files
refactor: match StatusIndicator component with the new designs (#16458)
Reference:https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=489-4278&m=dev
1 parent15d5563 commit8a3a79f

File tree

10 files changed

+177
-76
lines changed

10 files changed

+177
-76
lines changed
Lines changed: 21 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,55 @@
11
importtype{Meta,StoryObj}from"@storybook/react";
2-
import{StatusIndicator}from"./StatusIndicator";
2+
import{StatusIndicator,StatusIndicatorDot}from"./StatusIndicator";
33

44
constmeta:Meta<typeofStatusIndicator>={
55
title:"components/StatusIndicator",
66
component:StatusIndicator,
7-
args:{},
7+
args:{
8+
children:(
9+
<>
10+
<StatusIndicatorDot/>
11+
Status
12+
</>
13+
),
14+
},
815
};
916

1017
exportdefaultmeta;
1118
typeStory=StoryObj<typeofStatusIndicator>;
1219

1320
exportconstSuccess:Story={
1421
args:{
15-
color:"success",
16-
},
17-
};
18-
19-
exportconstSuccessOutline:Story={
20-
args:{
21-
color:"success",
22-
variant:"outlined",
23-
},
24-
};
25-
26-
exportconstWarning:Story={
27-
args:{
28-
color:"warning",
22+
variant:"success",
2923
},
3024
};
3125

32-
exportconstWarningOutline:Story={
26+
exportconstFailed:Story={
3327
args:{
34-
color:"warning",
35-
variant:"outlined",
28+
variant:"failed",
3629
},
3730
};
3831

39-
exportconstDanger:Story={
32+
exportconstInactive:Story={
4033
args:{
41-
color:"danger",
34+
variant:"inactive",
4235
},
4336
};
4437

45-
exportconstDangerOutline:Story={
38+
exportconstWarning:Story={
4639
args:{
47-
color:"danger",
48-
variant:"outlined",
40+
variant:"warning",
4941
},
5042
};
5143

52-
exportconstInactive:Story={
44+
exportconstPending:Story={
5345
args:{
54-
color:"inactive",
46+
variant:"pending",
5547
},
5648
};
5749

58-
exportconstInactiveOutline:Story={
50+
exportconstSmall:Story={
5951
args:{
60-
color:"inactive",
61-
variant:"outlined",
52+
variant:"success",
53+
size:"sm",
6254
},
6355
};
Lines changed: 87 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,97 @@
1-
import{useTheme}from"@emotion/react";
2-
importtype{FC}from"react";
3-
importtype{ThemeRole}from"theme/roles";
1+
import{typeVariantProps,cva}from"class-variance-authority";
2+
import{typeFC,createContext,useContext}from"react";
3+
import{cn}from"utils/cn";
44

5-
interfaceStatusIndicatorProps{
6-
color:ThemeRole;
7-
variant?:"solid"|"outlined";
8-
}
5+
conststatusIndicatorVariants=cva(
6+
"font-medium inline-flex items-center gap-2",
7+
{
8+
variants:{
9+
variant:{
10+
success:"text-content-success",
11+
failed:"text-content-destructive",
12+
inactive:"text-highlight-grey",
13+
warning:"text-content-warning",
14+
pending:"text-highlight-sky",
15+
},
16+
size:{
17+
sm:"text-xs",
18+
md:"text-sm",
19+
},
20+
},
21+
defaultVariants:{
22+
variant:"success",
23+
size:"md",
24+
},
25+
},
26+
);
27+
28+
typeStatusIndicatorContextValue=VariantProps<typeofstatusIndicatorVariants>;
29+
30+
constStatusIndicatorContext=createContext<StatusIndicatorContextValue>({});
31+
32+
exportinterfaceStatusIndicatorProps
33+
extendsReact.HTMLAttributes<HTMLDivElement>,
34+
StatusIndicatorContextValue{}
935

1036
exportconstStatusIndicator:FC<StatusIndicatorProps>=({
11-
color,
12-
variant="solid",
37+
size,
38+
variant,
39+
className,
40+
...props
1341
})=>{
14-
consttheme=useTheme();
42+
return(
43+
<StatusIndicatorContext.Providervalue={{ size, variant}}>
44+
<div
45+
className={cn(statusIndicatorVariants({ variant, size}),className)}
46+
{...props}
47+
/>
48+
</StatusIndicatorContext.Provider>
49+
);
50+
};
51+
52+
constdotVariants=cva("rounded-full inline-block border-4 border-solid",{
53+
variants:{
54+
variant:{
55+
success:"bg-content-success border-surface-green",
56+
failed:"bg-content-destructive border-surface-destructive",
57+
inactive:"bg-highlight-grey border-surface-grey",
58+
warning:"bg-content-warning border-surface-orange",
59+
pending:"bg-highlight-sky border-surface-sky",
60+
},
61+
size:{
62+
sm:"size-3 border-4",
63+
md:"size-4 border-4",
64+
},
65+
},
66+
defaultVariants:{
67+
variant:"success",
68+
size:"md",
69+
},
70+
});
71+
72+
exportinterfaceStatusIndicatorDotProps
73+
extendsReact.HTMLAttributes<HTMLDivElement>,
74+
VariantProps<typeofdotVariants>{}
75+
76+
exportconstStatusIndicatorDot:FC<StatusIndicatorDotProps>=({
77+
className,
78+
// We allow the size and variant to be overridden directly by the component.
79+
// This allows StatusIndicatorDot to be used alone.
80+
size,
81+
variant,
82+
...props
83+
})=>{
84+
const{size:ctxSize,variant:ctxVariant}=useContext(
85+
StatusIndicatorContext,
86+
);
1587

1688
return(
1789
<div
18-
css={[
19-
{
20-
height:8,
21-
width:8,
22-
borderRadius:4,
23-
},
24-
variant==="solid"&&{
25-
backgroundColor:theme.roles[color].fill.solid,
26-
},
27-
variant==="outlined"&&{
28-
border:`1px solid${theme.roles[color].outline}`,
29-
},
30-
]}
90+
className={cn(
91+
dotVariants({variant:variant??ctxVariant,size:size??ctxSize}),
92+
className,
93+
)}
94+
{...props}
3195
/>
3296
);
3397
};

‎site/src/index.css

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,22 +15,28 @@
1515
--content-invert:00%98%;
1616
--content-disabled:2405%65%;
1717
--content-success:14272%29%;
18-
--content-danger:084%60%;
1918
--content-warning:2796%61%;
19+
--content-destructive:084%60%;
2020
--surface-primary:00%98%;
2121
--surface-secondary:2405%96%;
2222
--surface-tertiary:2406%90%;
2323
--surface-quaternary:2405%84%;
2424
--surface-invert-primary:2404%16%;
2525
--surface-invert-secondary:2405%26%;
2626
--surface-destructive:093%94%;
27+
--surface-green:14179%85%;
28+
--surface-grey:2405%96%;
29+
--surface-orange:34100%92%;
30+
--surface-sky:20194%86%;
2731
--border-default:2406%90%;
2832
--border-success:14276%36%;
2933
--border-destructive:084%60%;
3034
--overlay-default:2405%84%/80%;
3135
--radius:0.5rem;
3236
--highlight-purple:26283%58%;
3337
--highlight-green:14364%24%;
38+
--highlight-grey:2405%65%;
39+
--highlight-sky:20190%27%;
3440
--border:2405.9%90%;
3541
--input:2405.9%90%;
3642
--ring:24010%3.9%;
@@ -45,21 +51,27 @@
4551
--content-invert:24010%4%;
4652
--content-disabled:2405%26%;
4753
--content-success:14276%36%;
48-
--content-danger:091%71%;
49-
--content-warning:2796%61%;
54+
--content-warning:3197%72%;
55+
--content-destructive:091%71%;
5056
--surface-primary:24010%4%;
5157
--surface-secondary:2406%10%;
5258
--surface-tertiary:2404%16%;
5359
--surface-quaternary:2405%26%;
5460
--surface-invert-primary:2406%90%;
5561
--surface-invert-secondary:2405%65%;
5662
--surface-destructive:075%15%;
63+
--surface-green:14580%10%;
64+
--surface-grey:2406%10%;
65+
--surface-orange:1381%15%;
66+
--surface-sky:20480%16%;
5767
--border-default:2404%16%;
5868
--border-success:14276%36%;
5969
--border-destructive:091%71%;
6070
--overlay-default:24010%4%/80%;
6171
--highlight-purple:25295%85%;
6272
--highlight-green:14179%85%;
73+
--highlight-grey:2404%46%;
74+
--highlight-sky:19893%60%;
6375
--border:2403.7%15.9%;
6476
--input:2403.7%15.9%;
6577
--ring:2404.9%83.9%;

‎site/src/modules/provisioners/ProvisionerGroup.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
}from"components/HelpTooltip/HelpTooltip";
1717
import{Pill}from"components/Pill/Pill";
1818
import{Stack}from"components/Stack/Stack";
19-
import{StatusIndicator}from"components/StatusIndicator/StatusIndicator";
19+
import{StatusIndicatorDot}from"components/StatusIndicator/StatusIndicator";
2020
import{
2121
Popover,
2222
PopoverContent,
@@ -127,7 +127,7 @@ export const ProvisionerGroup: FC<ProvisionerGroupProps> = ({
127127
}}
128128
>
129129
<divcss={{display:"flex",alignItems:"center",gap:16}}>
130-
<StatusIndicatorcolor={hasWarning ?"warning" :"success"}/>
130+
<StatusIndicatorDotvariant={hasWarning ?"warning" :"success"}/>
131131
<div
132132
css={{
133133
display:"flex",

‎site/src/pages/CreateTokenPage/CreateTokenForm.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
8080
</FormFields>
8181
</FormSection>
8282
<FormSection
83+
data-chromatic="ignore"
8384
title="Expiration"
8485
description={
8586
form.values.lifetime

‎site/src/pages/CreateTokenPage/CreateTokenPage.stories.tsx

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,6 @@ const meta: Meta<typeof CreateTokenPage> = {
1212
},
1313
],
1414
},
15-
decorators:[
16-
(Story)=>{
17-
Date.now=()=>newDate("01/01/2014").getTime();
18-
return<Story/>;
19-
},
20-
],
2115
};
2216

2317
exportdefaultmeta;

‎site/src/pages/UsersPage/UsersFilter.tsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ import {
77
typeUseFilterMenuOptions,
88
useFilterMenu,
99
}from"components/Filter/menu";
10-
import{StatusIndicator}from"components/StatusIndicator/StatusIndicator";
10+
import{
11+
StatusIndicator,
12+
StatusIndicatorDot,
13+
}from"components/StatusIndicator/StatusIndicator";
1114
importtype{FC}from"react";
1215
import{docs}from"utils/docs";
1316

@@ -24,17 +27,17 @@ export const useStatusFilterMenu = ({
2427
{
2528
value:"active",
2629
label:"Active",
27-
startIcon:<StatusIndicatorcolor="success"/>,
30+
startIcon:<StatusIndicatorDotvariant="success"/>,
2831
},
2932
{
3033
value:"dormant",
3134
label:"Dormant",
32-
startIcon:<StatusIndicatorcolor="warning"/>,
35+
startIcon:<StatusIndicatorDotvariant="warning"/>,
3336
},
3437
{
3538
value:"suspended",
3639
label:"Suspended",
37-
startIcon:<StatusIndicatorcolor="inactive"/>,
40+
startIcon:<StatusIndicatorDotvariant="inactive"/>,
3841
},
3942
];
4043
returnuseFilterMenu({

‎site/src/pages/WorkspacesPage/LastUsed.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import{useTheme}from"@emotion/react";
22
import{Stack}from"components/Stack/Stack";
3-
import{StatusIndicator}from"components/StatusIndicator/StatusIndicator";
3+
import{StatusIndicatorDot}from"components/StatusIndicator/StatusIndicator";
44
importdayjsfrom"dayjs";
55
importrelativeTimefrom"dayjs/plugin/relativeTime";
66
import{useTime}from"hooks/useTime";
@@ -18,19 +18,19 @@ export const LastUsed: FC<LastUsedProps> = ({ lastUsedAt }) => {
1818
constt=dayjs(lastUsedAt);
1919
constnow=dayjs();
2020
letmessage=t.fromNow();
21-
letcircle=<StatusIndicatorcolor="info"variant="outlined"/>;
21+
letcircle=<StatusIndicatorDotvariant="inactive"/>;
2222

2323
if(t.isAfter(now.subtract(1,"hour"))){
24-
circle=<StatusIndicatorcolor="success"/>;
24+
circle=<StatusIndicatorDotvariant="success"/>;
2525
// Since the agent reports on a 10m interval,
2626
// the last_used_at can be inaccurate when recent.
2727
message="Now";
2828
}elseif(t.isAfter(now.subtract(3,"day"))){
29-
circle=<StatusIndicatorcolor="info"/>;
29+
circle=<StatusIndicatorDotvariant="pending"/>;
3030
}elseif(t.isAfter(now.subtract(1,"month"))){
31-
circle=<StatusIndicatorcolor="warning"/>;
31+
circle=<StatusIndicatorDotvariant="warning"/>;
3232
}elseif(t.isAfter(now.subtract(100,"year"))){
33-
circle=<StatusIndicatorcolor="error"/>;
33+
circle=<StatusIndicatorDotvariant="failed"/>;
3434
}else{
3535
message="Never";
3636
}

0 commit comments

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