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

Toggle Group Control: add tooltip #36726

Merged
merged 5 commits into from
Nov 25, 2021
Merged

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Nov 22, 2021

Related:

Description

Hey ho.

This PR takes a stab at adding tooltips to the font size segmented control.

The gist is that we're giving the user additional information about their font-size selection only otherwise available via aria-label (and not immediately visible in the browser).

Here's a sneak preview:

Screen Shot 2021-11-22 at 9 05 41 pm

Screen Shot 2021-11-22 at 9 05 20 pm

Why? At present the font size segmented control displays numerical values that are not the same as their descriptions.

So 42 is 'Huge'.

		{
			name: _x( 'Huge', 'font size name' ),
			size: 42,
			slug: 'huge',
		},

To achieve what we need, we've extended ToggleGroupControlOption to add a Tooltip wrapper around the radio component in the presence of a tooltipText prop.

There might be other use cases for this, for example, adding extra descriptive power 🚀 or visible hints to options. The limit is your imagination!

How has this been tested?

npm run storybook:dev

Take a look at FontSizePicker and ToggleGroupControl (With Tooltip variation) : check that the tooltip appears.

Check that there are no regressions for existing usage of ToggleGroupControlOption. For example, inset a Navigation Block into the editor. The Overlay menu in the right-hand sidebar should look and work as expected. There should be no tooltips here.

Screen Shot 2021-11-22 at 9 56 52 pm

Another one is the Post Featured Image Block. Adjust the height dimensions and check the options group:

Screen Shot 2021-11-23 at 9 19 30 am

Run the unit test:
npm run test-unit packages/components/src/toggle-group-control/test/index.js

Types of changes

Adding a feature to an existing component.

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • I've tested my changes with keyboard and screen readers.
  • 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 (please manually search all *.native.js files for terms that need renaming or removal).

@ramonjd ramonjd added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Nov 22, 2021
@ramonjd ramonjd self-assigned this Nov 22, 2021
@github-actions
Copy link

github-actions bot commented Nov 22, 2021

Size Change: +68 B (0%)

Total Size: 1.1 MB

