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 experimental dropdown menu usages to latest version #55625

Merged
merged 61 commits into from
Dec 21, 2023

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Oct 25, 2023

What?

Refactor existing usages of DropdownMenuV2 to the newest version of the component. The plan is to delete that older version after this PR is merged (#55626)

Why?

There is a new version of the experimental DropdownMenu "v2" component supposed to replace the previous experimental version.

How?

Most refactors were a 1:1 swap between the old and the new version of the component. A few exceptions:

  • SubMenu and SubMenu Triggers: with the new version, we can just reuse DropdownMenu and DropdownMenuItem and they will work in nested menus automatically
  • Many instances of DropdownMenuItem were actually fulfilling a radio item role (without the need for "de-selecting" an item by clicking it again), and therefore I refactored them to the DropdownMenuRadioItem component (which removes the need to explicitly add radio semantics and show a check icon)
  • As per the latest design specs, I removed decorative icons from radio/checkbox menu items
  • I wrapped the extra info in the suffix in <span aria-hidden="true" /> to hide from assistive technology
  • Refactored and simplified the code around IN / NOT IN operators

Testing Instructions

  • Enable the "New admin views" Gutenberg experiment
  • In the site editor, select "Pages" and then "Manage all pages"
  • Check that the actions dropdown (under the "View" button) and column header dropdown work as on trunk

Screenshots or screencast

Screenshot 2023-10-25 at 17 58 22

Screenshot 2023-10-25 at 17 59 04

@ciampo ciampo self-assigned this Oct 25, 2023
@ciampo ciampo added [Feature] UI Components Impacts or related to the UI component system [Package] Edit Site /packages/edit-site labels Oct 25, 2023
@github-actions
Copy link

github-actions bot commented Oct 25, 2023

Size Change: +91 B (0%)

Total Size: 1.71 MB

Filename Size Change
build/edit-site/index.min.js 194 kB +50 B (0%)
build/edit-site/style-rtl.css 14.9 kB +20 B (0%)
build/edit-site/style.css 14.9 kB +21 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 964 B
build/annotations/index.min.js 2.71 kB
build/api-fetch/index.min.js 2.29 kB
build/autop/index.min.js 2.11 kB
build/blob/index.min.js 590 B
build/block-directory/index.min.js 7.25 kB
build/block-directory/style-rtl.css 1.04 kB
build/block-directory/style.css 1.04 kB
build/block-editor/content-rtl.css 4.31 kB
build/block-editor/content.css 4.31 kB
build/block-editor/default-editor-styles-rtl.css 403 B
build/block-editor/default-editor-styles.css 403 B
build/block-editor/index.min.js 246 kB
build/block-editor/style-rtl.css 15.3 kB
build/block-editor/style.css 15.3 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 90 B
build/block-library/blocks/archives/style.css 90 B
build/block-library/blocks/audio/editor-rtl.css 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 138 B
build/block-library/blocks/audio/theme.css 138 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 419 B
build/block-library/blocks/button/editor.css 417 B
build/block-library/blocks/button/style-rtl.css 633 B
build/block-library/blocks/button/style.css 632 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 647 B
build/block-library/blocks/cover/editor.css 650 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 98 B
build/block-library/blocks/details/style.css 98 B
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 138 B
build/block-library/blocks/embed/theme.css 138 B
build/block-library/blocks/file/editor-rtl.css 316 B
build/block-library/blocks/file/editor.css 316 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 322 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 229 B
build/block-library/blocks/form-input/editor.css 228 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 343 B
build/block-library/blocks/form-submission-notification/editor.css 342 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 452 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 957 B
build/block-library/blocks/gallery/editor.css 962 B
build/block-library/blocks/gallery/style-rtl.css 1.75 kB
build/block-library/blocks/gallery/style.css 1.75 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 654 B
build/block-library/blocks/group/editor.css 654 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 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 340 B
build/block-library/blocks/html/editor.css 341 B
build/block-library/blocks/image/editor-rtl.css 834 B
build/block-library/blocks/image/editor.css 833 B
build/block-library/blocks/image/style-rtl.css 1.61 kB
build/block-library/blocks/image/style.css 1.6 kB
build/block-library/blocks/image/theme-rtl.css 137 B
build/block-library/blocks/image/theme.css 137 B
build/block-library/blocks/image/view.min.js 2.02 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 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 505 B
build/block-library/blocks/media-text/style.css 503 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 671 B
build/block-library/blocks/navigation-link/editor.css 672 B
build/block-library/blocks/navigation-link/style-rtl.css 103 B
build/block-library/blocks/navigation-link/style.css 103 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/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.27 kB
build/block-library/blocks/navigation/style.css 2.26 kB
build/block-library/blocks/navigation/view.min.js 1.04 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 401 B
build/block-library/blocks/page-list/editor.css 401 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 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/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 666 B
build/block-library/blocks/post-featured-image/editor.css 662 B
build/block-library/blocks/post-featured-image/style-rtl.css 345 B
build/block-library/blocks/post-featured-image/style.css 345 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 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 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 335 B
build/block-library/blocks/pullquote/style.css 335 B
build/block-library/blocks/pullquote/theme-rtl.css 168 B
build/block-library/blocks/pullquote/theme.css 168 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 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/style-rtl.css 312 B
build/block-library/blocks/query/style.css 308 B
build/block-library/blocks/query/view.min.js 647 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 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 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 613 B
build/block-library/blocks/search/style.css 613 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 475 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 329 B
build/block-library/blocks/shortcode/editor.css 329 B
build/block-library/blocks/site-logo/editor-rtl.css 760 B
build/block-library/blocks/site-logo/editor.css 760 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 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 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 682 B
build/block-library/blocks/social-links/editor.css 681 B
build/block-library/blocks/social-links/style-rtl.css 1.49 kB
build/block-library/blocks/social-links/style.css 1.49 kB
build/block-library/blocks/spacer/editor-rtl.css 359 B
build/block-library/blocks/spacer/editor.css 359 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 399 B
build/block-library/blocks/table/editor.css 399 B
build/block-library/blocks/table/style-rtl.css 646 B
build/block-library/blocks/table/style.css 645 B
build/block-library/blocks/table/theme-rtl.css 157 B
build/block-library/blocks/table/theme.css 157 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 403 B
build/block-library/blocks/template-part/editor.css 403 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/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 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 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 191 B
build/block-library/blocks/video/style.css 191 B
build/block-library/blocks/video/theme-rtl.css 139 B
build/block-library/blocks/video/theme.css 139 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.3 kB
build/block-library/editor.css 12.3 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/index.min.js 214 kB
build/block-library/reset-rtl.css 472 B
build/block-library/reset.css 472 B
build/block-library/style-rtl.css 14.7 kB
build/block-library/style.css 14.7 kB
build/block-library/theme-rtl.css 700 B
build/block-library/theme.css 705 B
build/block-serialization-default-parser/index.min.js 1.13 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.5 kB
build/commands/index.min.js 15.5 kB
build/commands/style-rtl.css 947 B
build/commands/style.css 942 B
build/components/index.min.js 257 kB
build/components/style-rtl.css 12.1 kB
build/components/style.css 12.1 kB
build/compose/index.min.js 12.8 kB
build/core-commands/index.min.js 2.73 kB
build/core-data/index.min.js 72.7 kB
build/customize-widgets/index.min.js 12.1 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 651 B
build/data/index.min.js 8.94 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 462 B
build/dom-ready/index.min.js 336 B
build/dom/index.min.js 4.68 kB
build/edit-post/classic-rtl.css 571 B
build/edit-post/classic.css 571 B
build/edit-post/index.min.js 31.3 kB
build/edit-post/style-rtl.css 7.16 kB
build/edit-post/style.css 7.15 kB
build/edit-widgets/index.min.js 17.7 kB
build/edit-widgets/style-rtl.css 4.71 kB
build/edit-widgets/style.css 4.71 kB
build/editor/index.min.js 55.2 kB
build/editor/style-rtl.css 4.38 kB
build/editor/style.css 4.38 kB
build/element/index.min.js 4.87 kB
build/escape-html/index.min.js 548 B
build/format-library/index.min.js 7.76 kB
build/format-library/style-rtl.css 577 B
build/format-library/style.css 577 B
build/hooks/index.min.js 1.57 kB
build/html-entities/index.min.js 454 B
build/i18n/index.min.js 3.61 kB
build/interactivity/file.min.js 442 B
build/interactivity/image.min.js 2.15 kB
build/interactivity/index.min.js 12.5 kB
build/interactivity/navigation.min.js 1.16 kB
build/interactivity/query.min.js 791 B
build/interactivity/search.min.js 610 B
build/is-shallow-equal/index.min.js 535 B
build/keyboard-shortcuts/index.min.js 1.76 kB
build/keycodes/index.min.js 1.49 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 865 B
build/list-reusable-blocks/style.css 865 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 964 B
build/nux/index.min.js 2.01 kB
build/nux/style-rtl.css 775 B
build/nux/style.css 771 B
build/patterns/index.min.js 5.31 kB
build/patterns/style-rtl.css 564 B
build/patterns/style.css 564 B
build/plugins/index.min.js 1.81 kB
build/preferences-persistence/index.min.js 1.85 kB
build/preferences/index.min.js 1.26 kB
build/primitives/index.min.js 994 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 994 B
build/react-i18n/index.min.js 631 B
build/react-refresh-entry/index.min.js 9.46 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.71 kB
build/reusable-blocks/index.min.js 2.74 kB
build/reusable-blocks/style-rtl.css 265 B
build/reusable-blocks/style.css 265 B
build/rich-text/index.min.js 10.4 kB
build/router/index.min.js 1.79 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.4 kB
build/style-engine/index.min.js 1.98 kB
build/token-list/index.min.js 587 B
build/url/index.min.js 3.83 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.8 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 967 B
build/warning/index.min.js 259 B
build/widgets/index.min.js 7.22 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.18 kB
build/wordcount/index.min.js 1.03 kB

compressed-size-action

Comment on lines 216 to 188
// Note: there is currently a limitation from the DropdownMenu
// component where the radio won't unselect when all related
// radios are set to false.
checked={ isChecked }
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just flagging that currently it looks like DropdownMenuRadioItem is not able to support unselecting a previously selected radio item. I'm currently looking into it.

Copy link
Contributor Author

@ciampo ciampo Oct 30, 2023

Choose a reason for hiding this comment

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

Ok, so I looked a bit more into this, specifically related to the sorting options.

data-view-sorting-dropdown-trunk.mp4

Here are some thoughts:

  • I'm not sure that using checkboxes (like currently on trunk) is a great idea, since users don't expect that checking a checkbox will un-check another checkbox;
  • using radio seems to be the right choice since we're talking about selecting mutually exclusive options
  • however, radio buttons are not really supposed to be de-selectable once selected (see for example this conversation). This also seems to apply to elements with the menuitemradio role — for example, see how the expected list of interactions on MDN never mentions unchecking the currently checked item.

A better approach that could improve semantics, accessibility, and ultimately UX may be to add an extra option labeled something like "None" or "Default" (or anything else that conveys the notion to the user that selecting it will remove the ascending/descending sorting). This approach is also used in the ARIA Authoring Practices Guide menubar example:

Screenshot 2023-10-30 at 17 42 59

Copy link
Contributor

Choose a reason for hiding this comment

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

Might want to get a design check here. @SaxonF @jameskoster

Copy link
Contributor

Choose a reason for hiding this comment

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

Also noting that this implementation changes the design a bit by always keeping the check as a prefix. This affects the sorting submenu.

Screenshot 2023-11-20 at 12 01 45 PM

So that would also need some design input.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We received design input and I'm in the process of applying it to the component (#56041). After that (and a couple of other PRs) are merged, I should be able to rebase and resume the work on this PR :)

);
}

