PresenceBadge: Adding unknown status (#21951)

* PresenceBadge: Adding unknown status. * Change files * Adding unknown status vr tests.
microsoft · Mar 4, 2022 · 1f83caa · 1f83caa
1 parent 399b5c4
commit 1f83caa
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 6 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx b/apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx
@@ -9,6 +9,7 @@ const statuses: PresenceBadgeProps['status'][] = [
   'doNotDisturb',
   'offline',
   'outOfOffice',
+  'unknown',
 ];
 
 storiesOf('PresenceBadge Converged - status', module).addStory(

diff --git a/change/@fluentui-react-badge-a7ea06bc-4ace-4e53-8185-d837184831d2.json b/change/@fluentui-react-badge-a7ea06bc-4ace-4e53-8185-d837184831d2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "PresenceBadge: Adding unknown status.",
+  "packageName": "@fluentui/react-badge",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-badge/etc/react-badge.api.md b/packages/react-badge/etc/react-badge.api.md
@@ -59,7 +59,7 @@ export type PresenceBadgeProps = Omit<ComponentProps<Pick<BadgeSlots, 'root'>>,
 export type PresenceBadgeState = PresenceBadgeCommons & ComponentState<BadgeSlots>;
 
 // @public (undocumented)
-export type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
+export type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb' | 'unknown';
 
 // @public (undocumented)
 export const renderBadge_unstable: (state: BadgeState) => JSX.Element;

diff --git a/packages/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts b/packages/react-badge/src/components/PresenceBadge/PresenceBadge.types.ts
@@ -1,7 +1,14 @@
 import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';
 import type { BadgeCommons, BadgeSlots } from '../Badge/Badge.types';
 
-export type PresenceBadgeStatus = 'busy' | 'outOfOffice' | 'away' | 'available' | 'offline' | 'doNotDisturb';
+export type PresenceBadgeStatus =
+  | 'busy'
+  | 'outOfOffice'
+  | 'away'
+  | 'available'
+  | 'offline'
+  | 'doNotDisturb'
+  | 'unknown';
 
 type PresenceBadgeCommons = {
   /**

diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx b/packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx
@@ -32,6 +32,8 @@ const iconMap = (
       return presenceOfflineRegular[size];
     case 'outOfOffice':
       return presenceOofRegular[size];
+    case 'unknown':
+      return presenceUnknownRegular[size];
   }
 };
 

diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -83,14 +83,14 @@ export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): Pres
   state.root.className = mergeClasses(
     presenceBadgeClassName,
     styles.root,
-    (state.status === 'busy' || state.status === 'doNotDisturb') && styles.statusBusy,
+    ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy,
     state.status === 'away' && styles.statusAway,
     state.status === 'available' && styles.statusAvailable,
     state.status === 'offline' && styles.statusOffline,
     state.status === 'outOfOffice' && styles.statusOutOfOffice,
     state.outOfOffice && styles.outOfOffice,
     state.outOfOffice && state.status === 'available' && styles.outOfOfficeAvailable,
-    state.outOfOffice && (state.status === 'busy' || state.status === 'doNotDisturb') && styles.outOfOfficeBusy,
+    state.outOfOffice && ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.outOfOfficeBusy,
     state.outOfOffice && state.status === 'away' && styles.outOfOfficeAway,
     state.outOfOffice && state.status === 'offline' && styles.statusOffline,
     state.outOfOffice && state.status === 'outOfOffice' && styles.statusOutOfOffice,

diff --git a/packages/react-badge/src/stories/PresenceBadgeOutOfOffice.stories.tsx b/packages/react-badge/src/stories/PresenceBadgeOutOfOffice.stories.tsx
@@ -11,6 +11,7 @@ export const OutOfOffice = () => {
       <PresenceBadge outOfOffice status="doNotDisturb" />
       <PresenceBadge outOfOffice status="offline" />
       <PresenceBadge outOfOffice status="outOfOffice" />
+      <PresenceBadge outOfOffice status="unknown" />
     </>
   );
 };
@@ -20,7 +21,7 @@ OutOfOffice.parameters = {
     description: {
       story:
         'A presence badge supports `available`, `away`, `busy`, `doNotDisturb`, ' +
-        '`offline`, or `outOfOffice` status when `outOfOffice` is set.',
+        '`offline`, `outOfOffice` and `unknown` status when `outOfOffice` is set.',
     },
   },
 };
diff --git a/packages/react-badge/src/stories/PresenceBadgeStatus.stories.tsx b/packages/react-badge/src/stories/PresenceBadgeStatus.stories.tsx
@@ -11,6 +11,7 @@ export const Status = () => {
       <PresenceBadge status="doNotDisturb" />
       <PresenceBadge status="offline" />
       <PresenceBadge status="outOfOffice" />
+      <PresenceBadge status="unknown" />
     </>
   );
 };
@@ -20,7 +21,7 @@ Status.parameters = {
     description: {
       story:
         'A presence badge supports `available`, `away`, `busy`, `doNotDisturb`, ' +
-        '`offline`, and `outOfOffice` status.' +
+        '`offline`, `outOfOffice` and `unknown` status.' +
         ' The default is `available`.',
     },
   },