Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
add zIndex for Dialog
Browse files Browse the repository at this point in the history
jinchi2013 committed Nov 15, 2023
1 parent 8e14dc7 commit 16786c7
Showing 3 changed files with 28 additions and 7 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "pcln-design-system",
"comment": "Add zIndex to Dialog",
"type": "patch"
}
],
"packageName": "pcln-design-system"
}
19 changes: 14 additions & 5 deletions packages/core/src/Dialog/Dialog.styled.tsx
Original file line number Diff line number Diff line change
@@ -7,6 +7,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'

export const dialogSizes = ['sm', 'md', 'lg', 'xl', 'full'] as const
export type DialogSize = (typeof dialogSizes)[number]
@@ -60,6 +61,7 @@ const FloatingCloseButton: (
`

const DialogOverlayWrapper = styled(motion.div)`
${zIndex}
position: fixed;
inset: 0;
display: grid;
@@ -81,9 +83,9 @@ const DialogContentWrapper = styled(motion.div)`
? `${themeGet('space.3')(props)} 0 0 0`
: props.size === 'full'
? '0'
: `${themeGet('space.4')(props)}
${themeGet('space.3')(props)}
${themeGet('space.5')(props)}
: `${themeGet('space.4')(props)}
${themeGet('space.3')(props)}
${themeGet('space.5')(props)}
${themeGet('space.3')(props)}`};
border-radius: ${(props: IDialogProps) =>
props.sheet
@@ -111,12 +113,17 @@ const DialogInnerContentWrapper = styled.div`
props.hugColor && `4px solid ${themeGet('palette.' + props.hugColor)(props)}`};
`

export const DialogOverlay = ({ scrimColor, sheet, children }: Partial<IDialogProps>) => {
export const DialogOverlay = ({ scrimColor, sheet, children, zIndex }: Partial<IDialogProps>) => {
return (
<Dialog.Portal forceMount>
<ThemeProvider>
<Dialog.Overlay asChild forceMount>
<DialogOverlayWrapper scrimColor={scrimColor} sheet={sheet} {...animationStyles.overlay}>
<DialogOverlayWrapper
scrimColor={scrimColor}
sheet={sheet}
zIndex={zIndex}
{...animationStyles.overlay}
>
{children}
</DialogOverlayWrapper>
</Dialog.Overlay>
@@ -140,6 +147,7 @@ export const DialogContent = ({
sheet,
showCloseButton,
size,
zIndex,
onOpenChange,
}: IDialogProps) => {
const headerSizeArray = [
@@ -167,6 +175,7 @@ export const DialogContent = ({
sheet={sheet}
fullWidth={fullWidth}
borderRadius={borderRadius}
zIndex={zIndex}
{...(sheet ? animationStyles.sheet : animationStyles.default)}
>
{showCloseButton && (
6 changes: 4 additions & 2 deletions packages/core/src/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { AnimatePresence } from 'framer-motion'
import type { BorderRadius, ColorSchemes, PaletteColor } from '../theme'
import type { BorderRadius, ColorSchemes, PaletteColor, ZIndex } from '../theme'
import type { DialogSize } from './Dialog.styled'
import { DialogContent, DialogOverlay } from './Dialog.styled'

@@ -25,6 +25,7 @@ export interface IDialogProps {
showCloseButton?: boolean
size?: DialogSize
triggerNode?: React.ReactNode
zIndex?: ZIndex
onOpenChange?: (open: boolean) => void
}

@@ -47,6 +48,7 @@ const PclnDialog = ({
showCloseButton = true,
size = 'md',
triggerNode,
zIndex = 'overlay',
onOpenChange,
}: IDialogProps) => {
const [_open, setOpen] = React.useState(open ?? defaultOpen)
@@ -63,7 +65,7 @@ const PclnDialog = ({
<Dialog.Trigger asChild>{triggerNode}</Dialog.Trigger>
<AnimatePresence>
{_open && (
<DialogOverlay scrimDismiss={scrimDismiss} scrimColor={scrimColor} sheet={sheet}>
<DialogOverlay scrimDismiss={scrimDismiss} scrimColor={scrimColor} sheet={sheet} zIndex={zIndex}>
<DialogContent
ariaDescription={ariaDescription}
ariaTitle={ariaTitle}

0 comments on commit 16786c7

Please sign in to comment.