feat: Add shape prop to MessageBar (#29426)

* feat: Add shape prop to MessageBar Adds the shape prop to MessageBar to support both `square` and `rounded` shapes. Addresses 22579 * changefile
microsoft · Oct 6, 2023 · 60a911e · 60a911e
1 parent 3d2e809
commit 60a911e
Show file tree

Hide file tree

Showing 8 changed files with 89 additions and 6 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx b/apps/vr-tests-react-components/src/stories/MessageBar/MessageBar.stories.tsx
@@ -77,3 +77,18 @@ export const Auto = () => {
     </div>
   );
 };
+
+export const Square = () => {
+  return (
+    <MessageBar shape="square">
+      <MessageBarBody>
+        <MessageBarTitle>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>
+  );
+};
diff --git a/change/@fluentui-react-message-bar-preview-35f1856a-8956-4a81-a775-34c2100a6de2.json b/change/@fluentui-react-message-bar-preview-35f1856a-8956-4a81-a775-34c2100a6de2.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add shape prop to MessageBar",
+  "packageName": "@fluentui/react-message-bar-preview",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/...react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md b/...react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md
@@ -97,6 +97,7 @@ export type MessageBarIntent = 'info' | 'success' | 'warning' | 'error';
 export type MessageBarProps = ComponentProps<MessageBarSlots> & Pick<Partial<MessageBarContextValue>, 'layout'> & {
     intent?: MessageBarIntent;
     politeness?: 'assertive' | 'polite';
+    shape?: 'square' | 'rounded';
 };
 
 // @public (undocumented)
@@ -106,7 +107,7 @@ export type MessageBarSlots = {
 };
 
 // @public
-export type MessageBarState = ComponentState<MessageBarSlots> & Required<Pick<MessageBarProps, 'layout' | 'intent'>> & Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
+export type MessageBarState = ComponentState<MessageBarSlots> & Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> & Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
     transitionClassName: string;
 };
 

diff --git a/.../react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts b/.../react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts
@@ -19,19 +19,25 @@ export type MessageBarProps = ComponentProps<MessageBarSlots> &
   Pick<Partial<MessageBarContextValue>, 'layout'> & {
     /**
      * Default designs announcement presets
+     * @default info
      */
     intent?: MessageBarIntent;
     /**
      * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
      */
     politeness?: 'assertive' | 'polite';
+    /**
+     * Use squal for page level messages and rounded for component level messages
+     * @default rounded
+     */
+    shape?: 'square' | 'rounded';
   };
 
 /**
  * State used in rendering MessageBar
  */
 export type MessageBarState = ComponentState<MessageBarSlots> &
-  Required<Pick<MessageBarProps, 'layout' | 'intent'>> &
+  Required<Pick<MessageBarProps, 'layout' | 'intent' | 'shape'>> &
   Pick<MessageBarContextValue, 'actionsRef' | 'bodyRef' | 'titleId'> & {
     transitionClassName: string;
   };
diff --git a/...ges/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts b/...ges/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts
@@ -16,7 +16,7 @@ import { useMessageBarTransitionContext } from '../../contexts/messageBarTransit
  * @param ref - reference to root HTMLElement of MessageBar
  */
 export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HTMLDivElement>): MessageBarState => {
-  const { layout = 'auto', intent = 'info', politeness } = props;
+  const { layout = 'auto', intent = 'info', politeness, shape = 'rounded' } = props;
   const computedPolitness = politeness ?? intent === 'info' ? 'polite' : 'assertive';
   const autoReflow = layout === 'auto';
   const { ref: reflowRef, reflowing } = useMessageBarReflow(autoReflow);
@@ -61,5 +61,6 @@ export const useMessageBar_unstable = (props: MessageBarProps, ref: React.Ref<HT
     actionsRef,
     bodyRef,
     titleId,
+    shape,
   };
 };
diff --git a/...ponents/react-message-bar-preview/src/components/MessageBar/useMessageBarStyles.styles.ts b/...ponents/react-message-bar-preview/src/components/MessageBar/useMessageBarStyles.styles.ts
@@ -30,7 +30,7 @@ const useIconBaseStyles = makeResetStyles({
   color: tokens.colorNeutralForeground3,
 });
 
-const useMultilineStyles = makeStyles({
+const useStyles = makeStyles({
   rootMultiline: {
     whiteSpace: 'normal',
     alignItems: 'start',
@@ -48,6 +48,10 @@ const useMultilineStyles = makeStyles({
     marginBottom: tokens.spacingVerticalS,
     marginRight: '0px',
   },
+
+  square: {
+    ...shorthands.borderRadius(0),
+  },
 });
 
 const useIconIntentStyles = makeStyles({
@@ -89,14 +93,15 @@ const useRootIntentStyles = makeStyles({
 export const useMessageBarStyles_unstable = (state: MessageBarState): MessageBarState => {
   const rootBaseStyles = useRootBaseStyles();
   const iconBaseStyles = useIconBaseStyles();
-  const multilineStyles = useMultilineStyles();
   const iconIntentStyles = useIconIntentStyles();
   const rootIntentStyles = useRootIntentStyles();
+  const styles = useStyles();
 
   state.root.className = mergeClasses(
     messageBarClassNames.root,
     rootBaseStyles,
-    state.layout === 'multiline' && multilineStyles.rootMultiline,
+    state.layout === 'multiline' && styles.rootMultiline,
+    state.shape === 'square' && styles.square,
     rootIntentStyles[state.intent],
     state.transitionClassName,
     state.root.className,

diff --git a/packages/react-components/react-message-bar-preview/stories/MessageBar/Shapes.stories.tsx b/packages/react-components/react-message-bar-preview/stories/MessageBar/Shapes.stories.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { Button, Field, Link, Radio, RadioGroup } from '@fluentui/react-components';
+import { DismissRegular } from '@fluentui/react-icons';
+import {
+  MessageBar,
+  MessageBarActions,
+  MessageBarTitle,
+  MessageBarBody,
+  MessageBarProps,
+} from '@fluentui/react-message-bar-preview';
+
+export const Shapes = () => {
+  const [shape, setShape] = React.useState<MessageBarProps['shape']>('rounded');
+
+  return (
+    <>
+      <Field label="Select shape">
+        <RadioGroup value={shape} onChange={(e, { value }) => setShape(value as MessageBarProps['shape'])}>
+          <Radio value="rounded" label="Rounded" />
+          <Radio value="square" label="Square" />
+        </RadioGroup>
+      </Field>
+      <MessageBar shape={shape}>
+        <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>
+    </>
+  );
+};
+
+Shapes.parameters = {
+  docs: {
+    description: {
+      story: [
+        'MessageBar can have either rounded or square corners, please follow the usage guidance for these shapes:',
+        '- **_rounded_** used for component level message bars',
+        '- **_square_** used for page/app level message bars',
+      ].join('\n'),
+    },
+  },
+};
diff --git a/packages/react-components/react-message-bar-preview/stories/MessageBar/index.stories.tsx b/packages/react-components/react-message-bar-preview/stories/MessageBar/index.stories.tsx
@@ -5,6 +5,7 @@ import bestPracticesMd from './MessageBarBestPractices.md';
 
 export { Default } from './Default.stories';
 export { Intent } from './Intent.stories';
+export { Shapes } from './Shapes.stories';
 export { Dismiss } from './Dismiss.stories';
 export { Animation } from './Animation.stories';
 export { Reflow } from './Reflow.stories';