Merge branch 'master' into users/chhol/update-fast-stable-package-ver…

…sions
microsoft · Apr 10, 2023 · d755af6 · d755af6
2 parents 41228ea + 72acd40
commit d755af6
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 4 deletions.
diff --git a/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx b/apps/vr-tests-react-components/src/stories/Badge/BadgeSize.stories.tsx
@@ -159,3 +159,23 @@ export const SizeExtraLarge = () => {
 SizeExtraLarge.storyName = 'size: extra-large';
 
 export const SizeExtraLargeRTL = getStoryVariant(SizeExtraLarge, RTL);
+
+export const WidthConstrained = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.group}>
+      <div className={styles.widthConstrained}>
+        <Badge>1</Badge>
+        <Badge icon={<CircleRegular />} />
+        <Badge>BADGE</Badge>
+        <Badge icon={<CircleRegular />}>BADGE</Badge>
+        <Badge icon={<CircleRegular />} iconPosition="after">
+          BADGE
+        </Badge>
+      </div>
+      <span className={styles.description}>Badges should not clip their content when space constrained.</span>
+    </div>
+  );
+};
+
+WidthConstrained.storyName = 'width constrained';
diff --git a/apps/vr-tests-react-components/src/stories/Badge/utils.ts b/apps/vr-tests-react-components/src/stories/Badge/utils.ts
@@ -57,4 +57,18 @@ export const useStyles = makeStyles({
     alignItems: 'center',
     columnGap: tokens.spacingHorizontalS,
   },
+
+  widthConstrained: {
+    display: 'inline-flex',
+    width: '150px',
+    columnGap: tokens.spacingHorizontalS,
+    ...shorthands.padding('1px'),
+    ...shorthands.border('2px', 'dashed', tokens.colorPaletteRedBorder1),
+    backgroundColor: tokens.colorPaletteRedBackground1,
+  },
+
+  description: {
+    color: tokens.colorNeutralForeground3,
+    ...typographyStyles.caption1,
+  },
 });
diff --git a/change/@fluentui-react-badge-2a8e666d-e88c-4af4-a503-4a65a4c17316.json b/change/@fluentui-react-badge-2a8e666d-e88c-4af4-a503-4a65a4c17316.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-badge): Use min-width: max-content on Badge to prevent shrinking smaller than content",
+  "packageName": "@fluentui/react-badge",
+  "email": "behowell@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -20,7 +20,8 @@ const useRootClassName = makeResetStyles({
   position: 'relative',
   ...typographyStyles.caption1Strong,
   height: '20px',
-  minWidth: '20px',
+  width: '20px',
+  minWidth: 'max-content',
   padding: `0 calc(${tokens.spacingHorizontalXS} + ${textPadding})`,
   borderRadius: tokens.borderRadiusCircular,
   // Use a transparent stroke (rather than no border) so the border is visible in high contrast
@@ -64,20 +65,20 @@ const useRootStyles = makeStyles({
     ...shorthands.padding('unset'),
   },
   small: {
-    minWidth: '16px',
+    width: '16px',
     height: '16px',
     ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXXS} + ${textPadding})`),
   },
   medium: {
     // Set by useRootClassName
   },
   large: {
-    minWidth: '24px',
+    width: '24px',
     height: '24px',
     ...shorthands.padding(0, `calc(${tokens.spacingHorizontalXS} + ${textPadding})`),
   },
   'extra-large': {
-    minWidth: '32px',
+    width: '32px',
     height: '32px',
     ...shorthands.padding(0, `calc(${tokens.spacingHorizontalSNudge} + ${textPadding})`),
   },