refactor: replace MUI button on TopbarButton (#16212)

Related to https://github.com/coder/coder/issues/14978

site/src/components/FullPageLayout/Topbar.tsx

@@ -1,8 +1,8 @@
 import { css } from "@emotion/css";
 import { useTheme } from "@emotion/react";
-import Button, { type ButtonProps } from "@mui/material/Button";
 import IconButton, { type IconButtonProps } from "@mui/material/IconButton";
 import { Avatar, type AvatarProps } from "components/Avatar/Avatar";
+import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	type FC,
 	type ForwardedRef,
@@ -54,19 +54,7 @@ export const TopbarIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
 export const TopbarButton = forwardRef<HTMLButtonElement, ButtonProps>(
 	(props: ButtonProps, ref) => {
-		return (
-			<Button
-				ref={ref}
-				color="neutral"
-				css={{
-					height: 28,
-					fontSize: 13,
-					borderRadius: 4,
-					padding: "0 12px",
-				}}
-				{...props}
-			/>
-		);
+		return <Button ref={ref} variant="outline" size="sm" {...props} />;
 	},
 );
 

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

@@ -5,6 +5,7 @@ import type {
 	Experiments,
 	SerpentOption,
 } from "api/typesGenerated";
+import { Link } from "components/Link/Link";
 import { SettingsHeader } from "components/SettingsHeader/SettingsHeader";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";
@@ -53,13 +54,13 @@ export const GeneralSettingsPageView: FC<GeneralSettingsPageViewProps> = ({
 						</ul>
 						It is recommended that you remove these experiments from your
 						configuration as they have no effect. See{" "}
-						<a
+						<Link
 							href="https://coder.com/docs/cli/server#--experiments"
 							target="_blank"
 							rel="noreferrer"
 						>
 							the documentation
-						</a>{" "}
+						</Link>{" "}
 						for more details.
 					</Alert>
 				)}

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

@@ -2,10 +2,8 @@ import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import CreateIcon from "@mui/icons-material/AddOutlined";
 import ArrowBackOutlined from "@mui/icons-material/ArrowBackOutlined";
 import CloseOutlined from "@mui/icons-material/CloseOutlined";
-import PlayArrowOutlined from "@mui/icons-material/PlayArrowOutlined";
 import WarningOutlined from "@mui/icons-material/WarningOutlined";
 import Button from "@mui/material/Button";
-import ButtonGroup from "@mui/material/ButtonGroup";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import { getErrorDetail, getErrorMessage } from "api/errors";
@@ -29,6 +27,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { displayError } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
+import { PlayIcon } from "lucide-react";
 import { linkToTemplate, useLinks } from "modules/navigation";
 import { ProvisionerAlert } from "modules/provisioners/ProvisionerAlert";
 import { AlertVariant } from "modules/provisioners/ProvisionerAlert";
@@ -260,28 +259,15 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					>
 						<TemplateVersionStatusBadge version={templateVersion} />
 
-						<ButtonGroup
-							variant="outlined"
-							css={{
-								// Workaround to make the border transitions smoothly on button groups
-								"& > button:hover + button": {
-									borderLeft: "1px solid #FFF",
-								},
-							}}
-							disabled={!canBuild}
-						>
+						<div className="flex gap-1 items-center">
 							<TopbarButton
-								startIcon={
-									<PlayArrowOutlined
-										css={{ color: theme.palette.success.light }}
-									/>
-								}
 								title="Build template (Ctrl + Enter)"
 								disabled={!canBuild}
 								onClick={async () => {
 									await triggerPreview();
 								}}
 							>
+								<PlayIcon />
 								Build
 							</TopbarButton>
 							<ProvisionerTagsPopover
@@ -298,10 +284,10 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									onUpdateProvisionerTags(newTags);
 								}}
 							/>
-						</ButtonGroup>
+						</div>
 
 						<TopbarButton
