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

Commita1341ee

Browse files
fix(site): fix pill spinner size (#11368)
1 parent467a1a3 commita1341ee

File tree

3 files changed

+39
-22
lines changed

3 files changed

+39
-22
lines changed

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

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
1-
import{Pill}from"./Pill";
1+
import{Pill,PillSpinner}from"./Pill";
22
importtype{Meta,StoryObj}from"@storybook/react";
33
importInfoOutlinedfrom"@mui/icons-material/InfoOutlined";
44

55
constmeta:Meta<typeofPill>={
66
title:"components/Pill",
77
component:Pill,
8+
args:{
9+
children:"Default",
10+
},
811
};
912

1013
exportdefaultmeta;
1114
typeStory=StoryObj<typeofPill>;
1215

13-
exportconstDefault:Story={
14-
args:{
15-
children:"Default",
16-
},
17-
};
16+
exportconstDefault:Story={};
1817

1918
exportconstDanger:Story={
2019
args:{
@@ -72,3 +71,12 @@ export const WithIcon: Story = {
7271
icon:<InfoOutlined/>,
7372
},
7473
};
74+
75+
exportconstWithSpinner:Story={
76+
args:{
77+
icon:<PillSpinner/>,
78+
},
79+
parameters:{
80+
chromatic:{delay:700},
81+
},
82+
};

‎site/src/components/Pill/Pill.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ import {
77
}from"react";
88
import{useTheme,typeInterpolation,typeTheme}from"@emotion/react";
99
importtype{ThemeRole}from"theme/experimental";
10+
importCircularProgress,{
11+
CircularProgressProps,
12+
}from"@mui/material/CircularProgress";
1013

1114
exporttypePillType=ThemeRole|keyoftypeofthemeOverrides;
1215

@@ -81,3 +84,19 @@ export const Pill: FC<PillProps> = forwardRef<HTMLDivElement, PillProps>(
8184
);
8285
},
8386
);
87+
88+
exportconstPillSpinner=(props:CircularProgressProps)=>{
89+
return(
90+
<CircularProgress
91+
size={PILL_ICON_SIZE}
92+
css={(theme)=>({
93+
color:theme.experimental.l1.text,
94+
// It is necessary to align it with the MUI Icons internal padding
95+
"& svg":{
96+
transform:"scale(.75)",
97+
},
98+
})}
99+
{...props}
100+
/>
101+
);
102+
};

‎site/src/utils/workspace.tsx‎

Lines changed: 6 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
importCircularProgressfrom"@mui/material/CircularProgress";
21
importErrorIconfrom"@mui/icons-material/ErrorOutline";
32
importStopIconfrom"@mui/icons-material/StopOutlined";
43
importPlayIconfrom"@mui/icons-material/PlayArrowOutlined";
@@ -8,9 +7,9 @@ import duration from "dayjs/plugin/duration";
87
importminMaxfrom"dayjs/plugin/minMax";
98
importutcfrom"dayjs/plugin/utc";
109
import{typeTheme}from"@emotion/react";
11-
import{typeFC}from"react";
1210
importsemverfrom"semver";
1311
importtype*asTypesGenfrom"api/typesGenerated";
12+
import{PillSpinner}from"components/Pill/Pill";
1413

1514
dayjs.extend(duration);
1615
dayjs.extend(utc);
@@ -29,15 +28,6 @@ const DisplayAgentVersionLanguage = {
2928
unknown:"Unknown",
3029
};
3130

32-
constLoadingIcon:FC=()=>{
33-
return(
34-
<CircularProgress
35-
size={10}
36-
css={(theme)=>({color:theme.experimental.l1.text})}
37-
/>
38-
);
39-
};
40-
4131
exportconstgetDisplayWorkspaceBuildStatus=(
4232
theme:Theme,
4333
build:TypesGen.WorkspaceBuild,
@@ -185,7 +175,7 @@ export const getDisplayWorkspaceStatus = (
185175
caseundefined:
186176
return{
187177
text:"Loading",
188-
icon:<LoadingIcon/>,
178+
icon:<PillSpinner/>,
189179
}asconst;
190180
case"running":
191181
return{
@@ -197,13 +187,13 @@ export const getDisplayWorkspaceStatus = (
197187
return{
198188
type:"active",
199189
text:"Starting",
200-
icon:<LoadingIcon/>,
190+
icon:<PillSpinner/>,
201191
}asconst;
202192
case"stopping":
203193
return{
204194
type:"notice",
205195
text:"Stopping",
206-
icon:<LoadingIcon/>,
196+
icon:<PillSpinner/>,
207197
}asconst;
208198
case"stopped":
209199
return{
@@ -215,7 +205,7 @@ export const getDisplayWorkspaceStatus = (
215205
return{
216206
type:"danger",
217207
text:"Deleting",
218-
icon:<LoadingIcon/>,
208+
icon:<PillSpinner/>,
219209
}asconst;
220210
case"deleted":
221211
return{
@@ -227,7 +217,7 @@ export const getDisplayWorkspaceStatus = (
227217
return{
228218
type:"notice",
229219
text:"Canceling",
230-
icon:<LoadingIcon/>,
220+
icon:<PillSpinner/>,
231221
}asconst;
232222
case"canceled":
233223
return{

0 commit comments

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