fix(web-components): remove default MessageBar max-width

change/@fluentui-web-components-0ef14c7c-01fd-46bd-b192-f97bf0702842.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Remove the default 520px max-width on MessageBar content (matching React v9) and add the `--message-bar-content-max-width` CSS custom property to optionally re-introduce a cap",
+  "packageName": "@fluentui/web-components",
+  "email": "144495202+AKnassa@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/message-bar/message-bar.spec.ts

@@ -95,4 +95,28 @@ test.describe('Message Bar', () => {
 
     await expect(didDismiss).resolves.toBe(true);
   });
+
+  test('should not cap the content width by default', async ({ fastPage }) => {
+    const { element } = fastPage;
+    const content = element.locator('.content');
+
+    await fastPage.setTemplate();
+
+    await expect(content).toHaveCSS('max-width', 'none');
+  });
+
+  test('should cap the content width when the `--message-bar-content-max-width` custom property is set', async ({
+    fastPage,
+  }) => {
+    const { element } = fastPage;
+    const content = element.locator('.content');
+
+    await fastPage.setTemplate();
+
+    await element.evaluate((node: MessageBar) => {
+      node.style.setProperty('--message-bar-content-max-width', '300px');
+    });
+
+    await expect(content).toHaveCSS('max-width', '300px');
+  });
 });

packages/web-components/src/message-bar/message-bar.styles.css

@@ -6,6 +6,7 @@
   line-height: var(--lineHeightBase200);
   width: 100%;
   background: var(--colorNeutralBackground3);
+  color: var(--colorNeutralForeground3);
   border: 1px solid var(--colorNeutralStroke1);
   padding-inline: var(--spacingHorizontalM);
   border-radius: var(--borderRadiusMedium);
@@ -46,7 +47,7 @@
 
 .content {
   grid-area: body;
-  max-width: 520px;
+  max-width: var(--message-bar-content-max-width, none);
   padding-block: var(--spacingVerticalMNudge);
   padding-inline: 0;
 }

packages/web-components/src/message-bar/message-bar.styles.ts

@@ -75,7 +75,7 @@ export const styles: ElementStyles = css`
 
   .content {
     grid-area: body;
-    max-width: 520px;
+    max-width: var(--message-bar-content-max-width, none);
     padding-block: ${spacingVerticalMNudge};
     padding-inline: 0;
   }

packages/web-components/src/message-bar/message-bar.ts

@@ -11,6 +11,7 @@ import { MessageBarIntent, MessageBarLayout, MessageBarShape } from './message-b
  * @slot icon - Content that can be provided for the leading icon
  * @slot - The default slot for the content
  * @fires { CustomEvent } dismiss - Fired when the message bar is dismissed.
+ * @cssproperty --message-bar-content-max-width - Sets a max-width on the message content. Defaults to `none` (no cap); set a length to constrain it (e.g., 520px).
  * @public
  */
 export class MessageBar extends FASTElement {