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": "jiangemma@microsoft.com",
+ "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
@@ -108,6 +109,8 @@ export const MessageBarBase: React.FunctionComponent<IMessageBarProps> = React.f
  />
  ) : null;
 
+ // console.log(truncated, isMultiline);
+
  return (
  <div ref={ref} className={classNames.root} {...regionProps}>
  <div className={classNames.content}>
@@ -137,7 +140,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,12 @@ export interface IMessageBarProps extends React.HTMLAttributes<HTMLElement>, Rea
  * @default true
  */
  delayedRender?: boolean;
+
+ /**
+ * An optional override to show the expand/collapse icon.
+ * @defaultvalue false
+ */
+ showExpandButton?: boolean;
 }
 
 /**