From ee4737807c332db95f503a18b270041def2b9836 Mon Sep 17 00:00:00 2001
From: Emma Jiang <31319479+emmayjiang@users.noreply.github.com>
Date: Mon, 30 Sep 2024 15:54:01 -0700
Subject: [PATCH] fix (v8 MessageBar): Add showExpandButton prop to allow
 manual override to explicitly show the expand button (#32884)

Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
---
 ...-7127d38e-75df-4f5d-a363-88e57b77cbb8.json |  7 ++
 .../MessageBar/MessageBar.Basic.Example.tsx   | 76 ++++++++++++++-----
 packages/react/etc/react.api.md               |  1 +
 .../components/MessageBar/MessageBar.base.tsx |  3 +-
 .../components/MessageBar/MessageBar.types.ts |  7 ++
 5 files changed, 76 insertions(+), 18 deletions(-)
 create mode 100644 change/@fluentui-react-7127d38e-75df-4f5d-a363-88e57b77cbb8.json

diff --git a/change/@fluentui-react-7127d38e-75df-4f5d-a363-88e57b77cbb8.json b/change/@fluentui-react-7127d38e-75df-4f5d-a363-88e57b77cbb8.json
new file mode 100644
index 0000000000000..e73198cad0a52
--- /dev/null
+++ b/change/@fluentui-react-7127d38e-75df-4f5d-a363-88e57b77cbb8.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "fix (v8 MessageBar): Add showExpandButton prop to allow manual override to explicitly show the expand button",
+  "packageName": "@fluentui/react",
+  "email": "jiangemma@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx b/packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx
index f3201d3ab64f4..da1acb106df6d 100644
--- a/packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx
+++ b/packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx
@@ -11,6 +11,7 @@ import {
   Text,
   IChoiceGroupStyles,
 } from '@fluentui/react';
+import { useWindow } from '@fluentui/react-window-provider';
 
 interface IExampleProps {
   resetChoice?: () => void;
@@ -106,24 +107,65 @@ const SuccessExample = () => (
   </MessageBar>
 );
 
-const WarningExample = (p: IExampleProps) => (
-  <MessageBar
-    messageBarType={MessageBarType.warning}
-    isMultiline={false}
-    onDismiss={p.resetChoice}
-    dismissButtonAriaLabel="Close"
-    actions={
-      <div>
-        <MessageBarButton>Action</MessageBarButton>
-      </div>
+const WarningExample = (p: IExampleProps) => {
+  const [showExpandButton, setShowExpandButton] = React.useState(false);
+
+  function onResize() {
+    const messageBarMessage = document.getElementById('warningMessageBar') as HTMLDivElement;
+
+    if (messageBarMessage) {
+      const temp = messageBarMessage.cloneNode(true) as any;
+
+      temp.style.position = 'fixed';
+      temp.style.overflow = 'visible';
+      temp.style.whiteSpace = 'nowrap';
+      temp.style.visibility = 'hidden';
+
+      (messageBarMessage.parentElement as any).appendChild(temp);
+
+      const fullWidth = temp.getBoundingClientRect().width;
+      const displayWidth = messageBarMessage.getBoundingClientRect().width;
+
+      setShowExpandButton(fullWidth > displayWidth);
+
+      (messageBarMessage.parentElement as any).removeChild(temp);
     }
-  >
-    Warning MessageBar content.
-    <Link href="www.bing.com" target="_blank" underline>
-      Visit our website.
-    </Link>
-  </MessageBar>
-);
+  }
+
+  const win = useWindow();
+  React.useEffect(() => {
+    // The setTimeout is needed for the initial render because the
+    // contents of the MessageBar is wrapped in a DelayedRender.
+    setTimeout(onResize, 0);
+
+    win && win.addEventListener('resize', onResize);
+
+    return () => {
+      win && win.removeEventListener('resize', onResize);
+    };
+  }, [win]);
+
+  return (
+    <MessageBar
+      id="warningMessageBar"
+      messageBarType={MessageBarType.warning}
+      isMultiline={false}
+      onDismiss={p.resetChoice}
+      dismissButtonAriaLabel="Close"
+      actions={
+        <div>
+          <MessageBarButton>Action</MessageBarButton>
+        </div>
+      }
+      showExpandButton={showExpandButton}
+    >
+      Warning MessageBar content.
+      <Link href="www.bing.com" target="_blank" underline>
+        Visit our website.
+      </Link>
+    </MessageBar>
+  );
+};
 
 const WarningExample2 = (p: IExampleProps) => (
   <MessageBar
diff --git a/packages/react/etc/react.api.md b/packages/react/etc/react.api.md
index faea6755c40e2..3b61cd579f674 100644
--- a/packages/react/etc/react.api.md
+++ b/packages/react/etc/react.api.md
@@ -7026,6 +7026,7 @@ export interface IMessageBarProps extends React_2.HTMLAttributes<HTMLElement>, R
     // @deprecated
     overflowButtonAriaLabel?: string;
     role?: 'alert' | 'status' | 'none';
+    showExpandButton?: boolean;
     styles?: IStyleFunctionOrObject<IMessageBarStyleProps, IMessageBarStyles>;
     theme?: ITheme;
     truncated?: boolean;
diff --git a/packages/react/src/components/MessageBar/MessageBar.base.tsx b/packages/react/src/components/MessageBar/MessageBar.base.tsx
index 1f7cc745721a8..708771114cce5 100644
--- a/packages/react/src/components/MessageBar/MessageBar.base.tsx
+++ b/packages/react/src/components/MessageBar/MessageBar.base.tsx
@@ -65,6 +65,7 @@ export const MessageBarBase: React.FunctionComponent<IMessageBarProps> = React.f
     delayedRender = true,
     expandButtonProps,
     onExpandButtonToggled = undefined,
+    showExpandButton,
   } = props;
 
   // Wrap 'toggleExpandSingleLine' to execute the 'onExpandButtonToggled' callback whenever the expand button toggles
@@ -137,7 +138,7 @@ export const MessageBarBase: React.FunctionComponent<IMessageBarProps> = React.f
           </span>
         </div>
         {
-          /* singleline expand/collapse button */ !isMultiline && !actionsDiv && truncated && (
+          /* singleline expand/collapse button */ (showExpandButton || (!isMultiline && !actionsDiv && truncated)) && (
             <div className={classNames.expandSingleLine}>
               <IconButton
                 disabled={false}
diff --git a/packages/react/src/components/MessageBar/MessageBar.types.ts b/packages/react/src/components/MessageBar/MessageBar.types.ts
index e4375b4290f09..46ca8f89d30b7 100644
--- a/packages/react/src/components/MessageBar/MessageBar.types.ts
+++ b/packages/react/src/components/MessageBar/MessageBar.types.ts
@@ -128,6 +128,13 @@ export interface IMessageBarProps extends React.HTMLAttributes<HTMLElement>, Rea
    * @default true
    */
   delayedRender?: boolean;
+
+  /**
+   * An optional override to show the expand/collapse icon. It will only be shown by default for
+   * single-line truncated MessageBars that do not have actions.
+   * @defaultvalue false
+   */
+  showExpandButton?: boolean;
 }
 
 /**