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)
}
header={
-
+
Sales analysis 2019 presentation
-
+
}
- description={
Folder > Presentations}
+ description={Folder > Presentations}
/>
diff --git a/apps/vr-tests-react-components/src/stories/Text.stories.tsx b/apps/vr-tests-react-components/src/stories/Text.stories.tsx
index 7057ffbdf9a5e6..52edf3df66c814 100644
--- 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,7 +138,7 @@ storiesOf('Text Converged', module)
{ includeRtl: true, includeHighContrast: true, includeDarkMode: true },
)
.addStory(
- 'Display',
+ 'Typography wrappers',
() => (
<>
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
index 6c3903222f306e..5b55ac30279ad3 100644
--- 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,7 +390,6 @@ 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';
@@ -402,13 +397,10 @@ 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 }
diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
index 5070530ec3b94c..d49143c5a9787a 100644
--- a/packages/react-components/react-components/src/index.ts
+++ b/packages/react-components/react-components/src/index.ts
@@ -556,43 +556,25 @@ export type {
TabListState,
} from '@fluentui/react-tabs';
export {
- Body,
- Caption,
+ Body1,
+ Caption1,
+ Caption2,
Display,
- Headline,
+ Subtitle1,
LargeTitle,
- Subheadline,
+ Subtitle2,
Text,
Title1,
Title2,
Title3,
- /* eslint-disable-next-line deprecation/deprecation */
- bodyClassName,
- /* eslint-disable-next-line deprecation/deprecation */
- captionClassName,
- /* eslint-disable-next-line deprecation/deprecation */
- displayClassName,
- /* eslint-disable-next-line deprecation/deprecation */
- headlineClassName,
- /* eslint-disable-next-line deprecation/deprecation */
- largeTitleClassName,
- bodyClassNames,
- captionClassNames,
+ body1ClassNames,
+ caption1ClassNames,
+ caption2ClassNames,
displayClassNames,
- headlineClassNames,
+ subtitle1ClassNames,
largeTitleClassNames,
renderText_unstable,
- /* eslint-disable-next-line deprecation/deprecation */
- subheadlineClassName,
- /* eslint-disable-next-line deprecation/deprecation */
- textClassName,
- /* eslint-disable-next-line deprecation/deprecation */
- title1ClassName,
- /* eslint-disable-next-line deprecation/deprecation */
- title2ClassName,
- /* eslint-disable-next-line deprecation/deprecation */
- title3ClassName,
- subheadlineClassNames,
+ subtitle2ClassNames,
textClassNames,
title1ClassNames,
title2ClassNames,
diff --git a/packages/react-components/react-input/src/stories/InputContentBeforeAfter.stories.tsx b/packages/react-components/react-input/src/stories/InputContentBeforeAfter.stories.tsx
index 6ebfd63e083229..e3d968647a499f 100644
--- a/packages/react-components/react-input/src/stories/InputContentBeforeAfter.stories.tsx
+++ b/packages/react-components/react-input/src/stories/InputContentBeforeAfter.stories.tsx
@@ -5,7 +5,7 @@ import { makeStyles, shorthands } from '@griffel/react';
import { PersonRegular, MicRegular } from '@fluentui/react-icons';
import { Button } from '@fluentui/react-button';
import type { ButtonProps } from '@fluentui/react-button';
-import { Body, Text } from '@fluentui/react-text';
+import { Body1, Text } from '@fluentui/react-text';
import { Input } from '../index';
const useStyles = makeStyles({
@@ -31,9 +31,9 @@ const ContentBefore = () => {
<>
} id={id} />
-
+
An input with a decorative icon in the contentBefore slot.
-
+
);
};
@@ -45,9 +45,9 @@ const ContentAfter = () => {
<>
} id={id} />
-
+
An input with a button in the contentAfter slot.
-
+
);
};
@@ -74,10 +74,10 @@ const ContentBeforeAndAfter = () => {
aria-labelledby={`${id} ${beforeId} ${afterId}`}
id={id}
/>
-
+
An input with a presentational value in the contentBefore slot and another presentational value in
the contentAfter slot.
-
+
);
};
diff --git a/packages/react-components/react-storybook-addon/src/demos.stories.tsx b/packages/react-components/react-storybook-addon/src/demos.stories.tsx
index 0bde1e4d3a4f3f..6fdf251c3b2a76 100644
--- a/packages/react-components/react-storybook-addon/src/demos.stories.tsx
+++ b/packages/react-components/react-storybook-addon/src/demos.stories.tsx
@@ -1,12 +1,12 @@
import * as React from 'react';
import { Button } from '@fluentui/react-button';
-import { Headline, Text } from '@fluentui/react-text';
+import { Subtitle1, Text } from '@fluentui/react-text';
import { action } from '@storybook/addon-actions';
export const Demos = () => {
return (
-
This story is for testing purposes of this addon
+
This story is for testing purposes of this addon