Skip to content

Commit 2b12bee

Browse files
AbhineetJainAbhineetJain
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 parent 37aff0c commit 2b12bee

File tree

7 files changed

+120
-38
lines changed

7 files changed

+120
-38
lines changed

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

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

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

+14-18
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
export interface ConfirmDialogProps extends Omit<DialogActionButtonsProps, "color" | "confirmDialog" | "onCancel"> {
@@ -41,40 +45,32 @@ export interface ConfirmDialogProps extends Omit<DialogActionButtonsProps, "colo
4145
readonly title: string
4246
}
4347

44-
interface StyleProps {
45-
type: ConfirmDialogType
46-
}
47-
4848
const useStyles = 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

+56-5
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
export type DialogSearchProps = Omit<OutlinedInputProps, "className" | "fullWidth" | "labelWidth" | "startAdornment">

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export type ConfirmDialogType = "delete" | "info"
1+
export type ConfirmDialogType = "delete" | "info" | "success"

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

+7
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+
export const Success = Template.bind({})
26+
Success.args = {
27+
variant: "success",
28+
open: true,
29+
message: "Hey, something good happened.",
30+
}

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

+10-13
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-
type EnterpriseSnackbarVariant = "error" | "info"
8+
type EnterpriseSnackbarVariant = "error" | "info" | "success"
99

1010
export interface EnterpriseSnackbarProps extends MuiSnackbarProps {
1111
/** Called when the snackbar should close, either from timeout or clicking close */
@@ -45,7 +45,7 @@ export const EnterpriseSnackbar: FC<EnterpriseSnackbarProps> = ({
4545
<div className={styles.actionWrapper}>
4646
{action}
4747
<IconButton onClick={onClose} className={styles.iconButton}>
48-
<CloseIcon className={variant === "info" ? styles.closeIcon : styles.closeIconError} />
48+
<CloseIcon className={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

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

18+
const variantFromMsgType = (type: MsgType) => {
19+
if (type === MsgType.Error) {
20+
return "error"
21+
} else if (type === MsgType.Success) {
22+
return "success"
23+
} else {
24+
return "info"
25+
}
26+
}
27+
1828
export const GlobalSnackbar: React.FC = () => {
1929
const styles = 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
<div className={styles.messageWrapper}>
6979
{notification.msgType === MsgType.Error && <ErrorIcon className={styles.errorIcon} />}

0 commit comments

Comments
 (0)