diff --git a/common/changes/pcln-design-system/dialog-content-wrapper-full-height-if-footer_2024-03-06-18-14.json b/common/changes/pcln-design-system/dialog-content-wrapper-full-height-if-footer_2024-03-06-18-14.json new file mode 100644 index 0000000000..6aea412b6d --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/packages/core/src/Dialog/Dialog.styled.tsx b/packages/core/src/Dialog/Dialog.styled.tsx index 8fedf1afde..d373d9ff3d 100644 --- a/packages/core/src/Dialog/Dialog.styled.tsx +++ b/packages/core/src/Dialog/Dialog.styled.tsx @@ -98,7 +98,11 @@ 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` @@ -106,7 +110,8 @@ const DialogInnerContentWrapper = styled.div` 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}