Merge pull request #246 from elias-oxopia/master

fix(modal): remove maxWidth prop
kodiak-packages · Jun 27, 2023 · 258abc4 · 258abc4
2 parents 0346760 + a1da486
commit 258abc4
Show file tree

Hide file tree

Showing 4 changed files with 1 addition and 74 deletions.
diff --git a/src/components/Modal/Modal.mdx b/src/components/Modal/Modal.mdx
@@ -38,27 +38,6 @@ A modal is a dialog that appears on top of the main content to require user inte
 
 </Playground>
 
-### Modal max width
-
-<Playground>
-  {() => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    return (
-      <>
-        <Button onClick={() => setIsOpen(true)}>Open basic modal</Button>
-        <Modal title="This is the title" isOpen={isOpen} maxWidth="300px">
-          <span>Insert your text or form elements here</span>
-          <Modal.Footer>
-            <Button type='secondary' onClick={() => setIsOpen(false)}>Cancel</Button>
-            <Button onClick={() => 'do some logic here'}>Create</Button>
-          </Modal.Footer>
-        </Modal>
-      </>
-    );
-}}
-
-</Playground>
-
 ### Modal with async action
 
 <Playground>

diff --git a/src/components/Modal/Modal.test.tsx b/src/components/Modal/Modal.test.tsx
@@ -7,21 +7,13 @@ 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, rerender } = render(
+    const { baseElement } = 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
@@ -13,7 +13,6 @@ type Props = {
   onEscKeyDown?: () => void;
   className?: string;
   children?: ReactNode;
-  maxWidth?: string;
 };
 
 const disableBodyScroll = (isDisabled: boolean) => {
@@ -30,7 +29,6 @@ const Modal: React.FC<Props> & { Footer: typeof Footer } = ({
   onEscKeyDown,
   className,
   children,
-  maxWidth, // added optional maxWidth prop
 }: Props) => {
   const modalRef = React.useRef<HTMLDivElement>(null);
 
@@ -48,17 +46,12 @@ 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={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,43 +14,6 @@ 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