fix(react-text): Update typography wrappers to latest naming by theerebuss · Pull Request #22934 · microsoft/fluentui

theerebuss · 2022-05-11T10:43:01Z

Current Behavior

We currently have these typography wrappers that no longer match the naming used by design:
Headline, SubHeadline, Body, Caption

New Behavior

Components have been renamed to match the new design specs:

Headline -> Subtitle1
SubHeadline -> Subtitle2
Body -> Body1
Caption -> Caption1

New component Caption2 was also added.

Also removes the deprecated *ClassName to help with the merging of #23026.

Related Issue(s)

Fixes #22700

Apologies for the large PR, have a cute dog to keep you motivated through your journey:

fabricteam · 2022-05-11T10:50:12Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-text` Text - Wrappers	`14.324 kB` `4.749 kB`	`14.326 kB` `4.744 kB`	`2 B` `-5 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-card` Card - All	`59.102 kB` `16.957 kB`
`react-card` Card	`54.387 kB` `15.706 kB`
`react-card` CardFooter	`7.891 kB` `3.363 kB`
`react-card` CardHeader	`9.463 kB` `3.881 kB`
`react-card` CardPreview	`7.863 kB` `3.391 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`179.74 kB` `50.168 kB`
`react-components` react-components: FluentProvider & webLightTheme	`34.178 kB` `11.138 kB`
`react-input` Input	`22.274 kB` `7.336 kB`
`react-spinbutton` SpinButton	`41.985 kB` `11.908 kB`
`react-text` Text - Default	`11.002 kB` `4.336 kB`

_{🤖 This report was generated against 72684d3d57ee3cb0d7012a31559b8a2b7ad36849}

codesandbox-ci · 2022-05-11T10:50:14Z

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 62c8da1:

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

size-auditor · 2022-05-11T10:54:39Z

Asset size changes

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

Baseline commit: 72684d3d57ee3cb0d7012a31559b8a2b7ad36849 (build)

fabricteam · 2022-05-11T10:54:43Z

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

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	922	937	5000
Button	mount	576	561	5000
FluentProvider	mount	1870	1833	5000
FluentProviderWithTheme	mount	273	294	10
FluentProviderWithTheme	virtual-rerender	222	244	10
FluentProviderWithTheme	virtual-rerender-with-unmount	313	323	10
MakeStyles	mount	1584	1577	50000

theerebuss · 2022-05-11T11:45:29Z

+/**
+ * @deprecated Use `caption2ClassNames.root` instead.
+ */
+export const caption2ClassName = 'fui-Caption2';


Should we ship the deprecated className for new components too? Conformance is currently enforcing it; I assume for consistency reasons.

if we are introducing breaking change like this IMO this is good opportunity to get rid of it. what's the issue with conformance ?

https://uifabric.visualstudio.com/fabricpublic/_build/results?buildId=248744&view=logs&j=258ec178-2d8b-5611-7b9b-60c5c95dae55&t=8250ef03-1890-59ab-a6a8-5d0b4c2baa1b&l=1592

You should remove className. We have another issue to remove all the deprecated instances.

For conformance, you can disable the tests. Here's an example of how to do that: https://github.com/microsoft/fluentui/blob/master/packages/react-components/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx#L17

thanks @spmonahan !

theerebuss · 2022-05-11T13:10:52Z

Screener changes looking good 👍🏻

Hotell · 2022-05-12T11:54:36Z

+/**
+ * @deprecated Use `caption2ClassNames.root` instead.
+ */
+export const caption2ClassName = 'fui-Caption2';


if we are introducing breaking change like this IMO this is good opportunity to get rid of it. what's the issue with conformance ?

spmonahan

LGTM! Please remove the old className props and hold off on merging until we're ready to merge all breaking changes per our release schedule.

theerebuss · 2022-05-18T13:13:27Z

I've removed the deprecated ClassName from react-text as you asked for to help with the merging of #23026. Please review the changes before we merge this @spmonahan

