Skip to content

chore: replace MUI Button - 2 #17953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 23, 2025
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
chore: replace MUI Button - 2
  • Loading branch information
BrunoQuaresma committed May 20, 2025
commit ee0e7f83fdc1d6d56fa62436a86492cba501532b
19 changes: 8 additions & 11 deletions site/src/components/IconField/IconField.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -128,6 +125,6 @@ export const IconField: FC<IconFieldProps> = ({
</Suspense>
</div>
)}
</Stack>
</div>
);
};
6 changes: 4 additions & 2 deletions site/src/components/RichParameterInput/RichParameterInput.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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);
Expand Down
76 changes: 34 additions & 42 deletions site/src/components/SelectMenu/SelectMenu.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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,
Expand All @@ -30,46 +29,39 @@ 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>}
export type SelectMenuButtonProps = ButtonProps & {
startIcon?: React.ReactNode;
};

export const SelectMenuButton = forwardRef<
HTMLButtonElement,
SelectMenuButtonProps
>((props, ref) => {
const { startIcon, ...restProps } = props;
return (
<Button
css={{
// Icon and text should be aligned to the left
justifyContent: "flex-start",
flexShrink: 0,
}}
variant="outline"
size="lg"
className="flex items-center gap-2"
ref={ref}
{...restProps}
>
{startIcon && <div>{startIcon}</div>}
<span
// Make sure long text does not break the button layout
className="text-left block overflow-hidden text-ellipsis flex-grow"
>
<span
// Make sure long text does not break the button layout
css={{
display: "block",
overflow: "hidden",
textOverflow: "ellipsis",
}}
>
{props.children}
</span>
</Button>
);
},
);
{props.children}
</span>
<ChevronDownIcon />
</Button>
);
});

export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
return (
Expand Down
10 changes: 8 additions & 2 deletions site/src/pages/LoginPage/LoginPageView.tsx
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -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>
Expand Down