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

Commit2b12bee

Browse files
authored
feat: Update success confirmation dialog and snackbar (#2005)
* feat: update success confirmation dialog and snackbar* add success variants to confirm dialog and snackbar* update story name* use success variant for snackbar
1 parent37aff0c commit2b12bee

File tree

7 files changed

+120
-38
lines changed

7 files changed

+120
-38
lines changed

‎site/src/components/ConfirmDialog/ConfirmDialog.stories.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,24 @@ InfoDialog.args = {
3636
hideCancel:true,
3737
type:"info",
3838
}
39+
40+
exportconstInfoDialogWithCancel=Template.bind({})
41+
InfoDialogWithCancel.args={
42+
description:"Information can be cool!",
43+
hideCancel:false,
44+
type:"info",
45+
}
46+
47+
exportconstSuccessDialog=Template.bind({})
48+
SuccessDialog.args={
49+
description:"I am successful.",
50+
hideCancel:true,
51+
type:"success",
52+
}
53+
54+
exportconstSuccessDialogWithCancel=Template.bind({})
55+
SuccessDialogWithCancel.args={
56+
description:"I may be successful.",
57+
hideCancel:false,
58+
type:"success",
59+
}

‎site/src/components/ConfirmDialog/ConfirmDialog.tsx

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ const CONFIRM_DIALOG_DEFAULTS: Record<ConfirmDialogType, ConfirmDialogTypeConfig
1919
confirmText:"OK",
2020
hideCancel:true,
2121
},
22+
success:{
23+
confirmText:"OK",
24+
hideCancel:true,
25+
},
2226
}
2327

2428
exportinterfaceConfirmDialogPropsextendsOmit<DialogActionButtonsProps,"color"|"confirmDialog"|"onCancel">{
@@ -41,40 +45,32 @@ export interface ConfirmDialogProps extends Omit<DialogActionButtonsProps, "colo
4145
readonlytitle:string
4246
}
4347

44-
interfaceStyleProps{
45-
type:ConfirmDialogType
46-
}
47-
4848
constuseStyles=makeStyles((theme)=>({
49-
dialogWrapper:(props:StyleProps)=>({
49+
dialogWrapper:{
5050
"& .MuiPaper-root":{
51-
background:props.type==="info" ?theme.palette.primary.main :theme.palette.background.paper,
51+
background:theme.palette.background.paper,
5252
border:`1px solid${theme.palette.divider}`,
5353
},
5454
"& .MuiDialogActions-spacing":{
5555
padding:`0${theme.spacing(3.75)}px${theme.spacing(3.75)}px`,
5656
},
57-
}),
58-
dialogContent:(props:StyleProps)=>({
59-
color:props.type==="info" ?theme.palette.primary.contrastText :theme.palette.text.secondary,
57+
},
58+
dialogContent:{
59+
color:theme.palette.text.secondary,
6060
padding:theme.spacing(6),
6161
textAlign:"center",
62-
}),
62+
},
6363
titleText:{
6464
marginBottom:theme.spacing(3),
6565
},
66-
description:(props:StyleProps)=>({
67-
color:
68-
props.type==="info" ?fade(theme.palette.primary.contrastText,0.75) :fade(theme.palette.text.secondary,0.75),
66+
description:{
67+
color:fade(theme.palette.text.secondary,0.75),
6968
lineHeight:"160%",
7069

7170
"& strong":{
72-
color:
73-
props.type==="info"
74-
?fade(theme.palette.primary.contrastText,0.95)
75-
:fade(theme.palette.text.secondary,0.95),
71+
color:fade(theme.palette.text.secondary,0.95),
7672
},
77-
}),
73+
},
7874
}))
7975

