test(Modal): fix Modal's rendering in Chromatic viewport to capture a…

…ll Modal and not cut it
mondaycom · Dec 10, 2024 · efb8244 · efb8244
1 parent 0fdcf9b
commit efb8244
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 6 deletions.
diff --git a/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx
@@ -25,14 +25,14 @@ export const OpenedModalPreview = forwardRef(
     const isAfterFirstRender = useAfterFirstRender();
     return (
       <div
-        className={cx(styles.preview, getStyle(styles, size))}
+        className={cx(styles.preview, { [getStyle(styles, size)]: isDocsView })}
         ref={ref}
         // workaround to prevent modal from autofocusing on page load
         // autofocus would work as expected when modal closes and reopens
         {...(!isAfterFirstRender.current && isDocsView && { "data-no-autofocus": true })}
       >
         <Button onClick={onOpenModalClick}>Open Modal</Button>
-        {isDocsView ? modal : createPortal(modal, document.body)}
+        {modal}
       </div>
     );
   }

diff --git a/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss
@@ -7,7 +7,7 @@
 .preview {
   padding-inline-start: 32px;
   padding-block-start: 40px;
-  height: 360px;
+  height: 100vh;
   width: 100%;
   container-type: inline-size;
 

diff --git a/...re/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx b/...re/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx
@@ -29,7 +29,10 @@ export default {
   component: Modal,
   subcomponents: { ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, TransitionView },
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {

diff --git a/...re/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx b/...re/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
@@ -38,7 +38,10 @@ export default {
     TransitionView
   },
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {

diff --git a/...ponents/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx b/...ponents/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx
@@ -41,7 +41,10 @@ export default {
     TransitionView
   },
   argTypes: metaSettings.argTypes,
-  decorators: metaSettings.decorators
+  decorators: metaSettings.decorators,
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {