fix(Badge): swap dnd and busy icons (#18621)

* fix(Badge): swap dnd and busy icons * Change files * feat(Badge): fix align diff size * feat(Badge): fix align diff size
microsoft · Jun 18, 2021 · 463d467 · 463d467
1 parent dad03f4
commit 463d467
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/change/@fluentui-react-badge-cb00b5bc-fd5f-4c1a-8488-7d12173f480a.json b/change/@fluentui-react-badge-cb00b5bc-fd5f-4c1a-8488-7d12173f480a.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "react-accordion 1st rule of ARIA refactor (#18597)",
+  "packageName": "@fluentui/react-badge",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/change/@fluentui-react-examples-ce12d2bf-54bf-44ad-92a1-0efbd281f1ed.json b/change/@fluentui-react-examples-ce12d2bf-54bf-44ad-92a1-0efbd281f1ed.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "fix(Badge): swap dnd and busy icons",
+  "packageName": "@fluentui/react-examples",
+  "email": "[email protected]",
+  "dependentChangeType": "none"
+}
diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -78,9 +78,10 @@ const useStyles = makeStyles({
     border: 'none',
   }),
   icon: {
-    position: 'absolute',
-    top: 0,
-    bottom: 0,
+    display: 'flex',
+    alignContent: 'center',
+    alignItems: 'center',
+    height: '100%',
   },
 });
 

diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx b/packages/react-badge/src/components/PresenceBadge/usePresenceBadge.tsx
@@ -19,12 +19,12 @@ export const presenceBadgeShorthandProps: (keyof PresenceBadgeProps)[] = ['icon'
 const mergeProps = makeMergePropsCompat<PresenceBadgeState>({ deepMerge: presenceBadgeShorthandProps });
 
 const iconMap: (outOfOffice: boolean) => Record<PresenceBadgeStatus, JSX.Element | null> = outOfOffice => ({
-  busy: <SkypeMinusIcon />,
+  busy: null,
   available: outOfOffice ? <SkypeArrowIcon /> : <SkypeCheckIcon />,
   away: outOfOffice ? <SkypeArrowIcon /> : <SkypeClockIcon />,
   offline: <CancelIcon />,
   outOfOffice: <SkypeArrowIcon />,
-  doNotDisturb: null,
+  doNotDisturb: <SkypeMinusIcon />,
 });
 
 /**

diff --git a/packages/react-examples/src/react-badge/PresenceBadge/PresenceBadge.stories.tsx b/packages/react-examples/src/react-badge/PresenceBadge/PresenceBadge.stories.tsx
@@ -17,6 +17,7 @@ export const PresenceBadgeStatus = () => (
       <PresenceBadge status="available" />
       <PresenceBadge status="outOfOffice" />
       <PresenceBadge status="offline" />
+      <PresenceBadge status="doNotDisturb" />
     </div>
     <h2>OOF</h2>
     <div
@@ -32,6 +33,7 @@ export const PresenceBadgeStatus = () => (
       <PresenceBadge outOfOffice status="available" />
       <PresenceBadge outOfOffice status="outOfOffice" />
       <PresenceBadge outOfOffice status="offline" />
+      <PresenceBadge outOfOffice status="doNotDisturb" />
     </div>
   </>
 );