Skip to content
This repository was archived by the owner on Sep 30, 2025. It is now read-only.

[Tooltip] Add optional zIndexOverride prop to Tooltip #8080

Merged
merged 2 commits into from
Jan 18, 2023
Merged

[Tooltip] Add optional zIndexOverride prop to Tooltip #8080

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef41e62
Add optional zIndexOverride prop to Tooltip
LauraAubin Jan 18, 2023
bc353bc
Update .changeset/late-files-join.md
LauraAubin Jan 18, 2023
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
5 changes: 5 additions & 0 deletions .changeset/late-files-join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Added an optional `zIndexOverride` prop to `Tooltip`
4 changes: 4 additions & 0 deletions polaris-react/src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ export interface TooltipProps {
* @default '1'
*/
borderRadius?: BorderRadius;
/** Override on the default z-index of 400 */
zIndexOverride?: number;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would it be worth making this with the tokens? https://polaris.shopify.com/tokens/z-index

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Initially I thought no since this would mirror the Popover implementation, though it does seem ideal to enforce the usage of tokens.

Copy link
Contributor

@ginabak ginabak Jan 18, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As in making the zIndexOverride into the token types zIndexZScale, but this currently matches the Popover prop exactly 😄, I know Polaris is trying to move the Props into more token types, but I have no idea! 🤷🏽‍♀️ 😄

cc: @alex-page
https://github.com/Shopify/polaris/blob/8fc0fefdfcedd92830639d040a042055a0105f71/polaris-react/src/components/Popover/Popover.tsx#L55

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would require some reworking since the PositionedOverlay accepts a number, which would impact all Popover usages:

https://github.com/Shopify/polaris/blob/256c4d4e7dfb6f441903db8cbbf0314f6258d876/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx#L42

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Omg, I missed your replies :yells-at-github: 😆 ❤️

/* Callback fired when the tooltip is activated */
onOpen?(): void;
/* Callback fired when the tooltip is dismissed */
Expand All @@ -73,6 +75,7 @@ export function Tooltip({
width = 'default',
padding = 'default',
borderRadius = '1',
zIndexOverride,
onOpen,
onClose,
}: TooltipProps) {
Expand Down Expand Up @@ -132,6 +135,7 @@ export function Tooltip({
width={width}
padding={padding}
borderRadius={borderRadius}
zIndexOverride={zIndexOverride}
>
{content}
</TooltipOverlay>
Expand Down
3 changes: 3 additions & 0 deletions polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export interface TooltipOverlayProps {
width?: Width;
padding?: Padding;
borderRadius?: BorderRadius;
zIndexOverride?: number;
onClose(): void;
}

Expand All @@ -36,6 +37,7 @@ export function TooltipOverlay({
width,
padding,
borderRadius,
zIndexOverride,
}: TooltipOverlayProps) {
const i18n = useI18n();
const markup = active ? (
Expand All @@ -45,6 +47,7 @@ export function TooltipOverlay({
preferredPosition={preferredPosition}
preventInteraction={preventInteraction}
render={renderTooltip}
zIndexOverride={zIndexOverride}
/>
) : null;

Expand Down
17 changes: 17 additions & 0 deletions polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,21 @@ describe('<TooltipOverlay />', () => {
'aria-label': accessibilityLabel,
});
});

it('is set to value of zIndexOverride prop if given', () => {
const activator = document.createElement('button');
const tooltipOverlay = mountWithApp(
<TooltipOverlay
{...defaultProps}
activator={activator}
zIndexOverride={100}
>
Content
</TooltipOverlay>,
);

expect(tooltipOverlay).toContainReactComponent('div', {
style: expect.objectContaining({zIndex: 100}),
});
});
});
12 changes: 12 additions & 0 deletions polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,18 @@ describe('<Tooltip />', () => {
});
});

it("passes 'zIndexOverride' to TooltipOverlay", () => {
const tooltip = mountWithApp(
<Tooltip active content="Inner content" zIndexOverride={100}>
<Link>link content</Link>
</Tooltip>,
);

expect(tooltip).toContainReactComponent(TooltipOverlay, {
zIndexOverride: 100,
});
});

describe('width', () => {
it('renders content with the default width', () => {
const tooltip = mountWithApp(
Expand Down