spmonahan

Just putting a block here so we can coordinate merging breaking changes

* fix: change Headline to Subtitle1 * fix: change Subheadline to Subtitle2 * fix: change Body to Body1 * fix: change Caption to Caption1 * feat: add Caption2 * chore: use better vr story name * chore: add change files * chore: update api * fix: rename components in missing story * feat: removed unused `caption2ClassName` * chore: disable classname conformance test * chore: remove deprecated className * chore: add conformance test exception

* react-button: Removing deprecated block prop from all button components (#23071) * react-button: Removing deprecated block prop from all button components. * Removing block stories. * Adding changefile. * Removing block prop from migration guide and vr tests. * fix(react-text): Update typography wrappers to latest naming (#22934) * fix: change Headline to Subtitle1 * fix: change Subheadline to Subtitle2 * fix: change Body to Body1 * fix: change Caption to Caption1 * feat: add Caption2 * chore: use better vr story name * chore: add change files * chore: update api * fix: rename components in missing story * feat: removed unused `caption2ClassName` * chore: disable classname conformance test * chore: remove deprecated className * chore: add conformance test exception * BREAKING: Removing deprecated `<componentName>ClassName` exports from v9 packages (#23026) * removing single static classnames * api files * change files * disabling component-has-static-classname-exported test in react-image * preparing to merge master * disabling export tests * removing change file for text * change file * disabling test in Dialog * disabling more tests * remove react-text class names Co-authored-by: Sean Monahan <[email protected]> * BREAKING: Update string unions to `spinal-case` (#23001) * react-avatar: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-input: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-radio: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-select: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-spinbutton: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-tabster: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-textarea: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-badge: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * react-combobox: update unions to use spinal-case BREAKING Per #22596 all string unions are being updated to use spinal-case * add change files for spinal-case update * react-card: update tabster tab behaviors Updates the `useCard()` implementation after the `react-tabster` spinal-case breaking change. * vr-tests: update types for v9 tests * react-avatar: update badge types in stories Avatar stories were using the old, camelCase PresenceBadge types. * react-badge: fix style that broke with spinal-case change One of the "doNotDisturb" cases was missed due to the non-typesafe way we tested the PresenceBadge status in styles. This test has been changed to a typesafe function call instead. * react-combobox: update props in appearance story Change filledDarker and filledLighter to filled-darker and filled-lighter respectively. * react-badge: update camelCase to spinal-case for strings * fix: missing inputClassName in merge conflict resolution * react-select: update api snapshot * react-alert: update conformance tests * fix: update react-components api snapshot * BREAKING CHANGE: Encapsulate Popper API (#22586) * BREAKING CHANGE: Encapsulate Popper API Updates `@fluentui/react-positioning` so that none of the popper API and types leak anymore * changefiles * update test * update stories * positioned to positionedElement * update api * remove getBasePlacement * add tests * virtual element and boundary * fix types * PR fixes * update md * fix type * changefile * Update packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts Co-authored-by: Ben Howell <[email protected]> * Update packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx Co-authored-by: Ben Howell <[email protected]> * rename popperOptions to positioningOptions Co-authored-by: Ben Howell <[email protected]> * BREAKING: Remove context exports from react-components (#23085) * BREAKING: Remove context exports from react-components In order to provider proper encapsulation and allow us to change internals more easily, this PR removes exports of context objects from react-components. In cases where contexts were removed, the export was replaced with a specific provider component and hook to use the context value. Follows from #22300 * changefile * stop exporting menu contexts * changefile * update md Co-authored-by: Sean Monahan <[email protected]> * react-popover: update api snapshot * BREAKING(react-theme): remove webHighContrastTheme (#23083) * fix(react-theme): Remove webHighContrast theme Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: André Dias (he/him) <[email protected]> Co-authored-by: Esteban Munoz Facusse <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Miroslav Stastny <[email protected]>

* react-button: Removing deprecated block prop from all button components (microsoft#23071) * react-button: Removing deprecated block prop from all button components. * Removing block stories. * Adding changefile. * Removing block prop from migration guide and vr tests. * fix(react-text): Update typography wrappers to latest naming (microsoft#22934) * fix: change Headline to Subtitle1 * fix: change Subheadline to Subtitle2 * fix: change Body to Body1 * fix: change Caption to Caption1 * feat: add Caption2 * chore: use better vr story name * chore: add change files * chore: update api * fix: rename components in missing story * feat: removed unused `caption2ClassName` * chore: disable classname conformance test * chore: remove deprecated className * chore: add conformance test exception * BREAKING: Removing deprecated `<componentName>ClassName` exports from v9 packages (microsoft#23026) * removing single static classnames * api files * change files * disabling component-has-static-classname-exported test in react-image * preparing to merge master * disabling export tests * removing change file for text * change file * disabling test in Dialog * disabling more tests * remove react-text class names Co-authored-by: Sean Monahan <[email protected]> * BREAKING: Update string unions to `spinal-case` (microsoft#23001) * react-avatar: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-input: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-radio: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-select: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-spinbutton: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-tabster: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-textarea: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-badge: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * react-combobox: update unions to use spinal-case BREAKING Per microsoft#22596 all string unions are being updated to use spinal-case * add change files for spinal-case update * react-card: update tabster tab behaviors Updates the `useCard()` implementation after the `react-tabster` spinal-case breaking change. * vr-tests: update types for v9 tests * react-avatar: update badge types in stories Avatar stories were using the old, camelCase PresenceBadge types. * react-badge: fix style that broke with spinal-case change One of the "doNotDisturb" cases was missed due to the non-typesafe way we tested the PresenceBadge status in styles. This test has been changed to a typesafe function call instead. * react-combobox: update props in appearance story Change filledDarker and filledLighter to filled-darker and filled-lighter respectively. * react-badge: update camelCase to spinal-case for strings * fix: missing inputClassName in merge conflict resolution * react-select: update api snapshot * react-alert: update conformance tests * fix: update react-components api snapshot * BREAKING CHANGE: Encapsulate Popper API (microsoft#22586) * BREAKING CHANGE: Encapsulate Popper API Updates `@fluentui/react-positioning` so that none of the popper API and types leak anymore * changefiles * update test * update stories * positioned to positionedElement * update api * remove getBasePlacement * add tests * virtual element and boundary * fix types * PR fixes * update md * fix type * changefile * Update packages/react-components/react-combobox/src/components/Combobox/useCombobox.ts Co-authored-by: Ben Howell <[email protected]> * Update packages/react-components/react-tooltip/src/components/Tooltip/useTooltip.tsx Co-authored-by: Ben Howell <[email protected]> * rename popperOptions to positioningOptions Co-authored-by: Ben Howell <[email protected]> * BREAKING: Remove context exports from react-components (microsoft#23085) * BREAKING: Remove context exports from react-components In order to provider proper encapsulation and allow us to change internals more easily, this PR removes exports of context objects from react-components. In cases where contexts were removed, the export was replaced with a specific provider component and hook to use the context value. Follows from microsoft#22300 * changefile * stop exporting menu contexts * changefile * update md Co-authored-by: Sean Monahan <[email protected]> * react-popover: update api snapshot * BREAKING(react-theme): remove webHighContrastTheme (microsoft#23083) * fix(react-theme): Remove webHighContrast theme Co-authored-by: Makoto Morimoto <[email protected]> Co-authored-by: André Dias (he/him) <[email protected]> Co-authored-by: Esteban Munoz Facusse <[email protected]> Co-authored-by: ling1726 <[email protected]> Co-authored-by: Ben Howell <[email protected]> Co-authored-by: Miroslav Stastny <[email protected]>

theerebuss added Component: Text Fluent UI react-components (v9) labels May 11, 2022

theerebuss added this to the May Project Cycle Q2 2022 milestone May 11, 2022

msft-fluent-ui-bot added the Area: Fluent label May 11, 2022

theerebuss added 7 commits May 11, 2022 12:54

fix: change Headline to Subtitle1

13fbf1b

fix: change Subheadline to Subtitle2

f74cc7d

fix: change Body to Body1

f01ad75

fix: change Caption to Caption1

293d5dc

feat: add Caption2

510bdf4

chore: use better vr story name

b3514a0

chore: add change files

617e1b6

theerebuss commented May 11, 2022

View reviewed changes

theerebuss marked this pull request as ready for review May 11, 2022 11:52

theerebuss requested review from a team as code owners May 11, 2022 11:52

chore: update api

eb8521f

tudorpopams requested a review from Hotell May 11, 2022 12:31

fix: rename components in missing story

5052e26

spmonahan mentioned this pull request May 11, 2022

Coordinate Breaking RC Changes #22130

Closed

Hotell approved these changes May 12, 2022

View reviewed changes

theerebuss added 2 commits May 12, 2022 17:38

feat: removed unused caption2ClassName

c2f6adc

Merge branch 'master' into text-wrapper-renaming

31276a6

miroslavstastny reviewed May 12, 2022

View reviewed changes

Comment thread packages/react-components/react-text/src/components/Caption1/Caption1.tsx

spmonahan approved these changes May 12, 2022

View reviewed changes

khmakoto approved these changes May 12, 2022

View reviewed changes

Comment thread packages/react-components/react-text/src/stories/TextTypography.stories.tsx

Comment thread packages/react-components/react-components/src/index.ts

Comment thread packages/react-components/react-text/bundle-size/Text.Wrappers.fixture.js

theerebuss added 3 commits May 16, 2022 11:31

chore: disable classname conformance test

91aae85

Merge branch 'master' into text-wrapper-renaming

4f54b99

chore: remove deprecated className

165a959

theerebuss requested a review from spmonahan May 18, 2022 13:12

spmonahan requested changes May 18, 2022

View reviewed changes

msft-fluent-ui-bot added the Needs: Author Feedback label May 18, 2022

chore: add conformance test exception

62c8da1

msft-fluent-ui-bot removed the Needs: Author Feedback label May 18, 2022

spmonahan changed the base branch from master to 9.0-breaking-changes May 19, 2022 19:25

spmonahan approved these changes May 19, 2022

View reviewed changes

spmonahan merged commit 8b18089 into microsoft:9.0-breaking-changes May 19, 2022

theerebuss deleted the text-wrapper-renaming branch May 20, 2022 14:09

theerebuss mentioned this pull request May 25, 2022

[BREAKING] fix(react-text): remove default text styles #23254

Closed

theerebuss mentioned this pull request Jun 7, 2022

Misnaming of react-text wrapper components #22700

Closed

Uh oh!

Conversation

theerebuss commented May 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Current Behavior

New Behavior

Related Issue(s)

Uh oh!

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

Uh oh!

📊 Bundle size report

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Asset size changes

Uh oh!

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

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

theerebuss May 11, 2022

Choose a reason for hiding this comment

Uh oh!

Hotell May 12, 2022

Choose a reason for hiding this comment

Uh oh!

theerebuss May 12, 2022

Choose a reason for hiding this comment

Uh oh!

spmonahan May 12, 2022

Choose a reason for hiding this comment

Uh oh!

Hotell May 13, 2022

Choose a reason for hiding this comment

Uh oh!

theerebuss commented May 11, 2022

Uh oh!

Hotell May 12, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

spmonahan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

theerebuss commented May 18, 2022

Uh oh!

spmonahan left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

theerebuss commented May 11, 2022 •

edited

Loading

fabricteam commented May 11, 2022 •

edited

Loading

codesandbox-ci Bot commented May 11, 2022 •

edited

Loading

size-auditor Bot commented May 11, 2022 •

edited

Loading

fabricteam commented May 11, 2022 •

edited

Loading

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