diff --git a/.changeset/late-files-join.md b/.changeset/late-files-join.md new file mode 100644 index 00000000000..0cdd2115f47 --- /dev/null +++ b/.changeset/late-files-join.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Added an optional `zIndexOverride` prop to `Tooltip` diff --git a/polaris-react/src/components/Tooltip/Tooltip.tsx b/polaris-react/src/components/Tooltip/Tooltip.tsx index 9d61db5c111..338c924117d 100644 --- a/polaris-react/src/components/Tooltip/Tooltip.tsx +++ b/polaris-react/src/components/Tooltip/Tooltip.tsx @@ -55,6 +55,8 @@ export interface TooltipProps { * @default '1' */ borderRadius?: BorderRadius; + /** Override on the default z-index of 400 */ + zIndexOverride?: number; /* Callback fired when the tooltip is activated */ onOpen?(): void; /* Callback fired when the tooltip is dismissed */ @@ -73,6 +75,7 @@ export function Tooltip({ width = 'default', padding = 'default', borderRadius = '1', + zIndexOverride, onOpen, onClose, }: TooltipProps) { @@ -132,6 +135,7 @@ export function Tooltip({ width={width} padding={padding} borderRadius={borderRadius} + zIndexOverride={zIndexOverride} > {content} diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx index 5982a3ec94b..5e81315e551 100644 --- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx +++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.tsx @@ -22,6 +22,7 @@ export interface TooltipOverlayProps { width?: Width; padding?: Padding; borderRadius?: BorderRadius; + zIndexOverride?: number; onClose(): void; } @@ -36,6 +37,7 @@ export function TooltipOverlay({ width, padding, borderRadius, + zIndexOverride, }: TooltipOverlayProps) { const i18n = useI18n(); const markup = active ? ( @@ -45,6 +47,7 @@ export function TooltipOverlay({ preferredPosition={preferredPosition} preventInteraction={preventInteraction} render={renderTooltip} + zIndexOverride={zIndexOverride} /> ) : null; diff --git a/polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx b/polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx index 24e46868fa4..f189facb2d3 100644 --- a/polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx +++ b/polaris-react/src/components/Tooltip/components/TooltipOverlay/tests/TooltipOverlay.test.tsx @@ -35,4 +35,21 @@ describe('', () => { 'aria-label': accessibilityLabel, }); }); + + it('is set to value of zIndexOverride prop if given', () => { + const activator = document.createElement('button'); + const tooltipOverlay = mountWithApp( + + Content + , + ); + + expect(tooltipOverlay).toContainReactComponent('div', { + style: expect.objectContaining({zIndex: 100}), + }); + }); }); diff --git a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx index 5981607bc5b..4fc3d741765 100644 --- a/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx +++ b/polaris-react/src/components/Tooltip/tests/Tooltip.test.tsx @@ -239,6 +239,18 @@ describe('', () => { }); }); + it("passes 'zIndexOverride' to TooltipOverlay", () => { + const tooltip = mountWithApp( + + link content + , + ); + + expect(tooltip).toContainReactComponent(TooltipOverlay, { + zIndexOverride: 100, + }); + }); + describe('width', () => { it('renders content with the default width', () => { const tooltip = mountWithApp(