diff --git a/change/@fluentui-react-badge-004df5ab-74c6-4945-9b7f-acd5e6916482.json b/change/@fluentui-react-badge-004df5ab-74c6-4945-9b7f-acd5e6916482.json new file mode 100644 index 0000000000000..ffce4ef00e017 --- /dev/null +++ b/change/@fluentui-react-badge-004df5ab-74c6-4945-9b7f-acd5e6916482.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat(PresenceBadge): Add blocked status", + "packageName": "@fluentui/react-badge", + "email": "jukapsia@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx b/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx index b0f48113fbf47..0e87b2eef7b8a 100644 --- a/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx +++ b/packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx @@ -9,12 +9,14 @@ export const Badge = () => ( + + ); diff --git a/packages/react-components/react-badge/etc/react-badge.api.md b/packages/react-components/react-badge/etc/react-badge.api.md index e7b0bdb0adc5d..75f4c7a642dcd 100644 --- a/packages/react-components/react-badge/etc/react-badge.api.md +++ b/packages/react-components/react-badge/etc/react-badge.api.md @@ -73,7 +73,7 @@ export type PresenceBadgeProps = Omit & BadgeState & Required>; // @public (undocumented) -export type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown'; +export type PresenceBadgeStatus = 'busy' | 'out-of-office' | 'away' | 'available' | 'offline' | 'do-not-disturb' | 'unknown' | 'blocked'; // @public (undocumented) export const renderBadge_unstable: (state: BadgeState) => JSX.Element; diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts index 76a0898523e01..176e3e7e8ce89 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts +++ b/packages/react-components/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts @@ -8,7 +8,8 @@ export type PresenceBadgeStatus = | 'available' | 'offline' | 'do-not-disturb' - | 'unknown'; + | 'unknown' + | 'blocked'; export type PresenceBadgeProps = Omit>, 'color'> & Pick & { diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts b/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts index ceeb1e16b1d9f..28dc3d5b3e031 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts +++ b/packages/react-components/react-badge/src/components/PresenceBadge/presenceIcons.ts @@ -9,6 +9,9 @@ import { PresenceAway10Filled, PresenceAway12Filled, PresenceAway16Filled, + PresenceBlocked10Regular, + PresenceBlocked12Regular, + PresenceBlocked16Regular, PresenceBusy10Filled, PresenceBusy12Filled, PresenceBusy16Filled, @@ -75,6 +78,21 @@ export const presenceAvailableFilled: Record = { + // FIXME not all presence icon sizes are available + // https://github.com/microsoft/fluentui/issues/20650 + tiny: PresenceBlocked10Regular, + 'extra-small': PresenceBlocked10Regular, + small: PresenceBlocked12Regular, + medium: PresenceBlocked16Regular, + // FIXME not all presence icon sizes are available + // https://github.com/microsoft/fluentui/issues/20650 + large: PresenceBlocked16Regular, + // FIXME not all presence icon sizes are available + // https://github.com/microsoft/fluentui/issues/20650 + 'extra-large': PresenceBlocked16Regular, +}; + export const presenceBusyFilled: Record = { // FIXME not all presence icon sizes are available // https://github.com/microsoft/fluentui/issues/20650 diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx index e242f5fe5788a..efabf4169966f 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx +++ b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx @@ -4,6 +4,7 @@ import { presenceAvailableFilled, presenceAvailableRegular, presenceAwayFilled, + presenceBlockedRegular, presenceBusyFilled, presenceDndFilled, presenceDndRegular, @@ -20,6 +21,8 @@ const iconMap = (status: PresenceBadgeState['status'], outOfOffice: boolean, siz return outOfOffice ? presenceAvailableRegular[size] : presenceAvailableFilled[size]; case 'away': return outOfOffice ? presenceOfflineRegular[size] : presenceAwayFilled[size]; + case 'blocked': + return presenceBlockedRegular[size]; case 'busy': return outOfOffice ? presenceUnknownRegular[size] : presenceBusyFilled[size]; case 'do-not-disturb': @@ -41,6 +44,7 @@ const DEFAULT_STRINGS = { offline: 'offline', 'do-not-disturb': 'do not disturb', unknown: 'unknown', + blocked: 'blocked', }; /** diff --git a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts index 45248f8a3543a..b727a7a340035 100644 --- a/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts +++ b/packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts @@ -10,7 +10,7 @@ export const presenceBadgeClassNames: SlotClassNames = { }; const getIsBusy = (status: PresenceBadgeStatus): boolean => { - if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown') { + if (status === 'busy' || status === 'do-not-disturb' || status === 'unknown' || status === 'blocked') { return true; } diff --git a/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx b/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx index 3ff0948f59b22..e9bf3b10b4b9e 100644 --- a/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx +++ b/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx @@ -11,6 +11,7 @@ export const OutOfOffice = () => { + ); @@ -21,7 +22,7 @@ OutOfOffice.parameters = { description: { story: 'A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, ' + - '`offline`, `out-of-office` and `unknown` status when `outOfOffice` is set.', + '`offline`, `out-of-office`, `blocked` and `unknown` status when `outOfOffice` is set.', }, }, }; diff --git a/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx b/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx index b5329f2883321..1442c34604a7b 100644 --- a/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx +++ b/packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx @@ -11,6 +11,7 @@ export const Status = () => { + ); @@ -21,7 +22,7 @@ Status.parameters = { description: { story: 'A presence badge supports `available`, `away`, `busy`, `do-not-disturb`, ' + - '`offline`, `out-of-office` and `unknown` status.' + + '`offline`, `out-of-office`, `blocked` and `unknown` status.' + ' The default is `available`.', }, },