refactor(modal): Minor modal style updates

getPopsure · Aug 13, 2024 · 3d5bdac · 3d5bdac
1 parent 829adca
commit 3d5bdac
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/src/lib/components/modal/genericModal/index.tsx b/src/lib/components/modal/genericModal/index.tsx
@@ -122,7 +122,7 @@ export const GenericModal = ({
                 styles.footer
               )}
             >
-              <div className="px24 py16">
+              <div className="p24 pt16">
                 {footer}
               </div>
             </div>

diff --git a/src/lib/components/modal/index.stories.tsx b/src/lib/components/modal/index.stories.tsx
@@ -19,6 +19,14 @@ const story = {
     className: {
       description: 'Any additional className',
     },
+    size: {
+      description: 'The size of the modal, either large or default.',
+      control: 'radio',
+      options: {
+        default: 'default',
+        large: 'large',
+      }
+    },
     children: {
       description: 'The content that gets displayed on the modal',
       type: 'text',
@@ -42,6 +50,7 @@ const story = {
     dismissible: true,
     className: '',
     children: 'Modal content to be displayed',
+    size: 'default',
   },
   parameters: {
     componentSubtitle: 'Bottom or Regular modal will automatically choose what’s best to display based on the users screen width.',
@@ -59,6 +68,7 @@ export const BottomOrRegularModalStory = ({
   dismissible,
   isOpen,
   onClose,
+  size,
   title,
 }: Props) => {
   const [display, setDisplay] = useState(isOpen);
@@ -81,6 +91,7 @@ export const BottomOrRegularModalStory = ({
         className={className}
         title={title}
         isOpen={display}
+        size={size}
         onClose={handleOnClose}
       >
         <div style={{ padding: '0 24px 24px 24px' }}>

diff --git a/src/lib/components/modal/index.ts b/src/lib/components/modal/index.ts
@@ -10,6 +10,7 @@ export interface Props {
   onClose: () => void;
   className?: string;
   dismissible?: boolean;
+  size?: 'default' | 'large';
   footer?: ReactNode;
 }
 

diff --git a/src/lib/components/modal/regularModal/index.tsx b/src/lib/components/modal/regularModal/index.tsx
@@ -3,7 +3,7 @@ import styles from './style.module.scss';
 import classNames from 'classnames';
 import { GenericModal } from '../genericModal';
 
-const RegularModal = ({ className = '', ...rest }: Props) => (
+const RegularModal = ({ className = '', size, ...rest }: Props) => (
   <GenericModal
     classNames={{
       wrapper: ({ isClosing }) => classNames(
@@ -14,8 +14,9 @@ const RegularModal = ({ className = '', ...rest }: Props) => (
         }
       ),
       container: classNames(
-        'bg-white br8 d-flex ai-center fd-column mx-auto my0 wmx8',
-        styles.container
+        'bg-white br8 d-flex ai-center fd-column mx-auto my0',
+        styles.container,
+        size === 'large' ? 'wmx10' : 'wmx8'
       )
     }}
     {...rest}

diff --git a/src/lib/components/modal/regularModal/style.module.scss b/src/lib/components/modal/regularModal/style.module.scss
@@ -45,6 +45,6 @@
 }
 
 .container {
-  max-height: 96vh;
+  max-height: 90vh;
   overflow: hidden;
 }