microsoft · spmonahan · May 19, 2022 · May 11, 2022 · May 11, 2022 · May 11, 2022
diff --git a/apps/vr-tests-react-components/src/stories/Card.stories.tsx b/apps/vr-tests-react-components/src/stories/Card.stories.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import Screener from 'screener-storybook/src/screener';
 import { Card, CardHeader, CardFooter, CardPreview } from '@fluentui/react-card';
 import { Open16Regular, Share16Regular } from '@fluentui/react-icons';
-import { Body, Caption } from '@fluentui/react-text';
+import { Body1, Caption1 } from '@fluentui/react-text';
 import { Button } from '@fluentui/react-button';
 import { action } from '@storybook/addon-actions';
 
@@ -17,11 +17,11 @@ const SampleCardContent = () => (
     <CardHeader
       image={<img src={powerpointLogoURL} alt="Microsoft PowerPoint logo" />}
       header={
-        <Body>
+        <Body1>
           <b>App Name</b>
-        </Body>
+        </Body1>
       }
-      description={<Caption>Developer</Caption>}
+      description={<Caption1>Developer</Caption1>}
     />
     <div>
       Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.
@@ -52,11 +52,11 @@ storiesOf('Card Converged', module)
         <CardHeader
           image={<img src={powerpointLogoURL} alt="Microsoft PowerPoint logo" />}
           header={
-            <Body>
+            <Body1>
               <b>Sales analysis 2019 presentation</b>
-            </Body>
+            </Body1>
           }
-          description={<Caption>Folder &gt; Presentations</Caption>}
+          description={<Caption1>Folder &gt; Presentations</Caption1>}
         />
       </Card>
     </div>

diff --git a/apps/vr-tests-react-components/src/stories/Text.stories.tsx b/apps/vr-tests-react-components/src/stories/Text.stories.tsx
@@ -2,16 +2,17 @@ import * as React from 'react';
 import { storiesOf } from '@storybook/react';
 import Screener from 'screener-storybook/src/screener';
 import {
-  Body,
-  Caption,
+  Body1,
+  Caption1,
   Display,
-  Headline,
+  Subtitle1,
   LargeTitle,
-  Subheadline,
+  Subtitle2,
   Text,
   Title1,
   Title2,
   Title3,
+  Caption2,
 } from '@fluentui/react-text';
 
 storiesOf('Text Converged', module)
@@ -137,18 +138,19 @@ storiesOf('Text Converged', module)
     { includeRtl: true, includeHighContrast: true, includeDarkMode: true },
   )
   .addStory(
-    'Display',
+    'Typography wrappers',
     () => (
       <>
         <Display block>Display</Display>
         <LargeTitle block>LargeTitle</LargeTitle>
         <Title1 block>Title1</Title1>
         <Title2 block>Title2</Title2>
         <Title3 block>Title3</Title3>
-        <Headline block>Headline</Headline>
-        <Subheadline block>Subheadline</Subheadline>
-        <Body block>Body</Body>
-        <Caption block>Caption</Caption>
+        <Subtitle1 block>Subtitle1</Subtitle1>
+        <Subtitle2 block>Subtitle2</Subtitle2>
+        <Body1 block>Body1</Body1>
+        <Caption1 block>Caption1</Caption1>
+        <Caption2 block>Caption2</Caption2>
       </>
     ),
     { includeRtl: true },

diff --git a/change/@fluentui-react-components-8ea6ca1b-f0cb-4ce3-b211-063c7d40338a.json b/change/@fluentui-react-components-8ea6ca1b-f0cb-4ce3-b211-063c7d40338a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(react-text): Change typography wrapper component names to match new design spec",
+  "packageName": "@fluentui/react-components",
+  "email": "39736248+andrefcdias@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-text-91f14a73-d74c-4da0-8619-edbf5662b45d.json b/change/@fluentui-react-text-91f14a73-d74c-4da0-8619-edbf5662b45d.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: Change typography wrapper component names to match new design spec",
+  "packageName": "@fluentui/react-text",
+  "email": "39736248+andrefcdias@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx b/packages/react-components/react-card/src/stories/CardAppearance.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
-import { Headline, Title3 } from '@fluentui/react-text';
+import { Subtitle1, Title3 } from '@fluentui/react-text';
 import { makeStyles, shorthands } from '@griffel/react';
 import { SampleCard } from './SampleCard.stories';
 import { FluentProvider } from '@fluentui/react-provider';
@@ -26,9 +26,9 @@ const Title = (props: { children: React.ReactNode }) => {
   const styles = useStyles();
 
   return (
-    <Headline as="h4" block className={styles.header}>
+    <Subtitle1 as="h4" block className={styles.header}>
       {props.children}
-    </Headline>
+    </Subtitle1>
   );
 };
 

diff --git a/packages/react-components/react-card/src/stories/CardDefault.stories.tsx b/packages/react-components/react-card/src/stories/CardDefault.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Body, Caption } from '@fluentui/react-text';
+import { Body1, Caption1 } from '@fluentui/react-text';
 
 import { Button } from '@fluentui/react-button';
 import { ArrowReplyRegular, ShareRegular } from '@fluentui/react-icons';
