Closed ruchi09 closed 1 month ago
Using the layout prop overrides the reflow behavior:
It's possible to opt out of automatic reflow with the layout prop. This can be useful if an application has an existing responsive design mechanism.
But when using auto, I'm not sure what the expectation is. It's not really specified in the docs.
@microsoft/teams-prg is the owner of this control. Its worth having them take a look and decide if this is a bug, or a lack of docs.
Hey there @ruchi09, thanks for the repro!
singleline
behaviour:It is kind of hard to determine the correct behaviour here, let's take the one example your linking from the documentation:
Here's a simplified version of its code structure:
<MessageBar layout="singleline">
<MessageBarBody>
<MessageBarTitle>Descriptive title</MessageBarTitle>
Message providing information to the user with actionable
insights. <Link>Link</Link>
</MessageBarBody>
<MessageBarActions
containerAction={
<Button
aria-label="dismiss"
appearance="transparent"
icon={<DismissRegular />}
/>
}
>
<Button>Action</Button>
<Button>Action</Button>
</MessageBarActions>
</MessageBar>
Let's focus on the MessageBarBody
:
It has a MessageBarTitle
(in red), it has some body text content (in green) and it has some link (in blue), The most generic behaviour would be to assume that everything inside of the body should collapse as this is a singleline
layout, but that would be problematic as we'd be removing the link!
Assuming in this case that the behaviour we want is to shrink the body text content and keep the title and link as is:
This is not possible to achieve by introducing any sort of style to MessageBarBody
, to achieve this we'd need some custom style on both MessageBarBody
and also in a wrapper around the element we'd want to shrink (the body text content in green), and we do not have access to that content by the component's side.
TL,DR: We avoid making assumptions when it comes to text overflow, as they're tricky and its quite easy to get this wrong on the design system level, while in the application level you can go straight to the point and add the proper style you need to implement this
Here's an example for this case: https://stackblitz.com/edit/ajqwax?file=src%2Fexample.tsx
auto
behaviour:This seems to be a bug 🪲🐞🪳
This seems to be a quite hard to reproduce bug 🪲! I couldn't reproduce it in a local environment, and the only moment I can get this to be reproducible is in Stackblitz and it only happens SOMETIMES ❓❓ If I reload stackblitz internal browser sometimes this happens, sometimes it doesn't?! 😅🤔
Library
React Components / v9 (@fluentui/react-components)
System Info
Are you reporting Accessibility issue?
None
Reproduction
https://react.fluentui.dev/?path=/docs/components-messagebar--default&globals=storybook_fluentui-react-addon_dir:ltr#reflow
Bug Description
Actual Behavior
Message bar is not reflowing as expected on window resize. This issue does not exist with multiline message bar. According to my observation, the issue is with
layout="singleline"
Below is the screenshot from stackblitz.Expected Behavior
Message bar should reflow on window resize in every case.
Logs
No response
Requested priority
High
Products/sites affected
No response
Are you willing to submit a PR to fix?
no
Validations