Filename Size Change
build/components/index.min.js 214 kB +68 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 960 B
build/admin-manifest/index.min.js 1.1 kB
build/annotations/index.min.js 2.75 kB
build/api-fetch/index.min.js 2.21 kB
build/autop/index.min.js 2.12 kB
build/blob/index.min.js 459 B
build/block-directory/index.min.js 6.28 kB
build/block-directory/style-rtl.css 1.01 kB
build/block-directory/style.css 1.01 kB
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 B
build/block-editor/index.min.js 139 kB
build/block-editor/style-rtl.css 14.4 kB
build/block-editor/style.css 14.4 kB
build/block-library/blocks/archives/editor-rtl.css 61 B
build/block-library/blocks/archives/editor.css 60 B
build/block-library/blocks/archives/style-rtl.css 65 B
build/block-library/blocks/archives/style.css 65 B
build/block-library/blocks/audio/editor-rtl.css 58 B
build/block-library/blocks/audio/editor.css 58 B
build/block-library/blocks/audio/style-rtl.css 111 B
build/block-library/blocks/audio/style.css 111 B
build/block-library/blocks/audio/theme-rtl.css 125 B
build/block-library/blocks/audio/theme.css 125 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 470 B
build/block-library/blocks/button/editor.css 470 B
build/block-library/blocks/button/style-rtl.css 560 B
build/block-library/blocks/button/style.css 560 B
build/block-library/blocks/buttons/editor-rtl.css 291 B
build/block-library/blocks/buttons/editor.css 291 B
build/block-library/blocks/buttons/style-rtl.css 275 B
build/block-library/blocks/buttons/style.css 275 B
build/block-library/blocks/calendar/style-rtl.css 207 B
build/block-library/blocks/calendar/style.css 207 B
build/block-library/blocks/categories/editor-rtl.css 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 79 B
build/block-library/blocks/categories/style.css 79 B
build/block-library/blocks/code/style-rtl.css 90 B
build/block-library/blocks/code/style.css 90 B
build/block-library/blocks/code/theme-rtl.css 134 B
build/block-library/blocks/code/theme.css 134 B
build/block-library/blocks/columns/editor-rtl.css 206 B
build/block-library/blocks/columns/editor.css 205 B
build/block-library/blocks/columns/style-rtl.css 503 B
build/block-library/blocks/columns/style.css 502 B
build/block-library/blocks/cover/editor-rtl.css 546 B
build/block-library/blocks/cover/editor.css 547 B
build/block-library/blocks/cover/style-rtl.css 1.22 kB
build/block-library/blocks/cover/style.css 1.22 kB
build/block-library/blocks/embed/editor-rtl.css 488 B
build/block-library/blocks/embed/editor.css 488 B
build/block-library/blocks/embed/style-rtl.css 417 B
build/block-library/blocks/embed/style.css 417 B
build/block-library/blocks/embed/theme-rtl.css 124 B
build/block-library/blocks/embed/theme.css 124 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 255 B
build/block-library/blocks/file/style.css 255 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 976 B
build/block-library/blocks/gallery/editor.css 980 B
build/block-library/blocks/gallery/style-rtl.css 1.62 kB
build/block-library/blocks/gallery/style.css 1.62 kB
build/block-library/blocks/gallery/theme-rtl.css 122 B
build/block-library/blocks/gallery/theme.css 122 B
build/block-library/blocks/group/editor-rtl.css 159 B
build/block-library/blocks/group/editor.css 159 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 114 B
build/block-library/blocks/heading/style.css 114 B
build/block-library/blocks/html/editor-rtl.css 332 B
build/block-library/blocks/html/editor.css 333 B
build/block-library/blocks/image/editor-rtl.css 731 B
build/block-library/blocks/image/editor.css 730 B
build/block-library/blocks/image/style-rtl.css 507 B
build/block-library/blocks/image/style.css 511 B
build/block-library/blocks/image/theme-rtl.css 124 B
build/block-library/blocks/image/theme.css 124 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 B
build/block-library/blocks/latest-posts/editor-rtl.css 137 B
build/block-library/blocks/latest-posts/editor.css 137 B
build/block-library/blocks/latest-posts/style-rtl.css 528 B
build/block-library/blocks/latest-posts/style.css 527 B
build/block-library/blocks/list/style-rtl.css 94 B
build/block-library/blocks/list/style.css 94 B
build/block-library/blocks/media-text/editor-rtl.css 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 493 B
build/block-library/blocks/media-text/style.css 490 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 649 B
build/block-library/blocks/navigation-link/editor.css 650 B
build/block-library/blocks/navigation-link/style-rtl.css 94 B
build/block-library/blocks/navigation-link/style.css 94 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 299 B
build/block-library/blocks/navigation-submenu/editor.css 299 B
build/block-library/blocks/navigation-submenu/view.min.js 343 B
build/block-library/blocks/navigation/editor-rtl.css 1.89 kB
build/block-library/blocks/navigation/editor.css 1.89 kB
build/block-library/blocks/navigation/style-rtl.css 1.66 kB
build/block-library/blocks/navigation/style.css 1.65 kB
build/block-library/blocks/navigation/view.min.js 2.74 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 172 B
build/block-library/blocks/page-list/style.css 172 B
build/block-library/blocks/paragraph/editor-rtl.css 157 B
build/block-library/blocks/paragraph/editor.css 157 B
build/block-library/blocks/paragraph/style-rtl.css 273 B
build/block-library/blocks/paragraph/style.css 273 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/style-rtl.css 444 B
build/block-library/blocks/post-comments-form/style.css 444 B
build/block-library/blocks/post-comments/style-rtl.css 492 B
build/block-library/blocks/post-comments/style.css 493 B
build/block-library/blocks/post-excerpt/editor-rtl.css 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 721 B
build/block-library/blocks/post-featured-image/editor.css 721 B
build/block-library/blocks/post-featured-image/style-rtl.css 153 B
build/block-library/blocks/post-featured-image/style.css 153 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 391 B
build/block-library/blocks/post-template/style.css 392 B
build/block-library/blocks/post-terms/style-rtl.css 73 B
build/block-library/blocks/post-terms/style.css 73 B
build/block-library/blocks/post-title/style-rtl.css 80 B
build/block-library/blocks/post-title/style.css 80 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 B
build/block-library/blocks/pullquote/editor-rtl.css 198 B
build/block-library/blocks/pullquote/editor.css 198 B
build/block-library/blocks/pullquote/style-rtl.css 378 B
build/block-library/blocks/pullquote/style.css 378 B
build/block-library/blocks/pullquote/theme-rtl.css 167 B
build/block-library/blocks/pullquote/theme.css 167 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 262 B
build/block-library/blocks/query-pagination/editor.css 255 B
build/block-library/blocks/query-pagination/style-rtl.css 234 B
build/block-library/blocks/query-pagination/style.css 231 B
build/block-library/blocks/query/editor-rtl.css 131 B
build/block-library/blocks/query/editor.css 132 B
build/block-library/blocks/quote/style-rtl.css 187 B
build/block-library/blocks/quote/style.css 187 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 397 B
build/block-library/blocks/search/style.css 398 B
build/block-library/blocks/search/theme-rtl.css 64 B
build/block-library/blocks/search/theme.css 64 B
build/block-library/blocks/separator/editor-rtl.css 99 B
build/block-library/blocks/separator/editor.css 99 B
build/block-library/blocks/separator/style-rtl.css 245 B
build/block-library/blocks/separator/style.css 245 B
build/block-library/blocks/separator/theme-rtl.css 172 B
build/block-library/blocks/separator/theme.css 172 B
build/block-library/blocks/shortcode/editor-rtl.css 474 B
build/block-library/blocks/shortcode/editor.css 474 B
build/block-library/blocks/site-logo/editor-rtl.css 772 B
build/block-library/blocks/site-logo/editor.css 772 B
build/block-library/blocks/site-logo/style-rtl.css 165 B
build/block-library/blocks/site-logo/style.css 165 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 84 B
build/block-library/blocks/site-title/editor.css 84 B
build/block-library/blocks/social-link/editor-rtl.css 177 B
build/block-library/blocks/social-link/editor.css 177 B
build/block-library/blocks/social-links/editor-rtl.css 670 B
build/block-library/blocks/social-links/editor.css 669 B
build/block-library/blocks/social-links/style-rtl.css 1.32 kB
build/block-library/blocks/social-links/style.css 1.32 kB
build/block-library/blocks/spacer/editor-rtl.css 307 B
build/block-library/blocks/spacer/editor.css 307 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 471 B
build/block-library/blocks/table/editor.css 472 B
build/block-library/blocks/table/style-rtl.css 481 B
build/block-library/blocks/table/style.css 481 B
build/block-library/blocks/table/theme-rtl.css 188 B
build/block-library/blocks/table/theme.css 188 B
build/block-library/blocks/tag-cloud/style-rtl.css 146 B
build/block-library/blocks/tag-cloud/style.css 146 B
build/block-library/blocks/template-part/editor-rtl.css 560 B
build/block-library/blocks/template-part/editor.css 559 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 569 B
build/block-library/blocks/video/editor.css 570 B
build/block-library/blocks/video/style-rtl.css 173 B
build/block-library/blocks/video/style.css 173 B
build/block-library/blocks/video/theme-rtl.css 124 B
build/block-library/blocks/video/theme.css 124 B
build/block-library/common-rtl.css 815 B
build/block-library/common.css 812 B
build/block-library/editor-rtl.css 9.81 kB
build/block-library/editor.css 9.81 kB
build/block-library/index.min.js 162 kB
build/block-library/reset-rtl.css 474 B
build/block-library/reset.css 474 B
build/block-library/style-rtl.css 10.5 kB
build/block-library/style.css 10.5 kB
build/block-library/theme-rtl.css 672 B
build/block-library/theme.css 677 B
build/block-serialization-default-parser/index.min.js 1.09 kB
build/block-serialization-spec-parser/index.min.js 2.79 kB
build/blocks/index.min.js 46.3 kB
build/components/style-rtl.css 15.3 kB
build/components/style.css 15.3 kB
build/compose/index.min.js 10.9 kB
build/core-data/index.min.js 13.2 kB
build/customize-widgets/index.min.js 11.4 kB
build/customize-widgets/style-rtl.css 1.5 kB
build/customize-widgets/style.css 1.49 kB
build/data-controls/index.min.js 631 B
build/data/index.min.js 7.47 kB
build/date/index.min.js 31.5 kB
build/deprecated/index.min.js 485 B
build/dom-ready/index.min.js 304 B
build/dom/index.min.js 4.5 kB
build/edit-navigation/index.min.js 16 kB
build/edit-navigation/style-rtl.css 3.76 kB
build/edit-navigation/style.css 3.76 kB
build/edit-post/classic-rtl.css 492 B
build/edit-post/classic.css 494 B
build/edit-post/index.min.js 29.6 kB
build/edit-post/style-rtl.css 7.1 kB
build/edit-post/style.css 7.09 kB
build/edit-site/index.min.js 32.3 kB
build/edit-site/style-rtl.css 6.4 kB
build/edit-site/style.css 6.39 kB
build/edit-widgets/index.min.js 16.5 kB
build/edit-widgets/style-rtl.css 4.18 kB
build/edit-widgets/style.css 4.18 kB
build/editor/index.min.js 37.8 kB
build/editor/style-rtl.css 3.78 kB
build/editor/style.css 3.77 kB
build/element/index.min.js 3.29 kB
build/escape-html/index.min.js 517 B
build/format-library/index.min.js 6.57 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.63 kB
build/html-entities/index.min.js 424 B
build/i18n/index.min.js 3.71 kB
build/is-shallow-equal/index.min.js 501 B
build/keyboard-shortcuts/index.min.js 1.8 kB
build/keycodes/index.min.js 1.39 kB
build/list-reusable-blocks/index.min.js 1.86 kB
build/list-reusable-blocks/style-rtl.css 838 B
build/list-reusable-blocks/style.css 838 B
build/media-utils/index.min.js 2.92 kB
build/notices/index.min.js 925 B
build/nux/index.min.js 2.08 kB
build/nux/style-rtl.css 747 B
build/nux/style.css 743 B
build/plugins/index.min.js 1.84 kB
build/primitives/index.min.js 924 B
build/priority-queue/index.min.js 582 B
build/react-i18n/index.min.js 671 B
build/redux-routine/index.min.js 2.65 kB
build/reusable-blocks/index.min.js 2.22 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 11 kB
build/server-side-render/index.min.js 1.57 kB
build/shortcode/index.min.js 1.49 kB
build/token-list/index.min.js 639 B
build/url/index.min.js 1.9 kB
build/viewport/index.min.js 1.05 kB
build/warning/index.min.js 248 B
build/widgets/index.min.js 7.15 kB
build/widgets/style-rtl.css 1.16 kB
build/widgets/style.css 1.16 kB
build/wordcount/index.min.js 1.04 kB

