@madie/madie-design-system 1.2.52 → 1.2.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/MadieDialog/MadieDialog.stories.js +52 -0
- package/components/MadieDialog/index.jsx +17 -9
- package/dist/browser.js +1 -1
- package/dist/index.js +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
- package/test/components/MadieDialog.test.js +208 -0
|
@@ -229,6 +229,58 @@ export const DialogWithActionButtonsHideContinueButton = () => {
|
|
|
229
229
|
);
|
|
230
230
|
};
|
|
231
231
|
|
|
232
|
+
export const DialogWithActionButtonsContinueButtonDisabledWithTooltip = () => {
|
|
233
|
+
const [open, setOpen] = useState(false);
|
|
234
|
+
const onClose = () => {
|
|
235
|
+
setOpen(false);
|
|
236
|
+
};
|
|
237
|
+
|
|
238
|
+
return (
|
|
239
|
+
<>
|
|
240
|
+
<Button variant="cyan" onClick={() => setOpen(true)}>
|
|
241
|
+
open Dialog
|
|
242
|
+
</Button>
|
|
243
|
+
<MadieDialog
|
|
244
|
+
title="Human Readable"
|
|
245
|
+
sx={{
|
|
246
|
+
"#modal-body": {
|
|
247
|
+
h2: {
|
|
248
|
+
borderTop: "1px solid black",
|
|
249
|
+
},
|
|
250
|
+
},
|
|
251
|
+
}}
|
|
252
|
+
dialogProps={{
|
|
253
|
+
onClose,
|
|
254
|
+
open,
|
|
255
|
+
maxWidth: "lg",
|
|
256
|
+
fullWidth: true,
|
|
257
|
+
}}
|
|
258
|
+
cancelButtonProps={{
|
|
259
|
+
variant: "secondary",
|
|
260
|
+
cancelText: "Cancel",
|
|
261
|
+
"data-testid": "cancel-button",
|
|
262
|
+
}}
|
|
263
|
+
continueButtonProps={{
|
|
264
|
+
variant: "cyan",
|
|
265
|
+
type: "submit",
|
|
266
|
+
"data-testid": "continue-button",
|
|
267
|
+
continueText: "Continue",
|
|
268
|
+
disabled: true,
|
|
269
|
+
tooltipText: "Continue button is disabled",
|
|
270
|
+
}}
|
|
271
|
+
>
|
|
272
|
+
<DialogContent>
|
|
273
|
+
<div data-testid="view-modal">
|
|
274
|
+
<Typography>
|
|
275
|
+
<div>Some Text</div>
|
|
276
|
+
</Typography>
|
|
277
|
+
</div>
|
|
278
|
+
</DialogContent>
|
|
279
|
+
</MadieDialog>
|
|
280
|
+
</>
|
|
281
|
+
);
|
|
282
|
+
};
|
|
283
|
+
|
|
232
284
|
export const DialogWithPopoverActionButtons = () => {
|
|
233
285
|
const [open, setOpen] = useState(false);
|
|
234
286
|
const onClose = () => {
|
|
@@ -10,6 +10,7 @@ import {
|
|
|
10
10
|
Divider,
|
|
11
11
|
IconButton,
|
|
12
12
|
Typography,
|
|
13
|
+
Tooltip,
|
|
13
14
|
} from "@mui/material";
|
|
14
15
|
import { Box } from "@mui/system";
|
|
15
16
|
import Button from "../Button";
|
|
@@ -37,6 +38,8 @@ const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
|
|
|
37
38
|
continueText,
|
|
38
39
|
continueIcon,
|
|
39
40
|
popoverOptions,
|
|
41
|
+
disabled,
|
|
42
|
+
tooltipText,
|
|
40
43
|
...otherContinueButtonProps
|
|
41
44
|
} = continueButtonProps;
|
|
42
45
|
const [anchorEl, setAnchorEl] = useState(null);
|
|
@@ -94,17 +97,22 @@ const Actions = ({ onClose, cancelButtonProps, continueButtonProps }) => {
|
|
|
94
97
|
/>
|
|
95
98
|
</>
|
|
96
99
|
) : continueButtonProps ? (
|
|
97
|
-
<
|
|
98
|
-
className="qpp-c-button--cyan"
|
|
99
|
-
type="submit"
|
|
100
|
-
style={{ marginTop: 0 }}
|
|
101
|
-
{...otherContinueButtonProps}
|
|
102
|
-
>
|
|
100
|
+
<Tooltip title={disabled && tooltipText ? tooltipText : ""}>
|
|
103
101
|
<span>
|
|
104
|
-
|
|
105
|
-
|
|
102
|
+
<Button
|
|
103
|
+
className="qpp-c-button--cyan"
|
|
104
|
+
type="submit"
|
|
105
|
+
style={{ marginTop: 0 }}
|
|
106
|
+
{...otherContinueButtonProps}
|
|
107
|
+
disabled={disabled}
|
|
108
|
+
>
|
|
109
|
+
<span>
|
|
110
|
+
{continueText}
|
|
111
|
+
{continueIcon}
|
|
112
|
+
</span>
|
|
113
|
+
</Button>
|
|
106
114
|
</span>
|
|
107
|
-
</
|
|
115
|
+
</Tooltip>
|
|
108
116
|
) : null}
|
|
109
117
|
</DialogActions>
|
|
110
118
|
</>
|