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

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+
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

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
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

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
export type DialogSearchProps = 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-
export type ConfirmDialogType = "delete" | "info"
1+
export type ConfirmDialogType = "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+
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

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-
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

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+
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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy