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

Commit30a910b

Browse files
chore: replace MUI Button - 2 (#17953)
1. IconField.tsx2. SelectMenu.tsx3. RichParameterInput.tsx4. MissingTemplateVariablesDialog.tsx5. LoginPageView.tsx
1 parent94c129c commit30a910b

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-
importButtonfrom"@mui/material/Button";
32
importInputAdornmentfrom"@mui/material/InputAdornment";
43
importTextField,{typeTextFieldProps}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{typeFC,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-
<Stackspacing={1}>
42+
<divclassName="flex items-center gap-2">
4443
<TextField
4544
fullWidth
4645
label="Icon"
@@ -93,14 +92,12 @@ export const IconField: FC<IconFieldProps> = ({
9392
/>
9493
<Popoveropen={open}onOpenChange={setOpen}>
9594
<PopoverTrigger>
96-
<ButtonfullWidthendIcon={<DropdownArrow/>}>
97-
Select emoji
95+
<Buttonvariant="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+
<PopoverContentid="emoji"horizontal="right">
104101
<Suspensefallback={<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
importtype{Interpolation,Theme}from"@emotion/react";
2-
importButtonfrom"@mui/material/Button";
32
importFormControlLabelfrom"@mui/material/FormControlLabel";
43
importFormHelperTextfrom"@mui/material/FormHelperText";
54
importtype{InputBaseComponentProps}from"@mui/material/InputBase";
@@ -8,6 +7,7 @@ import RadioGroup from "@mui/material/RadioGroup";
87
importTextField,{typeTextFieldProps}from"@mui/material/TextField";
98
importTooltipfrom"@mui/material/Tooltip";
109
importtype{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-
importButton,{typeButtonProps}from"@mui/material/Button";
21
importMenuItem,{typeMenuItemProps}from"@mui/material/MenuItem";
32
importMenuList,{typeMenuListProps}from"@mui/material/MenuList";
4-
import{DropdownArrow}from"components/DropdownArrow/DropdownArrow";
3+
import{Button,typeButtonProps}from"components/Button/Button";
54
import{
65
SearchField,
76
typeSearchFieldProps,
@@ -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
typeFC,
@@ -30,46 +29,25 @@ export const SelectMenuTrigger = PopoverTrigger;
3029

3130
exportconstSelectMenuContent=PopoverContent;
3231

33-
exportconstSelectMenuButton=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+
exporttypeSelectMenuButtonProps=ButtonProps&{
33+
startIcon?:React.ReactNode;
34+
};
35+
36+
exportconstSelectMenuButton=forwardRef<
37+
HTMLButtonElement,
38+
SelectMenuButtonProps
39+
>((props,ref)=>{
40+
const{ startIcon, ...restProps}=props;
41+
return(
42+
<Buttonvariant="outline"size="lg"ref={ref}{...restProps}>
43+
{startIcon}
44+
<spanclassName="text-left block overflow-hidden text-ellipsis flex-grow">
45+
{props.children}
46+
</span>
47+
<ChevronDownIcon/>
48+
</Button>
49+
);
50+
});
7351

7452
exportconstSelectMenuSearch: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
importtype{Interpolation,Theme}from"@emotion/react";
2-
importButtonfrom"@mui/material/Button";
32
importtype{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{typeFC,useState}from"react";
@@ -44,7 +44,13 @@ export const LoginPageView: FC<LoginPageViewProps> = ({
4444
) :tosAcceptanceRequired ?(
4545
<>
4646
<TermsOfServiceLinkurl={authMethods.terms_of_service_url}/>
47-
<ButtononClick={()=>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
importtype{Interpolation,Theme}from"@emotion/react";
3-
importButtonfrom"@mui/material/Button";
43
importDialogfrom"@mui/material/Dialog";
54
importDialogActionsfrom"@mui/material/DialogActions";
65
importDialogContentfrom"@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
importtype{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
<DialogActionsdisableSpacingcss={styles.dialogActions}>
96-
<Buttoncolor="primary"fullWidthtype="submit"form="updateVariables">
96+
<ButtonclassName="w-full"type="submit"form="updateVariables">
9797
Submit
9898
</Button>
99-
<ButtonfullWidthtype="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)
[8]ページ先頭
©2009-2025 Movatter.jp