Skip to content

Commit a18efbf

Browse files
steven11329steven11329
committed
refactor: adjust dailog button style
1 parent 92544e7 commit a18efbf

File tree

3 files changed

+158
-44
lines changed

3 files changed

+158
-44
lines changed

‎src/components/Button/DialogButton/DialogButton.stories.tsx

Lines changed: 86 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,28 @@
11
import React from 'react';
22
import { Meta, Story } from '@storybook/react';
3+
import { styled } from '@mui/material';
4+
35
import DialogButton from './DialogButton';
46
import { DialogButtonProps } from './DialogButton.types';
57

8+
const Title = styled('h2')`
9+
color: white;
10+
text-shadow: 0 0 2px black;
11+
`;
12+
13+
const Block = styled('div')`
14+
margin-bottom: 8px;
15+
`;
16+
617
export default {
718
title: 'Components/Button/DialogButton',
819
component: DialogButton,
920
argTypes: {
10-
color: {
11-
options: ['primary', 'secondary', 'success', 'error', 'info', 'warning'],
12-
control: { type: 'radio' },
13-
},
14-
variant: {
15-
options: ['contained', 'outlined', 'text', 'string'],
16-
control: { type: 'radio' },
21+
mode: {
22+
control: {
23+
type: 'radio',
24+
options: ['dark', 'light'],
25+
},
1726
},
1827
fullWidth: {
1928
control: {
@@ -38,14 +47,79 @@ export default {
3847
},
3948
} as Meta;
4049

41-
const Template: Story<DialogButtonProps> = (args) => <DialogButton {...args} />;
50+
const Template: Story<DialogButtonProps> = (args) => (
51+
<>
52+
<Title>variant="text"</Title>
53+
<Block>
54+
<DialogButton color="primary" variant="text" {...args}>
55+
Primary
56+
</DialogButton>
57+
<DialogButton color="secondary" variant="text" {...args}>
58+
Secondary
59+
</DialogButton>
60+
<DialogButton color="success" variant="text" {...args}>
61+
Success
62+
</DialogButton>
63+
<DialogButton color="warning" variant="text" {...args}>
64+
Warning
65+
</DialogButton>
66+
<DialogButton color="info" variant="text" {...args}>
67+
info
68+
</DialogButton>
69+
<DialogButton color="error" variant="text" {...args}>
70+
Error
71+
</DialogButton>
72+
</Block>
73+
<Title>variant="contained"</Title>
74+
<Block>
75+
<DialogButton color="primary" variant="contained" {...args}>
76+
Primary
77+
</DialogButton>
78+
<DialogButton color="secondary" variant="contained" {...args}>
79+
Secondary
80+
</DialogButton>
81+
<DialogButton color="success" variant="contained" {...args}>
82+
Success
83+
</DialogButton>
84+
<DialogButton color="warning" variant="contained" {...args}>
85+
Warning
86+
</DialogButton>
87+
<DialogButton color="info" variant="contained" {...args}>
88+
info
89+
</DialogButton>
90+
<DialogButton color="error" variant="contained" {...args}>
91+
Error
92+
</DialogButton>
93+
</Block>
94+
<Title>variant="outlined"</Title>
95+
<Block>
96+
<DialogButton color="primary" variant="outlined" {...args}>
97+
Primary
98+
</DialogButton>
99+
<DialogButton color="secondary" variant="outlined" {...args}>
100+
Secondary
101+
</DialogButton>
102+
<DialogButton color="success" variant="outlined" {...args}>
103+
Success
104+
</DialogButton>
105+
<DialogButton color="warning" variant="outlined" {...args}>
106+
Warning
107+
</DialogButton>
108+
<DialogButton color="info" variant="outlined" {...args}>
109+
info
110+
</DialogButton>
111+
<DialogButton color="error" variant="outlined" {...args}>
112+
Error
113+
</DialogButton>
114+
</Block>
115+
</>
116+
);
42117

43118
export const Default: Story<DialogButtonProps> = Template.bind({});
44119

45120
Default.args = {
46-
color: 'primary',
47-
variant: 'contained',
48-
children: 'Back',
121+
sx: { margin: '0 8px' },
122+
mode: 'dark',
49123
fullWidth: false,
50124
disabled: false,
51125
previousIcon: false,
@@ -59,18 +133,10 @@ DefaultLight.parameters = {
59133
default: 'light',
60134
},
61135
};
136+
62137
DefaultLight.args = {
63138
...Default.args,
64139
mode: 'light',
65-
color: 'secondary',
66-
variant: 'outlined',
67-
};
68-
69-
export const Loading: Story<DialogButtonProps> = Template.bind({});
70-
71-
Loading.args = {
72-
...Default.args,
73-
isLoading: true,
74140
};
75141

76142
export const WithIcon: Story<DialogButtonProps> = Template.bind({});

‎src/components/Button/DialogButton/DialogButton.tsx

Lines changed: 72 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import classnames from 'classnames';
21
import React from 'react';
32
import MUIButton from '@mui/material/Button';
43
import ChevronLeft from '@mui/icons-material/ChevronLeft';
@@ -38,17 +37,30 @@ const Button = styled(MUIButton)<ButtonProps>`
3837
3938
${({ theme }) => ({
4039
...theme.typography.body2,
40+
'&.MuiButton-text': {
41+
'&[mode="light"]': {
42+
color: theme.color.secondary.$60,
43+
},
44+
},
45+
46+
'&.Mui-disabled': {
47+
color: 'white',
48+
'&[mode="light"]': {
49+
color: theme.color.secondary.$100,
50+
},
51+
},
52+
53+
'&.MuiButton-contained': {
54+
'&[mode="light"]': {
55+
color: 'white',
56+
},
57+
},
58+
4159
'&.MuiButton-containedPrimary': {
4260
'&:hover': {
4361
backgroundColor: theme.color.primary.$80,
4462
},
45-
'&.loading': {
46-
pointerEvents: 'none',
47-
border: `1px solid ${theme.color.primary.$100}`,
48-
backgroundColor: 'rgba(255, 255, 255, 0.1)',
49-
},
5063
'&.Mui-disabled': {
51-
color: 'white',
5264
backgroundColor: theme.color.primary.$80,
5365
},
5466
},
@@ -59,20 +71,31 @@ const Button = styled(MUIButton)<ButtonProps>`
5971
backgroundColor: 'rgba(255, 255, 255, 0.1)',
6072
},
6173
'&.Mui-disabled': {
62-
color: 'white',
6374
backgroundColor: theme.color.secondary.$80,
6475
},
6576
},
6677
6778
'&.MuiButton-containedSuccess': {
68-
border: `1px solid ${theme.color.green.$100}`,
69-
backgroundColor: 'rgba(255, 255, 255, 0.1)',
70-
'&:hover': {
71-
backgroundColor: 'rgba(255, 255, 255, 0.1)',
79+
'&.Mui-disabled': {
80+
backgroundColor: theme.palette.success.dark,
7281
},
82+
},
83+
84+
'&.MuiButton-containedWarning': {
7385
'&.Mui-disabled': {
74-
color: 'white',
75-
backgroundColor: 'rgba(255, 255, 255, 0.1)',
86+
backgroundColor: theme.palette.warning.dark,
87+
},
88+
},
89+
90+
'&.MuiButton-containedInfo': {
91+
'&.Mui-disabled': {
92+
backgroundColor: theme.palette.info.dark,
93+
},
94+
},
95+
96+
'&.MuiButton-containedError': {
97+
'&.Mui-disabled': {
98+
backgroundColor: theme.palette.error.dark,
7699
},
77100
},
78101
@@ -85,30 +108,56 @@ const Button = styled(MUIButton)<ButtonProps>`
85108
},
86109
},
87110
111+
'&.MuiButton-outlinedPrimary': {
112+
'&.Mui-disabled': {
113+
border: `1px solid ${theme.palette.primary.dark}`,
114+
},
115+
},
116+
88117
'&.MuiButton-outlinedSecondary': {
89-
borderColor: `1px solid ${theme.color.secondary.$60}`,
90-
'&:hover': {
91-
borderColor: theme.color.secondary.$100,
118+
'&[mode="dark"]': {
119+
borderColor: 'white',
120+
'&:hover': {
121+
backgroundColor: 'rgba(255, 255, 255, 0.1)',
122+
},
123+
},
124+
},
125+
126+
'&.MuiButton-outlinedSuccess': {
127+
'&.Mui-disabled': {
128+
border: `1px solid ${theme.palette.success.dark}`,
129+
},
130+
},
131+
132+
'&.MuiButton-outlinedWarning': {
133+
'&.Mui-disabled': {
134+
border: `1px solid ${theme.palette.warning.dark}`,
135+
},
136+
},
137+
138+
'&.MuiButton-outlinedInfo': {
139+
'&.Mui-disabled': {
140+
border: `1px solid ${theme.palette.info.dark}`,
141+
},
142+
},
143+
144+
'&.MuiButton-outlinedError': {
145+
'&.Mui-disabled': {
146+
border: `1px solid ${theme.palette.error.dark}`,
92147
},
93148
},
94149
})}
95150
`;
96151

97152
const DialogButton: React.VFC<DialogButtonProps> = ({
98-
className,
99153
mode = 'dark',
100154
previousIcon,
101155
nextIcon,
102-
isLoading = false,
103156
...props
104157
}) => {
105158
return (
106159
<Button
107160
mode={mode}
108-
className={classnames({
109-
className,
110-
loading: isLoading,
111-
})}
112161
startIcon={previousIcon && <ChevronLeft />}
113162
endIcon={nextIcon && <ChevronRight />}
114163
{...props}

‎src/components/Button/DialogButton/DialogButton.types.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,4 @@ export interface DialogButtonProps extends ButtonProps {
44
mode?: 'dark' | 'light';
55
previousIcon?: boolean;
66
nextIcon?: boolean;
7-
isLoading?: boolean;
87
}

0 commit comments

Comments
 (0)