From 18675a981f308c3cfecbfaf11a62f774507c2227 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Mon, 7 Jun 2021 16:38:49 +0200 Subject: [PATCH 01/13] Initial spec structure Prop comparison Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 56 +++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 packages/react-text/Spec.md diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md new file mode 100644 index 00000000000000..18fb684c9dec82 --- /dev/null +++ b/packages/react-text/Spec.md @@ -0,0 +1,56 @@ +# @fluentui/react-text Spec + +## Background + +- Explain what Text is + +## Prior Art + +- Explain how Text worked for Fabric/Stardust +- Explain our new approach (Title, SubTitle, Caption and Text as default) + +## Comparison of [Fabric Text](https://developer.microsoft.com/en-us/fluentui#/controls/web/text) and [Stardust Text](https://fluentsite.z22.web.core.windows.net/0.56.0/components/text/definition) + +| Purpose | Fabric | Northstar | Matching | +| ---------------------------------------------------------------------------------------------------------------- | ------- | ------------- | -------- | +| Renders Text as a block element | block | | | +| Determines whether text should be wrapped or not | nowrap | | | +| Set font size for text | variant | | | +| Accessibility behavior if overridden by the user. | | accessibility | | +| Align text content. | | align | | +| An element type to render as (string or component). | as | as | | +| At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. | | atMention | | +| Additional CSS class name(s) to apply. | | className | | +| A component can have a color. | | color | | +| Shorthand for primary content. | | content | | +| - | | design | | +| Set as disabled Text component | | disabled | | +| Set as error Text component | | error | | +| The text can appear more important and draw user's attention | | important | | +| The size for the Text component | | size | | +| Additional CSS styles to apply to the component instance. | | styles | | +| Set as success Text component | | success | | +| The text can signify a temporary state | | temporary | | +| Set as timestamp Text component | | timestamp | | +| Truncates text as needed | | truncated | | +| Override for theme site variables to allow modifications of component styling via themes. | | variables | | +| The weight for the Text component | | weight | | + +## API Proposal + +- Explain in depth props +- Explain in depth new wrapper components +- Default values and fancy new interface (weight, color, alignment) + +## Sample Code + +``` + This is a Text component + + Text + + Text + + Text with ellipsis + +``` From f78a840c41442de85cc13e347a4a9728e6cf9577 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Wed, 9 Jun 2021 09:05:06 +0200 Subject: [PATCH 02/13] Add background Add prior art Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 96 +++++++++++++++++++++++-------------- 1 file changed, 59 insertions(+), 37 deletions(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index 18fb684c9dec82..dcd7776fed1bb9 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -2,55 +2,77 @@ ## Background -- Explain what Text is +Text is a typography and styling abstraction component that can be used to ensure the consistency of all text across your application. + +Fabric used the `variant` prop to set any styling/format to the Text component, while also providing other utilities like `nowrap` and `block`. + +```jsx +This is a Text component + +Text + +Text + +Text with ellipsis +``` + +Stardust's approach provides a more open API, allowing the user to customize `Text` to their own specific needs. + +```jsx + + + + + + + + + +``` ## Prior Art -- Explain how Text worked for Fabric/Stardust -- Explain our new approach (Title, SubTitle, Caption and Text as default) +- [Open UI research](https://github.com/openui/open-ui/pull/351) +- [Convergence epic](https://github.com/microsoft/fluentui/issues/16847) ## Comparison of [Fabric Text](https://developer.microsoft.com/en-us/fluentui#/controls/web/text) and [Stardust Text](https://fluentsite.z22.web.core.windows.net/0.56.0/components/text/definition) -| Purpose | Fabric | Northstar | Matching | -| ---------------------------------------------------------------------------------------------------------------- | ------- | ------------- | -------- | -| Renders Text as a block element | block | | | -| Determines whether text should be wrapped or not | nowrap | | | -| Set font size for text | variant | | | -| Accessibility behavior if overridden by the user. | | accessibility | | -| Align text content. | | align | | -| An element type to render as (string or component). | as | as | | -| At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. | | atMention | | -| Additional CSS class name(s) to apply. | | className | | -| A component can have a color. | | color | | -| Shorthand for primary content. | | content | | -| - | | design | | -| Set as disabled Text component | | disabled | | -| Set as error Text component | | error | | -| The text can appear more important and draw user's attention | | important | | -| The size for the Text component | | size | | -| Additional CSS styles to apply to the component instance. | | styles | | -| Set as success Text component | | success | | -| The text can signify a temporary state | | temporary | | -| Set as timestamp Text component | | timestamp | | -| Truncates text as needed | | truncated | | -| Override for theme site variables to allow modifications of component styling via themes. | | variables | | -| The weight for the Text component | | weight | | +| Purpose | Fabric | Northstar | Matching | +| ---------------------------------------------------------------------------------------------------------------- | ------- | ------------- | -------------------- | +| An element type to render as (string or component). | as | as | Matching | +| Truncates text as needed | nowrap | truncated | Matching | +| Set font size for text | variant | size | Matching | +| Renders Text as a block element | block | | Missing in Northstar | +| Accessibility behavior if overridden by the user. | | accessibility | Missing in Fabric | +| Align text content. | | align | Missing in Fabric | +| At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. | | atMention | Missing in Fabric | +| A component can have a color. | | color | Missing in Fabric | +| Shorthand for primary content. | | content | Missing in Fabric | +| Set as disabled Text component | | disabled | Missing in Fabric | +| Set as error Text component | | error | Missing in Fabric | +| The text can appear more important and draw user's attention | | important | Missing in Fabric | +| Set as success Text component | | success | Missing in Fabric | +| The text can signify a temporary state | | temporary | Missing in Fabric | +| Set as timestamp Text component | | timestamp | Missing in Fabric | +| Override for theme site variables to allow modifications of component styling via themes. | | variables | Missing in Fabric | +| The weight for the Text component | | weight | Missing in Fabric | +| Additional CSS class name(s) to apply. | | className | Missing in Fabric | +| Additional CSS styles to apply to the component instance. | | styles | Missing in Fabric | +| - | | design | Missing in Fabric | + +## Sample Code + +## Variants ## API Proposal - Explain in depth props - Explain in depth new wrapper components - Default values and fancy new interface (weight, color, alignment) +- Explain our new approach (Title, SubTitle, Caption and Text as default) -## Sample Code - -``` - This is a Text component - - Text - - Text +## Structure - Text with ellipsis +## Behaviours -``` +## Accesibility From 142728b3a0c9aed0178a56bbe6baf1fdb835c52e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Wed, 9 Jun 2021 09:27:11 +0200 Subject: [PATCH 03/13] Add initial API proposal Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 27 ++++++++++++++++++++------- 1 file changed, 20 insertions(+), 7 deletions(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index dcd7776fed1bb9..3ea5ffba6f8c03 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -60,16 +60,29 @@ Stardust's approach provides a more open API, allowing the user to customize `Te | Additional CSS styles to apply to the component instance. | | styles | Missing in Fabric | | - | | design | Missing in Fabric | -## Sample Code +## API Proposal -## Variants +- Explain Fabric's ease of use but limitation +- Explain Stardust's customization but consistency enforcing issues +- Explain our awesome new solution and the wrappers +- Default values and fancy new TypeScript interface (weight, color, alignment) + +| Property | Type | Default value | Comments | +| ------------- | ---------------------------------------------------------- | --------------------- | ---------------------------------------------------- | +| wrap | boolean | true | | +| truncate | boolean | false | | +| block | boolean | false | | +| [`variant`] | string - "base" \| "monospace" \| "numeric" | "base" | | +| size | number - 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 | 300 | | +| weight | string - "regular" \| "medium" \| "semibold" | "regular" | | +| align | string - "start"\| "center"\| "end" \| "justify" | `"start" \| no value` | [`Do we use native start and end? No IE support :(`] | +| italic | boolean | false | | +| underline | boolean | false | | +| strikethrough | boolean | false | | -## API Proposal +## Sample Code -- Explain in depth props -- Explain in depth new wrapper components -- Default values and fancy new interface (weight, color, alignment) -- Explain our new approach (Title, SubTitle, Caption and Text as default) +## Variants ## Structure From 9e3d37a9e8d50f965ddc794d0f1a3a1e36899c8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Mon, 14 Jun 2021 17:17:46 +0200 Subject: [PATCH 04/13] Text API proposal finish Sample code for Text/wrappers Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 51 +++++++++++++++++++++++++++---------- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index 3ea5ffba6f8c03..d81830aee0ec28 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -67,24 +67,47 @@ Stardust's approach provides a more open API, allowing the user to customize `Te - Explain our awesome new solution and the wrappers - Default values and fancy new TypeScript interface (weight, color, alignment) -| Property | Type | Default value | Comments | -| ------------- | ---------------------------------------------------------- | --------------------- | ---------------------------------------------------- | -| wrap | boolean | true | | -| truncate | boolean | false | | -| block | boolean | false | | -| [`variant`] | string - "base" \| "monospace" \| "numeric" | "base" | | -| size | number - 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 | 300 | | -| weight | string - "regular" \| "medium" \| "semibold" | "regular" | | -| align | string - "start"\| "center"\| "end" \| "justify" | `"start" \| no value` | [`Do we use native start and end? No IE support :(`] | -| italic | boolean | false | | -| underline | boolean | false | | -| strikethrough | boolean | false | | +| Property | Type | Default value | Comments | +| ------------- | ---------------------------------------------------------- | ------------- | -------- | +| as | React.ElementType | "span" | +| wrap | boolean | true | | +| truncate | boolean | false | | +| block | boolean | false | | +| italic | boolean | false | | +| underline | boolean | false | | +| strikethrough | boolean | false | | +| size | number - 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 | 300 | | +| font | string - "base" \| "monospace" \| "numeric" | "base" | | +| weight | string - "regular" \| "medium" \| "semibold" | "regular" | | +| align | string - "start" \| "center" \| "end" \| "justify" | "start" | | + + ## Sample Code -## Variants +### Using Text -## Structure +```jsx +This text is semibold and huge. + +Text aligned to the end + +This text has a strikethrough. +``` + +### Using the wrappers + +```jsx +This text is huge. +This is a large title. +Title +Sub title +Captioned +``` + +### Using styles directly + +_TBD_ ## Behaviours From 1181babc5da65f2744d89cb2c19e5132f031a973 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Mon, 14 Jun 2021 17:24:02 +0200 Subject: [PATCH 05/13] Behaviours and Accessibility Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index d81830aee0ec28..1b2254ff8a0d0d 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -111,4 +111,30 @@ _TBD_ ## Behaviours +### Screen readers + +#### Truncate + +When using a screen reader, trucated text will be read completely, as truncation is strictly to prevent text overflow. + +Sample: + +```jsx +This is a very long text that will be truncated. +``` + +Visual result: + +``` +This is a very long text... +``` + +Screen reader: + +``` +This is a very long text that will be truncated. +``` + ## Accesibility + +Accessibility is included in the entirety of the spec and there are no specific themes to address here. From 43bd12d5fcdc5871e38892d498ceaf764329de89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Mon, 14 Jun 2021 18:05:27 +0200 Subject: [PATCH 06/13] Add API preface Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index 1b2254ff8a0d0d..6aff8cd7fd4f33 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -62,10 +62,10 @@ Stardust's approach provides a more open API, allowing the user to customize `Te ## API Proposal -- Explain Fabric's ease of use but limitation -- Explain Stardust's customization but consistency enforcing issues -- Explain our awesome new solution and the wrappers -- Default values and fancy new TypeScript interface (weight, color, alignment) +The new Text will provide props to customize text according to the standards defined by Fluent design. The component will not be tied down to specific application usage, like Stardust did, for example, with `mention` and `timestamp` props, and will allow a bigger degree of freedom when customizing, unlike we did in Fabric. +We're also introducing a new concept of wrappers for the main design variants (i.e. 'Title', 'Subtitle', 'Caption') to improve readability and semantics of the code. The wrappers are expected to have fixed styles in terms of size and font family, but flexible for the other supported props in Text. +These wrappers follow the Fluent UI language so for any deviation, regarding the fixed styles mentioned above, should use the Text component instead, given that this is fully customizable. +Finally, we're also making available the styling used internally in Text for a lightweight styling solution if you want to avoid dependencies on Text or the added JavaScript layers of Text/wrappers. | Property | Type | Default value | Comments | | ------------- | ---------------------------------------------------------- | ------------- | -------- | @@ -81,8 +81,6 @@ Stardust's approach provides a more open API, allowing the user to customize `Te | weight | string - "regular" \| "medium" \| "semibold" | "regular" | | | align | string - "start" \| "center" \| "end" \| "justify" | "start" | | - - ## Sample Code ### Using Text From a57ff7a09f86f0d8b830bbf0f6da6c403151d43a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Tue, 15 Jun 2021 15:14:44 +0200 Subject: [PATCH 07/13] Add make-styles rule definition Finish spec Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index 6aff8cd7fd4f33..faa2dfcbe4f030 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -65,7 +65,6 @@ Stardust's approach provides a more open API, allowing the user to customize `Te The new Text will provide props to customize text according to the standards defined by Fluent design. The component will not be tied down to specific application usage, like Stardust did, for example, with `mention` and `timestamp` props, and will allow a bigger degree of freedom when customizing, unlike we did in Fabric. We're also introducing a new concept of wrappers for the main design variants (i.e. 'Title', 'Subtitle', 'Caption') to improve readability and semantics of the code. The wrappers are expected to have fixed styles in terms of size and font family, but flexible for the other supported props in Text. These wrappers follow the Fluent UI language so for any deviation, regarding the fixed styles mentioned above, should use the Text component instead, given that this is fully customizable. -Finally, we're also making available the styling used internally in Text for a lightweight styling solution if you want to avoid dependencies on Text or the added JavaScript layers of Text/wrappers. | Property | Type | Default value | Comments | | ------------- | ---------------------------------------------------------- | ------------- | -------- | @@ -81,6 +80,11 @@ Finally, we're also making available the styling used internally in Text for a l | weight | string - "regular" \| "medium" \| "semibold" | "regular" | | | align | string - "start" \| "center" \| "end" \| "justify" | "start" | | +### make-styles rules + +Finally, we're also making available the styling used internally in Text for a lightweight styling solution if you want to avoid dependencies on Text or the added JavaScript layers of Text/wrappers. +This is achieved with the `make-styles` rules being available for the user in the `react-theme` package, because they follow the Fluent design standards for Typography. + ## Sample Code ### Using Text @@ -105,7 +109,17 @@ Finally, we're also making available the styling used internally in Text for a l ### Using styles directly -_TBD_ +```jsx +const useStyles = makeStyles({ + title: createTitleRule(), +}); + +const Test = () => { + const styles = useStyles(); + + return I am styled like a title; +}; +``` ## Behaviours From 11eafc84132809d570fef6754e05983317ffac74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Tue, 15 Jun 2021 15:20:12 +0200 Subject: [PATCH 08/13] Update packages/react-text/Spec.md Co-authored-by: Makoto Morimoto --- packages/react-text/Spec.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index faa2dfcbe4f030..62e2f1bb001773 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -127,7 +127,7 @@ const Test = () => { #### Truncate -When using a screen reader, trucated text will be read completely, as truncation is strictly to prevent text overflow. +When using a screen reader, truncated text will be read completely, as truncation is used strictly to prevent text overflow. Sample: From 53471877ed5c003a66879e0170963a7065422f0f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Tue, 15 Jun 2021 15:39:19 +0200 Subject: [PATCH 09/13] Change files --- ...ui-react-text-7d0596ae-35b5-4421-ad38-da76aa46d9ab.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-text-7d0596ae-35b5-4421-ad38-da76aa46d9ab.json diff --git a/change/@fluentui-react-text-7d0596ae-35b5-4421-ad38-da76aa46d9ab.json b/change/@fluentui-react-text-7d0596ae-35b5-4421-ad38-da76aa46d9ab.json new file mode 100644 index 00000000000000..58975b642bb16f --- /dev/null +++ b/change/@fluentui-react-text-7d0596ae-35b5-4421-ad38-da76aa46d9ab.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Add converged Text spec", + "packageName": "@fluentui/react-text", + "email": "andredias@microsoft.com", + "dependentChangeType": "none" +} From 544df11d7f1ff744cbbfb3c76938c95ae6c2ddbb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Tue, 15 Jun 2021 16:01:36 +0200 Subject: [PATCH 10/13] Change 'as' prop type to keyof JSX.IntrinsicElements Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index 62e2f1bb001773..5f4e02e3aa5f7f 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -68,7 +68,7 @@ These wrappers follow the Fluent UI language so for any deviation, regarding the | Property | Type | Default value | Comments | | ------------- | ---------------------------------------------------------- | ------------- | -------- | -| as | React.ElementType | "span" | +| as | keyof JSX.IntrinsicElements | "span" | | wrap | boolean | true | | | truncate | boolean | false | | | block | boolean | false | | From c1593771cfde811fe85f72fc00808f59b94b2fee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Thu, 24 Jun 2021 16:34:11 +0200 Subject: [PATCH 11/13] Limit as prop values Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index 5f4e02e3aa5f7f..ce928a0cb4deab 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -66,19 +66,19 @@ The new Text will provide props to customize text according to the standards def We're also introducing a new concept of wrappers for the main design variants (i.e. 'Title', 'Subtitle', 'Caption') to improve readability and semantics of the code. The wrappers are expected to have fixed styles in terms of size and font family, but flexible for the other supported props in Text. These wrappers follow the Fluent UI language so for any deviation, regarding the fixed styles mentioned above, should use the Text component instead, given that this is fully customizable. -| Property | Type | Default value | Comments | -| ------------- | ---------------------------------------------------------- | ------------- | -------- | -| as | keyof JSX.IntrinsicElements | "span" | -| wrap | boolean | true | | -| truncate | boolean | false | | -| block | boolean | false | | -| italic | boolean | false | | -| underline | boolean | false | | -| strikethrough | boolean | false | | -| size | number - 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 | 300 | | -| font | string - "base" \| "monospace" \| "numeric" | "base" | | -| weight | string - "regular" \| "medium" \| "semibold" | "regular" | | -| align | string - "start" \| "center" \| "end" \| "justify" | "start" | | +| Property | Type | Default value | Comments | +| ------------- | ---------------------------------------------------------------------- | ------------- | -------- | +| as | "span" \| "p" \| "h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "pre" | "span" | | +| wrap | boolean | true | | +| truncate | boolean | false | | +| block | boolean | false | | +| italic | boolean | false | | +| underline | boolean | false | | +| strikethrough | boolean | false | | +| size | number - 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000 | 300 | | +| font | string - "base" \| "monospace" \| "numeric" | "base" | | +| weight | string - "regular" \| "medium" \| "semibold" | "regular" | | +| align | string - "start" \| "center" \| "end" \| "justify" | "start" | | ### make-styles rules From b5ea9489f32d3f3f78ac5f7785228c7fd4fd3842 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Thu, 24 Jun 2021 16:46:25 +0200 Subject: [PATCH 12/13] Change makeStyles solution's approach Co-authored-by: Tringa Krasniqi --- packages/react-text/Spec.md | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index ce928a0cb4deab..99004c5108423c 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -82,8 +82,8 @@ These wrappers follow the Fluent UI language so for any deviation, regarding the ### make-styles rules -Finally, we're also making available the styling used internally in Text for a lightweight styling solution if you want to avoid dependencies on Text or the added JavaScript layers of Text/wrappers. -This is achieved with the `make-styles` rules being available for the user in the `react-theme` package, because they follow the Fluent design standards for Typography. +Finally, we're also making available the styling used internally in Text for a lightweight styling solution if you want to avoid using Text or the added JavaScript layers of Text/wrappers. +This is achieved with the `make-styles` rules being available to the user so that they can follow the Fluent design standards for Typography. ## Sample Code @@ -110,14 +110,12 @@ This is achieved with the `make-styles` rules being available for the user in th ### Using styles directly ```jsx -const useStyles = makeStyles({ - title: createTitleRule(), -}); +import { useTypographyStyles } from '@fluentui/react-text'; const Test = () => { - const styles = useStyles(); + const typographyStyles = useTypographyStyles(); - return I am styled like a title; + return I am styled like a title; }; ``` From e10729d423bf448ebb295ab2861df3efb6da5138 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Dias?= Date: Fri, 25 Jun 2021 13:23:26 +0200 Subject: [PATCH 13/13] Add more usage examples of typography hook --- packages/react-text/Spec.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/react-text/Spec.md b/packages/react-text/Spec.md index 99004c5108423c..43aec45eb33a01 100644 --- a/packages/react-text/Spec.md +++ b/packages/react-text/Spec.md @@ -115,7 +115,13 @@ import { useTypographyStyles } from '@fluentui/react-text'; const Test = () => { const typographyStyles = useTypographyStyles(); - return I am styled like a title; + return ( + <> + I am styled like a display + I am styled like a title + I am styled like a subtitle + + ); }; ```