Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(PPDSC-2396): update no pointer distance for the tooltip and popover components #365

Merged
merged 11 commits into from
Sep 13, 2022
Merged

feat(PPDSC-2396): update no pointer distance for the tooltip and popover components #365

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e7e9e7f
feat(PPDSC-2396): updated customizable distance when there is no pointer
Sep 6, 2022
56516c0
feat(PPDSC-2396): removed the example variable
Sep 6, 2022
4ba63fc
feat(PPDSC-2396): updated docs
Sep 7, 2022
b7d9c3d
feat(PPDSC-2396): simplyfied the condition
Sep 8, 2022
04d4dc6
feat(PPDSC-2396): updating snapshots
Sep 8, 2022
786e77d
feat(PPDSC-2396): adding up the storybook scenario
Sep 11, 2022
cd519c7
feat(PPDSC-2396): tooltip and popover storybook scenarios
Sep 11, 2022
cb41fee
feat(PPDSC-2396): tooltip and popover storybook scenarios
Sep 12, 2022
9e70b94
feat(PPDSC-2396): updated token space0 to space000
Sep 12, 2022
b0d3d44
feat(PPDSC-2396): updated token space0 to space000
Sep 12, 2022
c54d410
Merge branch 'main' into feat/PPDSC-2396-update-pointer-distance
jannuk59 Sep 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions site/pages/components/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,8 +127,8 @@ const PopoverComponent = (layoutProps: LayoutProps) => (
which is measured from the tip of the pointer.
<br />
<br />
If no pointer is visible, then the distance to the reference
element is reduced to zero.
If no pointer is visible, then the distance can still be set via
overrides.
</>
),
media: getIllustrationComponent(
Expand Down
4 changes: 2 additions & 2 deletions site/pages/components/tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,8 +115,8 @@ const TooltipComponent = (layoutProps: LayoutProps) => (
pointer is not used.
<br />
<br />
If no pointer is visible, then the distance to the reference
element is reduced to zero.
If no pointer is visible, then the distance can still be set via
overrides.
</>
),
media: getIllustrationComponent(
Expand Down
2 changes: 1 addition & 1 deletion src/base-floating-element/base-floating-element.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export const BaseFloatingElement = React.forwardRef<
},
whileElementsMounted: autoUpdate,
middleware: [
...(!hidePointer && distance ? [offset(distance)] : []),
...(distance ? [offset(distance)] : []),
...(fallbackBehaviour.includes('flip')
? [flip({boundary})]
: /* istanbul ignore next */ []),
Expand Down
16 changes: 8 additions & 8 deletions src/popover/__tests__/__snapshots__/popover.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,7 +373,7 @@ exports[`Popover close button applies stylePreset overrides 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -24px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -710,7 +710,7 @@ exports[`Popover close button should show left-aligned 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -24px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -1049,7 +1049,7 @@ exports[`Popover close button should show right-aligned 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -24px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -1745,7 +1745,7 @@ exports[`Popover content applies stylePreset overrides 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -24px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -2859,7 +2859,7 @@ exports[`Popover header applies stylePreset overrides 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -24px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -5047,7 +5047,7 @@ exports[`Popover offset should not be applied with with no pointer 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -16px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -6818,7 +6818,7 @@ exports[`Popover should render correct styles: default 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -24px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -7159,7 +7159,7 @@ exports[`Popover should render correct styles: with overrides 1`] = `
min-width: 50px;
position: absolute;
left: 0px;
top: 0px;
top: -24px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down
30 changes: 26 additions & 4 deletions src/popover/__tests__/popover.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,10 +231,32 @@ export const StoryPopoverDefault = () => (
</StorybookSubHeading>
<BoundedPopover header={undefined} closePosition="none" enableDismiss />
</div>
<div>
<StorybookSubHeading>Popover - no pointer</StorybookSubHeading>
<BoundedPopover hidePointer />
</div>
<GridLayout columns={{xs: 'repeat(3, minmax(0, 2fr))'}}>
<div>
<StorybookSubHeading>
Popover - no pointer (default)
</StorybookSubHeading>
<BoundedPopover hidePointer />
</div>
<div>
<StorybookSubHeading>
Popover - no pointer distance (increased)
</StorybookSubHeading>
<BoundedPopover
hidePointer
overrides={{distance: 'space080', maxWidth: '300px'}}
/>
</div>
<div>
<StorybookSubHeading>
Popover - no pointer distance (zero)
</StorybookSubHeading>
<BoundedPopover
hidePointer
overrides={{distance: 'space000', maxWidth: '300px'}}
/>
</div>
</GridLayout>
<div>
<StorybookSubHeading>
Popover - header title overflow
Expand Down
6 changes: 3 additions & 3 deletions src/tooltip/__tests__/__snapshots__/tooltip.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -560,7 +560,7 @@ exports[`Tooltip offset should not be applied with with no pointer 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -16px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -1226,7 +1226,7 @@ exports[`Tooltip should render correct styles: default 1`] = `
z-index: 80;
position: absolute;
left: 0px;
top: 0px;
top: -8px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -1346,7 +1346,7 @@ exports[`Tooltip should render correct styles: with overrides 1`] = `
min-width: 50px;
position: absolute;
left: 0px;
top: 0px;
top: -8px;
}

@media screen and (prefers-reduced-motion: no-preference) {
Expand Down
28 changes: 27 additions & 1 deletion src/tooltip/__tests__/tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -618,12 +618,38 @@ StoryTooltipPlacementsVisualTest.storyName = 'tooltip-placements-visual-test';

export const StoryTooltipNoPointer = () => (
<>
<StorybookSubHeading>Tooltip no pointer</StorybookSubHeading>
<StorybookSubHeading>Tooltip - no pointer (default)</StorybookSubHeading>
<Tooltip content="Tooltip content" placement="right" hidePointer>
<Button size="small" overrides={{stylePreset: 'buttonOutlinedPrimary'}}>
Button
</Button>
</Tooltip>
<StorybookSubHeading>
Tooltip - no pointer distance (increased)
</StorybookSubHeading>
<Tooltip
content="Tooltip content"
placement="right"
hidePointer
overrides={{distance: 'space080'}}
>
<Button size="small" overrides={{stylePreset: 'buttonOutlinedPrimary'}}>
Button
</Button>
</Tooltip>
<StorybookSubHeading>
Tooltip - no pointer distance (zero)
</StorybookSubHeading>
<Tooltip
content="Tooltip content"
placement="right"
hidePointer
overrides={{distance: 'space000'}}
>
<Button size="small" overrides={{stylePreset: 'buttonOutlinedPrimary'}}>
Button
</Button>
</Tooltip>
</>
);
StoryTooltipNoPointer.storyName = 'tooltip-no-pointer';