@fluentui/react-text 9.0.0-nightly.f81b28ceb3.1 → 9.0.0-rc.1

package/MIGRATION.md

@@ -44,7 +44,7 @@ _This property suffered no changes and can be left as is._
 
 The `nowrap` property was changed to `wrap` and it is `true` by default. You can achieve the same result as `nowrap` by using:
 
-```
+```tsx
 <Text wrap={false}>Not wrapped</Text>
 ```
 
@@ -69,7 +69,7 @@ Variants are now represented with tokens that you can override on a theme level.
 
 You can use them with Text as such:
 
-```
+```tsx
 <Text size={300}>Text</Text>
 ```
 
@@ -88,8 +88,10 @@ _This property suffered no changes and can be left as is._
 
 To achieve the same result with the new `truncate` property, you'll need to do the following:
 
-```
-<Text block truncate wrap={false}>Not wrapped</Text>
+```tsx
+<Text block truncate wrap={false}>
+  Not wrapped
+</Text>
 ```
 
 This is due to `truncate` changing the CSS property `text-overflow` to `ellipsis`.
@@ -109,7 +111,7 @@ While the name remains the same, the values are now represented with integer tok
 
 You can use them with Text as such:
 
-```
+```tsx
 <Text size={300}>Text</Text>
 ```
 
@@ -129,18 +131,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.colors.brand[600]`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(98, 100, 167)'
+    color: 'rgb(98, 100, 167)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ##### **teamsDarkTheme**
@@ -149,18 +153,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.colors.brand[400]`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(166, 167, 220)'
+    color: 'rgb(166, 167, 220)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ##### **teamsHighContrastTheme**
@@ -169,18 +175,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.accessibleYellow`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(255, 255, 1)'
+    color: 'rgb(255, 255, 1)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 #### Using `atMention="me"`
@@ -192,19 +200,21 @@ Northstar design tokens:
 - Color: `siteVariables.colors.orange[400]`
 - Font weight: `siteVariables.fontWeightBold`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(204, 74, 49)',
-     fontWeight: 700
+    color: 'rgb(204, 74, 49)',
+    fontWeight: 700,
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ##### **teamsDarkTheme**
@@ -214,19 +224,21 @@ Northstar design tokens:
 - Color: `siteVariables.colors.orange[300]`
 - Font weight: `siteVariables.fontWeightBold`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(233, 117, 72)',
-     fontWeight: 700
+    color: 'rgb(233, 117, 72)',
+    fontWeight: 700,
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ##### **teamsHighContrastTheme**
@@ -236,37 +248,41 @@ Northstar design tokens:
 - Color: `siteVariables.accessibleYellow`
 - Font weight: `siteVariables.fontWeightBold`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(255, 255, 1)',
-     fontWeight: 700
+    color: 'rgb(255, 255, 1)',
+    fontWeight: 700,
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### color
 
 This property was deprecated. Below is a simple example on how to achieve the same result:
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-    color: //Your color here
+    color: '__ put your color there __',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 _Read more about the CSS prop: [color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)_
@@ -276,13 +292,13 @@ _Read more about the CSS prop: [color](https://developer.mozilla.org/en-US/docs/
 The `content` prop works the same way as the native `children` prop in React.
 You can either use:
 
-```
+```tsx
 <Text children="Hello World!" />
 ```
 
 Or the common and recomended way:
 
-```
+```tsx
 <Text>Hello World!</Text>
 ```
 
@@ -297,6 +313,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.grey[250]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(200, 198, 196)'
@@ -317,6 +335,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.grey[450]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(96, 94, 92)'
@@ -337,6 +357,8 @@ Northstar design tokens:
 - Color: `siteVariables.accessibleGreen`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(63, 242, 63)'
@@ -361,6 +383,8 @@ Northstar design tokens:
 - Color: `siteVariables.colorScheme.red.foreground`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(196, 49, 75)'
@@ -381,6 +405,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.red[300]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(231, 53, 80)'
@@ -401,6 +427,8 @@ Northstar design tokens:
 - Color: `siteVariables.red`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(255, 0, 0)'
@@ -426,6 +454,8 @@ Northstar design tokens:
 - Font weight: `siteVariables.fontWeightBold`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(196, 49, 75)',
@@ -448,6 +478,8 @@ Northstar design tokens:
 - Font weight: `siteVariables.fontWeightBold`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(231, 53, 80)',
@@ -470,6 +502,8 @@ Northstar design tokens:
 - Font weight: `siteVariables.fontWeightBold`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(255, 0, 0)',
@@ -495,6 +529,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.green[600]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(35, 123, 75)'
@@ -515,6 +551,8 @@ Northstar design tokens:
 - Color: `siteVariables.colors.green[200]`
 
 ```
