Coverted all the css into Tailwind css of Modal component (#1743)

Co-authored-by: Kyle Holmberg <[email protected]>
Co-authored-by: Kyle Holmberg <[email protected]>

Author: subhajit20

.eslintrc.js

@@ -167,6 +167,7 @@ module.exports = {
     'implicit-arrow-linebreak': 'off',
     'multiline-ternary': 'off',
     'no-console': 'warn',
+    'no-extra-boolean-cast': 'off',
     'no-promise-executor-return': 'off',
     'no-restricted-imports': [
       'error',

.storybook/main.js

@@ -3,7 +3,14 @@ const svgoConfig = require('../common/config/svgo');
 const config = {
   stories: ['../components/**/__stories__/*.stories.js'],
   staticDirs: ['../public'],
-  addons: ['@storybook/addon-essentials'],
+  addons: [
+    '@storybook/addon-essentials',
+    {
+      name: '@storybook/addon-styling',
+      /** @see https://storybook.js.org/recipes/tailwindcss#:~:text=then%20leave%20the%20options%20object%20empty. */
+      options: {},
+    },
+  ],
   webpackFinal: async config => {
     // Find the Storybook Webpack rule relevant to SVG files.
     const imageRule = config.module.rules.find(rule => {

components/Cards/Card/Card.module.css

@@ -12,19 +12,6 @@
   padding: 1.5rem;
 }
 
-.CardModal {
-  background-color: var(--secondary);
-  color: var(--white);
-}
-
-.CardModal a {
-  color: var(--primary);
-}
-
-.CardModal h2 {
-  font-size: 1.5em;
-}
-
 .Card svg {
   fill: var(--secondary);
 }

components/Modal/Modal.js

@@ -2,25 +2,23 @@ import { node, string, bool, func } from 'prop-types';
 import classNames from 'classnames';
 import * as Dialog from '@radix-ui/react-dialog';
 import { gtag } from 'common/utils/thirdParty/gtag';
-import CardStyles from 'components/Cards/Card/Card.module.css';
 import CloseButton from 'components/Buttons/CloseButton/CloseButton';
 import { MODAL_CONTENT, MODAL_OVERLAY } from 'common/constants/testIDs';
-import ModalStyles from './Modal.module.css';
 
 Modal.propTypes = {
   children: node.isRequired,
   className: string,
   isOpen: bool,
   onRequestClose: func.isRequired,
   screenReaderLabel: string.isRequired, // basically a summarizing title
-  shouldCloseOnOverlayClick: bool,
+  canClose: bool,
   childrenClassName: string,
 };
 
 Modal.defaultProps = {
   className: undefined,
   isOpen: false,
-  shouldCloseOnOverlayClick: true,
+  canClose: true,
   childrenClassName: undefined,
 };
 
@@ -30,27 +28,56 @@ function Modal({
   isOpen,
   onRequestClose,
   screenReaderLabel,
-  shouldCloseOnOverlayClick,
+  canClose,
   childrenClassName,
 }) {
   if (isOpen) {
     gtag.modalView(screenReaderLabel);
   }
 
+  const portalContainer =
+    typeof window !== 'undefined' ? document.querySelector('#__next') ?? undefined : undefined;
+
   return (
     <Dialog.Root defaultOpen={false} open={isOpen}>
-      <Dialog.Portal>
+      <Dialog.Portal container={portalContainer}>
         <Dialog.Overlay
-          className={ModalStyles.overlay}
-          onClick={shouldCloseOnOverlayClick ? onRequestClose : undefined}
+          className="inset-0 fixed bg-white/50 z-[2]"
+          onClick={canClose ? onRequestClose : undefined}
           data-testid={MODAL_OVERLAY}
         >
-          <Dialog.Close asChild>
-            <CloseButton theme="secondary" onClick={onRequestClose} />
-          </Dialog.Close>
+          {canClose && (
+            <Dialog.Close asChild>
+              <CloseButton theme="secondary" onClick={onRequestClose} />
+            </Dialog.Close>
+          )}
         </Dialog.Overlay>
+
         <Dialog.Content
-          className={classNames(CardStyles.Card, className, ModalStyles.modalContent)}
+          className={classNames(
+            'outline-none',
+            'bg-white',
+            'text-secondary',
+            'flex',
+            'flex-col',
+            'flex-nowrap',
+            'm-4',
+            'min-h-[100px]',
+            'min-w-[100px]',
+            'p-6',
+            'fixed',
+            'items-center',
+            'justify-center',
+            'overflow-hidden',
+            'w-[80%]',
+            'top-1/2',
+            'left-1/2',
+            '-translate-x-1/2',
+            '-translate-y-1/2',
+            'z-[2]',
+            'shadow-md',
+            className,
+          )}
         >
           <div className={childrenClassName} data-testid={MODAL_CONTENT}>
             {children}

components/Modal/Modal.module.css

@@ -1,49 +1,78 @@
 import { useState } from 'react';
+import isChromatic from 'chromatic/isChromatic';
+
 import { descriptions } from 'common/constants/descriptions';
+import Button from 'components/Buttons/Button/Button';
 import Modal from '../Modal';
 
 export const Default = {
   render: args => {
     const [isDemoModalOpen, setIsDemoModalOpen] = useState(args.isOpen);
 
     return (
-      <Modal
-        {...args}
-        isOpen={isDemoModalOpen}
-        onRequestClose={prevValue => setIsDemoModalOpen(!prevValue)}
-      />
+      <>
+        <Button onClick={() => setIsDemoModalOpen(true)}>Open Modal</Button>
+
+        <Modal
+          {...args}
+          isOpen={isDemoModalOpen}
+          onRequestClose={prevValue => setIsDemoModalOpen(!prevValue)}
+        />
+      </>
     );
   },
   args: {
-    isOpen: true,
+    isOpen: !!isChromatic(),
     children: descriptions.medium,
     screenReaderLabel: 'You have completed the form.',
   },
 };
 
-export const NoCloseOnOverlayClick = {
+export const NonDismissableModal = {
   render: args => {
     const [isDemoModalOpen, setIsDemoModalOpen] = useState(args.isOpen);
 
     return (
-      <Modal
-        {...args}
-        isOpen={isDemoModalOpen}
-        onRequestClose={prevValue => setIsDemoModalOpen(!prevValue)}
-      />
+      <>
+        <Button onClick={() => setIsDemoModalOpen(true)}>Open Modal</Button>
+
+        <Modal
+          {...args}
+          isOpen={isDemoModalOpen}
+          onRequestClose={prevValue => setIsDemoModalOpen(!prevValue)}
+        />
+      </>
     );
   },
   args: {
-    shouldCloseOnOverlayClick: false,
-    isOpen: true,
-    children: descriptions.medium,
+    canClose: false,
+    isOpen: false,
+    children: (
+      <>
+        <p>
+          This modal will not close once opened. You must reload the page to reset the state in
+          Storybook.
+        </p>
+        <p>{descriptions.medium}</p>
+      </>
+    ),
     screenReaderLabel: 'You have completed the form.',
   },
 };
 
 const meta = {
   title: 'Modal',
   component: Modal,
+  parameters: {
+    previewTabs: {
+      'storybook/docs/panel': { hidden: true },
+    },
+    docs: {
+      autodocs: false,
+      disable: true,
+      page: null,
+    },
+  },
 };
 
 export default meta;

components/Modal/__stories__/Modal.stories.js

@@ -17,7 +17,7 @@ exports[`Modal should render with many props assigned 1`] = `
   />
   <div
     aria-hidden="true"
-    class="overlay"
+    class="inset-0 fixed bg-white/50 z-[2]"
     data-aria-hidden="true"
     data-state="open"
     data-testid="MODAL_OVERLAY"
@@ -42,7 +42,7 @@ exports[`Modal should render with many props assigned 1`] = `
   <div
     aria-describedby="radix-:r5:"
     aria-labelledby="radix-:r4:"
-    class="Card test-class modalContent"
+    class="outline-none bg-white text-secondary flex flex-col flex-nowrap m-4 min-h-[100px] min-w-[100px] p-6 fixed items-center justify-center overflow-hidden w-[80%] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2] shadow-md test-class"
     data-state="open"
     id="radix-:r3:"
     role="dialog"

components/Modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -37,7 +37,7 @@ function UpgradeBrowserOverlay() {
       screenReaderLabel="Upgrade Your Browser"
       isOpen
       overlayClassName={styles.overlay}
-      shouldCloseOnOverlayClick={false}
+      canClose={false}
     >
       <WarningSign className={styles.warningLogo} />
       <h1>Please Upgrade Your Browser</h1>

components/UpgradeBrowserOverlay/UpgradeBrowserOverlay.js

@@ -2,12 +2,12 @@
 
 exports[`UpgradeBrowserOverlay should render with no props passed 1`] = `
 <Modal
+  canClose={false}
   className="UpgradeBrowserOverlay"
   isOpen={true}
   onRequestClose={[Function]}
   overlayClassName="overlay"
   screenReaderLabel="Upgrade Your Browser"
-  shouldCloseOnOverlayClick={false}
 >
   <Svg
     className="warningLogo"

components/UpgradeBrowserOverlay/__tests__/__snapshots__/UpgradeBrowserOverlay.test.js.snap

@@ -90,6 +90,7 @@
     "@storybook/addon-essentials": "^7.4.1",
     "@storybook/addon-links": "^7.4.1",
     "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/addon-styling": "^1.3.7",
     "@storybook/addons": "^7.4.1",
     "@storybook/nextjs": "^7.4.1",
     "@storybook/react": "^7.4.1",