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

Commit6cbc44b

Browse files
refactor: replace MUI button on TopbarButton (#16212)
Related to#14978
1 parentd659fd9 commit6cbc44b

File tree

7 files changed

+56
-120
lines changed

7 files changed

+56
-120
lines changed

‎site/src/components/FullPageLayout/Topbar.tsx

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import{css}from"@emotion/css";
22
import{useTheme}from"@emotion/react";
3-
importButton,{typeButtonProps}from"@mui/material/Button";
43
importIconButton,{typeIconButtonProps}from"@mui/material/IconButton";
54
import{Avatar,typeAvatarProps}from"components/Avatar/Avatar";
5+
import{Button,typeButtonProps}from"components/Button/Button";
66
import{
77
typeFC,
88
typeForwardedRef,
@@ -54,19 +54,7 @@ export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
5454

5555
exportconstTopbarButton=forwardRef<HTMLButtonElement,ButtonProps>(
5656
(props:ButtonProps,ref)=>{
57-
return(
58-
<Button
59-
ref={ref}
60-
color="neutral"
61-
css={{
62-
height:28,
63-
fontSize:13,
64-
borderRadius:4,
65-
padding:"0 12px",
66-
}}
67-
{...props}
68-
/>
69-
);
57+
return<Buttonref={ref}variant="outline"size="sm"{...props}/>;
7058
},
7159
);
7260

‎site/src/pages/DeploymentSettingsPage/GeneralSettingsPage/GeneralSettingsPageView.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type {
55
Experiments,
66
SerpentOption,
77
}from"api/typesGenerated";
8+
import{Link}from"components/Link/Link";
89
import{SettingsHeader}from"components/SettingsHeader/SettingsHeader";
910
import{Stack}from"components/Stack/Stack";
1011
importtype{FC}from"react";
@@ -53,13 +54,13 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
5354
</ul>
5455
It is recommended that you remove these experiments from your
5556
configuration as they have no effect. See{" "}
56-
<a
57+
<Link
5758
href="https://coder.com/docs/cli/server#--experiments"
5859
target="_blank"
5960
rel="noreferrer"
6061
>
6162
the documentation
62-
</a>{" "}
63+
</Link>{" "}
6364
for more details.
6465
</Alert>
6566
)}

‎site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

Lines changed: 7 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,8 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
22
importCreateIconfrom"@mui/icons-material/AddOutlined";
33
importArrowBackOutlinedfrom"@mui/icons-material/ArrowBackOutlined";
44
importCloseOutlinedfrom"@mui/icons-material/CloseOutlined";
5-
importPlayArrowOutlinedfrom"@mui/icons-material/PlayArrowOutlined";
65
importWarningOutlinedfrom"@mui/icons-material/WarningOutlined";
76
importButtonfrom"@mui/material/Button";
8-
importButtonGroupfrom"@mui/material/ButtonGroup";
97
importIconButtonfrom"@mui/material/IconButton";
108
importTooltipfrom"@mui/material/Tooltip";
119
import{getErrorDetail,getErrorMessage}from"api/errors";
@@ -29,6 +27,7 @@ import {
2927
}from"components/FullPageLayout/Topbar";
3028
import{displayError}from"components/GlobalSnackbar/utils";
3129
import{Loader}from"components/Loader/Loader";
30+
import{PlayIcon}from"lucide-react";
3231
import{linkToTemplate,useLinks}from"modules/navigation";
3332
import{ProvisionerAlert}from"modules/provisioners/ProvisionerAlert";
3433
import{AlertVariant}from"modules/provisioners/ProvisionerAlert";
@@ -260,28 +259,15 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
260259
>
261260
<TemplateVersionStatusBadgeversion={templateVersion}/>
262261

263-
<ButtonGroup
264-
variant="outlined"
265-
css={{
266-
// Workaround to make the border transitions smoothly on button groups
267-
"& > button:hover + button":{
268-
borderLeft:"1px solid #FFF",
269-
},
270-
}}
271-
disabled={!canBuild}
272-
>
262+
<divclassName="flex gap-1 items-center">
273263
<TopbarButton
274-
startIcon={
275-
<PlayArrowOutlined
276-
css={{color:theme.palette.success.light}}
277-
/>
278-
}
279264
title="Build template (Ctrl + Enter)"
280265
disabled={!canBuild}
281266
onClick={async()=>{
282267
awaittriggerPreview();
283268
}}
284269
>
270+
<PlayIcon/>
285271
Build
286272
</TopbarButton>
287273
<ProvisionerTagsPopover
@@ -298,10 +284,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
298284
onUpdateProvisionerTags(newTags);
299285
}}
300286
/>
301-
</ButtonGroup>
287+
</div>
302288

303289
<TopbarButton
304-
variant="contained"
290+
variant="default"
305291
disabled={dirty||!canPublish}
306292
onClick={onPublish}
307293
>
@@ -555,6 +541,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
555541
}}
556542
>
557543
<button
544+
type="button"
558545
disabled={!buildLogs}
559546
css={styles.tab}
560547
className={selectedTab==="logs" ?"active" :""}
@@ -566,6 +553,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
566553
</button>
567554

568555
<button
556+
type="button"
569557
disabled={!canPublish}
570558
css={styles.tab}
571559
className={selectedTab==="resources" ?"active" :""}

‎site/src/pages/WorkspacePage/WorkspaceActions/BuildParametersPopover.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import{useTheme}from"@emotion/react";
2-
importExpandMoreOutlinedfrom"@mui/icons-material/ExpandMoreOutlined";
32
importButtonfrom"@mui/material/Button";
43
importvisuallyHiddenfrom"@mui/utils/visuallyHidden";
54
import{API}from"api/api";
@@ -25,6 +24,7 @@ import {
2524
usePopover,
2625
}from"components/deprecated/Popover/Popover";
2726
import{useFormik}from"formik";
27+
import{ChevronDownIcon}from"lucide-react";
2828
importtype{FC}from"react";
2929
import{useQuery}from"react-query";
3030
import{docs}from"utils/docs";
@@ -61,10 +61,9 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
6161
<TopbarButton
6262
data-testid="build-parameters-button"
6363
disabled={disabled}
64-
color="neutral"
65-
css={{paddingLeft:0,paddingRight:0,minWidth:"28px !important"}}
64+
className="min-w-fit"
6665
>
67-
<ExpandMoreOutlinedcss={{fontSize:14}}/>
66+
<ChevronDownIcon/>
6867
<spancss={{ ...visuallyHidden}}>{label}</span>
6968
</TopbarButton>
7069
</PopoverTrigger>

‎site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx

Lines changed: 31 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
importBlockIconfrom"@mui/icons-material/Block";
2-
importOutlinedBlockIconfrom"@mui/icons-material/BlockOutlined";
3-
importCloudQueueIconfrom"@mui/icons-material/CloudQueue";
4-
importCropSquareIconfrom"@mui/icons-material/CropSquare";
5-
importPlayCircleOutlineIconfrom"@mui/icons-material/PlayCircleOutline";
6-
importPowerSettingsNewIconfrom"@mui/icons-material/PowerSettingsNew";
7-
importReplayIconfrom"@mui/icons-material/Replay";
8-
importStarfrom"@mui/icons-material/Star";
9-
importStarBorderfrom"@mui/icons-material/StarBorder";
10-
importButtonGroupfrom"@mui/material/ButtonGroup";
111
importTooltipfrom"@mui/material/Tooltip";
122
importtype{Workspace,WorkspaceBuildParameter}from"api/typesGenerated";
133
import{TopbarButton}from"components/FullPageLayout/Topbar";
4+
import{
5+
BanIcon,
6+
CirclePlayIcon,
7+
CircleStopIcon,
8+
CloudIcon,
9+
PowerIcon,
10+
RotateCcwIcon,
11+
StarIcon,
12+
StarOffIcon,
13+
}from"lucide-react";
1414
importtype{FC}from"react";
1515
import{BuildParametersPopover}from"./BuildParametersPopover";
1616

