DropdownMenuV2: add GroupLabel subcomponent #64854
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 tasks
ciampo
added
[Type] Enhancement
|
@WordPress/gutenberg-design I've started with some generic label styles, but this definitely needs some tweaks around:
|
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Flaky tests detected in 10ab118. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10592844457
|
|
cc @cbravobernal @artemiomorales specifically to the block bindings refactor — could you please share a link to instructions on how to test the change in the block bindings UI ? The instructions in #62880 assume a level of knowledge that I don't have, and the sample code in https://make.wordpress.org/core/2024/03/06/new-feature-the-block-bindings-api/ doesn't produce an interactive UI in the block inspector sidebar. Thank you 🙏 |
|
Size Change: +2 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
In order to enable the UI, you need to enable it in Gutenberg experiments page.
Then I recommend a PHP snippet to register a meta field. With something like this: After that, create a post, add a paragraph, and it should appear on the right sidebar. This PR #64570 will eventually move the Gutenberg experiment to a settings field, I'll let you know when is updated. Happy to do a screen recording if needed. We can use it afterwards for documentation for the future release too. |
|
Thank you @cbravobernal , with your instructions I managed to test the UI 🎉 |
Using #64340 (comment) as a guide I suggest a couple of small tweaks;
Let's try
Yup, let's align with the separator. I suppose we should avoid truncation for now, as there's no way to read the full label. Guidelines can recommend keeping group labels as short as possible. |
ciampo
force-pushed
the
feat/dropdown-menu-v2/add-grou-label
branch
from
10ab118 to
a50e36c
Compare
|
Sounds good — applied the feedback:
Here are a few updated screenshots:
|
tyxla
approved these changes
Aug 28, 2024
| render={ | ||
| // @ts-expect-error The `children` prop is passed | ||
| <Text | ||
| upperCase |
There was a problem hiding this comment.
Is there any chance we might want the group label not to be uppercase? Or is this an intentional design decision?
There was a problem hiding this comment.
I assume it's intentional, but i'll let @jameskoster confirm
There was a problem hiding this comment.
The type should align to a specific style from the outcome of the work in #64340 (comment).
I don't know how that would be built into the component config file though, or consumed by the Text component. I plan to open a PR soon to add tokens for the individual properties (font, size, line-height, weight), perhaps we can continue the discussion there?
|
Nothing further from my end - should be good to go once we confirm the group label should always be uppercase by design. 🚀 |
jameskoster
approved these changes
Aug 29, 2024
bph
pushed a commit
to bph/gutenberg
that referenced
this pull request
Aug 31, 2024
* DropdownMenuV2: add GroupLabel subcomponent * Use in Storybook examples * Use Text component * Use the first-party group label in the block bindings dropdown menu * Apply design feedback * Remove unneeded block-editor-bindings__popover classname * Add dedicated DropdownMenuGroupLabelProps type * Fix README * CHANGELOG --- Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: tyxla <tyxla@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org> Co-authored-by: cbravobernal <cbravobernal@git.wordpress.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Part of #50459
Add
GroupLabelsub-component toDropdownMenuV2Why?
As discussed in #62880 (comment), there is a need for group labels in
DropdownMenuV2.How?
DropdownMenuV2.GroupLabelcomponent based onAriakit.MenuGroupLabel+<Text variant="muted" />Testing Instructions
Check Storybook examples
Testing Instructions for Keyboard
Screenshots or screencast
Click to see screenshots: