Modal: add headerHasDefaultPadding prop

glints-dev · May 17, 2024 · b7a5073 · b7a5073
1 parent 523a7eb
commit b7a5073
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/src/@next/Modal/Modal.tsx b/src/@next/Modal/Modal.tsx
@@ -48,6 +48,8 @@ export type ModalProps = React.HTMLAttributes<HTMLDivElement> &
     onClose?: () => void;
     onBack?: () => void;
     zIndexOverride?: number;
+    /** This prop will add default padding to the header */
+    headerHasDefaultPadding?: boolean;
   };
 
 export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
@@ -63,6 +65,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       showBackButton,
       showCloseButton = true,
       showHeaderBorder = true,
+      headerHasDefaultPadding = true,
       closeOnClickOutside,
       onClose,
       onBack,
@@ -173,7 +176,10 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
             {...props}
           >
             {header && (
-              <StyledModalHeader data-show-border={showHeaderBorder}>
+              <StyledModalHeader
+                data-show-border={showHeaderBorder}
+                data-header-has-default-padding={headerHasDefaultPadding}
+              >
                 {showBackButton && (
                   <StyledButtonContainer>
                     <StyledModalBackButton

diff --git a/src/@next/Modal/ModalStyle.ts b/src/@next/Modal/ModalStyle.ts
@@ -52,7 +52,6 @@ export const StyledModalHeader = styled.div`
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: ${space16} 20px;
   box-shadow: inset 0px -1px 0px ${Neutral.B95};
   border-radius: ${borderRadius8} ${borderRadius8} 0 0;
   align-self: stretch;
@@ -61,12 +60,15 @@ export const StyledModalHeader = styled.div`
     flex: 1;
   }
 
-  &[data-show-border='false'] {
-    box-shadow: unset;
+  &[data-header-has-default-padding='true'] {
+    padding: ${space16} 20px;
+    @media (max-width: ${Breakpoints.large}) {
+      padding: ${space16};
+    }
   }
 
-  @media (max-width: ${Breakpoints.large}) {
-    padding: ${space16};
+  &[data-show-border='false'] {
+    box-shadow: unset;
   }
 `;