feat(ModalDialog): expose hasCloseButton prop

kronostechnologies · Dec 9, 2021 · 432bf14 · 432bf14
1 parent 3135fb3
commit 432bf14
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/packages/react/src/components/modal/modal-dialog.tsx b/packages/react/src/components/modal/modal-dialog.tsx
@@ -45,10 +45,10 @@ const HeadingWrapper = styled.div`
 `;
 
 const TitleIcon = styled(Icon)`
+    left: -32px;
     margin-top: calc(var(--spacing-half) * 1.5);
     position: absolute;
     top: 0;
-    left: -32px;
 `;
 
 export interface ModalDialogProps {
@@ -65,6 +65,7 @@ export interface ModalDialogProps {
     className?: string;
     confirmButton?: { label?: string, onConfirm?(): void };
     footerContent?: ReactElement;
+    hasCloseButton?: boolean;
     isOpen: boolean;
     /**
      * Defines if the overlay click should close the modal
@@ -88,6 +89,7 @@ export function ModalDialog({
     className,
     confirmButton,
     footerContent,
+    hasCloseButton,
     isOpen,
     shouldCloseOnOverlayClick = true,
     subtitle,
@@ -114,7 +116,7 @@ export function ModalDialog({
     }
 
     function getHeader(): ReactElement | undefined {
-        const HeadingWrapperComponent = titleIcon ? HeadingWrapper : Fragment;
+        const HeadingWrapperComponent = hasTitleIcon ? HeadingWrapper : Fragment;
 
         if (title || subtitle) {
             return (
@@ -172,7 +174,7 @@ export function ModalDialog({
             ariaLabelledBy={title ? titleId : undefined}
             className={className}
             modalHeader={getHeader()}
-            hasCloseButton
+            hasCloseButton={hasCloseButton}
             modalFooter={footerContent || getFooter()}
             role="dialog"
             onAfterOpen={() => titleRef.current?.focus()}

diff --git a/packages/react/src/icons/alert-filled.svg b/packages/react/src/icons/alert-filled.svg
diff --git a/packages/react/src/icons/warning-filled.svg b/packages/react/src/icons/warning-filled.svg
diff --git a/packages/storybook/stories/modal-dialog.stories.mdx b/packages/storybook/stories/modal-dialog.stories.mdx
@@ -134,9 +134,34 @@ It is important for users of screenreaders that other page content be hidden (vi
                         ariaDescribedby="story-description"
                         isOpen={isModalOpen}
                         onRequestClose={closeModal}
-                        title="Heading 5"
+                        title="With title icon"
                         titleIcon="warningFilled"
-                        subtitle="Subtitle 1"
+                    >
+                        <p id="story-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
+                            fringilla tellus nec auctor gravida.</p>
+                    </ModalDialog>
+                </Fragment>
+            );
+        }}
+    </Story>
+</Preview>
+
+### Without close button
+
+<Preview>
+    <Story name="Without close button">
+        {() => {
+            const {isModalOpen, closeModal, openModal} = useModal();
+            return (
+                <Fragment>
+                    <Button label="Open Modal" buttonType="primary" onClick={openModal} />
+                    <ModalDialog
+                        appElement="#root"
+                        ariaDescribedby="story-description"
+                        hasCloseButton={false}
+                        isOpen={isModalOpen}
+                        onRequestClose={closeModal}
+                        title="Without close button"
                     >
                         <p id="story-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus
                             fringilla tellus nec auctor gravida.</p>