search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.35k stars 2.72k forks source link

[Bug] MessageBar multiline layout text should not be the full width of the bar #29419

Open spmonahan opened 12 months ago

spmonahan commented 12 months ago

React component

multiline_layout_react_component

Design spec

multiline_layout_design_spec

Design example

multiline_layout_design_example
ling1726 commented 12 months ago

That's a good callout, I was focusing on the reflow designs, but didn't realize that the multiline layout is slightly different to reflow in the specs 👍

I'll need to clear this up with designers since there are some contradictions with respect to the reflow designs. From what I can see either the MessageBar text should:

The two are conflicting requirements from a CSS perspective, since text will naturally try to wrap as its containing box shrinks. If you have any suggestions, I'm open to them.   image

spmonahan commented 12 months ago

I'll try to take a look but seeing if we can revisit the design based on our CSS constraints feels like a good place to start.

spmonahan commented 12 months ago

Perhaps minmax() can be used? I don't know that this solution handles all the nuance though :)

https://codesandbox.io/s/misty-field-3398vr?file=/example.tsx:358-414

microsoft-github-policy-service[bot] commented 7 months ago

Because this issue has not had activity for over 150 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.