From 5d9bc475fb0c4f516ebe7df055704331a7027e06 Mon Sep 17 00:00:00 2001 From: JordonHong <156821810+JordonHong@users.noreply.github.com> Date: Tue, 5 Mar 2024 16:47:07 -0600 Subject: [PATCH] [UXPT]: create stories for dialog use cases (#1448) * [UXPT]: create stories for dialog use cases * changelog * refactor tooltip story as a dialog story * add height to child content in dialog stories * add inner content to popover dialog story * add interaction test to open menu * update popover and menu stories --- ...fix-dialog-trapFocus_2024-02-07-20-15.json | 10 ++++++++++ ...fix-dialog-trapFocus_2024-02-07-20-15.json | 10 ++++++++++ ...fix-dialog-trapFocus_2024-02-07-20-15.json | 10 ++++++++++ packages/core/src/Dialog/Dialog.stories.tsx | 15 ++++++++++++++ packages/menu/src/Menu/Menu.stories.jsx | 20 ++++++++++++++++++- .../popover/src/Popover/Popover.stories.jsx | 11 ++++++++++ 6 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 common/changes/pcln-design-system/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json create mode 100644 common/changes/pcln-menu/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json create mode 100644 common/changes/pcln-popover/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json diff --git a/common/changes/pcln-design-system/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json b/common/changes/pcln-design-system/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json new file mode 100644 index 0000000000..54b8f39ed3 --- /dev/null +++ b/common/changes/pcln-design-system/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "pcln-design-system", + "comment": "Created stories for Menu, Popover, and Tooltip in a Dialog", + "type": "patch" + } + ], + "packageName": "pcln-design-system" +} \ No newline at end of file diff --git a/common/changes/pcln-menu/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json b/common/changes/pcln-menu/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json new file mode 100644 index 0000000000..e69f992cd8 --- /dev/null +++ b/common/changes/pcln-menu/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "pcln-menu", + "comment": "Created story for a Menu inside a Dialog", + "type": "patch" + } + ], + "packageName": "pcln-menu" +} \ No newline at end of file diff --git a/common/changes/pcln-popover/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json b/common/changes/pcln-popover/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json new file mode 100644 index 0000000000..3240d20da2 --- /dev/null +++ b/common/changes/pcln-popover/UXPT-6348-fix-dialog-trapFocus_2024-02-07-20-15.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "pcln-popover", + "comment": "Created story for a Popover inside a Dialog", + "type": "patch" + } + ], + "packageName": "pcln-popover" +} \ No newline at end of file diff --git a/packages/core/src/Dialog/Dialog.stories.tsx b/packages/core/src/Dialog/Dialog.stories.tsx index c93576eb8f..04268db5f9 100644 --- a/packages/core/src/Dialog/Dialog.stories.tsx +++ b/packages/core/src/Dialog/Dialog.stories.tsx @@ -11,6 +11,7 @@ import { Text } from '../Text/Text' import { Dialog, type DialogProps } from './Dialog' import { argTypes, defaultArgs } from './Dialog.stories.args' import { Flex } from '../Flex/Flex' +import { Tooltip } from '../Tooltip/Tooltip' type DialogStory = StoryObj<DialogProps> @@ -90,6 +91,20 @@ export const WithHeaderContentProps: DialogStory = { }, } +export const WithTooltip: DialogStory = { + ...Playground, + args: { + children: ( + <Box width={400} p={2} my={2} height={200}> + <Tooltip bottom center color='primary'> + top center tooltip + </Tooltip> + </Box> + ) + } +} + + const ExampleImage = () => ( <img src='https://s1.pclncdn.com/design-assets/hero/beach.jpg?opto&optimize=medium&auto=jpg&width=600&height=450&fit=crop' diff --git a/packages/menu/src/Menu/Menu.stories.jsx b/packages/menu/src/Menu/Menu.stories.jsx index 64d14fa897..c67534af95 100644 --- a/packages/menu/src/Menu/Menu.stories.jsx +++ b/packages/menu/src/Menu/Menu.stories.jsx @@ -1,7 +1,8 @@ +import { userEvent, within } from '@storybook/testing-library' import React, { useState } from 'react' import { argTypes, defaultArgs } from './Menu.stories.args' import { Bed as BedIcon } from 'pcln-icons' -import { Box, ButtonChip, Divider, Flex, Link, Text } from 'pcln-design-system' +import { Box, Button, ButtonChip, Dialog, Divider, Flex, Link, Text } from 'pcln-design-system' import { listItems, currencies } from '../../test/mocks/Menu' import Menu from './Menu' import MenuItem from '../MenuItem' @@ -193,6 +194,23 @@ export const UsingButtonPropsPropForStylingButtonText = () => ( </Menu> ) +export const InDialog = { + render: () => ( + <Dialog size='md' triggerNode={<Button>Open Dialog</Button>}> + <Box height={200} p={4}> + <Menu width={300} buttonText='Menu'> + <MenuItems /> + </Menu> + </Box> + </Dialog> + ), + play: async ({ canvasElement }) => { + const canvas = within(canvasElement) + const openButton = canvas.getByText('Open Dialog') + await userEvent.click(openButton) + }, +} + export const CustomMenuWithoutMenuItems = () => { return ( <Menu idx='link-dropdown' buttonText='Support' width='300px'> diff --git a/packages/popover/src/Popover/Popover.stories.jsx b/packages/popover/src/Popover/Popover.stories.jsx index c28a4a5345..3a3579a8a8 100644 --- a/packages/popover/src/Popover/Popover.stories.jsx +++ b/packages/popover/src/Popover/Popover.stories.jsx @@ -5,6 +5,7 @@ import { Box, Button, CloseButton, + Dialog, FilterChip, Flex, IconButton, @@ -138,6 +139,16 @@ export const bottom = () => ( </Popover> ) +export const InDialog = () => ( + <Dialog triggerNode={<Button>Open Dialog</Button>} size='md' zIndex={0}> + <Box height={300}> + <Popover renderContent={InnerContent} placement='bottom' ariaLabel='Dialog Popover' idx={2} width={400}> + <Button m={3}>Open Popover</Button> + </Popover> + </Box> + </Dialog> +) + export const hideOverlay = () => ( <Popover renderContent={InnerContent}