DialogInnerContentWrapper full height if footerContent exists (#1471)

* DialogInnerContentWrapper full height if footerContent exists

* changelog

* only add overflow css if footerContent

common/changes/pcln-design-system/dialog-content-wrapper-full-height-if-footer_2024-03-06-18-14.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "DialogInnerContentWrapper full height if footer exists",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}

packages/core/src/Dialog/Dialog.styled.tsx

@@ -98,15 +98,20 @@ const DialogContentWrapper = styled(motion.div)`
       ? 'none'
       : themeGet(`borderRadii.${props.borderRadius}`)(props)};
   box-shadow: ${(props: DialogProps) => themeGet('shadows.overlay-lg')(props)};
-  overflow: ${(props: DialogProps) => (props.sheet ? 'scroll' : 'visible')};
+  ${(props) =>
+    props.hasFooterContent &&
+    `
+    overflow: ${props.sheet ? 'scroll' : 'visible'};
+  `}
 `
 
 const DialogInnerContentWrapper = styled.div`
   position: relative;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto 1fr auto;
-  height: 100%;
+
+  ${(props) => props.hasFooterContent && `height: 100%;`}
 
   ${overflowX}
   ${overflowY}
@@ -197,6 +202,7 @@ export const DialogContent = ({
         fullWidth={fullWidth}
         borderRadius={borderRadius}
         zIndex={zIndex}
+        hasFooterContent={footerContent}
         {...(sheet ? animationStyles.sheet : animationStyles.default)}
       >
         {showCloseButton && (
@@ -213,6 +219,7 @@ export const DialogContent = ({
           overflowX={overflowX}
           overflowY={overflowY}
           sheet={sheet}
+          hasFooterContent={footerContent}
           hugColor={hugColor}
           size={size}
           borderRadius={borderRadius}