fix (v8 MessageBar): Add showExpandButton prop to allow manual override to explicitly show the expand button

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx

@@ -106,24 +106,52 @@ 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);
     }
-  >
-    Warning MessageBar content.
-    <Link href="www.bing.com" target="_blank" underline>
-      Visit our website.
-    </Link>
-  </MessageBar>
-);
+  }
+
+  window.onresize = onResize;
+
+  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

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;

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}

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;
 }
 
 /**