@@ -29,9 +29,9 @@ export const UpdateButton: FC<ActionButtonProps> = ({
2929
<TopbarButton
3030
disabled={loading}
3131
data-testid="workspace-update-button"
32-
startIcon={<CloudQueueIcon/>}
3332
onClick={()=>handleAction()}
3433
>
34+
<CloudIcon/>
3535
{loading ?<>Updating&hellip;</> :<>Update&hellip;</>}
3636
</TopbarButton>
3737
);
@@ -42,11 +42,8 @@ export const ActivateButton: FC<ActionButtonProps> = ({
4242
loading,
4343
})=>{
4444
return(
45-
<TopbarButton
46-
disabled={loading}
47-
startIcon={<PowerSettingsNewIcon/>}
48-
onClick={()=>handleAction()}
49-
>
45+
<TopbarButtondisabled={loading}onClick={()=>handleAction()}>
46+
<PowerIcon/>
5047
{loading ?<>Activating&hellip;</> :"Activate"}
5148
</TopbarButton>
5249
);
@@ -64,11 +61,8 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
6461
tooltipText,
6562
})=>{
6663
letmainButton=(
67-
<TopbarButton
68-
startIcon={<PlayCircleOutlineIcon/>}
69-
onClick={()=>handleAction()}
70-
disabled={disabled||loading}
71-
>
64+
<TopbarButtononClick={()=>handleAction()}disabled={disabled||loading}>
65+
<CirclePlayIcon/>
7266
{loading ?<>Starting&hellip;</> :"Start"}
7367
</TopbarButton>
7468
);
@@ -78,24 +72,15 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
7872
}
7973

8074
return(
81-
<ButtonGroup
82-
variant="outlined"
83-
sx={{
84-
// Workaround to make the border transitions smoothly on button groups
85-
"& > button:hover + button":{
86-
borderLeft:"1px solid #FFF",
87-
},
88-
}}
89-
disabled={disabled}
90-
>
75+
<divclassName="flex gap-1 items-center">
9176
{mainButton}
9277
<BuildParametersPopover
9378
label="Start with build parameters"
9479
workspace={workspace}
9580
disabled={loading}
9681
onSubmit={handleAction}
9782
/>
98-
</ButtonGroup>
83+
</div>
9984
);
10085
};
10186

