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`.',
},
},