Question: Multiline Button

[graysonhicks]

Love this component library. Quick question:

The Button seems to keep the text on a single line, even when the height is increased. What's the best way to wrap the text?

Thanks!

[jeroenransijn]

Hey @graysonhicks thanks for checking out Evergreen and kicking the tires. Could you give a little bit more details on the result you are trying to achieve — maybe a screenshot or napkin sketch works. There might be some ways to hack around this shortcoming, otherwise we'll have to figure out if we want to support that use case.

Thanks!

[graysonhicks]

Sure, no problem. (This is just a coding exercise so it's not a deal-breaker, but I do really like Evergreen and thought I would ask about it).

Basically I have some buttons with some very long text. The text overflows the button, and the button stays on one line and does not grow in heigh to accommodate the text.

Here's a screenshot:

Expected behavior: button grows in height to fit both lines of text.

[jeroenransijn]

Thanks for sharing your use case. Seems like something we might want to support. It will be tricky to support this without adding a new API or creating a new component sadly. This is because a lot of the components such as the buttons are controlled by a fixed height.

[jeroenransijn]

I would recommend moving some content out of the button and changing the label to something like Update State

[graysonhicks]

I understand, thanks. Would also note though, that this would seem pretty common on small screen widths with a lot fewer words.

I may mess around to see if there is some simple styling that would allow a button to grow with text with a special prop.

[jeroenransijn]

This has become an issue for as well! Looping in @vadimdemedes here who is experiencing this issue in our app. I think we probably need to patch this before v4.