Size Change: +57 B (0%)

Total Size: 1.51 MB

_{compressed-size-action}

In general I'm a little reluctant to add this ellipsis, as to me it just makes this text look different than other text in the dropdown, and nothing about it says that it'll add a secondary action.

At the same time, I'd hate for an icon to be added to denote the same, and if that's the alternative, I'd much prefer this typographic addition which is at least consistent, it appears, with what MacOS does. So I'd love a couple of more thoughts on this one!

+1 for a simple typographical solution. I think the ellipsis communicates "there will be more to this" fairly effectively.

That said, this feels like the sort of change that could create more confusion if it is not introduced holistically, and maintained programatically. It would be strange (imo) for this heuristic to exist only in the block toolbar, and not in the editor toolbar, Command Palette, and so forth.

That said, this feels like the sort of change that could create more confusion if it is not introduced holistically, and maintained programatically.

Something worth bringing up in the systems work?

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: alexstine <alexstine@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

I remember discussing this with @ciampo at some point, but I don't recall where... maybe during the DropdownMenu V2 implementation? 🤔

Iirc the upshot was that it would be difficult to automatically codify this behavior. Maybe there could be a prop that adds the ellipsis?

This still feels like a good idea to me, it's just unclear how we can ensure consistent implementation.

Maybe there could be a prop that adds the ellipsis?

That could work fine imo.

I remember discussing this with @ciampo at some point, but I don't recall where... maybe during the DropdownMenu V2 implementation? 🤔

It was discussed in #61094 :)

To recap, my take is the DropdownMenu doesn't have a way to know whether clicking on an item will open a modal. That's something that only the consumer of DropdownMenu knows, and that's why IMO adding ellipsis to the menu item labels should fall on the consumer of DropdownMenu, and not on the DropdownMenu component itself.

The component aims at being as flexible as possible and aims at doing so via composition, allowing its consumers to set any text label (or React node, FWIW) they want. Hence also why I'm hesitant to adding a prop on DropdownMenu.ItemLabel (the label, for example, already adds ellipsis when text needs truncation).

(cc @WordPress/gutenberg-components )

I'm strongly in favor of adding the ellipsis rule in the documented design guidelines. We should be careful of the language though, "opens a modal" is too specific in my opinion. For example, the HIG uses this verbiage:

Append an ellipsis to a menu item’s label when the action requires more information before it can complete. The ellipsis character (…) signals that people need to input information or make additional choices, typically within another view.

How about we open an issue and discuss how to actualize this? There are definitely pros/cons to using a prop vs. relying directly on consumer-provided strings. I can imagine there being inconsistency between faux/real ellipses (... and …), although some of this can be prevented by linting. We also have to solve how we want to reconcile it with text truncation ellipses, like @ciampo noted.

Closing as this is not a priority (and perhaps it should be a prop for consistency)