From 60a911e66db784521a35c1e1ac0362a3f2d8169f Mon Sep 17 00:00:00 2001 From: ling1726 Date: Fri, 6 Oct 2023 11:25:10 +0200 Subject: [PATCH] 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 --- .../stories/MessageBar/MessageBar.stories.tsx | 15 ++++++ ...-35f1856a-8956-4a81-a775-34c2100a6de2.json | 7 +++ .../etc/react-message-bar-preview.api.md | 3 +- .../components/MessageBar/MessageBar.types.ts | 8 +++- .../components/MessageBar/useMessageBar.ts | 3 +- .../MessageBar/useMessageBarStyles.styles.ts | 11 +++-- .../stories/MessageBar/Shapes.stories.tsx | 47 +++++++++++++++++++ .../stories/MessageBar/index.stories.tsx | 1 + 8 files changed, 89 insertions(+), 6 deletions(-) create mode 100644 change/@fluentui-react-message-bar-preview-35f1856a-8956-4a81-a775-34c2100a6de2.json create mode 100644 packages/react-components/react-message-bar-preview/stories/MessageBar/Shapes.stories.tsx 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 index 7da86ede8c5374..0715014e3dd3bc 100644 --- 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 = () => { ); }; + +export const Square = () => { + return ( + + + Title + Message providing information to the user with actionable insights. Link + + } />}> + + + + + ); +}; 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 new file mode 100644 index 00000000000000..8fff16b48b7d3a --- /dev/null +++ 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": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md b/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md index cbcd2b363e9084..969efb5f702cbc 100644 --- a/packages/react-components/react-message-bar-preview/etc/react-message-bar-preview.api.md +++ b/packages/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 & Pick, 'layout'> & { intent?: MessageBarIntent; politeness?: 'assertive' | 'polite'; + shape?: 'square' | 'rounded'; }; // @public (undocumented) @@ -106,7 +107,7 @@ export type MessageBarSlots = { }; // @public -export type MessageBarState = ComponentState & Required> & Pick & { +export type MessageBarState = ComponentState & Required> & Pick & { transitionClassName: string; }; diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts index f2ad4afaf42311..73fe55a3ffcfcf 100644 --- a/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts +++ b/packages/react-components/react-message-bar-preview/src/components/MessageBar/MessageBar.types.ts @@ -19,19 +19,25 @@ export type MessageBarProps = ComponentProps & Pick, '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 & - Required> & + Required> & Pick & { transitionClassName: string; }; diff --git a/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts b/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts index 07e6dadd56f668..412511b04b3bcd 100644 --- a/packages/react-components/react-message-bar-preview/src/components/MessageBar/useMessageBar.ts +++ b/packages/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): 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 { 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 new file mode 100644 index 00000000000000..4bf11ac67477a8 --- /dev/null +++ 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('rounded'); + + return ( + <> + + setShape(value as MessageBarProps['shape'])}> + + + + + + + Descriptive title + Message providing information to the user with actionable insights. Link + + } />}> + + + + + + ); +}; + +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 index ce7a2aa06b7e18..5189f060fa59e9 100644 --- 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';