Text - Reusable make-styles rules (#18778)

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>

packages/react-text/Spec.md

@@ -110,16 +110,22 @@ This is achieved with the `make-styles` rules being available to the user so tha
 ### Using styles directly
 
 ```jsx
-import { useTypographyStyles } from '@fluentui/react-text';
+import { typographyStyles } from '@fluentui/react-text';
+
+const useStyles = makeStyles({
+  root: typographyStyles.title,
+  caption: typographyStyles.caption,
+});
 
 const Test = () => {
-  const typographyStyles = useTypographyStyles();
+  const styles = useStyles();
 
   return (
     <>
-      <span className={typographyStyles.display}>I am styled like a display</span>
-      <span className={typographyStyles.title}>I am styled like a title</span>
-      <span className={typographyStyles.subtitle}>I am styled like a subtitle</span>
+      <p className={styles.root}>
+        <span>I am styled like a title</span>
+        <span className={styles.caption}>I am styled like a caption</span>
+      </p>
     </>
   );
 };

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

@@ -6,14 +6,33 @@
 
 import { ComponentPropsCompat } from '@fluentui/react-utilities';
 import { ComponentStateCompat } from '@fluentui/react-utilities';
+import { MakeStylesStyleFunctionRule } from '@fluentui/make-styles';
 import * as React_2 from 'react';
+import { Theme } from '@fluentui/react-theme';
+
+// @public (undocumented)
+const body: MakeStylesStyleFunctionRule<Theme>;
+
+// @public
+const caption: MakeStylesStyleFunctionRule<Theme>;
+
+// @public (undocumented)
+const display: MakeStylesStyleFunctionRule<Theme>;
+
+// @public (undocumented)
+const headline: MakeStylesStyleFunctionRule<Theme>;
+
+// @public (undocumented)
+const largeTitle: MakeStylesStyleFunctionRule<Theme>;
 
 // @public
 export const renderText: (state: TextState) => JSX.Element;
 
+// @public (undocumented)
+const subheadline: MakeStylesStyleFunctionRule<Theme>;
+
 // @public
 const Text_2: React_2.ForwardRefExoticComponent<TextProps & React_2.RefAttributes<HTMLElement>>;
-
 export { Text_2 as Text }
 
 // @public
@@ -39,13 +58,36 @@ export interface TextState extends ComponentStateCompat<TextProps, TextDefaulted
     ref: React_2.Ref<HTMLElement>;
 }
 
+// @public (undocumented)
+const title1: MakeStylesStyleFunctionRule<Theme>;
+
+// @public (undocumented)
+const title2: MakeStylesStyleFunctionRule<Theme>;
+
+// @public (undocumented)
+const title3: MakeStylesStyleFunctionRule<Theme>;
+
+declare namespace typographyStyles {
+    export {
+        caption,
+        body,
+        subheadline,
+        headline,
+        title3,
+        title2,
+        title1,
+        largeTitle,
+        display
+    }
+}
+export { typographyStyles }
+
 // @public
 export const useText: (props: TextProps, ref: React_2.Ref<HTMLElement>, defaultProps?: TextProps | undefined) => TextState;
 
 // @public
 export const useTextStyles: (state: TextState) => TextState;
 
-
 // (No @packageDocumentation comment for this package)
 
 ```

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

@@ -1,5 +1,3 @@
-// For non-exported types
-/* eslint-disable  @typescript-eslint/no-explicit-any */
 import * as React from 'react';
 import { render } from '@testing-library/react';
 import { Text } from './Text';
@@ -110,7 +108,7 @@ describe('Text', () => {
     [800, 'hero', '800'],
     [900, 'hero', '900'],
     [1000, 'hero', '1000'],
-  ])('applies the %s token sizing styles', (sizeToken: any, expectedPrefix, expectedValue) => {
+  ] as const)('applies the %s token sizing styles', (sizeToken, expectedPrefix, expectedValue) => {
     const { getByText } = render(<Text size={sizeToken}>Test</Text>);
 
     const textElement = getByText('Test');
@@ -124,7 +122,7 @@ describe('Text', () => {
     ['base', 'base'],
     ['monospace', 'monospace'],
     ['numeric', 'numeric'],
-  ])('applies %s font', (input: any, expectedValue) => {
+  ] as const)('applies %s font', (input, expectedValue) => {
     const { getByText } = render(<Text font={input}>Test</Text>);
 
     const textElement = getByText('Test');
@@ -137,7 +135,7 @@ describe('Text', () => {
     ['regular', 'regular'],
     ['medium', 'medium'],
     ['semibold', 'semibold'],
-  ])('applies %s weight', (input: any, expectedValue) => {
+  ] as const)('applies %s weight', (input, expectedValue) => {
     const { getByText } = render(<Text weight={input}>Test</Text>);
 
     const textElement = getByText('Test');
@@ -151,7 +149,7 @@ describe('Text', () => {
     ['center', 'center'],
     ['end', 'end'],
     ['justify', 'justify'],
-  ])('applies a %s alignment', (input: any, expectedValue) => {
+  ] as const)('applies a %s alignment', (input, expectedValue) => {
     const { getByText } = render(<Text align={input}>Test</Text>);
 
     const textElement = getByText('Test');

packages/react-text/src/index.ts

@@ -1 +1,2 @@
 export * from './Text';
+export * from './typographyStyles';

packages/react-text/src/typographyStyles.ts

@@ -0,0 +1 @@
+export * from './typographyStyles/index';

packages/react-text/src/typographyStyles/index.ts

@@ -0,0 +1,2 @@
+import * as typographyStyles from './typographyStyles';
+export { typographyStyles };

packages/react-text/src/typographyStyles/typographyStyles.test.ts

@@ -0,0 +1,74 @@
+import { Theme } from '@fluentui/react-theme';
+import { typographyStyles } from './index';
+
+const weightsMock = {
+  regular: 1,
+  semibold: 2,
+};
+type DeepPartial<T> = Partial<{ [P in keyof T]: DeepPartial<T[P]> }>;
+const themeMock: DeepPartial<Theme> = {
+  global: {
+    type: {
+      fontFamilies: {
+        base: 'base',
+      },
+      fontWeights: {
+        regular: weightsMock.regular,
+        semibold: weightsMock.semibold,
+      },
+      fontSizes: {
+        base: {
+          [100]: '100',
+          [200]: '200',
+          [300]: '300',
+          [400]: '400',
+          [500]: '500',
+          [600]: '600',
+        },
+        hero: {
+          [700]: '700',
+          [800]: '800',
+          [900]: '900',
+          [1000]: '1000',
+        },
+      },
+      lineHeights: {
+        base: {
+          [100]: '100',
+          [200]: '200',
+          [300]: '300',
+          [400]: '400',
+          [500]: '500',
+          [600]: '600',
+        },
+        hero: {
+          [700]: '700',
+          [800]: '800',
+          [900]: '900',
+          [1000]: '1000',
+        },
+      },
+    },
+  },
+};
+
+test.each([
+  ['caption', 'base', '200', '200', weightsMock.regular],
+  ['body', 'base', '300', '300', weightsMock.regular],
+  ['subheadline', 'base', '400', '400', weightsMock.semibold],
+  ['headline', 'base', '500', '500', weightsMock.semibold],
+  ['title3', 'base', '600', '600', weightsMock.semibold],
+  ['title2', 'base', '700', '700', weightsMock.semibold],
+  ['title1', 'base', '800', '800', weightsMock.semibold],
+  ['largeTitle', 'base', '900', '900', weightsMock.semibold],
+  ['display', 'base', '1000', '1000', weightsMock.semibold],
+] as const)('Uses the right tokens for %s', (ruleName, fontFamily, fontSize, lineHeight, fontWeight) => {
+  const ruleFunction = typographyStyles[ruleName];
+
+  const rules = ruleFunction(themeMock as Theme);
+
+  expect(rules.fontFamily).toEqual(fontFamily);
+  expect(rules.fontSize).toEqual(fontSize);
+  expect(rules.lineHeight).toEqual(lineHeight);
+  expect(rules.fontWeight).toEqual(fontWeight);
+});

packages/react-text/src/typographyStyles/typographyStyles.ts

@@ -0,0 +1,60 @@
+import { MakeStylesStyleFunctionRule } from '@fluentui/make-styles';
+import { Theme } from '@fluentui/react-theme';
+
+/**
+ * Make-styles rules for the typography variants
+ */
+export const caption: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.base[200],
+  lineHeight: theme.global.type.lineHeights.base[200],
+  fontWeight: theme.global.type.fontWeights.regular,
+});
+export const body: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.base[300],
+  lineHeight: theme.global.type.lineHeights.base[300],
+  fontWeight: theme.global.type.fontWeights.regular,
+});
+export const subheadline: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.base[400],
+  lineHeight: theme.global.type.lineHeights.base[400],
+  fontWeight: theme.global.type.fontWeights.semibold,
+});
+export const headline: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.base[500],
+  lineHeight: theme.global.type.lineHeights.base[500],
+  fontWeight: theme.global.type.fontWeights.semibold,
+});
+export const title3: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.base[600],
+  lineHeight: theme.global.type.lineHeights.base[600],
+  fontWeight: theme.global.type.fontWeights.semibold,
+});
+export const title2: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.hero[700],
+  lineHeight: theme.global.type.lineHeights.hero[700],
+  fontWeight: theme.global.type.fontWeights.semibold,
+});
+export const title1: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.hero[800],
+  lineHeight: theme.global.type.lineHeights.hero[800],
+  fontWeight: theme.global.type.fontWeights.semibold,
+});
+export const largeTitle: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.hero[900],
+  lineHeight: theme.global.type.lineHeights.hero[900],
+  fontWeight: theme.global.type.fontWeights.semibold,
+});
+export const display: MakeStylesStyleFunctionRule<Theme> = theme => ({
+  fontFamily: theme.global.type.fontFamilies.base,
+  fontSize: theme.global.type.fontSizes.hero[1000],
+  lineHeight: theme.global.type.lineHeights.hero[1000],
+  fontWeight: theme.global.type.fontWeights.semibold,
+});

packages/react-text/tsconfig.json

@@ -4,7 +4,7 @@
   "compilerOptions": {
     "target": "ES5",
     "module": "CommonJS",
-    "lib": ["es5", "dom"],
+    "lib": ["es2015", "dom"],
     "outDir": "dist",
     "jsx": "react",
     "declaration": true,