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

refactor: tooltip component from classical to functional with hooks #27682

Merged
merged 2 commits into from
Dec 16, 2020

Conversation

grzim
Copy link
Contributor

@grzim grzim commented Dec 11, 2020

Description

Regarding #22890 "Refactor all React class components to functional components using hooks" this pull request contains a rewritten tooltip

This is a reupload of #27353 . Due to some problems with merging I had to make a new pull request.

How has this been tested?

Changes tested visually and with a set of unit tests that were adjusted to work with the functional component.

Types of changes

Refactor

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@github-actions
Copy link

github-actions bot commented Dec 11, 2020

Size Change: -308 B (0%)

Total Size: 1.28 MB

Filename Size Change
build/annotations/index.js 3.8 kB -1 B
build/api-fetch/index.js 3.42 kB +1 B
build/autop/index.js 2.84 kB +1 B
build/block-editor/index.js 128 kB -277 B (0%)
build/block-editor/style-rtl.css 11.2 kB -50 B (0%)
build/block-editor/style.css 11.2 kB -49 B (0%)
build/block-library/blocks/social-links/style-rtl.css 1.37 kB +10 B (0%)
build/block-library/blocks/social-links/style.css 1.37 kB +10 B (0%)
build/block-library/blocks/verse/editor-rtl.css 141 B -12 B (8%)
build/block-library/blocks/verse/editor.css 141 B -12 B (8%)
build/block-library/editor-rtl.css 9.07 kB -3 B (0%)
build/block-library/editor.css 9.07 kB -3 B (0%)
build/block-library/index.js 150 kB +254 B (0%)
build/block-library/style-rtl.css 8.36 kB +11 B (0%)
build/block-library/style.css 8.36 kB +10 B (0%)
build/block-serialization-default-parser/index.js 1.88 kB +2 B (0%)
build/components/index.js 171 kB -526 B (0%)
build/compose/index.js 11 kB +163 B (1%)
build/core-data/index.js 15.4 kB +6 B (0%)
build/data/index.js 8.98 kB +2 B (0%)
build/date/index.js 31.8 kB +3 B (0%)
build/deprecated/index.js 768 B -1 B
build/edit-navigation/index.js 11.1 kB +3 B (0%)
build/edit-post/index.js 306 kB +70 B (0%)
build/edit-post/style-rtl.css 6.47 kB +2 B (0%)
build/edit-post/style.css 6.45 kB +2 B (0%)
build/edit-site/index.js 24.4 kB -66 B (0%)
build/edit-widgets/index.js 26.3 kB -8 B (0%)
build/editor/index.js 43.3 kB +85 B (0%)
build/element/index.js 4.63 kB -1 B
build/format-library/index.js 6.73 kB -5 B (0%)
build/hooks/index.js 2.27 kB -1 B
build/html-entities/index.js 622 B -1 B
build/i18n/index.js 3.57 kB +2 B (0%)
build/is-shallow-equal/index.js 698 B +1 B
build/keyboard-shortcuts/index.js 2.54 kB -2 B (0%)
build/media-utils/index.js 5.32 kB -1 B
build/notices/index.js 1.86 kB +5 B (0%)
build/nux/index.js 3.42 kB +1 B
build/plugins/index.js 2.54 kB -2 B (0%)
build/priority-queue/index.js 789 B -1 B
build/redux-routine/index.js 2.84 kB +2 B (0%)
build/reusable-blocks/index.js 2.92 kB -2 B (0%)
build/rich-text/index.js 13.4 kB +71 B (0%)
build/server-side-render/index.js 2.77 kB +1 B
build/token-list/index.js 1.27 kB -1 B
build/url/index.js 2.84 kB -1 B
build/viewport/index.js 1.86 kB +1 B
build/wordcount/index.js 1.22 kB -1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/blob/index.js 665 B 0 B
build/block-directory/index.js 8.72 kB 0 B
build/block-directory/style-rtl.css 943 B 0 B
build/block-directory/style.css 942 B 0 B
build/block-library/blocks/archives/editor-rtl.css 120 B 0 B
build/block-library/blocks/archives/editor.css 119 B 0 B
build/block-library/blocks/audio/editor-rtl.css 118 B 0 B
build/block-library/blocks/audio/editor.css 118 B 0 B
build/block-library/blocks/audio/style-rtl.css 152 B 0 B
build/block-library/blocks/audio/style.css 152 B 0 B
build/block-library/blocks/block/editor-rtl.css 211 B 0 B
build/block-library/blocks/block/editor.css 211 B 0 B
build/block-library/blocks/button/editor-rtl.css 513 B 0 B
build/block-library/blocks/button/editor.css 513 B 0 B
build/block-library/blocks/button/style-rtl.css 488 B 0 B
build/block-library/blocks/button/style.css 488 B 0 B
build/block-library/blocks/buttons/editor-rtl.css 275 B 0 B
build/block-library/blocks/buttons/editor.css 275 B 0 B
build/block-library/blocks/buttons/style-rtl.css 346 B 0 B
build/block-library/blocks/buttons/style.css 346 B 0 B
build/block-library/blocks/calendar/style-rtl.css 249 B 0 B
build/block-library/blocks/calendar/style.css 249 B 0 B
build/block-library/blocks/categories/editor-rtl.css 135 B 0 B
build/block-library/blocks/categories/editor.css 135 B 0 B
build/block-library/blocks/categories/style-rtl.css 132 B 0 B
build/block-library/blocks/categories/style.css 132 B 0 B
build/block-library/blocks/code/style-rtl.css 152 B 0 B
build/block-library/blocks/code/style.css 152 B 0 B
build/block-library/blocks/columns/editor-rtl.css 239 B 0 B
build/block-library/blocks/columns/editor.css 239 B 0 B
build/block-library/blocks/columns/style-rtl.css 467 B 0 B
build/block-library/blocks/columns/style.css 466 B 0 B
build/block-library/blocks/cover/editor-rtl.css 440 B 0 B
build/block-library/blocks/cover/editor.css 438 B 0 B
build/block-library/blocks/cover/style-rtl.css 1.27 kB 0 B
build/block-library/blocks/cover/style.css 1.27 kB 0 B
build/block-library/blocks/embed/editor-rtl.css 529 B 0 B
build/block-library/blocks/embed/editor.css 529 B 0 B
build/block-library/blocks/embed/style-rtl.css 419 B 0 B
build/block-library/blocks/embed/style.css 419 B 0 B
build/block-library/blocks/file/editor-rtl.css 246 B 0 B
build/block-library/blocks/file/editor.css 245 B 0 B
build/block-library/blocks/file/style-rtl.css 288 B 0 B
build/block-library/blocks/file/style.css 289 B 0 B
build/block-library/blocks/freeform/editor-rtl.css 2.49 kB 0 B
build/block-library/blocks/freeform/editor.css 2.49 kB 0 B
build/block-library/blocks/gallery/editor-rtl.css 692 B 0 B
build/block-library/blocks/gallery/editor.css 693 B 0 B
build/block-library/blocks/gallery/style-rtl.css 1.11 kB 0 B
build/block-library/blocks/gallery/style.css 1.11 kB 0 B
build/block-library/blocks/group/editor-rtl.css 364 B 0 B
build/block-library/blocks/group/editor.css 364 B 0 B
build/block-library/blocks/group/style-rtl.css 117 B 0 B
build/block-library/blocks/group/style.css 117 B 0 B
build/block-library/blocks/heading/editor-rtl.css 174 B 0 B
build/block-library/blocks/heading/editor.css 174 B 0 B
build/block-library/blocks/heading/style-rtl.css 137 B 0 B
build/block-library/blocks/heading/style.css 137 B 0 B
build/block-library/blocks/html/editor-rtl.css 324 B 0 B
build/block-library/blocks/html/editor.css 325 B 0 B
build/block-library/blocks/image/editor-rtl.css 738 B 0 B
build/block-library/blocks/image/editor.css 737 B 0 B
build/block-library/blocks/image/style-rtl.css 510 B 0 B
build/block-library/blocks/image/style.css 511 B 0 B
build/block-library/blocks/latest-comments/editor-rtl.css 201 B 0 B
build/block-library/blocks/latest-comments/editor.css 200 B 0 B
build/block-library/blocks/latest-comments/style-rtl.css 315 B 0 B
build/block-library/blocks/latest-comments/style.css 315 B 0 B
build/block-library/blocks/latest-posts/editor-rtl.css 183 B 0 B
build/block-library/blocks/latest-posts/editor.css 183 B 0 B
build/block-library/blocks/latest-posts/style-rtl.css 568 B 0 B
build/block-library/blocks/latest-posts/style.css 567 B 0 B
build/block-library/blocks/list/editor-rtl.css 129 B 0 B
build/block-library/blocks/list/editor.css 129 B 0 B
build/block-library/blocks/list/style-rtl.css 127 B 0 B
build/block-library/blocks/list/style.css 127 B 0 B
build/block-library/blocks/media-text/editor-rtl.css 240 B 0 B
build/block-library/blocks/media-text/editor.css 240 B 0 B
build/block-library/blocks/media-text/style-rtl.css 579 B 0 B
build/block-library/blocks/media-text/style.css 577 B 0 B
build/block-library/blocks/more/editor-rtl.css 479 B 0 B
build/block-library/blocks/more/editor.css 479 B 0 B
build/block-library/blocks/navigation-link/editor-rtl.css 438 B 0 B
build/block-library/blocks/navigation-link/editor.css 440 B 0 B
build/block-library/blocks/navigation-link/style-rtl.css 747 B 0 B
build/block-library/blocks/navigation-link/style.css 745 B 0 B
build/block-library/blocks/navigation/editor-rtl.css 1.31 kB 0 B
build/block-library/blocks/navigation/editor.css 1.31 kB 0 B
build/block-library/blocks/navigation/style-rtl.css 222 B 0 B
build/block-library/blocks/navigation/style.css 222 B 0 B
build/block-library/blocks/nextpage/editor-rtl.css 440 B 0 B
build/block-library/blocks/nextpage/editor.css 440 B 0 B
build/block-library/blocks/paragraph/editor-rtl.css 161 B 0 B
build/block-library/blocks/paragraph/editor.css 161 B 0 B
build/block-library/blocks/paragraph/style-rtl.css 279 B 0 B
build/block-library/blocks/paragraph/style.css 279 B 0 B
build/block-library/blocks/post-author/editor-rtl.css 255 B 0 B
build/block-library/blocks/post-author/editor.css 255 B 0 B
build/block-library/blocks/post-author/style-rtl.css 229 B 0 B
build/block-library/blocks/post-author/style.css 230 B 0 B
build/block-library/blocks/post-content/editor-rtl.css 187 B 0 B
build/block-library/blocks/post-content/editor.css 187 B 0 B
build/block-library/blocks/post-excerpt/editor-rtl.css 134 B 0 B
build/block-library/blocks/post-excerpt/editor.css 134 B 0 B
build/block-library/blocks/post-featured-image/editor-rtl.css 387 B 0 B
build/block-library/blocks/post-featured-image/editor.css 386 B 0 B
build/block-library/blocks/post-featured-image/style-rtl.css 149 B 0 B
build/block-library/blocks/post-featured-image/style.css 149 B 0 B
build/block-library/blocks/preformatted/style-rtl.css 119 B 0 B
build/block-library/blocks/preformatted/style.css 119 B 0 B
build/block-library/blocks/pullquote/editor-rtl.css 231 B 0 B
build/block-library/blocks/pullquote/editor.css 231 B 0 B
build/block-library/blocks/pullquote/style-rtl.css 359 B 0 B
build/block-library/blocks/pullquote/style.css 359 B 0 B
build/block-library/blocks/query-loop/editor-rtl.css 142 B 0 B
build/block-library/blocks/query-loop/editor.css 141 B 0 B
build/block-library/blocks/query-loop/style-rtl.css 361 B 0 B
build/block-library/blocks/query-loop/style.css 363 B 0 B
build/block-library/blocks/query/editor-rtl.css 179 B 0 B
build/block-library/blocks/query/editor.css 179 B 0 B
build/block-library/blocks/quote/editor-rtl.css 121 B 0 B
build/block-library/blocks/quote/editor.css 121 B 0 B
build/block-library/blocks/quote/style-rtl.css 215 B 0 B
build/block-library/blocks/quote/style.css 214 B 0 B
build/block-library/blocks/rss/editor-rtl.css 270 B 0 B
build/block-library/blocks/rss/editor.css 270 B 0 B
build/block-library/blocks/rss/style-rtl.css 314 B 0 B
build/block-library/blocks/rss/style.css 313 B 0 B
build/block-library/blocks/search/editor-rtl.css 213 B 0 B
build/block-library/blocks/search/editor.css 213 B 0 B
build/block-library/blocks/search/style-rtl.css 384 B 0 B
build/block-library/blocks/search/style.css 386 B 0 B
build/block-library/blocks/separator/editor-rtl.css 151 B 0 B
build/block-library/blocks/separator/editor.css 151 B 0 B
build/block-library/blocks/separator/style-rtl.css 281 B 0 B
build/block-library/blocks/separator/style.css 281 B 0 B
build/block-library/blocks/shortcode/editor-rtl.css 547 B 0 B
build/block-library/blocks/shortcode/editor.css 547 B 0 B
build/block-library/blocks/site-logo/editor-rtl.css 251 B 0 B
build/block-library/blocks/site-logo/editor.css 251 B 0 B
build/block-library/blocks/site-logo/style-rtl.css 166 B 0 B
build/block-library/blocks/site-logo/style.css 166 B 0 B
build/block-library/blocks/social-link/editor-rtl.css 211 B 0 B
build/block-library/blocks/social-link/editor.css 211 B 0 B
build/block-library/blocks/social-links/editor-rtl.css 749 B 0 B
build/block-library/blocks/social-links/editor.css 749 B 0 B
build/block-library/blocks/spacer/editor-rtl.css 321 B 0 B
build/block-library/blocks/spacer/editor.css 321 B 0 B
build/block-library/blocks/spacer/style-rtl.css 107 B 0 B
build/block-library/blocks/spacer/style.css 107 B 0 B
build/block-library/blocks/subhead/editor-rtl.css 148 B 0 B
build/block-library/blocks/subhead/editor.css 148 B 0 B
build/block-library/blocks/subhead/style-rtl.css 134 B 0 B
build/block-library/blocks/subhead/style.css 134 B 0 B
build/block-library/blocks/table/editor-rtl.css 530 B 0 B
build/block-library/blocks/table/editor.css 530 B 0 B
build/block-library/blocks/table/style-rtl.css 433 B 0 B
build/block-library/blocks/table/style.css 433 B 0 B
build/block-library/blocks/tag-cloud/editor-rtl.css 162 B 0 B
build/block-library/blocks/tag-cloud/editor.css 162 B 0 B
build/block-library/blocks/tag-cloud/style-rtl.css 145 B 0 B
build/block-library/blocks/tag-cloud/style.css 145 B 0 B
build/block-library/blocks/template-part/editor-rtl.css 644 B 0 B
build/block-library/blocks/template-part/editor.css 645 B 0 B
build/block-library/blocks/text-columns/editor-rtl.css 146 B 0 B
build/block-library/blocks/text-columns/editor.css 146 B 0 B
build/block-library/blocks/text-columns/style-rtl.css 209 B 0 B
build/block-library/blocks/text-columns/style.css 209 B 0 B
build/block-library/blocks/verse/style-rtl.css 117 B 0 B
build/block-library/blocks/verse/style.css 117 B 0 B
build/block-library/blocks/video/editor-rtl.css 547 B 0 B
build/block-library/blocks/video/editor.css 548 B 0 B
build/block-library/blocks/video/style-rtl.css 241 B 0 B
build/block-library/blocks/video/style.css 241 B 0 B
build/block-library/common-rtl.css 940 B 0 B
build/block-library/common.css 937 B 0 B
build/block-library/theme-rtl.css 789 B 0 B
build/block-library/theme.css 790 B 0 B
build/block-serialization-spec-parser/index.js 3.06 kB 0 B
build/blocks/index.js 48.1 kB 0 B
build/components/style-rtl.css 15.4 kB 0 B
build/components/style.css 15.4 kB 0 B
build/data-controls/index.js 827 B 0 B
build/dom-ready/index.js 571 B 0 B
build/dom/index.js 4.95 kB 0 B
build/edit-navigation/style-rtl.css 881 B 0 B
build/edit-navigation/style.css 885 B 0 B
build/edit-site/style-rtl.css 3.91 kB 0 B
build/edit-site/style.css 3.91 kB 0 B
build/edit-widgets/style-rtl.css 3.1 kB 0 B
build/edit-widgets/style.css 3.1 kB 0 B
build/editor/editor-styles-rtl.css 476 B 0 B
build/editor/editor-styles.css 478 B 0 B
build/editor/style-rtl.css 3.84 kB 0 B
build/editor/style.css 3.84 kB 0 B
build/escape-html/index.js 735 B 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 B 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.1 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/nux/style-rtl.css 671 B 0 B
build/nux/style.css 668 B 0 B
build/primitives/index.js 1.43 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/warning/index.js 1.14 kB 0 B

