feat(PresenceBadge) Add blocked status

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"
+}

packages/react-components/react-avatar/stories/Avatar/AvatarBadge.stories.tsx

@@ -9,12 +9,14 @@ export const Badge = () => (
     <Avatar name="Robin Counts" badge={{ status: 'away' }} />
     <Avatar name="Tim Deboer" badge={{ status: 'offline' }} />
     <Avatar name="Cameron Evans" badge={{ status: 'do-not-disturb' }} />
+    <Avatar name="Wanda Howard" badge={{ status: 'blocked' }} />
     <Avatar name="Mona Kane" badge={{ status: 'available', outOfOffice: true }} />
     <Avatar name="Allan Munger" badge={{ status: 'busy', outOfOffice: true }} />
     <Avatar name="Erik Nason" badge={{ status: 'out-of-office', outOfOffice: true }} />
     <Avatar name="Daisy Phillips" badge={{ status: 'away', outOfOffice: true }} />
     <Avatar name="Kevin Sturgis" badge={{ status: 'offline', outOfOffice: true }} />
     <Avatar name="Elliot Woodward" badge={{ status: 'do-not-disturb', outOfOffice: true }} />
+    <Avatar name="Wanda Howard" badge={{ status: 'blocked', outOfOffice: true }} />
   </>
 );
 

packages/react-components/react-badge/etc/react-badge.api.md

@@ -73,7 +73,7 @@ export type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root' | '
 export type PresenceBadgeState = ComponentState<BadgeSlots> & BadgeState & Required<Pick<PresenceBadgeProps, 'status' | 'outOfOffice'>>;
 
 // @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;

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<ComponentProps<Pick<BadgeSlots, 'root' | 'icon'>>, 'color'> &
   Pick<BadgeProps, 'size'> & {

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<PresenceBadgeState['size'], React.F
   'extra-large': PresenceAvailable16Filled,
 };
 
+export const presenceBlockedRegular: Record<PresenceBadgeState['size'], React.FunctionComponent> = {
+  // 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<PresenceBadgeState['size'], React.FunctionComponent> = {
   // FIXME not all presence icon sizes are available
   // https://github.com/microsoft/fluentui/issues/20650

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',
 };
 
 /**

packages/react-components/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts

@@ -10,7 +10,7 @@ export const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {
 };
 
 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;
   }
 

packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeOutOfOffice.stories.tsx

@@ -11,6 +11,7 @@ export const OutOfOffice = () => {
       <PresenceBadge outOfOffice status="do-not-disturb" />
       <PresenceBadge outOfOffice status="offline" />
       <PresenceBadge outOfOffice status="out-of-office" />
+      <PresenceBadge outOfOffice status="blocked" />
       <PresenceBadge outOfOffice status="unknown" />
     </>
   );
@@ -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.',
     },
   },
 };

packages/react-components/react-badge/stories/PresenceBadge/PresenceBadgeStatus.stories.tsx

@@ -11,6 +11,7 @@ export const Status = () => {
       <PresenceBadge status="do-not-disturb" />
       <PresenceBadge status="offline" />
       <PresenceBadge status="out-of-office" />
+      <PresenceBadge status="blocked" />
       <PresenceBadge status="unknown" />
     </>
   );
@@ -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`.',
     },
   },