From 2d12d9b065f1365befa66999f95b61c21ea28da4 Mon Sep 17 00:00:00 2001 From: Xin00163 Date: Fri, 20 May 2022 15:43:18 +0100 Subject: [PATCH] fix(PPDSC-2117): address comments --- .../__tests__/icon-button.test.tsx | 27 +- src/tooltip/__tests__/tooltip.stories.tsx | 694 +++++++++++------- src/tooltip/tooltip.tsx | 4 +- 3 files changed, 458 insertions(+), 267 deletions(-) diff --git a/src/icon-button/__tests__/icon-button.test.tsx b/src/icon-button/__tests__/icon-button.test.tsx index d5477e3e4a..0e66cd1762 100644 --- a/src/icon-button/__tests__/icon-button.test.tsx +++ b/src/icon-button/__tests__/icon-button.test.tsx @@ -1,5 +1,9 @@ -import React from 'react'; -import {renderToFragmentWithTheme} from '../../test/test-utils'; +import React, {createRef} from 'react'; +import {act} from 'react-test-renderer'; +import { + renderToFragmentWithTheme, + renderWithTheme, +} from '../../test/test-utils'; import {IconButton} from '..'; import {ButtonSize, IconButtonProps} from '../../button'; import {IconFilledEmail} from '../../icons'; @@ -73,4 +77,23 @@ describe('IconButton', () => { const fragment = renderToFragmentWithTheme(renderIconButton, props); expect(fragment).toMatchSnapshot(); }); + + test('focus can be triggered with ref', async () => { + const iconButtonRef = createRef(); + + const props = { + ref: iconButtonRef, + 'aria-label': 'Test icon button', + children: , + }; + + renderWithTheme(IconButton, props); + + await act(async () => { + if (iconButtonRef && iconButtonRef.current) { + iconButtonRef.current.focus(); + } + }); + expect(iconButtonRef.current).toHaveFocus(); + }); }); diff --git a/src/tooltip/__tests__/tooltip.stories.tsx b/src/tooltip/__tests__/tooltip.stories.tsx index 29860dd703..419534c3a6 100644 --- a/src/tooltip/__tests__/tooltip.stories.tsx +++ b/src/tooltip/__tests__/tooltip.stories.tsx @@ -7,16 +7,22 @@ import {styled} from '../../utils'; import {Tooltip} from '../tooltip'; import {IconFilledTwitter} from '../../icons'; import {IconButton} from '../../icon-button'; +import {Flow, Stack} from '../../stack'; +import {LinkInline, LinkStandalone} from '../../link'; export default { title: 'NewsKit Light/tooltip', component: () => 'None', }; -const Box = styled.div` - justify-content: center; - padding: 24px; - margin: 24px; +const StyledDiv = styled.div` + margin-left: 200px; + margin-top: 48px; +`; + +const Container = styled.div` + max-width: 600px; + margin: 50px auto; `; const myCustomTheme = createTheme({ @@ -34,10 +40,120 @@ const myCustomTheme = createTheme({ }, }); +export const StoryTooltip = () => ( + + Tooltip with icon button + + + + + + Tooltip with button + + + + Tooltip with inline link + + Inline link + + Tooltip with standalone link + + Standalone link + + + When title is empty, no tooltip is displayed + + + + + When title is not a string + Lorem ipsum dolor sit amet} + placement="right" + trigger={['focus', 'hover']} + > + + + + When title is long and without maxWidth + + + + + + + + When title is long and with maxWidth + + + + + + + +); +StoryTooltip.storyName = 'tooltip'; +StoryTooltip.parameters = { + eyes: {include: false}, +}; + export const StoryTooltipPlacements = () => ( <> - Tooltip - + Tooltip Placements + ( justifySelf="flex-start" alignSelf="center" > - - - -
- - - -
- - - + + + + + + + + + + + + + ( justifySelf="flex-end" alignSelf="center" > - - - -
- - - -
- - - -
+ + + + + + + + + + + ( justifySelf="center" alignSelf="flex-start" > - - - - - - - - - + + + + + + + + + + + ( justifySelf="center" alignSelf="flex-end" > - - - - - - - - - + + + + + + + + + + + - + ); StoryTooltipPlacements.storyName = 'tooltip-placements'; @@ -184,22 +341,26 @@ StoryTooltipPlacements.parameters = { export const StoryTooltipTriggers = () => ( <> - Triggered by focus - + Triggered by focus only + Triggered by hover & focus - + @@ -212,12 +373,12 @@ StoryTooltipTriggers.parameters = { export const StoryTooltipDefaultOpen = () => ( <> Tooltip default open - + @@ -229,12 +390,17 @@ export const StoryTooltipControlled = () => { return ( <> Tooltip Controlled - +

@@ -250,56 +416,17 @@ StoryTooltipControlled.parameters = { eyes: {include: false}, }; -export const StoryTooltipAccessibility = () => ( - <> - - When title is empty, no tooltip is displayed - - - - - Title is not a string - Hello} placement="right"> - - - Tooltip as a label - - - - - - -); -StoryTooltipAccessibility.storyName = 'tooltip-accessibility'; -StoryTooltipAccessibility.parameters = { - eyes: {include: false}, -}; - export const StoryTooltipOverrides = () => ( <> Tooltip Overrides ( size={ButtonSize.Small} overrides={{stylePreset: 'buttonOutlinedPrimary'}} > - right + Button @@ -321,8 +448,8 @@ StoryTooltipOverrides.storyName = 'tooltip-overrides'; export const StoryTooltipPlacementsVisualTest = () => ( <> - Tooltip - + Tooltip Visual + ( justifySelf="flex-start" alignSelf="center" > - - - -
- - - -
- - - + + + + + + + + + + + + + ( justifySelf="flex-end" alignSelf="center" > - - - -
- - - -
- - - -
+ + + + + + + + + + + ( justifySelf="center" alignSelf="flex-start" > - - - - - - - - - + + + + + + + + + + + ( justifySelf="center" alignSelf="flex-end" > - - - - - - - - - + + + + + + + + + + + - + ); StoryTooltipPlacementsVisualTest.storyName = 'tooltip-placements-visual-test'; diff --git a/src/tooltip/tooltip.tsx b/src/tooltip/tooltip.tsx index 79e244feda..60ab30a62e 100644 --- a/src/tooltip/tooltip.tsx +++ b/src/tooltip/tooltip.tsx @@ -28,7 +28,7 @@ const ThemelessTooltip: React.FC = ({ overrides, ...props }) => { - const [open, onOpenChange] = useControlled({ + const [open, setOpenState] = useControlled({ controlledValue: openProp, defaultValue: Boolean(defaultOpen), }); @@ -36,7 +36,7 @@ const ThemelessTooltip: React.FC = ({ const {x, y, reference, floating, strategy, context} = useFloating({ placement, open, - onOpenChange, + onOpenChange: setOpenState, whileElementsMounted: autoUpdate, });