Adds MessageBar component to FluentUI

[procload]

This pull request introduces a new MessageBar component to the Fluent Web Components. The MessageBar component is a notification bar that provides feedback about a user's actions or the state of an application. It can be used to display information, warnings, errors, or success messages.

Here are the key changes:

New Component:

• MessageBar component is introduced with various attributes including shape, layout, intent. It also provides a dismissMessageBar method to emit a dismiss event when the message bar is dismissed.

Component Definition:

• The MessageBar component is defined and registered with the Fluent Design System.
• The MessageBar component is exported with various options and styles.

Component Options:

• The MessageBar component options including MessageBarLayout, MessageBarShape, MessageBarIntent, and MessageBarPoliteness are defined.

Component Styles:

• The styles for the MessageBar component are defined. Different styles are applied based on the shape, layout, intent, and politeness attributes of the MessageBar.

Component Template:

• The template for the MessageBar component is created. The template includes slots for actions and dismiss and uses different icons based on the intent attribute.

Component Integration Test:

• An integration test for the MessageBar component is added. The test checks the default attributes, dismiss event, and changes to the layout, intent, and shape attributes.

Component Story:

• Storybook stories for the MessageBar component are added. The stories demonstrate the MessageBar with different shapes, layouts, intents, and politeness.

Closes #26709

[fabricteam]

📊 Bundle size report

✅ No changes found

[chrisdholt]

Can we add a benchmark for this? .bench.ts file to create an instance. In terms of the icons, I'd run one with the icons slotted (I believe what you've recently changed) and then I'd pull them out and run without and see what the delta is.

[procload]

Can we add a benchmark for this? .bench.ts file to create an instance. In terms of the icons, I'd run one with the icons slotted (I believe what you've recently changed) and then I'd pull them out and run without and see what the delta is.

How do I run the benchmarks? I created the message-bar.bench.ts file, but couldn't find documentation on how to get the results.

[procload]

@chrisdholt Looks like the benchmarks are now running locally. Is there any other feedback here that I can address?