Add OverflowX & OverflowY Props to the dialog component (#1436)

* adding overflowX & overflowY props to Dialog * adding change file * putting overflow into a type * removing unneeded ternary * adding overflow out of container story * removing unused import * using styled system where applicable * omitting type * changing way of instantiating overflowx & y
priceline · Jan 18, 2024 · 9ac2024 · 9ac2024
1 parent c3161df
commit 9ac2024
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 7 deletions.
diff --git a/common/changes/pcln-design-system/SITE-22333_2024-01-16-20-31.json b/common/changes/pcln-design-system/SITE-22333_2024-01-16-20-31.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "pcln-design-system",
+      "comment": "Updated dialog Component to have an option overflowX & Y prop",
+      "type": "minor"
+    }
+  ],
+  "packageName": "pcln-design-system"
+}
diff --git a/packages/core/src/Dialog/Dialog.stories.args.tsx b/packages/core/src/Dialog/Dialog.stories.args.tsx
@@ -7,6 +7,7 @@ import { borderRadii, colorSchemeNames, paletteColors } from '../theme'
 import type { DialogProps } from './Dialog'
 import { dialogSizes } from './Dialog.styled'
 
+const overflowArgs = ['scroll', 'visible', 'hidden', 'auto']
 export const argTypes: Partial<ArgTypes<DialogProps>> = {
   borderRadius: { control: { type: 'select' }, options: Object.keys(borderRadii) },
   children: { control: { type: 'none' } },
@@ -21,6 +22,8 @@ export const argTypes: Partial<ArgTypes<DialogProps>> = {
   showCloseButton: { control: { type: 'boolean' } },
   size: { control: { type: 'select' }, options: dialogSizes },
   triggerNode: { control: { type: 'none' } },
+  overflowX: { control: { type: 'select' }, options: overflowArgs },
+  overflowY: { control: { type: 'select' }, options: overflowArgs },
 }
 
 export const defaultArgs: Partial<DialogProps> = {
@@ -50,4 +53,6 @@ export const defaultArgs: Partial<DialogProps> = {
   showCloseButton: true,
   size: 'md',
   triggerNode: <Button>Open Dialog</Button>,
+  overflowX: 'auto',
+  overflowY: 'auto',
 }
diff --git a/packages/core/src/Dialog/Dialog.stories.tsx b/packages/core/src/Dialog/Dialog.stories.tsx
@@ -107,10 +107,39 @@ const ExampleOverflowingContent = (props: GridProps) => (
   </Grid>
 )
 
+const ExampleOverflowingAbsolute = (props: GridProps) => {
+  const [showText, setShowText] = React.useState(false)
+  return (
+    <Box>
+      <Grid p={24} gap={5} {...props}>
+        <Button onClick={() => setShowText(!showText)}>Show text overflow</Button>
+      </Grid>
+      {showText && (
+        <Text style={{ overflow: 'visible', position: 'absolute' }}>
+          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex quas voluptas, vel id doloribus
+          delectus deleniti minus eius ullam vero dolorum laboriosam dolor cupiditate sequi quia itaque
+          corrupti quaerat hic! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex quas voluptas,
+          vel id doloribus delectus deleniti minus eius ullam vero dolorum laboriosam dolor cupiditate sequi
+          quia itaque corrupti quaerat hic!
+        </Text>
+      )}
+    </Box>
+  )
+}
+
 export const OverflowModal: DialogStory = {
   ...Playground,
   args: {
-    children: <ExampleOverflowingContent />,
+    children: <ExampleOverflowingContent overflow='auto' />,
+  },
+}
+
+export const OverflowOutsideContainer: DialogStory = {
+  ...Playground,
+  args: {
+    children: <ExampleOverflowingAbsolute overflow='visible' />,
+    overflowX: 'visible',
+    overflowY: 'visible',
   },
 }
 

diff --git a/packages/core/src/Dialog/Dialog.styled.tsx b/packages/core/src/Dialog/Dialog.styled.tsx
@@ -4,7 +4,7 @@ import themeGet from '@styled-system/theme-get'
 import { HTMLMotionProps, Transition, motion } from 'framer-motion'
 import React from 'react'
 import styled from 'styled-components'
-import { zIndex } from 'styled-system'
+import { overflowX, overflowY, zIndex } from 'styled-system'
 import { Box } from '../Box'
 import { CloseButton, type CloseButtonProps } from '../CloseButton/CloseButton'
 import { Grid } from '../Grid'
@@ -103,7 +103,8 @@ const DialogContentWrapper = styled(motion.div)`
 
 const DialogInnerContentWrapper = styled.div`
   position: relative;
-  overflow: auto;
+  ${overflowX}
+  ${overflowY}
   border-radius: ${(props: DialogProps) =>
     props.sheet
       ? `${themeGet(`borderRadii.${props.borderRadius}`)(props)} ${themeGet(
@@ -152,6 +153,8 @@ export const DialogContent = ({
   size,
   zIndex,
   onOpenChange,
+  overflowX,
+  overflowY,
 }: DialogProps) => {
   const headerSizeArray = [
     headerIcon ? 'heading5' : 'heading4', // xs
@@ -198,7 +201,14 @@ export const DialogContent = ({
           <Dialog.Title>{ariaTitle}</Dialog.Title>
         </VisuallyHidden>
 
-        <DialogInnerContentWrapper sheet={sheet} hugColor={hugColor} size={size} borderRadius={borderRadius}>
+        <DialogInnerContentWrapper
+          overflowX={overflowX}
+          overflowY={overflowY}
+          sheet={sheet}
+          hugColor={hugColor}
+          size={size}
+          borderRadius={borderRadius}
+        >
           {headerContent && (
             <Grid
               colorScheme={headerColorScheme}

diff --git a/packages/core/src/Dialog/Dialog.tsx b/packages/core/src/Dialog/Dialog.tsx
@@ -2,11 +2,11 @@ import { AnimatePresence } from 'framer-motion'
 import type { BorderRadius, ColorSchemes, PaletteColor, ZIndex } from '../theme'
 import type { DialogSize } from './Dialog.styled'
 import { DialogContent, DialogOverlay } from './Dialog.styled'
-
+import { OverflowProps } from 'styled-system'
 import * as Dialog from '@radix-ui/react-dialog'
 import React, { useEffect } from 'react'
 
-export type DialogProps = {
+export type DialogProps = Omit<OverflowProps, 'overflow'> & {
   ariaDescription: string
   ariaTitle: string
   borderRadius?: BorderRadius
@@ -49,6 +49,8 @@ const PclnDialog = ({
   size = 'md',
   triggerNode,
   zIndex = 'overlay',
+  overflowX = 'auto',
+  overflowY = 'auto',
   onOpenChange,
 }: DialogProps) => {
   const [_open, setOpen] = React.useState(open ?? defaultOpen)
@@ -67,6 +69,8 @@ const PclnDialog = ({
         {_open && (
           <DialogOverlay scrimDismiss={scrimDismiss} scrimColor={scrimColor} sheet={sheet} zIndex={zIndex}>
             <DialogContent
+              overflowX={overflowX}
+              overflowY={overflowY}
               ariaDescription={ariaDescription}
               ariaTitle={ariaTitle}
               borderRadius={borderRadius}

diff --git a/packages/core/src/theme/theme.ts b/packages/core/src/theme/theme.ts
@@ -313,7 +313,6 @@ export const borderRadii = {
 }
 
 export type BorderRadius = keyof typeof borderRadii
-
 export const maxContainerWidth = '1280px'
 
 export const shadows = {
-Original file line number
+Diff line change
@@ Expand Up / @@ -313,7 +313,6 @@ export const borderRadii = { @@
     }
     export type BorderRadius = keyof typeof borderRadii
     export const maxContainerWidth = '1280px'
     export const shadows = {
@@ Expand Down @@