microsoft · ling1726 · Oct 3, 2023 · Oct 3, 2023 · Oct 3, 2023
@@ -89,9 +89,12 @@ export type MessageBarGroupState = ComponentState<MessageBarGroupSlots> & Pick<M
     children: React_2.ReactElement[];
 };
 
+// @public (undocumented)
+export type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';
+
 // @public
 export type MessageBarProps = ComponentProps<MessageBarSlots> & Pick<Partial<MessageBarContextValue>, 'layout'> & {
-    intent?: 'info' | 'success' | 'warning' | 'error';
+    intent?: MessageBarIntent;
     politeness?: 'assertive' | 'polite';
 };
 

@@ -11,12 +11,20 @@ export type MessageBarContextValues = {
   messageBar: MessageBarContextValue;
 };
 
+export type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';
+
 /**
  * MessageBar Props
  */
 export type MessageBarProps = ComponentProps<MessageBarSlots> &
   Pick<Partial<MessageBarContextValue>, 'layout'> & {
-    intent?: 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Default designs announcement presets
+     */
+    intent?: MessageBarIntent;
+    /**
+     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
+     */
     politeness?: 'assertive' | 'polite';
   };
 

@@ -4,6 +4,9 @@ import type { MessageBarContextValue } from '../../contexts/messageBarContext';
 
 export type MessageBarActionsSlots = {
   root: Slot<'div'>;
+  /**
+   * Generally the 'Dismiss' button for the MessageBar
+   */
   containerAction?: Slot<'div'>;
 };
 

@@ -6,7 +6,7 @@ export {
   messageBarClassNames,
 } from './MessageBar';
 