compressed-size-action

@ramonjd ramonjd force-pushed the add/tooltips-to-font-sizer-picker branch from 874c1ec to 96e5002 Compare November 22, 2021 20:29
@ramonjd ramonjd added the [Status] In Progress Tracking issues with work in progress label Nov 22, 2021
@ramonjd ramonjd changed the title [WIP] Toggle Group Control: add tooltip Toggle Group Control: add tooltip Nov 22, 2021
@ramonjd ramonjd marked this pull request as ready for review November 22, 2021 22:22
@ramonjd ramonjd mentioned this pull request Nov 22, 2021
5 tasks
@mtias
Copy link
Member

mtias commented Nov 22, 2021

Cool, thanks for looking into this!

@ciampo ciampo requested a review from mirka November 23, 2021 09:34
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Testing with Storybook, I noticed that the tooltip appears only when using the keyboard — is this by design?

toggle-tooltip.mp4

I'm not sure if wrapping a ToggleGroupControlOption in a Tooltip affects the semantics / accessibility of the component. From a quick look everything seems ok, but it would be great if @diegohaz would be able to offer any further insights.

Also, these changes on ToggleGroupControl should be reflected in the README and in the @wordpress/components package CHANGELOG.

Finally, some time ago we had introduced a new Flyout component which was supposed to replace Popover in the long run, but I'm not sure if we should be using it. Probably another point where @diegohaz can give some advice.

