-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Remove unused components from ui/
#54573
Conversation
Size Change: -9.75 kB (-1%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
Flaky tests detected in 7d287e4. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6266152210
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The copy button in the color picker tests well for me. ✅
There might be a few potential remnants to clean up, but this looks great anyway! 🚀
Nice to see a 4% reduction of the components package bundle size 💯
@@ -73,7 +73,6 @@ function Tooltip( props: TooltipProps ) { | |||
return ( | |||
<> | |||
<Ariakit.TooltipAnchor | |||
onBlur={ tooltipStore.hide } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you please elaborate on this change?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, thank you for asking! I meant to leave a comment here when I opened the PR.
There was a conflict between the onBlur
added to the Tooltip anchor and the function useCopyToClipboard
in the ColorPicker
component:
const copyRef = useCopyToClipboard< HTMLDivElement >( |
In this function, the focus
is reset, resulting in the tooltip hiding on copy button click before displaying the 'copied' text:
gutenberg/packages/compose/src/hooks/use-copy-to-clipboard/index.js
Lines 52 to 59 in 23bb930
clipboard.on( 'success', ( { clearSelection } ) => { | |
// Clearing selection will move focus back to the triggering | |
// button, ensuring that it is not reset to the body, and | |
// further that it is kept within the rendered node. | |
clearSelection(); | |
// Handle ClipboardJS focus bug, see | |
// https://github.com/zenorocha/clipboard.js/issues/680 | |
node.focus(); |
Originally, we added the onBlur
to the tooltip to replicate the legacy behavior where the tooltip is hidden when leaving the document. This was discovered through failing tests; but now, the tests pass without it. The utility function was added after, so it's likely the failure was related to leaky tests instead.
I discussed removing this or adding it as a prop with @ciampo, and we decided to remove it for now. And if we find a use-case where it makes sense to have it, we could add it as an optional prop.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Makes sense to me, thanks 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We may need to consider adding a prop to customize this behaviour, since this change is related to a regression #57206
ref={ copyRef } | ||
icon={ copy } | ||
showTooltip={ false } | ||
size="small" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is this change necessary and/or related to the tooltip swap?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This isn't related to tooltip, so I can remove it. I saw the deprecation warning and thought I could update it while I was already there.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ah, I had missed the isSmall
prop. Let's leave it as-is for this PR, and then we can open a PR to refactor all instances of isSmall
to size="small"
?
70f787b
to
d21d913
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🚀
Always great to see a largely negative line diff 🎉
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will obviously need a rebase before shipping, but it looks great 🚀
It's always a pleasure to see some red!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM as well! 🚀 🚢
d21d913
to
7d287e4
Compare
What?
This expands on the work started in #52953 to remove unused components from the
packages/components/src/ui
folder.Why?
These components (
ui/tooltip
andui/shortcut
) are not publicly exported and are relatively unused. There was one internal use ofui/tooltip
, which is replaced in this PR.How?
By replacing the only internal usage of
ui/tooltip
with our Tooltip component and deleting the unused components.Testing Instructions
npm run build
without errorsColorpicker:
npm run storybook:dev
ColorPicker
component*The placement will look off in Storybook unless the sidebar is hidden (key-down
S
to hide) or the story is opened in isolation. The tooltip background is also black instead of grey, but that reflects a design change made earlier: #50792