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.
feat(HTL-109459): multiroom drawer)
Browse files Browse the repository at this point in the history
fareedahmad1 committed Oct 24, 2024
1 parent 9f68dcd commit 6e68b40
Showing 4 changed files with 30 additions and 13 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "pcln-design-system",
"comment": "update drawer props",
"type": "minor"
}
],
"packageName": "pcln-design-system"
}
2 changes: 1 addition & 1 deletion packages/core/src/Drawer/Drawer.stories.tsx
Original file line number Diff line number Diff line change
@@ -142,7 +142,7 @@ export const Anchored = (args) => (
)

export const Mobile = (args) => (
<DrawerStory {...args} isMobile isFloating={false} placement='right'>
<DrawerStory {...args} isMobile isFloating={false} placement='right' width='100%'>
Drawer Content
</DrawerStory>
)
12 changes: 7 additions & 5 deletions packages/core/src/Drawer/Drawer.styled.tsx
Original file line number Diff line number Diff line change
@@ -3,7 +3,6 @@ import { Flex } from '../Flex/Flex'
import { theme } from '../theme'
import { motion } from 'framer-motion'
import React from 'react'
import { Absolute } from '../Absolute/Absolute'
import { getPaletteColor } from '../utils'
import { Box } from '../Box/Box'
import { IconButton } from '../IconButton/IconButton'
@@ -13,7 +12,7 @@ const Component = React.forwardRef((props, ref: React.MutableRefObject<HTMLDivEl
<Box {...props} ref={ref} />
))

const AnimatedAbsolute = motion(Component)
const AnimatedComponent = motion(Component)

const getBorderRadiusStyles = (placement, isFloating) => {
const themeRadius = theme.borderRadii['2xl']
@@ -40,13 +39,16 @@ const positions: Record<PlacementOptions, string> = {
}
const getPlacementStyles = (placement) =>
placement ? `margin-inline:auto; margin-block:auto; ${positions[placement]};` : ``
export const DrawerWrapper = styled(Absolute)`
${({ placement }) =>
export const DrawerWrapper = styled(Box)`
${({ placement, zIndex, position }) =>
`
position: ${position || 'absolute'};
${getPlacementStyles(placement)}
${getPlacementStyles(placement)}
z-index: ${zIndex || theme.zIndices.modal};
`}
`
export const DrawerRoot = styled(AnimatedAbsolute)`
export const DrawerRoot = styled(AnimatedComponent)`
background-color: ${getPaletteColor('background.lightest')};
${({ theme, placement, isFloating }) =>
`box-shadow: ${theme.shadows['overlay-md']};
19 changes: 12 additions & 7 deletions packages/core/src/Drawer/Drawer.tsx
Original file line number Diff line number Diff line change
@@ -8,19 +8,22 @@ import { AnimatePresence, motion } from 'framer-motion'
import { SpaceProps, LayoutProps } from 'styled-system'
import { useScrollWithShadow } from '../useScrollWithShadows/useScrollWithShadow'
import { MotionVariants } from '../Animate/Animate'
import { theme } from '../theme'

export type PlacementOptions = 'top' | 'bottom' | 'right' | 'left'
export type DrawerProps = SpaceProps &
LayoutProps & {
children?: string | React.ReactNode
heading?: string | React.ReactNode
isCollapsed?: boolean
isFloating?: boolean
isOpen?: boolean
isMobile?: boolean
isOpen?: boolean
isDraggable?: boolean
onClose?: () => void
onCollapse?: () => void
placement?: PlacementOptions
children?: string | React.ReactNode
position?: string
}

const enterAnimation = {
@@ -51,6 +54,7 @@ export const Drawer: React.FC<DrawerProps> = ({
isFloating = true,
isMobile = false,
isOpen = false,
isDraggable = true,
onClose,
onCollapse,
placement = 'right',
@@ -62,11 +66,12 @@ export const Drawer: React.FC<DrawerProps> = ({
{isOpen && (
<DrawerWrapper
placement={isMobile ? 'bottom' : placement}
padding={isFloating ? '16px' : 0}
padding={isFloating ? 3 : 0}
maxHeight={isMobile ? ['290px', '400px', '480px', 'calc(100vh - 64px)'] : props.height ?? '100%'}
maxWidth={isMobile ? '100%' : ['400px', '600px', '800px', '100%']}
width={isMobile ? '100%' : props.width}
height={!isCollapsed && props.height ? props.height : 'fit-content'}
{...props}
>
<DrawerRoot
data-testid='drawer'
@@ -75,7 +80,7 @@ export const Drawer: React.FC<DrawerProps> = ({
key='drawer'
placement={isMobile ? 'bottom' : placement}
{...enterAnimation[isMobile ? 'bottom' : placement]}
{...dragToDismissAnimation(onCollapse)}
{...(isDraggable ? dragToDismissAnimation(onCollapse) : {})}
height='100%'
width='100%'
overflow='hidden'
@@ -92,7 +97,7 @@ export const Drawer: React.FC<DrawerProps> = ({
heading
)}
{onClose || onCollapse ? (
<Flex flexDirection='row' ml='auto' style={{ columnGap: '8px' }}>
<Flex flexDirection='row' ml='auto' style={{ columnGap: theme.space[2] }}>
{onCollapse && (
<motion.div
animate={{
@@ -139,12 +144,12 @@ export const Drawer: React.FC<DrawerProps> = ({
boxShadow,
}}
>
<Box p={3} height='100%'>
<Box py={2} px={3} height='100%'>
{children}
</Box>
</Box>
) : (
<Box p={3} height='100%'>
<Box py={2} px={3} height='100%'>
{children}
</Box>
)}

0 comments on commit 6e68b40

Please sign in to comment.