-export type { MessageBarProps, MessageBarSlots, MessageBarState } from './MessageBar';
+export type { MessageBarProps, MessageBarSlots, MessageBarState, MessageBarIntent } from './MessageBar';
 
 export {
   MessageBarTitle,

@@ -8,10 +8,12 @@ import {
   MessageBarBody,
   MessageBarGroup,
   MessageBarGroupProps,
+  MessageBarIntent,
 } from '@fluentui/react-message-bar-preview';
 
 const useStyles = makeStyles({
   container: {
+    ...shorthands.padding(tokens.spacingHorizontalMNudge),
     display: 'flex',
     flexDirection: 'column',
     marginTop: '10px',
@@ -22,17 +24,17 @@ const useStyles = makeStyles({
   },
 });
 
-const intents = ['info', 'warning', 'error', 'success'] as const;
+const intents: MessageBarIntent[] = ['info', 'warning', 'error', 'success'];
 
 interface Entry {
-  intent: (typeof intents)[number];
+  intent: MessageBarIntent;
   id: number;
 }
 
 export const Animation = () => {
   const styles = useStyles();
   const counterRef = React.useRef(0);
-  const [animate, setAnimate] = React.useState<MessageBarGroupProps['animate']>('exit-only');
+  const [animate, setAnimate] = React.useState<MessageBarGroupProps['animate']>('both');
   const [messages, setMessages] = React.useState<Entry[]>([]);
   const prepend = () => {
     const intentPos = Math.floor(Math.random() * intents.length);
@@ -60,8 +62,8 @@ export const Animation = () => {
       <Button onClick={clear}>Clear</Button>
       <Field label="Select animation type">
         <RadioGroup value={animate} onChange={(_, { value }) => setAnimate(value as MessageBarGroupProps['animate'])}>
-          <Radio label="exit-only" value="exit-only" />
           <Radio label="both" value="both" />
+          <Radio label="exit-only" value="exit-only" />
         </RadioGroup>
       </Field>
       <MessageBarGroup animate={animate} className={styles.container}>
@@ -80,3 +82,15 @@ export const Animation = () => {
     </>
   );
 };
+
+Animation.parameters = {
+  docs: {
+    description: {
+      story: [
+        'Enter animations are also handled within the `MessageBarGroup`. However avoid entry animations for MessageBar',
+        'components on page load. However, MessageBar components that are mounted during the lifecycle of an',
+        'app can use enter animations.',
+      ].join('\n'),
+    },
+  },
+};
@@ -3,21 +3,15 @@ import { Button, Link } from '@fluentui/react-components';
 import { DismissRegular } from '@fluentui/react-icons';
 import { MessageBar, MessageBarActions, MessageBarTitle, MessageBarBody } from '@fluentui/react-message-bar-preview';
 
-const intents = ['info', 'warning', 'error', 'success'] as const;
-
 export const Default = () => (
-  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-    {intents.map(intent => (
-      <MessageBar key={intent} intent={intent}>
-        <MessageBarBody>
-          <MessageBarTitle>Descriptive title</MessageBarTitle>
-          Message providing information to the user with actionable insights. <Link>Link</Link>
-        </MessageBarBody>
-        <MessageBarActions containerAction={<Button appearance="transparent" icon={<DismissRegular />} />}>
-          <Button>Action</Button>
-          <Button>Action</Button>
-        </MessageBarActions>
-      </MessageBar>
-    ))}
-  </div>
+  <MessageBar>
+    <MessageBarBody>
+      <MessageBarTitle>Descriptive title</MessageBarTitle>
+      Message providing information to the user with actionable insights. <Link>Link</Link>
+    </MessageBarBody>
+    <MessageBarActions containerAction={<Button appearance="transparent" icon={<DismissRegular />} />}>
+      <Button>Action</Button>
+      <Button>Action</Button>
+    </MessageBarActions>
+  </MessageBar>
 );
@@ -7,10 +7,12 @@ import {
   MessageBarTitle,
   MessageBarBody,
   MessageBarGroup,
+  MessageBarIntent,
 } from '@fluentui/react-message-bar-preview';
 
 const useStyles = makeStyles({
   container: {
+    ...shorthands.padding(tokens.spacingHorizontalMNudge),
     display: 'flex',
     flexDirection: 'column',
     marginTop: '10px',
@@ -21,10 +23,10 @@ const useStyles = makeStyles({
   },
 });
 
-const intents = ['info', 'warning', 'error', 'success'] as const;
+const intents: MessageBarIntent[] = ['info', 'warning', 'error', 'success'];
 
 interface Entry {
-  intent: (typeof intents)[number];
+  intent: MessageBarIntent;
   id: number;
 }
 
@@ -72,3 +74,15 @@ export const Dismiss = () => {
     </>
   );
 };
+
+Dismiss.parameters = {
+  docs: {
+    description: {
+      story: [
+        'MessageBar components should be used in a `MessageBarGroup` when possible to enable exit animations.',
+        'Once inside a `MessageBarGroup` component, the default exit animation will trigger automatically when the',
+        'component is unmounted from DOM.',
+      ].join('\n'),
+    },
+  },
+};
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Button, Link } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+import {
+  MessageBar,
+  MessageBarActions,
+  MessageBarTitle,
+  MessageBarBody,
+  MessageBarIntent,
+} from '@fluentui/react-message-bar-preview';
+
+const intents: MessageBarIntent[] = ['info', 'warning', 'error', 'success'];
+
+export const Intent = () => (
+  <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+    {intents.map(intent => (
+      <MessageBar key={intent} intent={intent}>
+        <MessageBarBody>
+          <MessageBarTitle>{intent}</MessageBarTitle>
+          Message providing information to the user with actionable insights. <Link>Link</Link>
+        </MessageBarBody>
+        <MessageBarActions containerAction={<Button appearance="transparent" icon={<DismissRegular />} />}>
+          <Button>Action</Button>
+          <Button>Action</Button>
+        </MessageBarActions>
+      </MessageBar>
+    ))}
+  </div>
+);
+
+Intent.parameters = {
+  docs: {
+    description: {
+      story: [
+        'MessageBar components come built-in with preset intents that determine the design and aria live announcment,',
+        "While it is recommended to use the preset intents, it's possible to configure the aria live politeness",
+        'with the `politeness` prop.',
+      ].join('\n'),
+    },
+  },
+};
@@ -30,3 +30,14 @@ export const ManualLayout = () => {
     </>
   );
 };
+
+ManualLayout.parameters = {
+  docs: {
+    description: {
+      story: [
+        "It's possible to opt out of automatic reflow with the `layout` prop. This can be useful if an application",
+        'has an existing responsive design mechanism.',
+      ].join('\n'),
+    },
+  },
+};
@@ -2,4 +2,14 @@
 
 ### Do
 
+- Use MessageBar components inside MesssageBarGroup
+- Include a dismiss button as the container action
+- Reduce number of actions in the MessageBar
+- Use preset intents
+
 ### Don't
+
+- Use enter animations on page load
+- Use manual layout if possible - this is a built in feature
+- Use long messages for content - keep content to under 100 characters
+- Customize announcement politeness - check with your a11y champ
@@ -0,0 +1,3 @@
+Communicates important information about the state of the entire application or surface.
+For example, the status of a page, panel, dialog or card. The information shouldn't require someone
+to take immediate action, but should persist until the user performs one of the required actions.
@@ -57,3 +57,14 @@ export const Reflow = () => {
     </>
   );
 };
+
+Reflow.parameters = {
+  docs: {
+    description: {
+      story: [
+        'The `MessageBar` will reflow by default once the body content wraps to a second line. This changes the layout',
+        'of the actions in the MessageBar. ',
+      ].join('\n'),
+    },
+  },
+};
@@ -1,17 +1,21 @@
-import { MessageBar } from '@fluentui/react-message-bar-preview';
+import { MessageBar, MessageBarGroup } from '@fluentui/react-message-bar-preview';
 
 import descriptionMd from './MessageBarDescription.md';
 import bestPracticesMd from './MessageBarBestPractices.md';
 
 export { Default } from './Default.stories';
+export { Intent } from './Intent.stories';
 export { Dismiss } from './Dismiss.stories';
+export { Animation } from './Animation.stories';
 export { Reflow } from './Reflow.stories';
 export { ManualLayout } from './ManualLayout.stories';
-export { Animation } from './Animation.stories';
 
 export default {
   title: 'Preview Components/MessageBar',
   component: MessageBar,
+  subcomponents: {
+    MessageBarGroup,
+  },
   parameters: {
     docs: {
       description: {