compressed-size-action

@talldan talldan added [Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality labels Dec 15, 2020
Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

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

Nice work here @grzim, it works really well in testing.

I only had a few smaller comments that should be fairly easy to address.

I restarted the tests as there were unrelated failures relating to an issue with axe-core (an accessibility testing framework in our e2e tests).

*
* @type {boolean}
*/
const [ isMouseDown, setIsMouseDown ] = useState( false );
Copy link
Contributor

Choose a reason for hiding this comment

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

I wonder a ref could be considered here as the previous implementation didn't use state for this value, instead preferring a property.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Are you sure ref would be a better option here? My rule of thumb is to avoid mutable values when it is possible

Copy link
Contributor

Choose a reason for hiding this comment

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

State will trigger re-renders where a ref wouldn't, but probably not a massive issue in this situation.

packages/components/src/tooltip/index.js Outdated Show resolved Hide resolved
packages/components/src/tooltip/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@talldan talldan left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks for your patience waiting for the tests to pass. Got there in the end.

@talldan talldan merged commit d917f84 into master Dec 16, 2020
@talldan talldan deleted the rewrite-tooltip-to-functional-component branch December 16, 2020 08:36
@github-actions github-actions bot added this to the Gutenberg 9.6 milestone Dec 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Code Quality Issues or PRs that relate to code quality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants