[Badge] Fix font sizes, padding, and colors to align with visual design #23379

behowell · 2022-06-02T21:46:32Z

Current Behavior

The visuals of Badge doesn't match the design:
- Sizes small and medium have the wrong font size
- Size extra-large has the wrong border size
- There is 2px extra left/right padding on the icon, which makes icon-only badges not square
- All appearances other than ghost have an extra 1px of padding from their border
- Some colors tokens are incorrect
Badge uses flex gap, which isn't supported in older browsers
Screener tests are not very comprehensive for Badge

New Behavior

Update the styles to match the design
The border is now in an :after pseudo-element to avoid affecting layout between ghost and other appearances
Replace flex gap with an extra margin between the icon and text
Added screener stories for Badge's size variations

Related Issue(s)

Fixes [Bug]: Badge styles don't match the design #23278

…adge-font-styles

fabricteam · 2022-06-02T21:53:08Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-badge` Badge	`21.653 kB` `6.862 kB`	`22.494 kB` `7.157 kB`	`841 B` `295 B`
`react-badge` CounterBadge	`22.557 kB` `7.172 kB`	`23.397 kB` `7.449 kB`	`840 B` `277 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-alert` Alert	`80.938 kB` `20.342 kB`
`react-avatar` Avatar	`47.36 kB` `13.625 kB`
`react-avatar` AvatarGroup	`136.845 kB` `40.741 kB`
`react-avatar` AvatarGroupItem	`67.075 kB` `18.96 kB`
`react-badge` PresenceBadge	`23.947 kB` `7.022 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.182 kB` `52.141 kB`
`react-components` react-components: FluentProvider & webLightTheme	`31.883 kB` `10.516 kB`

_{🤖 This report was generated against d1f223054dba804964e010518ec0d09dbca2c584}

codesandbox-ci · 2022-06-02T21:53:41Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 7297dec:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

size-auditor · 2022-06-02T22:07:15Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: d1f223054dba804964e010518ec0d09dbca2c584 (build)

fabricteam · 2022-06-02T22:08:13Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1279	1258	5000
Button	mount	886	883	5000
FluentProvider	mount	1568	1603	5000
FluentProviderWithTheme	mount	552	551	10
FluentProviderWithTheme	virtual-rerender	535	536	10
FluentProviderWithTheme	virtual-rerender-with-unmount	571	577	10
MakeStyles	mount	1957	1961	50000
SpinButton	mount	2430	2449	5000

spmonahan · 2022-06-08T23:35:53Z

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

+  groupSet: {
+    display: 'inline-flex',
+    flexDirection: 'column',
+    ...shorthands.padding(0, '16px'),


super nit: Use spacing tokens for paddings, gaps, etc.

spmonahan · 2022-06-08T23:41:49Z

packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts

-    ...shorthands.padding('2px'),
-    ...shorthands.gap('4px'),
-    fontSize: '8px',
+    ...shorthands.padding(0, '4px'), // 2px root padding + 2px text padding


My first thought is that we should be using spacing tokens here but the comment is making me think you intentionally didn't use them.

Is there a reason to not use spacing tokens here? If so, can the comment explicitly state that so we don't update them at a later date? If not, can they be changed to tokens?

Good call. It's listed in the spec as pixel values, but that might have been written before there were spacing tokens. I'll follow up with design to double check if these should be using tokens.

Updated to use tokens in this PR. I'm still waiting to hear back from design, but it does seem like the right approach.

packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts

…adge-font-styles

ling1726 · 2022-07-11T19:51:43Z

packages/react-components/react-badge/src/components/Badge/useBadgeStyles.ts

  },
  small: {
    minWidth: '16px',
    height: '16px',
-    ...shorthands.padding('2px'),
-    ...shorthands.gap('4px'),


Our current browser support matrix actually supports flex gap

https://react.fluentui.dev/?path=/docs/concepts-developer-browser-support-matrix--page

I think we're still determining if we need to accommodate browsers that don't support flex gap.

In any case, this still needed to be fixed to accommodate the extra padding that needed to be added around the text but not the icon, and the resulting styles wouldn't be made much simpler by using flex gap.

Also, the gap here would have been applied to any child elements as well (if the badge contained elements other than just text), which is probably unexpected.

…gn (microsoft#23379) Update Badge font sizes, padding, and colors to match the design. Add screener stories for Badge's size variations.

behowell added 5 commits June 2, 2022 13:54

Fix badge layout, add weight prop

190ef37

Update Badge stories for size and font weight

48b838b

change file

fbada38

Remove unused story style

c63a188

Merge branch 'master' of https://github.com/microsoft/fluentui into b…

e9c786f

…adge-font-styles

msft-fluent-ui-bot assigned ling1726 Jun 2, 2022

github-actions bot added this to the June Project Cycle Q2 2022 milestone Jun 2, 2022

msft-fluent-ui-bot added the Component: Badge label Jun 2, 2022

Update API file

fe41c81

behowell added 4 commits June 2, 2022 15:16

Fix colors that don't match design

9c99a77

Fix screener story styles

a66f43e

Fix story styling

6a0b6cb

Remove weight prop for now; will add in another PR

9862205

behowell changed the title ~~[Badge] Fix padding/font sizes to align with visual design. Add weight prop.~~ [Badge] Fix font sizes, padding, and colors to align with visual design Jun 2, 2022

Fix screener stories

2d68bd8

behowell marked this pull request as ready for review June 2, 2022 23:29

behowell requested review from a team as code owners June 2, 2022 23:29

behowell assigned behowell and unassigned ling1726 Jun 2, 2022

spmonahan reviewed Jun 8, 2022

View reviewed changes

behowell added 3 commits June 9, 2022 09:28

Merge branch 'master' of https://github.com/microsoft/fluentui into b…

5e02e53

…adge-font-styles

Use spacing tokens, and fix ::after

3d792f9

Merge branch 'master' of https://github.com/microsoft/fluentui into b…

89ea012

…adge-font-styles

github-actions bot removed this from the June Project Cycle Q2 2022 milestone Jul 11, 2022

github-actions bot added this to the July Project Cycle Q3 2022 milestone Jul 11, 2022

spmonahan approved these changes Jul 11, 2022

View reviewed changes

Fix change file

7297dec

ling1726 reviewed Jul 11, 2022

View reviewed changes

behowell merged commit 4cb5696 into microsoft:master Jul 12, 2022

TristanWatanabe mentioned this pull request Jul 13, 2022

Epic: Move off usage of flex gap in v9 components #22704

Closed

55 tasks

behowell deleted the badge-font-styles branch February 15, 2024 21:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Badge] Fix font sizes, padding, and colors to align with visual design #23379

[Badge] Fix font sizes, padding, and colors to align with visual design #23379

behowell commented Jun 2, 2022 •

edited

Loading

fabricteam commented Jun 2, 2022 •

edited

Loading

codesandbox-ci bot commented Jun 2, 2022 •

edited

Loading

size-auditor bot commented Jun 2, 2022 •

edited

Loading

fabricteam commented Jun 2, 2022 •

edited

Loading

spmonahan Jun 8, 2022

spmonahan Jun 8, 2022

behowell Jun 9, 2022

behowell Jun 9, 2022

ling1726 Jul 11, 2022

ling1726 Jul 11, 2022

behowell Jul 12, 2022

[Badge] Fix font sizes, padding, and colors to align with visual design #23379

[Badge] Fix font sizes, padding, and colors to align with visual design #23379

Conversation

behowell commented Jun 2, 2022 • edited Loading

Current Behavior

New Behavior

Related Issue(s)

fabricteam commented Jun 2, 2022 • edited Loading

📊 Bundle size report

codesandbox-ci bot commented Jun 2, 2022 • edited Loading

size-auditor bot commented Jun 2, 2022 • edited Loading

Asset size changes

fabricteam commented Jun 2, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

behowell commented Jun 2, 2022 •

edited

Loading

fabricteam commented Jun 2, 2022 •

edited

Loading

codesandbox-ci bot commented Jun 2, 2022 •

edited

Loading

size-auditor bot commented Jun 2, 2022 •

edited

Loading

fabricteam commented Jun 2, 2022 •

edited

Loading