Button style variant that wraps text

[rolfsmeds]

Describe your motivation

vaadin-button does not wrap text to multiple lines, so if it's too long it gets truncated with ellipsis (actually currently overflows in Aura, which is a bug).

Describe the solution you'd like

Add a button variant that wraps the text (chaging the default would be a breaking change)

Describe alternatives you've considered

No response

Additional context

No response

[knoobie]

Alternative idea: make it possible to define a "max-width" for buttons; once that is reached the text gets automatically truncated and a tooltip is generated with the full text to ensure people can read the full text when hovering?

[rolfsmeds]

You can already set a max-width for buttons, and I made a ticket a while back about automatically showing a tooltip when the button is in icon-only mode. I'm not sure how we could show a tooltip when the button's text overflows, since that would presumably require a rather heavy javascript-based solution to detect.

[jouni]

actually currently overflows in Aura, which is a bug

Aura doesn't affect this, it’s base styles. That said, it was a deliberate choice not to clip or truncate the button content. My assumption was that it would be a better default to let the content be visible, at least a bit more, to allow the user to read the label, even though visually it would look more broken.

It’s probably too easy to create situations where the button label doesn't fit, when using Horizontal Layout, which doesn't wrap by default.

Is wrapping the button label by default a problem?

[rolfsmeds]

I'd say wrapping button text is a good default, actually.
Can't make that change now in Lumo, but I think we could still make it in Aura.
Need to provide a way to disable wrapping (and ellipsis-truncate instead) of course (both globally and per-instance).

[jouni]

We have the --vaadin-button-white-space property now, but if you set that to nowrap, the text just gets clipped instead of truncated. Need to address that still. And add the theme variant.

[jouni]

Oh, damn. I didn't remember we had --vaadin-dashboard-widget-title-wrap (reminded by #9833). I chose --vaadin-button-white-space to keep it consistent with other properties, that we use the same name as the native property we set with that custom property. But if we already have an existing property for the same use case in another component, perhaps we should keep the naming consistent. That would apply to #11825 as well.

Update: renamed in #11864