@ramonjd
Copy link
Member Author

ramonjd commented Nov 23, 2021

Thanks for testing, everyone! 🙇‍♂️

Testing with Storybook, I noticed that the tooltip appears only when using the keyboard — is this by design?

The tooltip appears onMouseover, and with a bit of delay.

I double-checked in FF, Safari and Chrome and it behaves as expected for me. Let me know if the problem persists on your side though and I can test further.

Kapture 2021-11-24 at 08 18 24

Also, these changes on ToggleGroupControl should be reflected in the README and in the @wordpress/components package CHANGELOG.

Ah got it! Thanks for the reminder!

@ramonjd ramonjd force-pushed the add/tooltips-to-font-sizer-picker branch from 96e5002 to 761dacf Compare November 23, 2021 23:16
@ramonjd
Copy link
Member Author

ramonjd commented Nov 23, 2021

I've updated the prop, tests, readme and changelog in 761dacf5a0aa8598bc3138d71dd3de3b5e299025

Thanks for the feedback again!

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

This is looking pretty good so far @ramonjd, nice work ✨

✅ Unit tests pass
✅ Existing uses of the ToggleGroupControl in the editor still work
✅ Tooltips display when hoving with mouse or selecting via keyboard
❓ Storybook tooltip examples do not work (see comments below)

