[Bug]: Message bar not reflowing on window resize

[ruchi09]

Library

React Components / v9 (@fluentui/react-components)

System Info

N/A

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.

Below are scenarios I have tried and my observations	Layout values
layout = undefined (don't give any layout prop)	No Issue
layout = "multiline"	No Issue
layout = auto & element gets rendered as a multiline message bar	No Issue
layout = auto & element gets rendered as a single line message bar	Issue
layout = "singleline"	Issue

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

• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[micahgodbolt]

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.

[bsunderhus]

Hey there @ruchi09, thanks for the repro!

For the 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

For the auto behaviour:

This seems to be a bug 🪲🐞🪳

[bsunderhus]

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?! 😅🤔