fix (v8 MessageBar): Add showExpandButton prop to allow manual overri…

…de to explicitly show the expand button (#32884)

Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>

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"
+}

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

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