export default function ViewActions( { fields, view, onChangeView } ) {
return (
<DropdownMenuV2
label={ __( 'Actions' ) }
Copy link
Contributor Author

Choose a reason for hiding this comment

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

This label prop wasn't actually doing anything. The correct place for it is on the Button component used as a trigger

const isActive =
currentSortedField &&
const isChecked =
currentSortedField !== 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.

Adding an explicit !== undefined check to make sure that this variable is always a boolean (previously, it could also be undefined)

Comment on lines 111 to 109
// We need to handle this on DropDown component probably..
event.preventDefault();
Copy link
Contributor Author

Choose a reason for hiding this comment

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

While there is a new hideOnClick prop on the new version of DropdownMenuItem, using the DropdownMenuRadioItem component automatically keeps the menu open when clicked

@youknowriad
Copy link
Contributor

I see on your screenshots that the active element is represented by a dot, in my testing (safari) I don't see any.

Screenshot 2023-10-31 at 9 04 12 AM

Also, I wonder if checkboxes are better design wise. I understand that these are more radio buttons and we want to differentiate to clarify the behavior but they look a bit ugly to me :P

@youknowriad
Copy link
Contributor

I was trying keyboard navigation within the dropdown menus, for nested dropdown menus (sorting) I was able to go back and forth between levels using arrow keys (left/right) but I was not able to go back to the top level. Also I kind of expected "Escape" to close the menu but in Safari, the window also exits full screen mode, so I think we need a "preventDefault" somewhere.

DropdownMenuGroupV2Ariakit,
DropdownMenuItemV2Ariakit,
DropdownMenuRadioItemV2Ariakit,
DropdownMenuCheckboxItemV2Ariakit,
Copy link
Contributor

Choose a reason for hiding this comment

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

It feels a bit weird to me that these components have Ariakit in their names, I understand that they're still private so we can change.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Absolutely 💯 I plan on renaming those components once the radix-ui version of the dropdownmenu gets removed

@ciampo
Copy link
Contributor Author

ciampo commented Oct 31, 2023

Thank you for the feedback @youknowriad ! This component is still a bit WIP and PRs like this one can be really helpful in understanding what bugs are left and what tweaks we should apply at this early stage.

I see on your screenshots that the active element is represented by a dot, in my testing (safari) I don't see any.

I'll take a look, thank you!

I wonder if checkboxes are better design wise

The dot is also WIP and needs design validation. I initially went with it since it seemed to me the standard way of representing radio menu items, and I also wanted a way to visually differentiate it from checkboxes since they behave differently. But I'm definitely open to design feedback!

I was trying keyboard navigation within the dropdown menus, for nested dropdown menus (sorting) I was able to go back and forth between levels using arrow keys (left/right) but I was not able to go back to the top level.

I will also look into this. Out of curiosity, can you also replicate it when the component is rendered in isolation (like in the Storybook example) ?

Also I kind of expected "Escape" to close the menu but in Safari, the window also exits full screen mode, so I think we need a "preventDefault" somewhere.

I'll look into this as well, we may indeed need a preventDefault

@youknowriad
Copy link
Contributor

I will also look into this. Out of curiosity, can you also replicate it when the component is rendered in isolation (like in the Storybook example) ?

No, arrow navigation works well on that link.

@ciampo
Copy link
Contributor Author

ciampo commented Nov 8, 2023

I see on your screenshots that the active element is represented by a dot, in my testing (safari) I don't see any.

Thank you for spotting. I've opened #55964 with the fix.

Also, I wonder if checkboxes are better design wise. I understand that these are more radio buttons and we want to differentiate to clarify the behavior but they look a bit ugly to me :P

There should be an updated design spec of the component coming soon, so I guess I'll make any related changes when that comes :) That should also help with this conversation

I was trying keyboard navigation within the dropdown menus, for nested dropdown menus (sorting) I was able to go back and forth between levels using arrow keys (left/right) but I was not able to go back to the top level.

I see what you mean. Here's what I think is happening:

Screenshot 2023-11-08 at 12 03 52

  • The "Sort by" submenu has the default right placement, therefore Ariakit assigns the "ArrowRight" key to trigger it open. But since there isn't enough screen estate to the right, floating-ui internally flips the menu and renders it to the left.
  • The "Title", "Author" and "Date" submenus have the hardcoded left-start placement, because otherwise, if they opened to the right (default behaviour), they would render on top of the parent menu. Ariakit sees the left-start placement, and therefore assigns the ArrowLeft key to trigger the menu open.

To sum it up: Ariakit assigns arrow keys based on the placement prop for the submenu, and doesn't take into account that visually the menu may render with a different placement thanks to floating UI.

For now, in order to at leave have a coherent behaviour when navigating this instance of the menu with keyboard, I've added the placement="left-start" prop to add menus. This will cause the all submenus to open by pressing the left arrow key, and close by pressing the right arrow key.

I wonder if, at the Ariakit level, the Menu component could be able to refine its logic and base it on the final placement computed by floating-ui, instead of using the value of the prop passed to the component. I opened ariakit/ariakit#3029 to discuss it on Ariakit's repository (cc @diegohaz )

Also I kind of expected "Escape" to close the menu but in Safari, the window also exits full screen mode, so I think we need a "preventDefault" somewhere.

Well spotted. I opened a separate PR to address this at the component level: #55962

@ntsekouras
Copy link
Contributor

Thanks for the PR @ciampo! Besides some design input that is needed and a rebase, do you think there are other blockers? I think it would be good to start using the new component. --cc @WordPress/gutenberg-design

@ciampo
Copy link
Contributor Author

ciampo commented Nov 22, 2023

Thanks for the PR @ciampo! Besides some design input that is needed and a rebase, do you think there are other blockers? I think it would be good to start using the new component. --cc @WordPress/gutenberg-design

I'd say that we should be able to start using the component after #56041 is merged. I also have a few other open PRs affecting the component (#56213, #56342, #56400) but they shouldn't be blockers for this PR.

Being able to use the new component will actually be great as a way to gather lots of feedback and make any additional fixes / tweaks

@oandregal
Copy link
Member

Marko, this is not the refactor you are waiting for, though I hope that it makes things easier when time comes #56503 This stems from me looking at some consolidation, and realizing we still use the V2 suffix in most places but not all (InFilter), so I thought I'll fix it.

@ciampo ciampo force-pushed the refactor/dropdown-v2-radix-to-ariakit branch from 73c6759 to 79bff91 Compare December 21, 2023 17:23
@ciampo ciampo merged commit 73954e3 into trunk Dec 21, 2023
56 checks passed
@ciampo ciampo deleted the refactor/dropdown-v2-radix-to-ariakit branch December 21, 2023 18:15
@github-actions github-actions bot added this to the Gutenberg 17.4 milestone Dec 21, 2023
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { unlock } from './lock-unlock';
import { VIEW_LAYOUTS, LAYOUT_TABLE } from './constants';
import { VIEW_LAYOUTS, LAYOUT_TABLE, SORTING_DIRECTIONS } from './constants';
import { DropdownMenuRadioItemCustom } from './dropdown-menu-helper';
Copy link
Member

Choose a reason for hiding this comment

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

@ciampo do we have a v2 radio item we can use here? As far as my understanding goes, we only need a custom radio for cases where we need to be able to uncheck a checked option (only filters that I'm aware of). It's not the case in any of these components.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

isSorted &&
view.sort.direction === direction;
return (
<DropdownMenuItem
<DropdownMenuRadioItemCustom
Copy link
Member

Choose a reason for hiding this comment

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

Same comment as https://github.com/WordPress/gutenberg/pull/55625/files#r1437560831

Why do we need a custom radio here? Since the sorting semantics changed at #56717 we don't need to "uncheck" a checked option.

Copy link
Contributor Author

@ciampo ciampo Jan 3, 2024

Choose a reason for hiding this comment

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

Using normal radios would originally cause the bug discussed in this comment for the sorting options

In terms of functionality I spotted a small issue. If you sort by one field, then sort by another, the original sorting remains selected in the menu. See the screenshot below where I sorted by title, then by author. The menu tells me the data is still sorted by title when it is not

That is a consequence of using "real" menu radio items — the value in the radio group can not be reset to having no items selected.

For the time being, I extracted a "custom menu radio item" component based on the existing code, and reverted all menu items to using the custom implementation which should allow for deselecting items (86748ca (#55625)).

But I think I found a way to still use the actual radio component, testing it in #57505.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] UI Components Impacts or related to the UI component system [Package] Edit Site /packages/edit-site [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants