feat(react-theme): Add bold font weight by miroslavstastny · Pull Request #24378 · microsoft/fluentui

miroslavstastny · 2022-08-16T11:13:06Z

Current Behavior

there was no fontWeightBold token in react-theme
there was no Body2 in Typography
all Stronger Typography variants used fontWeightMedium

New Behavior

Add fontWeightBold token to react theme

Add bold as a valid option of weight prop in Text.

Update typography to use fontWeightBold in all Stronger variants

Add Body2 to Typography and also as a component to react-text

codesandbox-ci · 2022-08-16T11:21:55Z

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 d1a1a11:

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

fabricteam · 2022-08-16T11:22:55Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-components` react-components: FluentProvider & webLightTheme	`32.876 kB` `10.773 kB`	`32.895 kB` `10.778 kB`	`19 B` `5 B`
`react-text` Text - Default	`11.572 kB` `4.537 kB`	`11.682 kB` `4.561 kB`	`110 B` `24 B`
`react-text` Text - Wrappers	`14.882 kB` `4.977 kB`	`14.992 kB` `4.995 kB`	`110 B` `18 B`
`react-theme` Teams: all themes	`29.205 kB` `6.249 kB`	`29.224 kB` `6.255 kB`	`19 B` `6 B`
`react-theme` Teams: Light theme	`17.069 kB` `4.885 kB`	`17.088 kB` `4.89 kB`	`19 B` `5 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`79.574 kB` `24.123 kB`
`react-alert` Alert	`82.874 kB` `20.608 kB`
`react-avatar` Avatar	`48.283 kB` `13.644 kB`
`react-avatar` AvatarGroup	`15.072 kB` `6.016 kB`
`react-avatar` AvatarGroupItem	`68.464 kB` `19.067 kB`
`react-badge` Badge	`22.503 kB` `7.153 kB`
`react-badge` CounterBadge	`23.406 kB` `7.449 kB`
`react-badge` PresenceBadge	`23.947 kB` `7.022 kB`
`react-button` Button	`36.396 kB` `9.575 kB`
`react-button` CompoundButton	`43.469 kB` `10.812 kB`
`react-button` MenuButton	`39.014 kB` `10.456 kB`
`react-button` SplitButton	`46.544 kB` `11.84 kB`
`react-button` ToggleButton	`51.91 kB` `11.003 kB`
`react-card` Card - All	`67.47 kB` `19.273 kB`
`react-card` Card	`63.152 kB` `18.185 kB`
`react-card` CardFooter	`8.461 kB` `3.555 kB`
`react-card` CardHeader	`9.504 kB` `3.896 kB`
`react-card` CardPreview	`8.562 kB` `3.61 kB`
`react-combobox` Combobox (including child components)	`72.723 kB` `23.746 kB`
`react-combobox` Dropdown (including child components)	`70.792 kB` `23.233 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`189.042 kB` `51.964 kB`
`react-dialog` Dialog (including children components)	`84.793 kB` `25.27 kB`
`react-divider` Divider	`16.359 kB` `5.853 kB`
`react-image` Image	`10.68 kB` `4.215 kB`
`react-input` Input	`23.554 kB` `7.644 kB`
`react-label` Label	`9.238 kB` `3.815 kB`
`react-link` Link	`12.231 kB` `4.925 kB`
`react-menu` Menu (including children components)	`115.941 kB` `35.393 kB`
`react-menu` Menu (including selectable components)	`119.14 kB` `35.886 kB`
`react-overflow` hooks only	`10.898 kB` `4.174 kB`
`react-popover` Popover	`103.061 kB` `31.573 kB`
`react-portal` Portal	`10.576 kB` `3.875 kB`
`react-positioning` usePositioning	`19.7 kB` `7.404 kB`
`react-provider` FluentProvider	`15.655 kB` `5.835 kB`
`react-radio` Radio	`36.238 kB` `12 kB`
`react-radio` RadioGroup	`14.361 kB` `5.728 kB`
`react-select` Select	`20.746 kB` `7.299 kB`
`react-slider` Slider	`32.07 kB` `10.033 kB`
`react-spinbutton` SpinButton	`43.899 kB` `12.362 kB`
`react-spinner` Spinner	`19.848 kB` `6.384 kB`
`react-switch` Switch	`32.562 kB` `10.253 kB`
`react-textarea` Textarea	`23.674 kB` `7.83 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-tooltip` Tooltip	`41.504 kB` `14.622 kB`

_{🤖 This report was generated against 8f420a1c55f283156b758bda1e7ef0591ec57a78}

size-auditor · 2022-08-16T11:24:40Z

Asset size changes

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

Baseline commit: 8f420a1c55f283156b758bda1e7ef0591ec57a78 (build)

fabricteam · 2022-08-16T11:27:25Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	1276	1270	5000
Button	mount	963	968	5000
FluentProvider	mount	1597	1569	5000
FluentProviderWithTheme	mount	625	631	10
FluentProviderWithTheme	virtual-rerender	579	595	10
FluentProviderWithTheme	virtual-rerender-with-unmount	626	623	10
MakeStyles	mount	1933	1902	50000
SpinButton	mount	2478	2465	5000

Co-authored-by: ling1726 <[email protected]>

miroslavstastny added 3 commits August 12, 2022 16:26

feat(react-theme): add fontWeightBold

5c67697

Add weight="bold" to Text

af76871

Change files

06bfb98

miroslavstastny requested review from a team as code owners August 16, 2022 11:13

msft-fluent-ui-bot assigned layershifter Aug 16, 2022

github-actions Bot added this to the July Project Cycle Q3 2022 milestone Aug 16, 2022

ling1726 reviewed Aug 16, 2022

View reviewed changes

Comment thread change/@fluentui-react-theme-bdcdae2f-8e92-4d18-b7da-d8336334caa6.json Outdated

ling1726 reviewed Aug 16, 2022

View reviewed changes

Comment thread change/@fluentui-react-text-01530fa1-545f-4a94-a9fb-00fa2be3dc3b.json Outdated

ling1726 reviewed Aug 16, 2022

View reviewed changes

Comment thread change/@fluentui-react-theme-sass-7ddd5d89-4d81-49e6-b347-a1f779b7dbf0.json Outdated

ling1726 approved these changes Aug 16, 2022

View reviewed changes

Apply suggestions from code review

d1a1a11

Co-authored-by: ling1726 <[email protected]>

tudorpopams requested a review from marcosmoura August 16, 2022 12:12

marcosmoura approved these changes Aug 16, 2022

View reviewed changes

miroslavstastny merged commit 61557d7 into microsoft:master Aug 17, 2022

miroslavstastny deleted the feat/react-theme-bold branch August 17, 2022 08:58

miroslavstastny assigned miroslavstastny and unassigned layershifter Aug 17, 2022

smhigley mentioned this pull request Nov 8, 2022

Feature: Added large tab size to react-tabs #25577

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(react-theme): Add bold font weight#24378

feat(react-theme): Add bold font weight#24378
miroslavstastny merged 4 commits into
microsoft:masterfrom
miroslavstastny:feat/react-theme-bold

miroslavstastny commented Aug 16, 2022

Uh oh!

codesandbox-ci Bot commented Aug 16, 2022 •

edited

Loading

Uh oh!

fabricteam commented Aug 16, 2022 •

edited

Loading

Uh oh!

size-auditor Bot commented Aug 16, 2022 •

edited

Loading

Uh oh!

fabricteam commented Aug 16, 2022 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

miroslavstastny commented Aug 16, 2022

Current Behavior

New Behavior

Uh oh!

codesandbox-ci Bot commented Aug 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Aug 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

size-auditor Bot commented Aug 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Aug 16, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

codesandbox-ci Bot commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

size-auditor Bot commented Aug 16, 2022 •

edited

Loading

fabricteam commented Aug 16, 2022 •

edited

Loading

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