fix(react-badge): Remove white border around presence badge when on a dark background

apps/vr-tests-react-components/src/stories/PresenceBadge.stories.tsx

@@ -1,16 +1,12 @@
 import { storiesOf } from '@storybook/react';
 import * as React from 'react';
-import { PresenceBadge, PresenceBadgeProps } from '@fluentui/react-badge';
+import { PresenceBadge } from '@fluentui/react-badge';
+import { tokens } from '@fluentui/react-theme';
+import { Steps, StoryWright } from 'storywright';
+import { TestWrapperDecorator } from '../utilities/TestWrapperDecorator';
 
-const statuses: PresenceBadgeProps['status'][] = [
-  'available',
-  'away',
-  'busy',
-  'do-not-disturb',
-  'offline',
-  'out-of-office',
-  'unknown',
-];
+const statuses = ['available', 'away', 'busy', 'do-not-disturb', 'offline', 'out-of-office', 'unknown'] as const;
+const sizes = ['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'] as const;
 
 storiesOf('PresenceBadge Converged - status', module).addStory(
   'default',
@@ -40,12 +36,43 @@ storiesOf('PresenceBadge Converged - sizes', module).addStory(
   'default',
   () => (
     <div style={{ display: 'flex', gap: 10 }}>
-      {(['tiny', 'extra-small', 'small', 'medium', 'large', 'extra-large'] as PresenceBadgeProps['size'][]).map(
-        size => (
-          <PresenceBadge status="available" key={size} size={size} />
-        ),
-      )}
+      {sizes.map(size => (
+        <PresenceBadge status="available" key={size} size={size} />
+      ))}
     </div>
   ),
   { includeRtl: true },
 );
+
+storiesOf('PresenceBadge Converged - inverted background', module)
+  .addDecorator(TestWrapperDecorator)
+  .addDecorator(story => (
+    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+  ))
+  .addStory(
+    'default',
+    () => (
+      <div
+        style={{
+          display: 'inline-grid',
+          gridTemplateColumns: `repeat(${2 * statuses.length}, auto)`,
+          placeItems: 'start',
+          gap: '10px',
+          padding: '16px',
+          backgroundColor: tokens.colorNeutralBackgroundInverted,
+        }}
+      >
+        {sizes.map(size => (
+          <>
+            {statuses.map(status => (
+              <PresenceBadge key={size + status} size={size} status={status} />
+            ))}
+            {statuses.map(status => (
+              <PresenceBadge key={size + status + 'OOO'} size={size} status={status} outOfOffice />
+            ))}
+          </>
+        ))}
+      </div>
+    ),
+    { includeHighContrast: true, includeDarkMode: true },
+  );

change/@fluentui-react-badge-4df99d1f-b2d8-4ebd-a8c8-defa2b7568f2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Remove white border around presence badge when on a dark background",
+  "packageName": "@fluentui/react-badge",
+  "email": "behowell@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -18,17 +18,25 @@ const getIsBusy = (status: PresenceBadgeStatus): boolean => {
 };
 
 const useRootClassName = makeResetStyles({
-  padding: 0,
   display: 'inline-flex',
   boxSizing: 'border-box',
   alignItems: 'center',
   justifyContent: 'center',
 
-  '& span': {
-    display: 'flex',
-  },
   borderRadius: tokens.borderRadiusCircular,
   backgroundColor: tokens.colorNeutralBackground1,
+
+  // The background color bleeds around the edge of the icon due to antialiasing on the svg and element background.
+  // Since all presence icons have a border around the edge that is at least 1px wide*, we can inset the background
+  // using padding and backgroundClip. The icon has margin: -1px to account for the padding.
+  // (* except size="tiny", where backgroundClip is unset)
+  padding: '1px',
+  backgroundClip: 'content-box',
+});
+
+const useIconClassName = makeResetStyles({
+  display: 'flex',
+  margin: '-1px',
 });
 
 const useStyles = makeStyles({
@@ -69,6 +77,7 @@ const useStyles = makeStyles({
   tiny: {
     aspectRatio: '1',
     width: '6px',
+    backgroundClip: 'unset', // tiny icons have a border less than 1px wide, and can't use the backgroundClip fix
     '& svg': {
       width: '6px !important',
       height: '6px !important',
@@ -97,6 +106,7 @@ const useStyles = makeStyles({
  */
 export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {
   const rootClassName = useRootClassName();
+  const iconClassName = useIconClassName();
   const styles = useStyles();
   const isBusy = getIsBusy(state.status);
   state.root.className = mergeClasses(
@@ -122,7 +132,7 @@ export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): Pres
   );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);
+    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, iconClassName, state.icon.className);
   }
 
   return state;