Skip to content

Commit

Permalink
Revert "Add controlled prop to open the Tooltip" (#11751)
Browse files Browse the repository at this point in the history 
Reverts #11714

@chloerice and I are exploring an alternative pattern for hybrid
controlled/uncontrolled component state management.
  • Loading branch information
@aaronccasanova
aaronccasanova authored Mar 16, 2024
1 parent 5cff962 commit 139c025
Show file tree
Hide file tree
Showing 7 changed files with 37 additions and 212 deletions.
5 changes: 0 additions & 5 deletions .changeset/three-plants-smile.md
View file

This file was deleted.

86 changes: 13 additions & 73 deletions polaris-react/src/components/Tooltip/Tooltip.stories.tsx
View file
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
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

0 comments on commit 139c025

Please sign in to comment.