Skip to content

[Bug]: MessageBar max-width #36365

Description

@jcludwig

Component

MessageBar

Package version

3.0.0-rc.15

@microsoft/fast-element version

2.10.5

Environment

System:
    OS: Linux 6.8 Debian GNU/Linux 13 (trixie) 13 (trixie)
    CPU: (16) x64 AMD EPYC 7763 64-Core Processor
    Memory: 55.59 GB / 62.80 GB
    Container: Yes
    Shell: 5.2.37 - /bin/bash
  Browsers:
    Chrome: 148.0.7778.215
  npmPackages:
    @fluentui/react-components: 9.73.8 => 9.73.8 
    @fluentui/web-components: 3.0.0-rc.15 => 3.0.0-rc.15 
    @microsoft/fast-element: ^2.10.5 => 2.10.5

Current Behavior

The Fluent UI guidance seems to no longer recommend a max of 520px. Our Designers (Fabric) would like to not have this behavior, which also matches Fluent UI React v9. I would propose either removing this max-width entirely, or making it optional via a custom css property or a css part, either way is fine with us.

https://fluent2.microsoft.design/components/web/react/core/messagebar/usage
https://storybooks.fluentui.dev/react/?path=/docs/components-messagebar--docs

Expected Behavior

No max-width on MessageBar content.

Reproduction

https://storybooks.fluentui.dev/web-components/?path=/docs/components-messagebar--docs

Steps to reproduce

Visible in any instance of the MessageBar.,

Are you reporting an Accessibility issue?

No response

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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

Metadata

Metadata

Assignees

Type

No type

Projects

Status
No status

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions