diff --git a/change/@fluentui-react-text-a9af2339-7549-4913-aa3f-8542dfffd971.json b/change/@fluentui-react-text-a9af2339-7549-4913-aa3f-8542dfffd971.json
new file mode 100644
index 0000000000000..4021cf9cf19a8
--- /dev/null
+++ b/change/@fluentui-react-text-a9af2339-7549-4913-aa3f-8542dfffd971.json
@@ -0,0 +1,7 @@
+{
+ "type": "none",
+ "comment": "refactor Text documentation and add missing guidance for presets/alignment",
+ "packageName": "@fluentui/react-text",
+ "email": "marcosvmmoura@gmail.com",
+ "dependentChangeType": "none"
+}
diff --git a/packages/react-components/react-text/stories/Text/Default.stories.tsx b/packages/react-components/react-text/stories/Text/Default.stories.tsx
index 7236387cb183f..903b1dc887df4 100644
--- a/packages/react-components/react-text/stories/Text/Default.stories.tsx
+++ b/packages/react-components/react-text/stories/Text/Default.stories.tsx
@@ -1,18 +1,4 @@
import * as React from 'react';
-import { makeStyles, Text } from '@fluentui/react-components';
-import type { TextProps } from '@fluentui/react-components';
+import { Text } from '@fluentui/react-components';
-const useStyles = makeStyles({
- container: {
- width: '100px',
- },
-});
-
-export const Default = (props: TextProps) => {
- const styles = useStyles();
- return (
-
- This is an example of the Text component's usage.
-
- );
-};
+export const Default = () => This is an example of the Text component's usage.;
diff --git a/packages/react-components/react-text/stories/Text/TextAlignment.stories.tsx b/packages/react-components/react-text/stories/Text/TextAlignment.stories.tsx
new file mode 100644
index 0000000000000..078c8c00dd3da
--- /dev/null
+++ b/packages/react-components/react-text/stories/Text/TextAlignment.stories.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { makeStyles, shorthands, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
+ container: {
+ ...shorthands.gap('16px'),
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'stretch',
+ },
+});
+
+export const Alignment = () => {
+ const styles = useStyles();
+
+ return (
+
+ Aligned to start
+ Aligned to center
+ Aligned to end
+
+ Justified text: Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium accusamus voluptate autem?
+ Recusandae alias corporis dicta quisquam sequi molestias deleniti, libero necessitatibus, eligendi, omnis cumque
+ enim asperiores quasi quidem sit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus repellat
+ consectetur, sed aperiam ex nulla repellendus tempora vero illo aliquam autem! Impedit ipsa praesentium vero
+ veritatis unde eos, fuga magnam!
+
+
+ );
+};
diff --git a/packages/react-components/react-text/stories/Text/TextBestPractices.md b/packages/react-components/react-text/stories/Text/TextBestPractices.md
index 1ba2c4a948e45..96a21338813b5 100644
--- a/packages/react-components/react-text/stories/Text/TextBestPractices.md
+++ b/packages/react-components/react-text/stories/Text/TextBestPractices.md
@@ -1,12 +1,11 @@
-
- Best Practices
-
+
+ Best Practices
+
### Do
- Use Text whenever you need to display stylized text
- Use Text to display read-only text
- Use the `as` prop to give the text a semantic meaning. By default, the Text component will result in a `span` element.
-
diff --git a/packages/react-components/react-text/stories/Text/TextFont.stories.tsx b/packages/react-components/react-text/stories/Text/TextFont.stories.tsx
index 09830435a630b..e9620964dc95a 100644
--- a/packages/react-components/react-text/stories/Text/TextFont.stories.tsx
+++ b/packages/react-components/react-text/stories/Text/TextFont.stories.tsx
@@ -1,10 +1,22 @@
import * as React from 'react';
-import { Text } from '@fluentui/react-components';
+import { makeStyles, shorthands, Text } from '@fluentui/react-components';
-export const Font = () => (
-
- This is the default font
- This is numeric font
- This is monospace font
-
-);
+const useStyles = makeStyles({
+ container: {
+ ...shorthands.gap('16px'),
+ display: 'flex',
+ flexDirection: 'column',
+ },
+});
+
+export const Font = () => {
+ const styles = useStyles();
+
+ return (
+
+ This is the default font
+ This is numeric font
+ This is monospace font
+
+ );
+};
diff --git a/packages/react-components/react-text/stories/Text/TextPresets.md b/packages/react-components/react-text/stories/Text/TextPresets.md
new file mode 100644
index 0000000000000..7a14ab32d34f9
--- /dev/null
+++ b/packages/react-components/react-text/stories/Text/TextPresets.md
@@ -0,0 +1 @@
+**Presets** are a set of components with predefined styles for typography. They are used to create and share a consistent look and feel.
All the base `Text` props can be used, except for `font`, `size` and `weight`.
diff --git a/packages/react-components/react-text/stories/Text/TextPresets.stories.tsx b/packages/react-components/react-text/stories/Text/TextPresets.stories.tsx
new file mode 100644
index 0000000000000..6fd0e3fd584ea
--- /dev/null
+++ b/packages/react-components/react-text/stories/Text/TextPresets.stories.tsx
@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {
+ makeStyles,
+ shorthands,
+ Body1,
+ Caption1,
+ Caption2,
+ Display,
+ LargeTitle,
+ Subtitle1,
+ Subtitle2,
+ Title1,
+ Title2,
+ Title3,
+} from '@fluentui/react-components';
+import textPresetsMd from './TextPresets.md';
+
+const useStyles = makeStyles({
+ container: {
+ ...shorthands.gap('16px'),
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'baseline',
+ },
+});
+
+export const Presets = () => {
+ const styles = useStyles();
+
+ return (
+
+ Display - semibold, base1000
+ LargeTitle - semibold, base900
+ Title1 - semibold, base800
+ Title2 - semibold, base700
+ Title3 - semibold, base600
+ Subtitle1 - semibold, base500
+ Subtitle2 - semibold, base400
+ Body1 - regular, base300
+ Caption1 - regular, base200
+ Caption2 - regular, base100
+
+ );
+};
+
+Presets.parameters = {
+ docs: {
+ description: {
+ story: textPresetsMd,
+ },
+ },
+};
diff --git a/packages/react-components/react-text/stories/Text/TextSize.stories.tsx b/packages/react-components/react-text/stories/Text/TextSize.stories.tsx
index 7f3b7467e7594..be8dec81c4331 100644
--- a/packages/react-components/react-text/stories/Text/TextSize.stories.tsx
+++ b/packages/react-components/react-text/stories/Text/TextSize.stories.tsx
@@ -1,17 +1,30 @@
import * as React from 'react';
-import { Text } from '@fluentui/react-components';
+import { makeStyles, shorthands, Text } from '@fluentui/react-components';
-export const Size = () => (
-
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 1000
-
-);
+const useStyles = makeStyles({
+ container: {
+ ...shorthands.gap('16px'),
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'baseline',
+ },
+});
+
+export const Size = () => {
+ const styles = useStyles();
+
+ return (
+
+ 100
+ 200
+ 300
+ 400
+ 500
+ 600
+ 700
+ 800
+ 900
+ 1000
+
+ );
+};
diff --git a/packages/react-components/react-text/stories/Text/TextTruncate.stories.tsx b/packages/react-components/react-text/stories/Text/TextTruncate.stories.tsx
index 764e15474dd4b..1677de74f286e 100644
--- a/packages/react-components/react-text/stories/Text/TextTruncate.stories.tsx
+++ b/packages/react-components/react-text/stories/Text/TextTruncate.stories.tsx
@@ -1,8 +1,21 @@
import * as React from 'react';
-import { Text } from '@fluentui/react-components';
+import { makeStyles, shorthands, Text } from '@fluentui/react-components';
-export const Truncate = () => (
-
- This is a really really really really long text
-
-);
+const useStyles = makeStyles({
+ text: {
+ ...shorthands.overflow('hidden'),
+ width: '240px',
+ display: 'block',
+ },
+});
+
+export const Truncate = () => {
+ const styles = useStyles();
+
+ return (
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Facere aliquam nisi numquam, fugit recusandae eligendi
+ aspernatur odio minus? Incidunt maxime ipsam dolorem quia quas aliquam, quasi consequatur! Ea, minus eaque.
+
+ );
+};
diff --git a/packages/react-components/react-text/stories/Text/TextTypography.stories.tsx b/packages/react-components/react-text/stories/Text/TextTypography.stories.tsx
deleted file mode 100644
index cf888b6d23d01..0000000000000
--- a/packages/react-components/react-text/stories/Text/TextTypography.stories.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react';
-import {
- Body1,
- Caption1,
- Caption2,
- Display,
- LargeTitle,
- Subtitle1,
- Subtitle2,
- Title1,
- Title2,
- Title3,
-} from '@fluentui/react-components';
-
-export const Typography = () => (
- <>
- Display text wrapper, semibold, base1000
- LargeTitle text wrapper, semibold, base900
- Title1 text wrapper, semibold, base800
- Title2 text wrapper, semibold, base700
- Title3 text wrapper, semibold, base600
- Subtitle1 text wrapper, semibold, base500
- Subtitle2 text wrapper, semibold, base400
- Body1 text wrapper, regular, base300
- Caption1 text wrapper, regular, base200
- Caption2 text wrapper, regular, base100
- >
-);
-
-Typography.parameters = {
- docs: {
- description: {
- story: [
- 'Different typography components can be used that are based on the `Text` components.',
- 'They all share the same props and behaviours that are documented here.',
- ].join('\n'),
- },
- },
-};
diff --git a/packages/react-components/react-text/stories/Text/TextWeight.stories.tsx b/packages/react-components/react-text/stories/Text/TextWeight.stories.tsx
index c3f34415d26f4..aa92d9f9abe43 100644
--- a/packages/react-components/react-text/stories/Text/TextWeight.stories.tsx
+++ b/packages/react-components/react-text/stories/Text/TextWeight.stories.tsx
@@ -1,10 +1,23 @@
import * as React from 'react';
-import { Text } from '@fluentui/react-components';
+import { makeStyles, shorthands, Text } from '@fluentui/react-components';
-export const Weight = () => (
-
- Regular weight
- Medium weight
- Semibold weight
-
-);
+const useStyles = makeStyles({
+ container: {
+ ...shorthands.gap('16px'),
+ display: 'flex',
+ flexDirection: 'column',
+ },
+});
+
+export const Weight = () => {
+ const styles = useStyles();
+
+ return (
+
+ Regular weight
+ Medium weight
+ Semibold weight
+ Bold weight
+
+ );
+};
diff --git a/packages/react-components/react-text/stories/Text/index.stories.tsx b/packages/react-components/react-text/stories/Text/index.stories.tsx
index 82c3ca85d89bc..4e8ed5c0da5a6 100644
--- a/packages/react-components/react-text/stories/Text/index.stories.tsx
+++ b/packages/react-components/react-text/stories/Text/index.stories.tsx
@@ -1,17 +1,18 @@
import { Meta } from '@storybook/react';
import { Text } from '@fluentui/react-components';
import textDescriptionMd from './TextDescription.md';
-import textBestPractices from './TextBestPractices.md';
+import textBestPracticesMd from './TextBestPractices.md';
export { Default } from './Default.stories';
-export { Typography } from './TextTypography.stories';
+export { Font } from './TextFont.stories';
+export { Size } from './TextSize.stories';
+export { Weight } from './TextWeight.stories';
export { Italic } from './TextItalic.stories';
export { Underline } from './TextUnderline.stories';
export { StrikeThrough } from './TextStrikeThrough.stories';
-export { Weight } from './TextWeight.stories';
-export { Size } from './TextSize.stories';
export { Truncate } from './TextTruncate.stories';
-export { Font } from './TextFont.stories';
+export { Alignment } from './TextAlignment.stories';
+export { Presets } from './TextPresets.stories';
export default {
title: 'Components/Text',
@@ -19,7 +20,7 @@ export default {
parameters: {
docs: {
description: {
- component: [textDescriptionMd, textBestPractices].join('\n'),
+ component: [textDescriptionMd, textBestPracticesMd].join('\n'),
},
},
},