diff --git a/change/@fluentui-react-badge-33169962-f7bf-42f9-b764-c872ceebc15c.json b/change/@fluentui-react-badge-33169962-f7bf-42f9-b764-c872ceebc15c.json new file mode 100644 index 00000000000000..602cf3b38dd511 --- /dev/null +++ b/change/@fluentui-react-badge-33169962-f7bf-42f9-b764-c872ceebc15c.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "add strings prop to PresenceBadge and update demos to support new default strings", + "packageName": "@fluentui/react-badge", + "email": "mgodbolt@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-badge/etc/react-badge.api.md b/packages/react-badge/etc/react-badge.api.md index fe7209d1001b83..27294614ed61fb 100644 --- a/packages/react-badge/etc/react-badge.api.md +++ b/packages/react-badge/etc/react-badge.api.md @@ -57,7 +57,7 @@ export const presenceBadgeClassName = "fui-PresenceBadge"; export const presenceBadgeClassNames: SlotClassNames; // @public (undocumented) -export type PresenceBadgeProps = Omit>, 'color'> & Partial>; +export type PresenceBadgeProps = Omit>, 'color'> & Partial>; // @public (undocumented) export type PresenceBadgeState = PresenceBadgeCommons & ComponentState; diff --git a/packages/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts b/packages/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts index b8977d4ad6291f..cb648a695782b0 100644 --- a/packages/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts +++ b/packages/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts @@ -22,9 +22,11 @@ type PresenceBadgeCommons = { * @default false */ outOfOffice: boolean; + + strings: Partial>; } & BadgeCommons; export type PresenceBadgeProps = Omit>, 'color'> & - Partial>; + Partial>; export type PresenceBadgeState = PresenceBadgeCommons & ComponentState; diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx b/packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx index 3a7de3ea25a20a..e23d25d86a2cbb 100644 --- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx +++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx @@ -37,6 +37,16 @@ const iconMap = ( } }; +export const DEFAULT_STRINGS: PresenceBadgeProps['strings'] = { + busy: 'busy', + outOfOffice: 'out of office', + away: 'away', + available: 'available', + offline: 'offline', + doNotDisturb: 'do not disturb', + unknown: 'unknown', +}; + /** * Returns the props and state required to render the component */ @@ -55,13 +65,17 @@ export const usePresenceBadge_unstable = ( }, ref, ), + strings: { + ...DEFAULT_STRINGS, + ...props.strings, + }, status: props.status ?? 'available', outOfOffice: props.outOfOffice ?? false, }; const IconElement = iconMap(state.status, state.outOfOffice, state.size); if (IconElement) { - state.icon!.children = ; + state.icon!.children = ; } return state; diff --git a/packages/react-badge/src/stories/PresenceBadge.stories.tsx b/packages/react-badge/src/stories/PresenceBadge.stories.tsx index fc9daa877eae59..3b85172f8427c2 100644 --- a/packages/react-badge/src/stories/PresenceBadge.stories.tsx +++ b/packages/react-badge/src/stories/PresenceBadge.stories.tsx @@ -7,6 +7,7 @@ export { Default } from './PresenceBadgeDefault.stories'; export { Sizes } from './PresenceBadgeSizes.stories'; export { Status } from './PresenceBadgeStatus.stories'; export { OutOfOffice } from './PresenceBadgeOutOfOffice.stories'; +export { Strings } from './PresenceBadgeStrings.stories'; export default { title: 'Components/Presence Badge', diff --git a/packages/react-badge/src/stories/PresenceBadgeStrings.stories.tsx b/packages/react-badge/src/stories/PresenceBadgeStrings.stories.tsx new file mode 100644 index 00000000000000..bf24ce158c99e9 --- /dev/null +++ b/packages/react-badge/src/stories/PresenceBadgeStrings.stories.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { PresenceBadge, PresenceBadgeProps } from '../index'; +export const Strings = () => { + const spanishStrings: PresenceBadgeProps['strings'] = { + busy: 'ocupado', + outOfOffice: 'fuera de la oficina', + away: 'fuera', + available: 'disponible', + offline: 'desconectado', + doNotDisturb: 'no molestar', + unknown: 'desconocido', + }; + return ( + <> + + + + + + + + + ); +}; + +Strings.parameters = { + docs: { + description: { + story: `A presence badge supports custom status strings whether + to support a different language, or to customize individual strings. + The example below is using a Spanish translation.`, + }, + }, +}; diff --git a/packages/react-components/react-avatar/src/AvatarBadge.stories.tsx b/packages/react-components/react-avatar/src/AvatarBadge.stories.tsx index 55e4c330affffd..3699c09ac33ebe 100644 --- a/packages/react-components/react-avatar/src/AvatarBadge.stories.tsx +++ b/packages/react-components/react-avatar/src/AvatarBadge.stories.tsx @@ -3,27 +3,18 @@ import { Avatar } from './index'; export const Badge = () => ( <> - - - - - - - - - - - - + + + + + + + + + + + + );