Rename innerContentScroll prop to innerContentOverflow (#1490)

* Rename innerContentScroll prop to innerContentOverflow
priceline · May 6, 2024 · 528ef5a · 528ef5a
1 parent cfad423
commit 528ef5a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/common/changes/pcln-design-system/rename-innerContentOverflow-prop_2024-04-29-21-42.json b/common/changes/pcln-design-system/rename-innerContentOverflow-prop_2024-04-29-21-42.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Rename innerContentScroll prop to innerContentOverflow",
+      "type": "patch"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Dialog/Dialog.styled.tsx b/packages/core/src/Dialog/Dialog.styled.tsx
@@ -147,7 +147,7 @@ export const DialogOverlay = ({ scrimColor, sheet, children, zIndex }: Partial<D
 }
 
 const SmoothTransitionBox = styled(Box)`
-  overflow: ${(props) => (props.innerContentScroll ? 'scroll' : 'auto')};
+  overflow: ${(props) => props.innerContentOverflow ?? 'auto'};
   transition: all 0.3s ease-in-out;
 `
 
@@ -164,16 +164,16 @@ export const DialogContent = ({
   headerIcon,
   headerShowCloseButton,
   hugColor,
+  innerContentOverflow,
+  overflowX,
+  overflowY,
   scrimDismiss,
   sheet,
   showCloseButton,
+  showScrollShadow,
   size,
   zIndex,
   onOpenChange,
-  overflowX,
-  overflowY,
-  showScrollShadow,
-  innerContentScroll,
 }: DialogProps) => {
   const headerSizeArray = [
     headerIcon ? 'heading5' : 'heading4', // xs
@@ -248,7 +248,7 @@ export const DialogContent = ({
           )}
           {showScrollShadow ? (
             <SmoothTransitionBox
-              innerContentScroll={innerContentScroll}
+              innerContentOverflow={innerContentOverflow}
               style={{ boxShadow }}
               height='100%'
               onScroll={onScrollHandler}
@@ -260,7 +260,7 @@ export const DialogContent = ({
               )}
             </SmoothTransitionBox>
           ) : (
-            <Box height='100%' style={innerContentScroll ? { overflowY: 'scroll' } : undefined}>
+            <Box height='100%' style={innerContentOverflow ? { overflowY: innerContentOverflow } : undefined}>
               {children}
             </Box>
           )}

diff --git a/packages/core/src/Dialog/Dialog.tsx b/packages/core/src/Dialog/Dialog.tsx
@@ -24,6 +24,7 @@ export type DialogProps = Omit<OverflowProps, 'overflow'> & {
   headerIcon?: React.ReactNode
   headerShowCloseButton?: boolean
   hugColor?: PaletteColor
+  innerContentOverflow?: 'auto' | 'clip' | 'hidden' | 'scroll' | 'visible'
   open?: boolean
   scrimColor?: 'dark' | 'medium' | 'light' | (string & {})
   scrimDismiss?: boolean
@@ -33,7 +34,6 @@ export type DialogProps = Omit<OverflowProps, 'overflow'> & {
   triggerNode?: React.ReactNode
   zIndex?: ZIndex
   onOpenChange?: (open: boolean) => void
-  innerContentScroll?: boolean
   showScrollShadow?: boolean
 }
 
@@ -54,19 +54,19 @@ const PclnDialog = ({
   headerIcon,
   headerShowCloseButton = false,
   hugColor,
+  innerContentOverflow = 'scroll',
   open,
   scrimColor = 'dark',
   scrimDismiss = true,
   sheet = false,
   showCloseButton = true,
+  showScrollShadow,
   size = 'md',
   triggerNode,
   zIndex = 'overlay',
   overflowX = 'auto',
   overflowY = 'auto',
   onOpenChange,
-  showScrollShadow,
-  innerContentScroll = true,
 }: DialogProps) => {
   const [_open, setOpen] = React.useState(open ?? defaultOpen)
 
@@ -84,7 +84,6 @@ const PclnDialog = ({
         {_open && (
           <DialogOverlay scrimDismiss={scrimDismiss} scrimColor={scrimColor} sheet={sheet} zIndex={zIndex}>
             <DialogContent
-              innerContentScroll={innerContentScroll}
               overflowX={overflowX}
               overflowY={overflowY}
               ariaDescription={ariaDescription}
@@ -98,6 +97,7 @@ const PclnDialog = ({
               headerIcon={headerIcon}
               headerShowCloseButton={headerShowCloseButton}
               hugColor={hugColor}
+              innerContentOverflow={innerContentOverflow}
               onOpenChange={handleOpenChange}
               scrimDismiss={scrimDismiss}
               sheet={sheet}