8076
/**

‎site/src/components/Dialog/Dialog.tsx

Lines changed: 56 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -126,11 +126,12 @@ export const DialogActionButtons: React.FC<DialogActionButtonsProps> = ({
126126
color={typeToColor(type)}
127127
loading={confirmLoading}
128128
type="submit"
129-
className={combineClasses([
130-
styles.dialogButton,
131-
styles.submitButton,
132-
type==="delete" ?styles.errorButton :"",
133-
])}
129+
className={combineClasses({
130+
[styles.dialogButton]:true,
131+
[styles.submitButton]:true,
132+
[styles.errorButton]:type==="delete",
133+
[styles.successButton]:type==="success",
134+
})}
134135
>
135136
{confirmText}
136137
</LoadingButton>
@@ -246,6 +247,56 @@ const useButtonStyles = makeStyles((theme) => ({
246247
},
247248
},
248249
},
250+
successButton:{
251+
"&.MuiButton-contained":{
252+
backgroundColor:theme.palette.success.main,
253+
color:theme.palette.primary.contrastText,
254+
"&:hover":{
255+
backgroundColor:darken(theme.palette.success.main,0.3),
256+
"@media (hover: none)":{
257+
backgroundColor:"transparent",
258+
},
259+
"&.Mui-disabled":{
260+
backgroundColor:"transparent",
261+
},
262+
},
263+
"&.Mui-disabled":{
264+
backgroundColor:theme.palette.action.disabledBackground,
265+
color:fade(theme.palette.text.disabled,0.5),
266+
},
267+
},
268+
269+
"&.MuiButton-outlined":{
270+
color:theme.palette.success.main,
271+
borderColor:theme.palette.success.main,
272+
"&:hover":{
273+
backgroundColor:fade(theme.palette.success.main,theme.palette.action.hoverOpacity),
274+
"@media (hover: none)":{
275+
backgroundColor:"transparent",
276+
},
277+
"&.Mui-disabled":{
278+
backgroundColor:"transparent",
279+
},
280+
},
281+
"&.Mui-disabled":{
282+
color:fade(theme.palette.text.disabled,0.5),
283+
borderColor:theme.palette.action.disabled,
284+
},
285+
},
286+
287+
"&.MuiButton-text":{
288+
color:theme.palette.success.main,
289+
"&:hover":{
290+
backgroundColor:fade(theme.palette.success.main,theme.palette.action.hoverOpacity),
291+
"@media (hover: none)":{
292+
backgroundColor:"transparent",
293+
},
294+
},
295+
"&.Mui-disabled":{
296+
color:fade(theme.palette.text.disabled,0.5),
297+
},
298+
},
299+
},
249300
}))
250301

251302
exporttypeDialogSearchProps=Omit<OutlinedInputProps,"className"|"fullWidth"|"labelWidth"|"startAdornment">

‎site/src/components/Dialog/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
exporttypeConfirmDialogType="delete"|"info"
1+
exporttypeConfirmDialogType="delete"|"info"|"success"

‎site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.stories.tsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,10 @@ Info.args = {
2121
open:true,
2222
message:"Hey, something happened.",
2323
}
24+
25+
exportconstSuccess=Template.bind({})
26+
Success.args={
27+
variant:"success",
28+
open:true,
29+
message:"Hey, something good happened.",
30+
}

‎site/src/components/EnterpriseSnackbar/EnterpriseSnackbar.tsx

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import CloseIcon from "@material-ui/icons/Close"
55
import{FC}from"react"
66
import{combineClasses}from"../../util/combineClasses"
77

8-
typeEnterpriseSnackbarVariant="error"|"info"
8+
typeEnterpriseSnackbarVariant="error"|"info"|"success"
99

1010
exportinterfaceEnterpriseSnackbarPropsextendsMuiSnackbarProps{
1111
/** Called when the snackbar should close, either from timeout or clicking close */
@@ -45,7 +45,7 @@ export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
4545
<divclassName={styles.actionWrapper}>
4646
{action}
4747
<IconButtononClick={onClose}className={styles.iconButton}>
48-
<CloseIconclassName={variant==="info" ?styles.closeIcon :styles.closeIconError}/>
48+
<CloseIconclassName={styles.closeIcon}/>
4949
</IconButton>
5050
</div>
5151
}
@@ -55,6 +55,7 @@ export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
5555
[styles.snackbarContent]:true,
5656
[styles.snackbarContentInfo]:variant==="info",
5757
[styles.snackbarContentError]:variant==="error",
58+
[styles.snackbarContentSuccess]:variant==="success",
5859
}),
5960
}}
6061
onClose={onClose}
@@ -73,12 +74,7 @@ const useStyles = makeStyles((theme) => ({
7374
closeIcon:{
7475
width:25,
7576
height:25,
76-
color:theme.palette.info.contrastText,
77-
},
78-
closeIconError:{
79-
width:25,
80-
height:25,
81-
color:theme.palette.error.contrastText,
77+
color:theme.palette.primary.contrastText,
8278
},
8379
snackbarContent:{
8480
border:`1px solid${theme.palette.divider}`,
@@ -87,16 +83,17 @@ const useStyles = makeStyles((theme) => ({
8783
padding:`${theme.spacing(1)}px${theme.spacing(3)}px${theme.spacing(1)}px${theme.spacing(2)}px`,
8884
boxShadow:theme.shadows[6],
8985
alignItems:"inherit",
86+
backgroundColor:theme.palette.background.paper,
87+
color:theme.palette.text.secondary,
9088
},
9189
snackbarContentInfo:{
92-
backgroundColor:theme.palette.info.main,
93-
// Use primary color as a highlight
90+
// Use success color as a highlight
9491
borderLeftColor:theme.palette.primary.main,
95-
color:theme.palette.info.contrastText,
9692
},
9793
snackbarContentError:{
98-
backgroundColor:theme.palette.background.paper,
9994
borderLeftColor:theme.palette.error.main,
100-
color:theme.palette.text.secondary,
95+
},
96+
snackbarContentSuccess:{
97+
borderLeftColor:theme.palette.success.main,
10198
},
10299
}))

‎site/src/components/GlobalSnackbar/GlobalSnackbar.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,16 @@ import {
1515
SnackbarEventType,
1616
}from"./utils"
1717

18+
constvariantFromMsgType=(type:MsgType)=>{
19+
if(type===MsgType.Error){
20+
return"error"
21+
}elseif(type===MsgType.Success){
22+
return"success"
23+
}else{
24+
return"info"
25+
}
26+
}
27+
1828
exportconstGlobalSnackbar:React.FC=()=>{
1929
conststyles=useStyles()
2030
const[open,setOpen]=useState<boolean>(false)
@@ -63,7 +73,7 @@ export const GlobalSnackbar: React.FC = () => {
6373
return(
6474
<EnterpriseSnackbar
6575
open={open}
66-
variant={notification.msgType===MsgType.Error ?"error" :"info"}
76+
variant={variantFromMsgType(notification.msgType)}
6777
message={
6878
<divclassName={styles.messageWrapper}>
6979
{notification.msgType===MsgType.Error&&<ErrorIconclassName={styles.errorIcon}/>}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp