Behavior for components with fitContent.

[aidamag]

Clarification
Talking on the base that fitContent has value fit-content (without unset as we have currently).

Discussion
I want to discuss the behaviour of the components with fitContent.

Right now, alert component is adjusting to the window with a line break and ellipsis:

However, button component is going out from the window:

Also, it can get out of the container in which it is contained.
What do you think? Should we use ellipsis, line break or any other ideas?

[Jialecl]

In my opinion components with a defined height should have an ellipsis (for example the dropdown trigger) while others should jump to the next line.

[aidamag]

Well as Ivan said, it is true that ellipsis and line break falls in the scope of design.

[GomezIvann]

I think this depends on the component, let me explain myself:

• Box and Alert are the easiest ones in my opinion. They should break on to the next line since they are regular containers used in specific situations. So, just changing fitContent's value to fit-content is enough. The ellipsis is a design choice and as far as I know, fit-content should refer to the children's content.
• Regarding the button, I think it is behaving as expected. When the size is fit-content it should adapt the width to the label length no matter overflowing. If you read the MDN definition of fit-content it says that when a property has this value, the size goes until max-content, but never more than max-content. Ellipsis should only apply when the width is smaller than the label, which can happen in every size except fit-content, which must respect the content regardless of whether it overflows.
  The rest of the components should behave as the Button (Dropdown, Checkbox, Switch and Tag).

[aidamag]

That make sense. I agree on that.