When switching to the showTooltip approach it appears as though the component's stories were missed.

@ramonjd
Copy link
Member Author

ramonjd commented Nov 24, 2021

Thanks for leaving the suggestions @aaronrobertshaw I managed to commit all this from my phone thanks to you ☎️

@ramonjd ramonjd force-pushed the add/tooltips-to-font-sizer-picker branch from 9d484e9 to 9014929 Compare November 24, 2021 08:57
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Thank you for the great work, Ramon! For some reason I must have been faster with my mouse than the 700ms tooltip delay 😅 I can confirm that it works as expected!

I've left a few more comments, but they're all minor, but we're very close!

packages/components/CHANGELOG.md Outdated Show resolved Hide resolved
packages/components/src/tooltip/index.js Outdated Show resolved Hide resolved
packages/components/src/toggle-group-control/test/index.js Outdated Show resolved Hide resolved
@ciampo ciampo added the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 24, 2021
@ramonjd ramonjd force-pushed the add/tooltips-to-font-sizer-picker branch from 9014929 to 0d716c4 Compare November 25, 2021 00:12
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Thank you @ramonjd for addressing all the feedback!

I left one last minor comment, but feel free to merge once that's addressed too!

LGTM 🚀

packages/components/src/toggle-group-control/test/index.js Outdated Show resolved Hide resolved
Copy link
Member

@diegohaz diegohaz left a comment

Choose a reason for hiding this comment

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

Great work @ramonjd! Thank you!

I wonder if we should just show the tooltips without a delay since they're semantically labels, and not just tips.

Anyway, tooltips are hard! Here's an excellent video that explains several problems with tooltips: https://youtu.be/lb0_v7D4kbs

We may also consider a design where both the number and the text are visible without the need of tooltips.

But this PR is already an improvement over the current version, so let's merge it! 🚀

To avoid the TS linter freaking out, we add a default of `null` for the shortcut.
The 'position' prop, though helpful, is required for the same reason.
…olOption` to determine whether to show tooltip

Update stories.
…he tooltip.

Adding tests.
Updated README.md for ToggleGroupControl
Updated CHANGELOG.md

Updated label condition
Updated story
Co-authored-by: Aaron Robertshaw <[email protected]>

Removed unneeded export and __ import
Destructuring Tooltip props to hide them from the TS linter
Updating tests to account for the Tooltip timers.
@ramonjd ramonjd force-pushed the add/tooltips-to-font-sizer-picker branch from 0d716c4 to 7c80be0 Compare November 25, 2021 22:03
@ramonjd
Copy link
Member Author

ramonjd commented Nov 25, 2021

Thanks for the ✅ @ciampo and for the info and the helpful link @diegohaz

I wonder if we should just show the tooltips without a delay since they're semantically labels, and not just tips.

It looks like there's only a delay when we mouse over a tooltip. See:

onMouseEnter: createToggleIsOver( 'onMouseEnter', true ),
, where true tells the event handler to debounce the tooltip.

Seems like a pretty easy change to make assuming there's consensus on removing it. Maybe the delay was there to reduce any perceived "clutter" for power speed mouse users like @ciampo and me :trollface:

Once the tests pass I'll 🚢

@ramonjd ramonjd merged commit 9aeb7d7 into trunk Nov 25, 2021
@ramonjd ramonjd deleted the add/tooltips-to-font-sizer-picker branch November 25, 2021 23:25
@github-actions github-actions bot added this to the Gutenberg 12.1 milestone Nov 25, 2021
@noisysocks noisysocks removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Nov 28, 2021
noisysocks pushed a commit that referenced this pull request Nov 29, 2021
* Adding a ToolTip to the font-size-picker using the current label.
To avoid the TS linter freaking out, we add a default of `null` for the shortcut.
The 'position' prop, though helpful, is required for the same reason.

* Allow a new prop `tooltipText` to be passed down to `ToggleGroupControlOption` to determine whether to show tooltip
Update stories.

* Changed the prop from text to a boolean in order to flag displaying the tooltip.
Adding tests.
Updated README.md for ToggleGroupControl
Updated CHANGELOG.md

Updated label condition
Updated story
Co-authored-by: Aaron Robertshaw <[email protected]>

Removed unneeded export and __ import

* Updated CHANGELOG.md
Destructuring Tooltip props to hide them from the TS linter
Updating tests to account for the Tooltip timers.

* testing tooltip active state using the focus event, which doesn't employ useDebounce for now.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants