Skip to content

Commit 30a910b

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore: replace MUI Button - 2 (#17953)
1. IconField.tsx 2. SelectMenu.tsx 3. RichParameterInput.tsx 4. MissingTemplateVariablesDialog.tsx 5. LoginPageView.tsx
1 parent 94c129c commit 30a910b

File tree

6 files changed

+50
-61
lines changed

6 files changed

+50
-61
lines changed

‎site/src/components/Filter/SelectFilter.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export const SelectFilter: FC<SelectFilterProps> = ({
5353
<SelectMenuButton
5454
startIcon={selectedOption?.startIcon}
5555
css={{ flexBasis: width, flexGrow: 1 }}
56+
className="shrink-0"
5657
aria-label={label}
5758
>
5859
{selectedOption?.label ?? placeholder}

‎site/src/components/IconField/IconField.tsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import { Global, css, useTheme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
32
import InputAdornment from "@mui/material/InputAdornment";
43
import TextField, { type TextFieldProps } from "@mui/material/TextField";
54
import { visuallyHidden } from "@mui/utils";
6-
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
5+
import { Button } from "components/Button/Button";
76
import { ExternalImage } from "components/ExternalImage/ExternalImage";
87
import { Loader } from "components/Loader/Loader";
9-
import { Stack } from "components/Stack/Stack";
108
import {
119
Popover,
1210
PopoverContent,
1311
PopoverTrigger,
1412
} from "components/deprecated/Popover/Popover";
13+
import { ChevronDownIcon } from "lucide-react";
1514
import { type FC, Suspense, lazy, useState } from "react";
1615

1716
// See: https://github.com/missive/emoji-mart/issues/51#issuecomment-287353222
@@ -40,7 +39,7 @@ export const IconField: FC<IconFieldProps> = ({
4039
const [open, setOpen] = useState(false);
4140

4241
return (
43-
<Stack spacing={1}>
42+
<div className="flex items-center gap-2">
4443
<TextField
4544
fullWidth
4645
label="Icon"
@@ -93,14 +92,12 @@ export const IconField: FC<IconFieldProps> = ({
9392
/>
9493
<Popover open={open} onOpenChange={setOpen}>
9594
<PopoverTrigger>
96-
<Button fullWidth endIcon={<DropdownArrow />}>
97-
Select emoji
95+
<Button variant="outline" size="lg" className="flex-shrink-0">
96+
Emoji
97+
<ChevronDownIcon />
9898
</Button>
9999
</PopoverTrigger>
100-
<PopoverContent
101-
id="emoji"
102-
css={{ marginTop: 0, ".MuiPaper-root": { width: "auto" } }}
103-
>
100+
<PopoverContent id="emoji" horizontal="right">
104101
<Suspense fallback={<Loader />}>
105102
<EmojiPicker
106103
onEmojiSelect={(emoji) => {
@@ -128,6 +125,6 @@ export const IconField: FC<IconFieldProps> = ({
128125
</Suspense>
129126
</div>
130127
)}
131-
</Stack>
128+
</div>
132129
);
133130
};

‎site/src/components/RichParameterInput/RichParameterInput.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
32
import FormControlLabel from "@mui/material/FormControlLabel";
43
import FormHelperText from "@mui/material/FormHelperText";
54
import type { InputBaseComponentProps } from "@mui/material/InputBase";
@@ -8,6 +7,7 @@ import RadioGroup from "@mui/material/RadioGroup";
87
import TextField, { type TextFieldProps } from "@mui/material/TextField";
98
import Tooltip from "@mui/material/Tooltip";
109
import type { TemplateVersionParameter } from "api/typesGenerated";
10+
import { Button } from "components/Button/Button";
1111
import { ExternalImage } from "components/ExternalImage/ExternalImage";
1212
import { MemoizedMarkdown } from "components/Markdown/Markdown";
1313
import { Pill } from "components/Pill/Pill";
@@ -240,7 +240,9 @@ export const RichParameterInput: FC<RichParameterInputProps> = ({
240240
!hideSuggestion && (
241241
<FormHelperText>
242242
<Button
243-
variant="text"
243+
variant="subtle"
244+
size="xs"
245+
className="p-1 min-w-0"
244246
css={styles.suggestion}
245247
onClick={() => {
246248
onChange(autofillValue);

‎site/src/components/SelectMenu/SelectMenu.tsx

Lines changed: 21 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import Button, { type ButtonProps } from "@mui/material/Button";
21
import MenuItem, { type MenuItemProps } from "@mui/material/MenuItem";
32
import MenuList, { type MenuListProps } from "@mui/material/MenuList";
4-
import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
3+
import { Button, type ButtonProps } from "components/Button/Button";
54
import {
65
SearchField,
76
type SearchFieldProps,
@@ -11,7 +10,7 @@ import {
1110
PopoverContent,
1211
PopoverTrigger,
1312
} from "components/deprecated/Popover/Popover";
14-
import { CheckIcon } from "lucide-react";
13+
import { CheckIcon, ChevronDownIcon } from "lucide-react";
1514
import {
1615
Children,
1716
type FC,
@@ -30,46 +29,25 @@ export const SelectMenuTrigger = PopoverTrigger;
3029

3130
export const SelectMenuContent = PopoverContent;
3231

33-
export const SelectMenuButton = forwardRef<HTMLButtonElement, ButtonProps>(
34-
(props, ref) => {
35-
return (
36-
<Button
37-
css={{
38-
// Icon and text should be aligned to the left
39-
justifyContent: "flex-start",
40-
flexShrink: 0,
41-
"& .MuiButton-startIcon": {
42-
marginLeft: 0,
43-
marginRight: SIDE_PADDING,
44-
},
45-
// Dropdown arrow should be at the end of the button
46-
"& .MuiButton-endIcon": {
47-
marginLeft: "auto",
48-
},
49-
}}
50-
endIcon={<DropdownArrow />}
51-
ref={ref}
52-
{...props}
53-
// MUI applies a style that affects the sizes of start icons.
54-
// .MuiButton-startIcon > *:nth-of-type(1) { font-size: 20px }. To
55-
// prevent this from breaking the inner components of startIcon, we wrap
56-
// it in a div.
57-
startIcon={props.startIcon && <div>{props.startIcon}</div>}
58-
>
59-
<span
60-
// Make sure long text does not break the button layout
61-
css={{
62-
display: "block",
63-
overflow: "hidden",
64-
textOverflow: "ellipsis",
65-
}}
66-
>
67-
{props.children}
68-
</span>
69-
</Button>
70-
);
71-
},
72-
);
32+
export type SelectMenuButtonProps = ButtonProps & {
33+
startIcon?: React.ReactNode;
34+
};
35+
36+
export const SelectMenuButton = forwardRef<
37+
HTMLButtonElement,
38+
SelectMenuButtonProps
39+
>((props, ref) => {
40+
const { startIcon, ...restProps } = props;
41+
return (
42+
<Button variant="outline" size="lg" ref={ref} {...restProps}>
43+
{startIcon}
44+
<span className="text-left block overflow-hidden text-ellipsis flex-grow">
45+
{props.children}
46+
</span>
47+
<ChevronDownIcon />
48+
</Button>
49+
);
50+
});
7351

7452
export const SelectMenuSearch: FC<SearchFieldProps> = (props) => {
7553
return (

‎site/src/pages/LoginPage/LoginPageView.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { Interpolation, Theme } from "@emotion/react";
2-
import Button from "@mui/material/Button";
32
import type { AuthMethods, BuildInfoResponse } from "api/typesGenerated";
3+
import { Button } from "components/Button/Button";
44
import { CustomLogo } from "components/CustomLogo/CustomLogo";
55
import { Loader } from "components/Loader/Loader";
66
import { type FC, useState } from "react";
@@ -44,7 +44,13 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
4444
) : tosAcceptanceRequired ? (
4545
<>
4646
<TermsOfServiceLink url={authMethods.terms_of_service_url} />
47-
<Button onClick={() => setTosAccepted(true)}>I agree</Button>
47+
<Button
48+
size="lg"
49+
className="w-full"
50+
onClick={() => setTosAccepted(true)}
51+
>
52+
I agree
53+
</Button>
4854
</>
4955
) : (
5056
<SignInForm

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { css } from "@emotion/css";
22
import type { Interpolation, Theme } from "@emotion/react";
3-
import Button from "@mui/material/Button";
43
import Dialog from "@mui/material/Dialog";
54
import DialogActions from "@mui/material/DialogActions";
65
import DialogContent from "@mui/material/DialogContent";
@@ -10,6 +9,7 @@ import type {
109
TemplateVersionVariable,
1110
VariableValue,
1211
} from "api/typesGenerated";
12+
import { Button } from "components/Button/Button";
1313
import type { DialogProps } from "components/Dialogs/Dialog";
1414
import { FormFields, VerticalForm } from "components/Form/Form";
1515
import { Loader } from "components/Loader/Loader";
@@ -93,10 +93,15 @@ export const MissingTemplateVariablesDialog: FC<
9393
</VerticalForm>
9494
</DialogContent>
9595
<DialogActions disableSpacing css={styles.dialogActions}>
96-
<Button color="primary" fullWidth type="submit" form="updateVariables">
96+
<Button className="w-full" type="submit" form="updateVariables">
9797
Submit
9898
</Button>
99-
<Button fullWidth type="button" onClick={dialogProps.onClose}>
99+
<Button
100+
variant="outline"
101+
className="w-full"
102+
type="button"
103+
onClick={dialogProps.onClose}
104+
>
100105
Cancel
101106
</Button>
102107
</DialogActions>

0 commit comments

Comments
 (0)