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.

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(ClipboardButton): delay tooltip's closing animation after copying #1735

Merged
merged 10 commits into from
Oct 1, 2024

Conversation

lxndr
Copy link
Contributor

@lxndr lxndr commented Aug 6, 2024

Closes #1739

@gravity-ui-bot
Copy link
Contributor

Preview is ready.

@gravity-ui-bot
Copy link
Contributor

Visual Tests Report is ready.

@lxndr lxndr self-assigned this Aug 7, 2024
@lxndr lxndr force-pushed the feat/delay-clipboard-button-animation branch from fbebcea to 1f74089 Compare September 23, 2024 19:33
@lxndr lxndr marked this pull request as ready for review September 23, 2024 19:37
@lxndr
Copy link
Contributor Author

lxndr commented Sep 24, 2024

Passed design review.

@Raubzeug
Copy link
Contributor

@lxndr Hi! Let's try not to add new props and make the case with those that are already defined in the component's api?
For example, it seems that the problem with the rapidly hiding Copied title can be solved by adding the prop to the ActionTooltip closeDelay={status=== 'success' ? 1000 : 0}.
And to force hide the tooltip, you can pass the disabled={true} prop in the ActionTooltip.

@lxndr
Copy link
Contributor Author

lxndr commented Sep 25, 2024

@Raubzeug Hi! That's what I tried here 626aa91. Looked OK but not quite what the design envisioned. So, I asked for a greater control over the tooltip - disabled can only hide. I agree that it's better off with existing props. Refer to UXRFC-400 for more info.

@Raubzeug
Copy link
Contributor

@lxndr as for me, thats much better! Lets stick to this implementation and bring it to the final?

src/components/ClipboardButton/ClipboardButton.tsx Outdated Show resolved Hide resolved
src/components/ClipboardButton/ClipboardButton.tsx Outdated Show resolved Hide resolved
src/components/ClipboardButton/ClipboardButton.tsx Outdated Show resolved Hide resolved
src/components/ClipboardButton/ClipboardButton.tsx Outdated Show resolved Hide resolved
src/components/ClipboardButton/ClipboardButton.tsx Outdated Show resolved Hide resolved

const timerIdRef = React.useRef<number>();
const [tooltipCloseDelay, setTooltipCloseDelay] = React.useState<number | undefined>(undefined);
const [tooltipDisabled, setTooltipDisabled] = React.useState<boolean>(false);
Copy link
Contributor

Choose a reason for hiding this comment

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

no need in generic here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

React.useEffect(() => window.clearTimeout(timerIdRef.current), []);

const handleCopy: OnCopyHandler = React.useCallback(
(...args) => {
Copy link
Contributor

Choose a reason for hiding this comment

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

no need in destructuring here

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

Comment on lines +134 to +137
if (tooltipDisabled) {
setTooltipDisabled(false);
setTooltipCloseDelay(undefined);
}
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
if (tooltipDisabled) {
setTooltipDisabled(false);
setTooltipCloseDelay(undefined);
}
if (tooltipDisabled) {
setTooltipDisabled(false);
}
if (tooltipCloseDelay) {
setTooltipCloseDelay(undefined);
}

Copy link
Contributor Author

Choose a reason for hiding this comment

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

why?

Copy link
Contributor

Choose a reason for hiding this comment

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

why?

generally tooltipCloseDelay doesn't depends on tooltipDisabled? Why should we reset it if it's already undefined?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

it said if (!showTooltip) { before, so we only reset if tooltip is made hidden.

Copy link
Contributor

Choose a reason for hiding this comment

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

why? what if we decide not to hide tooltip? it seems we will still need to reset closingDelay.

Copy link
Contributor Author

@lxndr lxndr Oct 1, 2024

Choose a reason for hiding this comment

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

What do you mean by deciding not to hide the tooltip? It has to be hidden even if the user quickly leaves and hovers the button again. We only show the tooltip if it's gone and user hovers the button afterwards.

@lxndr lxndr force-pushed the feat/delay-clipboard-button-animation branch from 7631ca0 to 80651db Compare October 1, 2024 14:12
@lxndr lxndr merged commit 20f19dd into main Oct 1, 2024
6 checks passed
@lxndr lxndr deleted the feat/delay-clipboard-button-animation branch October 1, 2024 14:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Delay clipboard button's closing animation
3 participants