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

Jump to bottom

Revert "Add controlled prop to open the Tooltip" #11751

Merged
merged 1 commit into from
Mar 16, 2024
Merged

Revert "Add controlled prop to open the Tooltip" #11751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 0 additions & 5 deletions .changeset/three-plants-smile.md
View file
Open in desktop

This file was deleted.

86 changes: 13 additions & 73 deletions polaris-react/src/components/Tooltip/Tooltip.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useCallback, useState} from 'react';
import React, {useState} from 'react';
import {QuestionCircleIcon} from '@shopify/polaris-icons';
import type {ComponentMeta} from '@storybook/react';
import {
Expand Down Expand Up @@ -43,7 +43,7 @@ export function All() {
export function Default() {
return (
<Box paddingBlockStart="2400">
<Tooltip defaultOpen content="This order has shipping labels.">
<Tooltip active content="This order has shipping labels.">
<Text variant="bodyLg" fontWeight="bold" as="span">
Order #1001
</Text>
Expand All @@ -57,7 +57,7 @@ export function PreferredPosition() {
<Box paddingBlockStart="2400">
<InlineStack gap="800">
<Tooltip
defaultOpen
active
content="This content is positioned above the activator"
preferredPosition="above"
>
Expand All @@ -75,7 +75,7 @@ export function PreferredPosition() {
</InlineStack>
</Tooltip>
<Tooltip
defaultOpen
active
content="This content is positioned above the activator"
preferredPosition="below"
>
Expand All @@ -102,7 +102,7 @@ export function Width() {
<Box paddingBlockStart="2400">
<InlineStack gap="800">
<Tooltip
defaultOpen
active
content="This content has the default width and will break into a new line at 200px width"
>
<InlineStack gap="100">
Expand All @@ -119,7 +119,7 @@ export function Width() {
</InlineStack>
</Tooltip>
<Tooltip
defaultOpen
active
content="This content has the wide width and will break into a new line at 275px width"
width="wide"
>
Expand All @@ -145,7 +145,7 @@ export function Padding() {
return (
<Box paddingBlockStart="2400">
<InlineStack gap="800">
<Tooltip defaultOpen content="This content has default padding">
<Tooltip active content="This content has default padding">
<InlineStack gap="100">
<Text variant="bodyLg" fontWeight="medium" as="span">
Tooltip with
Expand All @@ -160,7 +160,7 @@ export function Padding() {
</InlineStack>
</Tooltip>
<Tooltip
defaultOpen
active
content="This content has padding of 4 (space-400 / 16px)"
padding="400"
>
Expand All @@ -187,7 +187,7 @@ export function BorderRadius() {
<Box paddingBlockStart="2400">
<InlineStack gap="800">
<Tooltip
defaultOpen
active
content="This content has the default (radius-100) border radius"
>
<InlineStack gap="100">
Expand All @@ -204,7 +204,7 @@ export function BorderRadius() {
</InlineStack>
</Tooltip>
<Tooltip
defaultOpen
active
content="This content has a border radius of 200 (radius-200)"
borderRadius="200"
>
Expand Down Expand Up @@ -307,7 +307,7 @@ export function ActivatorAsDiv() {
return (
<Box paddingBlockStart="2400">
<Tooltip
defaultOpen
active
content="This tooltip is rendered as a div"
activatorWrapper="div"
>
Expand Down Expand Up @@ -462,7 +462,7 @@ export function Alignment() {
export function HasUnderline() {
return (
<Card padding="400">
<Tooltip defaultOpen content="This tooltip has an underline" hasUnderline>
<Tooltip active content="This tooltip has an underline" hasUnderline>
<Text variant="bodyLg" fontWeight="bold" as="span">
Order #1001
</Text>
Expand All @@ -486,66 +486,6 @@ export function PersistOnClick() {
);
}

export function WithControlledState() {
const [open, setOpen] = useState(false);

const handleOpen = useCallback(() => {
setOpen(true);
}, []);

const handleClose = useCallback(() => {
setOpen(false);
}, []);

return (
<Box paddingBlockStart="2400">
<Tooltip
open={open}
onOpen={handleOpen}
onClose={handleClose}
content="Tooltip content"
>
<Text as="span" variant="bodyLg">
The tooltip is {String(open)}
</Text>
</Tooltip>
</Box>
);
}

export function WithUncontrolledState() {
return (
<Box paddingBlockStart="2400">
<InlineStack gap="2400">
<Tooltip
content="This tooltip should render on load and hover"
defaultOpen
>
<Text variant="bodyLg" fontWeight="bold" as="span">
Default open true
</Text>
</Tooltip>
<Tooltip
content="This tooltip should render on hover"
defaultOpen={false}
>
<Text variant="bodyLg" fontWeight="bold" as="span">
Default open false
</Text>
</Tooltip>
<Tooltip
content="This tooltip should render on hover"
defaultOpen={undefined}
>
<Text variant="bodyLg" fontWeight="bold" as="span">
Default open undefined
</Text>
</Tooltip>
</InlineStack>
</Box>
);
}

export function ActiveStates() {
const [popoverActive, setPopoverActive] = useState(false);
const [tooltipActive, setTooltipActive] =
Expand Down Expand Up @@ -618,7 +558,7 @@ export function ActiveStates() {
export function OneCharacter() {
return (
<Box paddingBlockStart="2400">
<Tooltip defaultOpen content="j">
<Tooltip active content="j">
<Text variant="bodyLg" fontWeight="bold" as="span">
Order #1001
</Text>
Expand Down
26 changes: 8 additions & 18 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 @@ -23,14 +23,7 @@ export interface TooltipProps {
children?: React.ReactNode;
/** The content to display within the tooltip */
content: React.ReactNode;
/** Toggle whether the tooltip is visible. */
open?: boolean;
/** Toggle whether the tooltip is visible initially */
defaultOpen?: boolean;
/**
* Toggle whether the tooltip is visible initially
* @deprecated Use `defaultOpen` instead
*/
/** Toggle whether the tooltip is visible */
active?: boolean;
/** Delay in milliseconds while hovering over an element before the tooltip is visible */
hoverDelay?: number;
Expand Down Expand Up @@ -81,8 +74,6 @@ export function Tooltip({
children,
content,
dismissOnMouseOut,
open,
defaultOpen: defaultOpenProp,
active: originalActive,
hoverDelay,
preferredPosition = 'above',
Expand All @@ -100,15 +91,14 @@ export function Tooltip({
const borderRadius = borderRadiusProp || '200';

const WrapperComponent: any = activatorWrapper;
const defaultOpen = defaultOpenProp ?? originalActive;
const {
value: active,
setTrue: setActiveTrue,
setFalse: handleBlur,
} = useToggle(Boolean(defaultOpen));
} = useToggle(Boolean(originalActive));

const {value: persist, toggle: togglePersisting} = useToggle(
Boolean(defaultOpen) && Boolean(persistOnClick),
Boolean(originalActive) && Boolean(persistOnClick),
);

const [activatorNode, setActivatorNode] = useState<HTMLElement | null>(null);
Expand All @@ -118,14 +108,14 @@ export function Tooltip({
const id = useId();
const activatorContainer = useRef<HTMLElement>(null);
const mouseEntered = useRef(false);
const [shouldAnimate, setShouldAnimate] = useState(Boolean(!defaultOpen));
const [shouldAnimate, setShouldAnimate] = useState(Boolean(!originalActive));
const hoverDelayTimeout = useRef<NodeJS.Timeout | null>(null);
const hoverOutTimeout = useRef<NodeJS.Timeout | null>(null);

const handleFocus = useCallback(() => {
if (originalActive === false) return;

setActiveTrue();
if (originalActive !== false) {
setActiveTrue();
}
}, [originalActive, setActiveTrue]);

useEffect(() => {
Expand Down Expand Up @@ -189,7 +179,7 @@ export function Tooltip({
id={id}
preferredPosition={preferredPosition}
activator={activatorNode}
active={open ?? active}
active={active}
accessibilityLabel={accessibilityLabel}
onClose={noop}
preventInteraction={dismissOnMouseOut}
Expand Down
Loading
Loading