Component: MessageBar

[procload]

Component Name

Component Description

Design Spec

Link to Design Spec in Figma

Engineering Spec

Inputs

• [List all inputs into the component]
• [e.g. @attr public paused: boolean | false]

Outputs

• [List all outputs from the component]

Events

• [List all inputs into the component]

Slots

• [List all named and unnamed slots for the component]
• [e.g. Indeterminate: The slot for a custom indeterminate indicator]

CSS Variables

• [Any component-specific CSS variables that allow the user to change the appearance of the component]

Accessibility

• Find the matching component through WCAG's patterns: https://www.w3.org/WAI/ARIA/apg/patterns/https://www.w3.org/WAI/ARIA/apg/patterns/
• Are there any accessibility elements unique to this component?
• List ARIA attributes
  • ARIA attribute
• Does the component support 400% zoom?

Preparation

• Find the base FAST Component this component will inherit from and document
  • FAST Component
• Check the Fluent UI React V9 Component Spec for differences and document
  • Difference How to use a primary button with an icon? #1
• Fluent UI React V9 Storybook for implementation differences and document
  • Difference How to use a primary button with an icon? #1
• Open GitHub issues related to component
  • [link to each issue]
• (Optional) Draft implementation
  • [link to draft implementation, if applicable]
• Component Spec authored and reviewed

Implementation

• Initial conformance and unit tests (validate basic functionality)
• Initial documentation
  • Storybook stories
  • README.md covering basic usage
• Uses design tokens for styling
• Renders correctly in High Contrast mode

Validation

• Add tests
  • Unit and conformance tests
  • Bundle size fixtures
  • Performance test scenario
  • Accessibility behavior tests
  • Create an issue and run manual accessibility tests: [link to issue]
• Validate with partners
• Finalize documentation
  • Review and add any missing storybook stories
  • Finalize migration guide
  • In package.json: Remove the alpha/beta tag from the version number in package.json
  • In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"

[msft-fluent-ui-bot]

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.

[gouttierre]

📢"MessageBar was been started and paused with development but will resume with implementations in the week of the 22nd Jan depending on Brian's commitments"

[gouttierre]

📢 delayed until the drawer and dropdown are completed

[gouttierre]

📢

• Delayed until the drawer and dropdown are completed. Ryan's team is backed up until build and can't commit to taking it on. Chris's team might pick it up once they onboard new hires. ETA has been moved to EOM. -cc @procload , @chrisdholt

[JustSlone]

We're past //build @procload is this work back in progress?

[procload]

@JustSlone Yup, see the PR for the spec here #31669

[gouttierre]

📢

• PR for spec is merged Adds Spec for Review on MessageBar Web Component #31669

cc @chrisdholt , @procload

[gouttierre]

📢

• Almost done. There is feedback on the PR that needs to be reviewed by Chris.

cc @chrisdholt , @procload