+import { makeStyles, Text } from '@fluentui/react-components';
+
 const useStyles = makeStyles(theme => ({
   root: {
      color: 'rgb(146, 195, 83)'
@@ -534,36 +572,40 @@ Northstar design tokens:
 
 - Color: `siteVariables.colors.green[200]`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(146, 195, 83)'
+    color: 'rgb(146, 195, 83)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### temporary [DEPRECATED]
 
 This property was deprecated. Given that this property depends on the applied style, you can find below examples on how to achieve the same results in the default, dark and high contrast themes:
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     fontStyle: 'italic'
+    fontStyle: 'italic',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### timestamp [DEPRECATED]
@@ -576,18 +618,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.colorScheme.default.foreground1`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(72, 70, 68)'
+    color: 'rgb(72, 70, 68)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 #### **teamsDarkTheme**
@@ -596,18 +640,20 @@ Northstar design tokens:
 
 - Color: `siteVariables.colorScheme.default.foreground1`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(138, 136, 134)'
+    color: 'rgb(138, 136, 134)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 #### **teamsHighContrastTheme**
@@ -616,23 +662,25 @@ Northstar design tokens:
 
 - Color: `siteVariables.colors.white`
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   root: {
-     color: 'rgb(255, 255, 255)'
+    color: 'rgb(255, 255, 255)',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### variables [DEPRECATED]
 
-For v9, this feature is no longer supported. The alternative is to apply styles through `make-styles`. Below is an example of a migration:
+For v9, this feature is no longer supported. The alternative is to apply styles through `makeStyles()` (see [Griffel](https://github.com/microsoft/griffel) docs for more details). Below is an example of a migration:
 
 #### v0 (Northstar) implementation
 
@@ -644,18 +692,20 @@ const MyComponent = () => {
 
 #### v9 (Fluent UI) implementation
 
-```
-const useStyles = makeStyles(theme => ({
+```tsx
+import { makeStyles, Text } from '@fluentui/react-components';
+
+const useStyles = makeStyles({
   red: {
-     color: 'red'
+    color: 'red',
   },
-})
+});
 
 const MyComponent = () => {
-    const styles = useStyles()
+  const styles = useStyles();
 
-    return <Text className={styles.root}>{...}</Text>
-}
+  return <Text className={styles.root}>{/* ... */}</Text>;
+};
 ```
 
 ### weight
@@ -677,4 +727,4 @@ _This property suffered no changes and can be left as is._
 
 ### styles
 
-_This property suffered no changes and can be used as is. However, we highly recommend that you migrate to a `make-styles` styling solution for performance reasons._
+_This property suffered no changes and can be used as is. However, we highly recommend that you migrate to `makeStyles()` (a [Griffel](https://github.com/microsoft/griffel) styling solution) for performance reasons._

package/dist/react-text.d.ts

@@ -2,8 +2,8 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { FunctionComponent } from 'react';
-import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
 
 /**
  * Text wrapper component for the Body typography variant
@@ -11,43 +11,57 @@ import * as React_2 from 'react';
 declare const Body_2: FunctionComponent<TextWrapperProps>;
 export { Body_2 as Body }
 
+export declare const bodyClassName = "fui-Body";
+
 /**
  * Text wrapper component for the Caption typography variant
  */
 export declare const Caption: FunctionComponent<TextWrapperProps>;
 
+export declare const captionClassName = "fui-Caption";
+
 /**
  * Text wrapper component for the Display typography variant
  */
 export declare const Display: FunctionComponent<TextWrapperProps>;
 
+export declare const displayClassName = "fui-Display";
+
 /**
  * Text wrapper component for the Headline typography variant
  */
 export declare const Headline: FunctionComponent<TextWrapperProps>;
 
+export declare const headlineClassName = "fui-Headline";
+
 /**
  * Text wrapper component for the Large Title typography variant
  */
 export declare const LargeTitle: FunctionComponent<TextWrapperProps>;
 
+export declare const largeTitleClassName = "fui-LargeTitle";
+
 /**
  * Render the final JSX of Text
  */
-export declare const renderText: (state: TextState) => JSX.Element;
+export declare const renderText_unstable: (state: TextState) => JSX.Element;
 
 /**
  * Text wrapper component for the Subheadline typography variant
  */
 export declare const Subheadline: FunctionComponent<TextWrapperProps>;
 
+export declare const subheadlineClassName = "fui-Subheadline";
+
 /**
  * Typography and styling abstraction component used to ensure consistency of text.
  */
 declare const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
-export declare type TextCommons = {
+export declare const textClassName = "fui-Text";
+
+declare type TextCommons = {
     /**
      * Wraps the text content on white spaces.
      *
@@ -119,7 +133,7 @@ export declare type TextProps = ComponentProps<TextSlots> & Partial<TextCommons>
  * Text slots
  */
 export declare type TextSlots = {
-    root: IntrinsicShorthandProps<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
+    root: Slot<'span', 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'pre'>;
 };
 
 /**
@@ -134,30 +148,36 @@ declare type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
  */
 export declare const Title1: FunctionComponent<TextWrapperProps>;
 
+export declare const title1ClassName = "fui-Title1";
+
 /**
  * Text wrapper component for the Title 2 typography variant
  */
 export declare const Title2: FunctionComponent<TextWrapperProps>;
 
+export declare const title2ClassName = "fui-Title2";
+
 /**
  * Text wrapper component for the Title 3 typography variant
  */
 export declare const Title3: FunctionComponent<TextWrapperProps>;
 
+export declare const title3ClassName = "fui-Title3";
+
 /**
  * Create the state required to render Text.
  *
- * The returned state can be modified with hooks such as useTextStyles,
- * before being passed to renderText.
+ * The returned state can be modified with hooks such as useTextStyles_unstable,
+ * before being passed to renderText_unstable.
  *
  * @param props - props from this instance of Text
  * @param ref - reference to root HTMLElement of Text
  */
-export declare const useText: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
+export declare const useText_unstable: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
 
 /**
  * Apply styling to the Text slots based on the state
  */
-export declare const useTextStyles: (state: TextState) => TextState;
+export declare const useTextStyles_unstable: (state: TextState) => TextState;
 
 export { }

package/lib/components/Body/Body.d.ts

@@ -1,5 +1,6 @@
 import type { FunctionComponent } from 'react';
 import { TextWrapperProps } from '../wrapper';
+export declare const bodyClassName = "fui-Body";
 /**
  * Text wrapper component for the Body typography variant
  */

package/lib/components/Body/Body.js

@@ -1,11 +1,12 @@
-import { __styles } from '@fluentui/react-make-styles';
+import { __styles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper } from '../wrapper';
+export const bodyClassName = 'fui-Body';
 /**
  * Styles for the root slot
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
@@ -20,8 +21,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var Body = /*#__PURE__*/createWrapper({
-  useStyles: useStyles,
+export const Body = /*#__PURE__*/createWrapper({
+  useStyles,
+  className: bodyClassName,
   displayName: 'Body'
 });
 //# sourceMappingURL=Body.js.map

package/lib/components/Body/Body.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Body/Body.tsx"],"names":[],"mappings":"AACA,yBAA2B,6BAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA;;AAEG;;AACH,IAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,IAAM,IAAI,gBAAwC,aAAa,CAAC;AAAE,EAAA,SAAS,EAAA,SAAX;AAAa,EAAA,WAAW,EAAE;AAA1B,CAAD,CAA/D","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Body/Body.tsx"],"names":[],"mappings":"AACA,yBAA2B,gBAA3B;AACA,SAAS,gBAAT,QAAiC,8BAAjC;AACA,SAAS,aAAT,QAAgD,YAAhD;AAEA,OAAO,MAAM,aAAa,GAAG,UAAtB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAIA;;AAEG;;;AACH,OAAO,MAAM,IAAI,gBAAwC,aAAa,CAAC;AACrE,EAAA,SADqE;AAErE,EAAA,SAAS,EAAE,aAF0D;AAGrE,EAAA,WAAW,EAAE;AAHwD,CAAD,CAA/D","sourceRoot":""}