chore: replace MUI Button - 2 (#17953)

1. IconField.tsx
2. SelectMenu.tsx
3. RichParameterInput.tsx
4. MissingTemplateVariablesDialog.tsx
5. LoginPageView.tsx

site/src/components/Filter/SelectFilter.tsx

@@ -53,6 +53,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
 				<SelectMenuButton
 					startIcon={selectedOption?.startIcon}
 					css={{ flexBasis: width, flexGrow: 1 }}
+					className="shrink-0"
 					aria-label={label}
 				>
 					{selectedOption?.label ?? placeholder}

site/src/components/IconField/IconField.tsx

@@ -1,17 +1,16 @@
 import { Global, css, useTheme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import { visuallyHidden } from "@mui/utils";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { Loader } from "components/Loader/Loader";
-import { Stack } from "components/Stack/Stack";
 import {
 	Popover,
 	PopoverContent,
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
+import { ChevronDownIcon } from "lucide-react";
 import { type FC, Suspense, lazy, useState } from "react";
 
 // See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
@@ -40,7 +39,7 @@ export const IconField: FC<IconFieldProps> = ({
 	const [open, setOpen] = useState(false);
 
 	return (
-		<Stack spacing={1}>
+		<div className="flex items-center gap-2">
 			<TextField
 				fullWidth
 				label="Icon"
@@ -93,14 +92,12 @@ export const IconField: FC<IconFieldProps> = ({
 			/>
 			<Popover open={open} onOpenChange={setOpen}>
 				<PopoverTrigger>
-					<Button fullWidth endIcon={<DropdownArrow />}>
-						Select emoji
+					<Button variant="outline" size="lg" className="flex-shrink-0">
+						Emoji
+						<ChevronDownIcon />
 					</Button>
 				</PopoverTrigger>
-				<PopoverContent
-					id="emoji"
-					css={{ marginTop: 0, ".MuiPaper-root": { width: "auto" } }}
-				>
+				<PopoverContent id="emoji" horizontal="right">
 					<Suspense fallback={<Loader />}>
 						<EmojiPicker
 							onEmojiSelect={(emoji) => {
@@ -128,6 +125,6 @@ export const IconField: FC<IconFieldProps> = ({
 					</Suspense>
 				</div>
 			)}
-		</Stack>
+		</div>
 	);
 };

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -1,5 +1,4 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormHelperText from "@mui/material/FormHelperText";
 import type { InputBaseComponentProps } from "@mui/material/InputBase";
@@ -8,6 +7,7 @@ import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import type { TemplateVersionParameter } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { Pill } from "components/Pill/Pill";
@@ -240,7 +240,9 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
 					!hideSuggestion && (
 						<FormHelperText>
 							<Button
-								variant="text"
+								variant="subtle"
+								size="xs"
+								className="p-1 min-w-0"
 								css={styles.suggestion}
 								onClick={() => {
 									onChange(autofillValue);

site/src/components/SelectMenu/SelectMenu.tsx

@@ -1,7 +1,6 @@
-import Button, { type ButtonProps } from "@mui/material/Button";
 import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
 import MenuList, { type MenuListProps } from "@mui/material/MenuList";
-import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	SearchField,
 	type SearchFieldProps,
@@ -11,7 +10,7 @@ import {
 	PopoverContent,
 	PopoverTrigger,
 } from "components/deprecated/Popover/Popover";
-import { CheckIcon } from "lucide-react";
+import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import {
 	Children,
 	type FC,
@@ -30,46 +29,25 @@ export const SelectMenuTrigger = PopoverTrigger;
 
 export const SelectMenuContent = PopoverContent;
 
-export const SelectMenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
-	(props, ref) => {
-		return (
-			<Button
-				css={{
-					// Icon and text should be aligned to the left
-					justifyContent: "flex-start",
-					flexShrink: 0,
-					"& .MuiButton-startIcon": {
-						marginLeft: 0,
-						marginRight: SIDE_PADDING,
-					},
-					// Dropdown arrow should be at the end of the button
-					"& .MuiButton-endIcon": {
-						marginLeft: "auto",
-					},
-				}}
-				endIcon={<DropdownArrow />}
-				ref={ref}
-				{...props}
-				// MUI applies a style that affects the sizes of start icons.
-				// .MuiButton-startIcon > *:nth-of-type(1) { font-size: 20px }. To
-				// prevent this from breaking the inner components of startIcon, we wrap
-				// it in a div.
-				startIcon={props.startIcon && <div>{props.startIcon}</div>}
-			>
-				<span
-					// Make sure long text does not break the button layout
-					css={{
-						display: "block",
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-					}}
-				>
-					{props.children}
-				</span>
-			</Button>
-		);
-	},
-);
+export type SelectMenuButtonProps = ButtonProps & {
+	startIcon?: React.ReactNode;
+};
+
+export const SelectMenuButton = forwardRef<
+	HTMLButtonElement,
+	SelectMenuButtonProps
+>((props, ref) => {
+	const { startIcon, ...restProps } = props;
+	return (
+		<Button variant="outline" size="lg" ref={ref} {...restProps}>
+			{startIcon}
+			<span className="text-left block overflow-hidden text-ellipsis flex-grow">
+				{props.children}
+			</span>
+			<ChevronDownIcon />
+		</Button>
+	);
+});
 
 export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
 	return (

site/src/pages/LoginPage/LoginPageView.tsx

@@ -1,6 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import type { AuthMethods, BuildInfoResponse } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import { CustomLogo } from "components/CustomLogo/CustomLogo";
 import { Loader } from "components/Loader/Loader";
 import { type FC, useState } from "react";
@@ -44,7 +44,13 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
 				) : tosAcceptanceRequired ? (
 					<>
 						<TermsOfServiceLink url={authMethods.terms_of_service_url} />
-						<Button onClick={() => setTosAccepted(true)}>I agree</Button>
+						<Button
+							size="lg"
+							className="w-full"
+							onClick={() => setTosAccepted(true)}
+						>
+							I agree
+						</Button>
 					</>
 				) : (
 					<SignInForm

site/src/pages/TemplateVersionEditorPage/MissingTemplateVariablesDialog.tsx

@@ -1,6 +1,5 @@
 import { css } from "@emotion/css";
 import type { Interpolation, Theme } from "@emotion/react";
-import Button from "@mui/material/Button";
 import Dialog from "@mui/material/Dialog";
 import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
@@ -10,6 +9,7 @@ import type {
 	TemplateVersionVariable,
 	VariableValue,
 } from "api/typesGenerated";
+import { Button } from "components/Button/Button";
 import type { DialogProps } from "components/Dialogs/Dialog";
 import { FormFields, VerticalForm } from "components/Form/Form";
 import { Loader } from "components/Loader/Loader";
@@ -93,10 +93,15 @@ export const MissingTemplateVariablesDialog: FC<
 				</VerticalForm>
 			</DialogContent>
 			<DialogActions disableSpacing css={styles.dialogActions}>
-				<Button color="primary" fullWidth type="submit" form="updateVariables">
+				<Button className="w-full" type="submit" form="updateVariables">
 					Submit
 				</Button>
-				<Button fullWidth type="button" onClick={dialogProps.onClose}>
+				<Button
+					variant="outline"
+					className="w-full"
+					type="button"
+					onClick={dialogProps.onClose}
+				>
 					Cancel
 				</Button>
 			</DialogActions>