@@ -17,11 +17,11 @@ export const Default = () => {
       <CardHeader
         image={<img src={avatarElviaURL} alt="Face of a person" />}
         header={
-          <Body>
+          <Body1>
             <b>Elvia Atkins</b> mentioned you
-          </Body>
+          </Body1>
         }
-        description={<Caption>5h ago · About us - Overview</Caption>}
+        description={<Caption1>5h ago · About us - Overview</Caption1>}
       />
 
       <CardPreview logo={<img src={wordLogoURL} alt="Microsoft Word logo" />}>

diff --git a/packages/react-components/react-card/src/stories/SampleCard.stories.tsx b/packages/react-components/react-card/src/stories/SampleCard.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Button } from '@fluentui/react-button';
 import { Open16Regular, Share16Regular } from '@fluentui/react-icons';
-import { Body, Caption } from '@fluentui/react-text';
+import { Body1, Caption1 } from '@fluentui/react-text';
 import { Card, CardHeader, CardFooter, CardPreview } from '../index';
 import type { CardProps } from '../index';
 
@@ -19,11 +19,11 @@ export const SampleCard = (props: CardProps) => (
     <CardHeader
       image={<img src={powerpointLogoURL} alt="Microsoft PowerPoint logo" />}
       header={
-        <Body>
+        <Body1>
           <b>App Name</b>
-        </Body>
+        </Body1>
       }
-      description={<Caption>Developer</Caption>}
+      description={<Caption1>Developer</Caption1>}
     />
     <div>
       Donut chocolate bar oat cake. Dragée tiramisu lollipop bear claw. Marshmallow pastry jujubes toffee sugar plum.

diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
@@ -59,9 +59,8 @@ import { badgeClassNames } from '@fluentui/react-badge';
 import { BadgeProps } from '@fluentui/react-badge';
 import { BadgeSlots } from '@fluentui/react-badge';
 import { BadgeState } from '@fluentui/react-badge';
-import { Body as Body_2 } from '@fluentui/react-text';
-import { bodyClassName } from '@fluentui/react-text';
-import { bodyClassNames } from '@fluentui/react-text';
+import { Body1 } from '@fluentui/react-text';
+import { body1ClassNames } from '@fluentui/react-text';
 import { BorderRadiusTokens } from '@fluentui/react-theme';
 import { BrandVariants } from '@fluentui/react-theme';
 import { Button } from '@fluentui/react-button';
@@ -70,9 +69,10 @@ import { buttonClassNames } from '@fluentui/react-button';
 import { ButtonProps } from '@fluentui/react-button';
 import { ButtonSlots } from '@fluentui/react-button';
 import { ButtonState } from '@fluentui/react-button';
-import { Caption } from '@fluentui/react-text';
-import { captionClassName } from '@fluentui/react-text';
-import { captionClassNames } from '@fluentui/react-text';
+import { Caption1 } from '@fluentui/react-text';
+import { caption1ClassNames } from '@fluentui/react-text';
+import { Caption2 } from '@fluentui/react-text';
+import { caption2ClassNames } from '@fluentui/react-text';
 import { Checkbox } from '@fluentui/react-checkbox';
 import { checkboxClassName } from '@fluentui/react-checkbox';
 import { checkboxClassNames } from '@fluentui/react-checkbox';
@@ -106,7 +106,6 @@ import { createLightTheme } from '@fluentui/react-theme';
 import { createTeamsDarkTheme } from '@fluentui/react-theme';
 import { CurveTokens } from '@fluentui/react-theme';
 import { Display } from '@fluentui/react-text';
-import { displayClassName } from '@fluentui/react-text';
 import { displayClassNames } from '@fluentui/react-text';
 import { Divider } from '@fluentui/react-divider';
 import { dividerClassName } from '@fluentui/react-divider';
@@ -132,9 +131,6 @@ import { getNativeProps } from '@fluentui/react-utilities';
 import { getPartitionedNativeProps } from '@fluentui/react-utilities';
 import { getSlots } from '@fluentui/react-utilities';
 import { GriffelStyle } from '@griffel/react';
-import { Headline } from '@fluentui/react-text';
-import { headlineClassName } from '@fluentui/react-text';
-import { headlineClassNames } from '@fluentui/react-text';
 import { HorizontalSpacingTokens } from '@fluentui/react-theme';
 import { Image as Image_2 } from '@fluentui/react-image';
 import { imageClassName } from '@fluentui/react-image';
@@ -149,7 +145,6 @@ import { LabelProps } from '@fluentui/react-label';
 import { LabelSlots } from '@fluentui/react-label';
 import { LabelState } from '@fluentui/react-label';
 import { LargeTitle } from '@fluentui/react-text';
-import { largeTitleClassName } from '@fluentui/react-text';
 import { largeTitleClassNames } from '@fluentui/react-text';
 import { LineHeightTokens } from '@fluentui/react-theme';
 import { Link } from '@fluentui/react-link';
@@ -366,9 +361,10 @@ import { SplitButtonSlots } from '@fluentui/react-button';
 import { SplitButtonState } from '@fluentui/react-button';
 import { SSRProvider } from '@fluentui/react-utilities';
 import { StrokeWidthTokens } from '@fluentui/react-theme';
-import { Subheadline } from '@fluentui/react-text';
-import { subheadlineClassName } from '@fluentui/react-text';
-import { subheadlineClassNames } from '@fluentui/react-text';
+import { Subtitle1 } from '@fluentui/react-text';
+import { subtitle1ClassNames } from '@fluentui/react-text';
+import { Subtitle2 } from '@fluentui/react-text';
+import { subtitle2ClassNames } from '@fluentui/react-text';
 import { Tab } from '@fluentui/react-tabs';
 import { tabClassName } from '@fluentui/react-tabs';
 import { tabClassNames } from '@fluentui/react-tabs';
@@ -394,21 +390,17 @@ import { textareaClassNames } from '@fluentui/react-textarea';
 import { TextareaProps } from '@fluentui/react-textarea';
 import { TextareaSlots } from '@fluentui/react-textarea';
 import { TextareaState } from '@fluentui/react-textarea';
-import { textClassName } from '@fluentui/react-text';
 import { textClassNames } from '@fluentui/react-text';
 import { TextProps } from '@fluentui/react-text';
 import { TextSlots } from '@fluentui/react-text';
 import { TextState } from '@fluentui/react-text';
 import { Theme } from '@fluentui/react-theme';
 import { themeToTokensObject } from '@fluentui/react-theme';
 import { Title1 } from '@fluentui/react-text';
-import { title1ClassName } from '@fluentui/react-text';
 import { title1ClassNames } from '@fluentui/react-text';
 import { Title2 } from '@fluentui/react-text';
-import { title2ClassName } from '@fluentui/react-text';
 import { title2ClassNames } from '@fluentui/react-text';
 import { Title3 } from '@fluentui/react-text';
-import { title3ClassName } from '@fluentui/react-text';
 import { title3ClassNames } from '@fluentui/react-text';
 import { ToggleButton } from '@fluentui/react-button';
 import { toggleButtonClassName } from '@fluentui/react-button';
@@ -652,11 +644,9 @@ export { BadgeSlots }
 
 export { BadgeState }
 
-export { Body_2 as Body }
+export { Body1 }
 
-export { bodyClassName }
-
-export { bodyClassNames }
+export { body1ClassNames }
 
 export { BorderRadiusTokens }
 
@@ -674,11 +664,13 @@ export { ButtonSlots }
 
 export { ButtonState }
 
-export { Caption }
+export { Caption1 }
+
+export { caption1ClassNames }
 
-export { captionClassName }
+export { Caption2 }
 
-export { captionClassNames }
+export { caption2ClassNames }
 
 export { Checkbox }
 
@@ -746,8 +738,6 @@ export { CurveTokens }
 
 export { Display }
 
-export { displayClassName }
-
 export { displayClassNames }
 
 export { Divider }
@@ -798,12 +788,6 @@ export { getSlots }
 
 export { GriffelStyle }
 
-export { Headline }
-
-export { headlineClassName }
-
-export { headlineClassNames }
-
 export { HorizontalSpacingTokens }
 
 export { Image_2 as Image }
@@ -832,8 +816,6 @@ export { LabelState }
 
 export { LargeTitle }
 
-export { largeTitleClassName }
-
 export { largeTitleClassNames }
 
 export { LineHeightTokens }
@@ -1266,11 +1248,13 @@ export { SSRProvider }
 
 export { StrokeWidthTokens }
 
-export { Subheadline }
+export { Subtitle1 }
+
+export { subtitle1ClassNames }
 
-export { subheadlineClassName }
+export { Subtitle2 }
 
-export { subheadlineClassNames }
+export { subtitle2ClassNames }
 
 export { Tab }
 
@@ -1322,8 +1306,6 @@ export { TextareaSlots }
 
 export { TextareaState }
 
-export { textClassName }
-
 export { textClassNames }
 
 export { TextProps }
@@ -1338,20 +1320,14 @@ export { themeToTokensObject }
 
 export { Title1 }
 
-export { title1ClassName }
-
 export { title1ClassNames }
 
 export { Title2 }
 
-export { title2ClassName }
-
 export { title2ClassNames }
 
 export { Title3 }
 
-export { title3ClassName }
-
 export { title3ClassNames }
 
 export { ToggleButton }