@madie/madie-design-system 1.2.85 → 1.2.87

package/components/MadieDeleteDialog/MadieDeleteDialog.stories.js

@@ -21,7 +21,6 @@ Wrapper.propTypes = {
 const contentWithHtmlTag =
     '<p><strong>test &amp;</strong></p><table class="rich-text-table" style="min-width: 75px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th><th colspan="1" rowspan="1"><p></p></th></tr><tr><td colspan="1" rowspan="1"><p>table col 1</p></td><td colspan="1" rowspan="1"><p>table col 2</p></td><td colspan="1" rowspan="1"><p>table col 3</p></td></tr><tr><td colspan="1" rowspan="1"><p>table col 4</p></td><td colspan="1" rowspan="1"><p>table col 5</p></td><td colspan="1" rowspan="1"><p>table col 6</p></td></tr></tbody></table><ol><li><p><strong>test2</strong></p></li><li><p><strong>test3</strong></p></li></ol>';
 
-
 export const DeleteDialog = () => {
     const [open, setOpen] = useState(false);
     const onClose = () => {
@@ -86,6 +85,7 @@ export const DeleteDialogWithHtmlTags = () => {
                 hideWarning={true}
                 dialogTitle="Delete Measure Reference"
                 name={contentWithHtmlTag}
+                statement={true}
             />
         </Wrapper>
     );
@@ -113,3 +113,32 @@ export const DeleteDialogWithAlternateText = () => {
         </Wrapper>
     );
 };
+
+export const DeleteDialogWithCustomDialogBody = () => {
+    const [open, setOpen] = useState(false);
+    const onClose = () => setOpen(false);
+    const onContinue = () => setOpen(false);
+
+    return (
+        <Wrapper>
+            <Button variant="cyan" onClick={() => setOpen(true)}>
+                open Dialog
+            </Button>
+            <MadieDeleteDialog
+                open={open}
+                onContinue={onContinue}
+                onClose={onClose}
+                hideWarning={true}
+                dialogTitle="Are you sure?"
+                customDialogBody={
+                    "You are choosing to delete the following Test Case(s)!"
+                }
+                alternateText="Delete Case(s)"
+                statement={true}
+                name={
+                    "<p><ol><li><p><strong>test2</strong></p></li><li><p><strong>test3</strong></p></li></ol></p>"
+                }
+            />
+        </Wrapper>
+    );
+};

package/components/MadieDeleteDialog/index.jsx

@@ -35,14 +35,25 @@ const MadieDeleteDialog = ({
             variant: "danger-primary",
             type: "submit",
             "data-testid": "delete-dialog-continue-button",
-            continueText: otherDialogProps.alternateText? `Yes, ${otherDialogProps.alternateText}` : "Yes, Delete",
+            continueText: otherDialogProps.alternateText
+                ? `${otherDialogProps.alternateText}`
+                : "Yes, Delete",
             onClick: onContinue,
         }}
     >
         <div id="delete-dialog-body">
             <section className="dialog-warning-body">
                 <p>
-                    Are you sure you want to {otherDialogProps.alternateText ? otherDialogProps.alternateText.toLowerCase() : "delete"}{" "}
+                    {otherDialogProps?.customDialogBody ? (
+                        otherDialogProps.customDialogBody
+                    ) : (
+                        <>
+                            Are you sure you want to{" "}
+                            {otherDialogProps.alternateText
+                                ? otherDialogProps.alternateText.toLowerCase()
+                                : "delete"}{" "}
+                        </>
+                    )}
                     <span className="strong">
                         {parse(
                             otherDialogProps?.name
@@ -51,7 +62,7 @@ const MadieDeleteDialog = ({
                             options
                         )}
                     </span>
-                    ?
+                    {otherDialogProps?.statement ? "" : "?"}
                 </p>
             </section>
             {otherDialogProps.hideWarning !== true && (

package/components/MadieTooltip/MadieTooltip.stories.js

@@ -11,15 +11,15 @@ export default {
 };
 
 export const ExampleTooltip = () => (
-    <div>
-        <div>
-            <MadieTooltip text="Input the new version #" />
+    <div style={{width: "14px"}}>
+        <div style={{width: 20, marginBottom: 20}}>
+            <MadieTooltip title="Input the new version #" placement="left"/>
         </div>
-        <div style={{ marginLeft: 200 }}>
-            <MadieTooltip color="#000" />
+        <div style={{width: 20, marginBottom: 20}}>
+            <MadieTooltip title="Input the new version #" placement="right"/>
         </div>
-        <div style={{ marginLeft: 350 }}>
-            <MadieTooltip color="#000" />
+        <div style={{width: 20, marginBottom: 20}}>
+            <MadieTooltip title="Input the new version #" placement="bottom"/>
         </div>
     </div>
 );

package/components/MadieTooltip/index.jsx

@@ -1,49 +1,44 @@
-import React, { useState } from "react";
-import TooltipIcon from "../MadieTooltipIcon";
+import React from "react";
 import PropTypes from "prop-types";
+import { Tooltip } from "@mui/material";
+import TooltipIcon from "../MadieTooltipIcon";
 
-// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role
-const MadieToolTip = ({ tooltipText = "informational text", id }) => {
-    const [activeTip, setActiveTip] = useState(false);
+const MadieToolTip = 
+({
+  id,
+  widthContainer = 14,
+  heightContainer = 14,
+  ...rest
+}) => {
     return (
-        <button
-            data-testid={`${id}-button`}
-            tabIndex={0}
-            onFocus={() => setActiveTip(true)}
-            onBlur={() => {
-                setActiveTip(false);
-            }}
-            onMouseEnter={() => {
-                setActiveTip(true);
-            }}
-            onMouseLeave={() => {
-                setActiveTip(false);
-            }}
-            onKeyDown={(e) => {
-                if (e.key === "Escape") {
-                    setActiveTip(false);
-                }
-            }}
-            className="madie-tooltip-button"
-            onClick={(e) => e.preventDefault()}
+        <Tooltip
+          placement="bottom"
+          arrow
+          slotProps={{
+            tooltip: {
+              sx: {
+                zIndex: 99,
+                backgroundColor: "#333",
+                "& .MuiTooltip-arrow": {
+                  color: "#333",
+                },
+              },
+            },
+          }}
+              {...rest}
         >
-            <TooltipIcon />
-            <div
-                role="tooltip"
-                id={id}
-                data-testid={id}
-                aria-live="polite"
-                className={activeTip ? "madie-tooltip" : "madie-tooltip hidden"}
-            >
-                <p>{tooltipText}</p>
-            </div>
-        </button>
-    );
+              <div style={{ width: widthContainer, height: heightContainer}} data-testId={id} id={id}>
+                <TooltipIcon />
+              </div>
+            </Tooltip>
+          );
 };
 
+
 MadieToolTip.propTypes = {
-    tooltipText: PropTypes.string,
-    id: PropTypes.string,
+  id: PropTypes.string,
+  widthContainer: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  heightContainer: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
 
 export default MadieToolTip;

package/components/TextField/index.jsx

@@ -99,7 +99,7 @@ const TextField = ({
                     flexGrow: 1,
                 }}
             />
-            <div style={{ display: "flex", flexDirection: "row" }}>
+            <div style={{ display: "flex", flexDirection: "row", alignItems: "baseline" }}>
                 <InputLabel
                     disabled={disabled}
                     shrink
@@ -151,7 +151,7 @@ const TextField = ({
                 </InputLabel>
                 {tooltipText && (
                     <MadieToolTip
-                        tooltipText={tooltipText}
+                        title={tooltipText}
                         id={`${id}-tooltip`}
                     />
                 )}