-							variant="contained"
+							variant="default"
 							disabled={dirty || !canPublish}
 							onClick={onPublish}
 						>
@@ -555,6 +541,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									}}
 								>
 									<button
+										type="button"
 										disabled={!buildLogs}
 										css={styles.tab}
 										className={selectedTab === "logs" ? "active" : ""}
@@ -566,6 +553,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									</button>
 
 									<button
+										type="button"
 										disabled={!canPublish}
 										css={styles.tab}
 										className={selectedTab === "resources" ? "active" : ""}

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

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import ExpandMoreOutlined from "@mui/icons-material/ExpandMoreOutlined";
 import Button from "@mui/material/Button";
 import visuallyHidden from "@mui/utils/visuallyHidden";
 import { API } from "api/api";
@@ -25,6 +24,7 @@ import {
 	usePopover,
 } from "components/deprecated/Popover/Popover";
 import { useFormik } from "formik";
+import { ChevronDownIcon } from "lucide-react";
 import type { FC } from "react";
 import { useQuery } from "react-query";
 import { docs } from "utils/docs";
@@ -61,10 +61,9 @@ export const BuildParametersPopover: FC<BuildParametersPopoverProps> = ({
 				<TopbarButton
 					data-testid="build-parameters-button"
 					disabled={disabled}
-					color="neutral"
-					css={{ paddingLeft: 0, paddingRight: 0, minWidth: "28px !important" }}
+					className="min-w-fit"
 				>
-					<ExpandMoreOutlined css={{ fontSize: 14 }} />
+					<ChevronDownIcon />
 					<span css={{ ...visuallyHidden }}>{label}</span>
 				</TopbarButton>
 			</PopoverTrigger>

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

@@ -1,16 +1,16 @@
-import BlockIcon from "@mui/icons-material/Block";
-import OutlinedBlockIcon from "@mui/icons-material/BlockOutlined";
-import CloudQueueIcon from "@mui/icons-material/CloudQueue";
-import CropSquareIcon from "@mui/icons-material/CropSquare";
-import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
-import PowerSettingsNewIcon from "@mui/icons-material/PowerSettingsNew";
-import ReplayIcon from "@mui/icons-material/Replay";
-import Star from "@mui/icons-material/Star";
-import StarBorder from "@mui/icons-material/StarBorder";
-import ButtonGroup from "@mui/material/ButtonGroup";
 import Tooltip from "@mui/material/Tooltip";
 import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
+import {
+	BanIcon,
+	CirclePlayIcon,
+	CircleStopIcon,
+	CloudIcon,
+	PowerIcon,
+	RotateCcwIcon,
+	StarIcon,
+	StarOffIcon,
+} from "lucide-react";
 import type { FC } from "react";
 import { BuildParametersPopover } from "./BuildParametersPopover";
 
@@ -29,9 +29,9 @@ export const UpdateButton: FC<ActionButtonProps> = ({
 		<TopbarButton
 			disabled={loading}
 			data-testid="workspace-update-button"
-			startIcon={<CloudQueueIcon />}
 			onClick={() => handleAction()}
 		>
+			<CloudIcon />
 			{loading ? <>Updating&hellip;</> : <>Update&hellip;</>}
 		</TopbarButton>
 	);
@@ -42,11 +42,8 @@ export const ActivateButton: FC<ActionButtonProps> = ({
 	loading,
 }) => {
 	return (
-		<TopbarButton
-			disabled={loading}
-			startIcon={<PowerSettingsNewIcon />}
-			onClick={() => handleAction()}
-		>
+		<TopbarButton disabled={loading} onClick={() => handleAction()}>
+			<PowerIcon />
 			{loading ? <>Activating&hellip;</> : "Activate"}
 		</TopbarButton>
 	);
@@ -64,11 +61,8 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
 	tooltipText,
 }) => {
 	let mainButton = (
-		<TopbarButton
-			startIcon={<PlayCircleOutlineIcon />}
-			onClick={() => handleAction()}
-			disabled={disabled || loading}
-		>
+		<TopbarButton onClick={() => handleAction()} disabled={disabled || loading}>
+			<CirclePlayIcon />
 			{loading ? <>Starting&hellip;</> : "Start"}
 		</TopbarButton>
 	);
@@ -78,16 +72,7 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
 	}
 
 	return (
-		<ButtonGroup
-			variant="outlined"
-			sx={{
-				// Workaround to make the border transitions smoothly on button groups
-				"& > button:hover + button": {
-					borderLeft: "1px solid #FFF",
-				},
-			}}
-			disabled={disabled}
-		>
+		<div className="flex gap-1 items-center">
 			{mainButton}
 			<BuildParametersPopover
 				label="Start with build parameters"
@@ -95,7 +80,7 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
 				disabled={loading}
 				onSubmit={handleAction}
 			/>
-		</ButtonGroup>
+		</div>
 	);
 };
 
@@ -104,10 +89,8 @@ export const UpdateAndStartButton: FC<ActionButtonProps> = ({
 }) => {
 	return (
 		<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
-			<TopbarButton
-				startIcon={<PlayCircleOutlineIcon />}
-				onClick={() => handleAction()}
-			>
+			<TopbarButton onClick={() => handleAction()}>
+				<CirclePlayIcon />
 				Update and start&hellip;
 			</TopbarButton>
 		</Tooltip>
@@ -121,10 +104,10 @@ export const StopButton: FC<ActionButtonProps> = ({
 	return (
 		<TopbarButton
 			disabled={loading}
-			startIcon={<CropSquareIcon />}
 			onClick={() => handleAction()}
 			data-testid="workspace-stop-button"
 		>
+			<CircleStopIcon />
 			{loading ? <>Stopping&hellip;</> : "Stop"}
 		</TopbarButton>
 	);
@@ -136,21 +119,13 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
 	workspace,
 }) => {
 	return (
-		<ButtonGroup
-			variant="outlined"
-			css={{
-				// Workaround to make the border transitions smoothly on button groups
-				"& > button:hover + button": {
-					borderLeft: "1px solid #FFF",
-				},
-			}}
-		>
+		<div className="flex gap-1 items-center">
 			<TopbarButton
-				startIcon={<ReplayIcon />}
 				onClick={() => handleAction()}
 				data-testid="workspace-restart-button"
 				disabled={loading}
 			>
+				<RotateCcwIcon />
 				{loading ? <>Restarting&hellip;</> : <>Restart&hellip;</>}
 			</TopbarButton>
 			<BuildParametersPopover
@@ -159,7 +134,7 @@ export const RestartButton: FC<ActionButtonPropsWithWorkspace> = ({
 				disabled={loading}
 				onSubmit={handleAction}
 			/>
-		</ButtonGroup>
+		</div>
 	);
 };
 
@@ -168,7 +143,8 @@ export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
 }) => {
 	return (
 		<Tooltip title="This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version.">
-			<TopbarButton startIcon={<ReplayIcon />} onClick={() => handleAction()}>
+			<TopbarButton onClick={() => handleAction()}>
+				<RotateCcwIcon />
 				Update and restart&hellip;
 			</TopbarButton>
 		</Tooltip>
@@ -177,7 +153,8 @@ export const UpdateAndRestartButton: FC<ActionButtonProps> = ({
 
 export const CancelButton: FC<ActionButtonProps> = ({ handleAction }) => {
 	return (
-		<TopbarButton startIcon={<BlockIcon />} onClick={() => handleAction()}>
+		<TopbarButton onClick={() => handleAction()}>
+			<BanIcon />
 			Cancel
 		</TopbarButton>
 	);
@@ -189,7 +166,8 @@ interface DisabledButtonProps {
 
 export const DisabledButton: FC<DisabledButtonProps> = ({ label }) => {
 	return (
-		<TopbarButton startIcon={<OutlinedBlockIcon />} disabled>
+		<TopbarButton disabled>
+			<BanIcon />
 			{label}
 		</TopbarButton>
 	);
@@ -207,10 +185,8 @@ export const FavoriteButton: FC<FavoriteButtonProps> = ({
 	isFavorite,
 }) => {
 	return (
-		<TopbarButton
-			startIcon={isFavorite ? <Star /> : <StarBorder />}
-			onClick={() => onToggle(workspaceID)}
-		>
+		<TopbarButton onClick={() => onToggle(workspaceID)}>
+			{isFavorite ? <StarOffIcon /> : <StarIcon />}
 			{isFavorite ? "Unfavorite" : "Favorite"}
 		</TopbarButton>
 	);

site/src/pages/WorkspacePage/WorkspaceActions/DebugButton.tsx

@@ -1,7 +1,6 @@
-import DebugIcon from "@mui/icons-material/BugReportOutlined";
-import ButtonGroup from "@mui/material/ButtonGroup";
 import type { Workspace } from "api/typesGenerated";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
+import { BugIcon } from "lucide-react";
 import type { FC } from "react";
 import { BuildParametersPopover } from "./BuildParametersPopover";
 import type { ActionButtonProps } from "./Buttons";
@@ -17,7 +16,8 @@ export const DebugButton: FC<DebugButtonProps> = ({
 	enableBuildParameters,
 }) => {
 	const mainAction = (
-		<TopbarButton startIcon={<DebugIcon />} onClick={() => handleAction()}>
+		<TopbarButton onClick={() => handleAction()}>
+			<BugIcon />
 			Debug
 		</TopbarButton>
 	);
@@ -27,21 +27,13 @@ export const DebugButton: FC<DebugButtonProps> = ({
 	}
 
 	return (
-		<ButtonGroup
-			variant="outlined"
-			css={{
-				// Workaround to make the border transitions smoothly on button groups
-				"& > button:hover + button": {
-					borderLeft: "1px solid #FFF",
-				},
-			}}
-		>
+		<div className="flex gap-1 items-center">
 			{mainAction}
 			<BuildParametersPopover
 				label="Debug with build parameters"
 				workspace={workspace}
 				onSubmit={handleAction}
 			/>
-		</ButtonGroup>
+		</div>
 	);
 };

site/src/pages/WorkspacePage/WorkspaceActions/RetryButton.tsx

@@ -1,7 +1,6 @@
-import RetryIcon from "@mui/icons-material/CachedOutlined";
-import ButtonGroup from "@mui/material/ButtonGroup";
 import type { Workspace } from "api/typesGenerated";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
+import { RotateCcwIcon } from "lucide-react";
 import type { FC } from "react";
 import { BuildParametersPopover } from "./BuildParametersPopover";
 import type { ActionButtonProps } from "./Buttons";
@@ -17,7 +16,8 @@ export const RetryButton: FC<RetryButtonProps> = ({
 	enableBuildParameters,
 }) => {
 	const mainAction = (
-		<TopbarButton startIcon={<RetryIcon />} onClick={() => handleAction()}>
+		<TopbarButton onClick={() => handleAction()}>
+			<RotateCcwIcon />
 			Retry
 		</TopbarButton>
 	);
@@ -27,21 +27,13 @@ export const RetryButton: FC<RetryButtonProps> = ({
 	}
 
 	return (
-		<ButtonGroup
-			variant="outlined"
-			css={{
-				// Workaround to make the border transitions smoothly on button groups
-				"& > button:hover + button": {
-					borderLeft: "1px solid #FFF",
-				},
-			}}
-		>
+		<div className="flex gap-1 items-center">
 			{mainAction}
 			<BuildParametersPopover
 				label="Retry with build parameters"
 				workspace={workspace}
 				onSubmit={handleAction}
 			/>
-		</ButtonGroup>
+		</div>
 	);
 };