Merge pull request #243 from elias-oxopia/master

fixed modal with optional maxWidth prop
kodiak-packages · Jun 23, 2023 · 8521aa8 · 8521aa8
2 parents 15ecf4e + 66cdbc9
commit 8521aa8
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
@@ -7,13 +7,21 @@ describe('Modal', () => {
   test('snapshot when shown', () => {
     // portals don't render in the fragment so we have look in baseElement
     // https://github.com/testing-library/react-testing-library/issues/62#issuecomment-513199414
-    const { baseElement } = render(
+    const { baseElement, rerender } = render(
       <Modal title="This is the title" isOpen>
         <span>Insert your text or form elements here</span>
         <Modal.Footer>Buttons are placed here</Modal.Footer>
       </Modal>,
     );
     expect(baseElement).toMatchSnapshot();
+
+    rerender(
+      <Modal title="This is the title" isOpen maxWidth="800px">
+        <span>Insert your text or form elements here</span>
+        <Modal.Footer>Buttons are placed here</Modal.Footer>
+      </Modal>,
+    );
+    expect(baseElement).toMatchSnapshot();
   });
 
   test('snapshot when hidden', () => {

diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx
@@ -12,8 +12,8 @@ type Props = {
   isOpen?: boolean;
   onEscKeyDown?: () => void;
   className?: string;
-  maxWidth?: string;
   children?: ReactNode;
+  maxWidth?: string;
 };
 
 const disableBodyScroll = (isDisabled: boolean) => {
@@ -29,8 +29,8 @@ const Modal: React.FC<Props> & { Footer: typeof Footer } = ({
   isOpen = false,
   onEscKeyDown,
   className,
-  maxWidth = '650px',
   children,
+  maxWidth,
 }: Props) => {
   const modalRef = React.useRef<HTMLDivElement>(null);
 
@@ -48,13 +48,17 @@ const Modal: React.FC<Props> & { Footer: typeof Footer } = ({
 
   const overlayClassNames = classNames(cssReset.ventura, styles.overlay, className);
 
+  const modalStyles = {
+    maxWidth: maxWidth || '650px',
+  };
+
   return isOpen ? (
     <Portal>
       <div className={overlayClassNames} role="article" data-testid="modal">
         <article
           ref={modalRef}
           className={styles.modal}
-          style={{ maxWidth }}
+          style={modalStyles}
           onKeyDown={handleKeyDown}
           // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
           tabIndex={0}

diff --git a/src/components/Modal/__snapshots__/Modal.test.tsx.snap b/src/components/Modal/__snapshots__/Modal.test.tsx.snap
@@ -14,6 +14,43 @@ exports[`Modal snapshot when shown 1`] = `
       <article
         class="modal"
         role="presentation"
+        style="max-width: 650px;"
+        tabindex="0"
+      >
+        <h1
+          class="title"
+        >
+          This is the title
+        </h1>
+        <span>
+          Insert your text or form elements here
+        </span>
+        <div
+          class="container"
+        >
+          Buttons are placed here
+        </div>
+      </article>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Modal snapshot when shown 2`] = `
+<body
+  style="overflow: hidden;"
+>
+  <div />
+  <div>
+    <div
+      class="ventura overlay"
+      data-testid="modal"
+      role="article"
+    >
+      <article
+        class="modal"
+        role="presentation"
+        style="max-width: 800px;"
         tabindex="0"
       >
         <h1