feat(text): add static classes

change/@fluentui-react-text-f57fa3f1-b465-4c6a-a0f1-a0e6518e427b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "export static classes for components",
+  "packageName": "@fluentui/react-text",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-text/etc/react-text.api.md

@@ -17,28 +17,49 @@ import * as React_2 from 'react';
 const Body_2: FunctionComponent<TextWrapperProps>;
 export { Body_2 as Body }
 
+// @public (undocumented)
+export const bodyClassName = "fui-Body";
+
 // @public
 export const Caption: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const captionClassName = "fui-Caption";
+
 // @public
 export const Display: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const displayClassName = "fui-Display";
+
 // @public
 export const Headline: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const headlineClassName = "fui-Headline";
+
 // @public
 export const LargeTitle: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const largeTitleClassName = "fui-LargeTitle";
+
 // @public
 export const renderText: (state: TextState) => JSX.Element;
 
 // @public
 export const Subheadline: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const subheadlineClassName = "fui-Subheadline";
+
 // @public
 const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
+// @public (undocumented)
+export const textClassName = "fui-Text";
+
 // @public (undocumented)
 export type TextCommons = {
     wrap: boolean;
@@ -67,12 +88,21 @@ export type TextState = ComponentState<TextSlots> & TextCommons;
 // @public
 export const Title1: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const title1ClassName = "fui-Title1";
+
 // @public
 export const Title2: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const title2ClassName = "fui-Title2";
+
 // @public
 export const Title3: FunctionComponent<TextWrapperProps>;
 
+// @public (undocumented)
+export const title3ClassName = "fui-Title3";
+
 // @public
 export const useText: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
 

packages/react-text/src/components/Body/Body.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const bodyClassName = 'fui-Body';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Body typography variant
  */
-export const Body: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Body' });
+export const Body: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: bodyClassName,
+  displayName: 'Body',
+});

packages/react-text/src/components/Body/__snapshots__/Body.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Body renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Body fui-Text"
   >
     Default Body
   </span>

packages/react-text/src/components/Caption/Caption.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const captionClassName = 'fui-Caption';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Caption typography variant
  */
-export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Caption' });
+export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: captionClassName,
+  displayName: 'Caption',
+});

packages/react-text/src/components/Caption/__snapshots__/Caption.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Caption renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Caption fui-Text"
   >
     Default Caption
   </span>

packages/react-text/src/components/Display/Display.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const displayClassName = 'fui-Display';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Display typography variant
  */
-export const Display: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Display' });
+export const Display: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: displayClassName,
+  displayName: 'Display',
+});

packages/react-text/src/components/Display/__snapshots__/Display.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Display renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Display fui-Text"
   >
     Default Display
   </span>

packages/react-text/src/components/Headline/Headline.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const headlineClassName = 'fui-Headline';
+
 /**
  * Styles for the root slot
  */
@@ -15,5 +17,6 @@ const useStyles = makeStyles({
  */
 export const Headline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
+  className: headlineClassName,
   displayName: 'Headline',
 });

packages/react-text/src/components/Headline/__snapshots__/Headline.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Headline renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Headline fui-Text"
   >
     Default Headline
   </span>

packages/react-text/src/components/LargeTitle/LargeTitle.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const largeTitleClassName = 'fui-LargeTitle';
+
 /**
  * Styles for the root slot
  */
@@ -15,5 +17,6 @@ const useStyles = makeStyles({
  */
 export const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
+  className: largeTitleClassName,
   displayName: 'LargeTitle',
 });

packages/react-text/src/components/LargeTitle/__snapshots__/LargeTitle.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`LargeTitle renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-LargeTitle fui-Text"
   >
     Default LargeTitle
   </span>

packages/react-text/src/components/Subheadline/Subheadline.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const subheadlineClassName = 'fui-Subheadline';
+
 /**
  * Styles for the root slot
  */
@@ -15,5 +17,6 @@ const useStyles = makeStyles({
  */
 export const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
+  className: subheadlineClassName,
   displayName: 'Subheadline',
 });

packages/react-text/src/components/Subheadline/__snapshots__/Subheadline.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Subheadline renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Subheadline fui-Text"
   >
     Default Subheadline
   </span>

packages/react-text/src/components/Text/__snapshots__/Text.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Text renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Text"
   >
     Test
   </span>

packages/react-text/src/components/Text/useTextStyles.ts

@@ -1,6 +1,8 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import type { TextState } from './Text.types';
 
+export const textClassName = 'fui-Text';
+
 /**
  * Styles for the root slot
  */
@@ -104,6 +106,7 @@ export const useTextStyles = (state: TextState): TextState => {
   const styles = useStyles();
 
   state.root.className = mergeClasses(
+    textClassName,
     styles.root,
     state.wrap === false && styles.nowrap,
     state.truncate && styles.truncate,

packages/react-text/src/components/Title1/Title1.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const title1ClassName = 'fui-Title1';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 1 typography variant
  */
-export const Title1: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title1' });
+export const Title1: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: title1ClassName,
+  displayName: 'Title1',
+});

packages/react-text/src/components/Title1/__snapshots__/Title1.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Title1 renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Title1 fui-Text"
   >
     Default Title1
   </span>

packages/react-text/src/components/Title2/Title2.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const title2ClassName = 'fui-Title2';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 2 typography variant
  */
-export const Title2: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title2' });
+export const Title2: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: title2ClassName,
+  displayName: 'Title2',
+});

packages/react-text/src/components/Title2/__snapshots__/Title2.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Title2 renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Title2 fui-Text"
   >
     Default Title2
   </span>

packages/react-text/src/components/Title3/Title3.tsx

@@ -3,6 +3,8 @@ import { makeStyles } from '@fluentui/react-make-styles';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
 
+export const title3ClassName = 'fui-Title3';
+
 /**
  * Styles for the root slot
  */
@@ -13,4 +15,8 @@ const useStyles = makeStyles({
 /**
  * Text wrapper component for the Title 3 typography variant
  */
-export const Title3: FunctionComponent<TextWrapperProps> = createWrapper({ useStyles, displayName: 'Title3' });
+export const Title3: FunctionComponent<TextWrapperProps> = createWrapper({
+  useStyles,
+  className: title3ClassName,
+  displayName: 'Title3',
+});

packages/react-text/src/components/Title3/__snapshots__/Title3.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Title3 renders a default state 1`] = `
 <div>
   <span
-    class=""
+    class="fui-Title3 fui-Text"
   >
     Default Title3
   </span>

packages/react-text/src/components/wrapper.tsx

@@ -7,17 +7,18 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 export type TextWrapperProps = Omit<TextProps, 'font' | 'size'>;
 
 export function createWrapper(options: {
+  className: string;
   displayName: string;
   useStyles: () => Record<'root', string>;
 }): React.FunctionComponent<TextWrapperProps> {
-  const { useStyles, displayName } = options;
+  const { useStyles, className, displayName } = options;
   const Wrapper: ForwardRefComponent<TextWrapperProps> = React.forwardRef((props, ref) => {
     const styles = useStyles();
     const state = useText(props as TextProps, ref);
 
     useTextStyles(state);
 
-    state.root.className = mergeClasses(state.root.className, styles.root, props.className);
+    state.root.className = mergeClasses(className, state.root.className, styles.root, props.className);
 
     return renderText(state);
   });