@@ -104,10 +89,8 @@ export const UpdateAndStartButton: FC<ActionButtonProps> = ({
10489
})=>{
10590
return(
10691
<Tooltiptitle="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
107-
<TopbarButton
108-
startIcon={<PlayCircleOutlineIcon/>}
109-
onClick={()=>handleAction()}
110-
>
92+
<TopbarButtononClick={()=>handleAction()}>
93+
<CirclePlayIcon/>
11194
Update and start&hellip;
11295
</TopbarButton>
11396
</Tooltip>
@@ -121,10 +104,10 @@ export const StopButton: FC<ActionButtonProps> = ({
121104
return(
122105
<TopbarButton
123106
disabled={loading}
124-
startIcon={<CropSquareIcon/>}
125107
onClick={()=>handleAction()}
126108
data-testid="workspace-stop-button"
127109
>
110+
<CircleStopIcon/>
128111
{loading ?<>Stopping&hellip;</> :"Stop"}
129112
</TopbarButton>
130113
);
@@ -136,21 +119,13 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
136119
workspace,
137120
})=>{
138121
return(
139-
<ButtonGroup
140-
variant="outlined"
141-
css={{
142-
// Workaround to make the border transitions smoothly on button groups
143-
"& > button:hover + button":{
144-
borderLeft:"1px solid #FFF",
145-
},
146-
}}
147-
>
122+
<divclassName="flex gap-1 items-center">
148123
<TopbarButton
149-
startIcon={<ReplayIcon/>}
150124
onClick={()=>handleAction()}
151125
data-testid="workspace-restart-button"
152126
disabled={loading}
153127
>
128+
<RotateCcwIcon/>
154129
{loading ?<>Restarting&hellip;</> :<>Restart&hellip;</>}
155130
</TopbarButton>
156131
<BuildParametersPopover
@@ -159,7 +134,7 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
159134
disabled={loading}
160135
onSubmit={handleAction}
161136
/>
162-
</ButtonGroup>
137+
</div>
163138
);
164139
};
165140

@@ -168,7 +143,8 @@ export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
168143
})=>{
169144
return(
170145
<Tooltiptitle="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
171-
<TopbarButtonstartIcon={<ReplayIcon/>}onClick={()=>handleAction()}>
146+
<TopbarButtononClick={()=>handleAction()}>
147+
<RotateCcwIcon/>
172148
Update and restart&hellip;
173149
</TopbarButton>
174150
</Tooltip>
@@ -177,7 +153,8 @@ export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
177153

178154
exportconstCancelButton:FC<ActionButtonProps>=({ handleAction})=>{
179155
return(
180-
<TopbarButtonstartIcon={<BlockIcon/>}onClick={()=>handleAction()}>
156+
<TopbarButtononClick={()=>handleAction()}>
157+
<BanIcon/>
181158
Cancel
182159
</TopbarButton>
183160
);
@@ -189,7 +166,8 @@ interface DisabledButtonProps {
189166

190167
exportconstDisabledButton:FC<DisabledButtonProps>=({ label})=>{
191168
return(
192-
<TopbarButtonstartIcon={<OutlinedBlockIcon/>}disabled>
169+
<TopbarButtondisabled>
170+
<BanIcon/>
193171
{label}
194172
</TopbarButton>
195173
);
@@ -207,10 +185,8 @@ export const FavoriteButton: FC<FavoriteButtonProps> = ({
207185
isFavorite,
208186
})=>{
209187
return(
210-
<TopbarButton
211-
startIcon={isFavorite ?<Star/> :<StarBorder/>}
212-
onClick={()=>onToggle(workspaceID)}
213-
>
188+
<TopbarButtononClick={()=>onToggle(workspaceID)}>
189+
{isFavorite ?<StarOffIcon/> :<StarIcon/>}
214190
{isFavorite ?"Unfavorite" :"Favorite"}
215191
</TopbarButton>
216192
);
Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
importDebugIconfrom"@mui/icons-material/BugReportOutlined";
2-
importButtonGroupfrom"@mui/material/ButtonGroup";
31
importtype{Workspace}from"api/typesGenerated";
42
import{TopbarButton}from"components/FullPageLayout/Topbar";
3+
import{BugIcon}from"lucide-react";
54
importtype{FC}from"react";
65
import{BuildParametersPopover}from"./BuildParametersPopover";
76
importtype{ActionButtonProps}from"./Buttons";
@@ -17,7 +16,8 @@ export const DebugButton: FC<DebugButtonProps> = ({
1716
enableBuildParameters,
1817
})=>{
1918
constmainAction=(
20-
<TopbarButtonstartIcon={<DebugIcon/>}onClick={()=>handleAction()}>
19+
<TopbarButtononClick={()=>handleAction()}>
20+
<BugIcon/>
2121
Debug
2222
</TopbarButton>
2323
);
@@ -27,21 +27,13 @@ export const DebugButton: FC<DebugButtonProps> = ({
2727
}
2828

2929
return(
30-
<ButtonGroup
31-
variant="outlined"
32-
css={{
33-
// Workaround to make the border transitions smoothly on button groups
34-
"& > button:hover + button":{
35-
borderLeft:"1px solid #FFF",
36-
},
37-
}}
38-
>
30+
<divclassName="flex gap-1 items-center">
3931
{mainAction}
4032
<BuildParametersPopover
4133
label="Debug with build parameters"
4234
workspace={workspace}
4335
onSubmit={handleAction}
4436
/>
45-
</ButtonGroup>
37+
</div>
4638
);
4739
};

0 commit comments

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