Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text - Reusable make-styles rules #18778

Merged
merged 14 commits into from
Jul 15, 2021
Merged
16 changes: 11 additions & 5 deletions packages/react-text/Spec.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>
</>
);
};
Expand Down
46 changes: 44 additions & 2 deletions packages/react-text/etc/react-text.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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)

```
10 changes: 4 additions & 6 deletions packages/react-text/src/components/Text/Text.test.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand All @@ -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');
Expand Down
1 change: 1 addition & 0 deletions packages/react-text/src/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './Text';
export * from './typographyStyles';
1 change: 1 addition & 0 deletions packages/react-text/src/typographyStyles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './typographyStyles/index';
2 changes: 2 additions & 0 deletions packages/react-text/src/typographyStyles/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import * as typographyStyles from './typographyStyles';
export { typographyStyles };
Original file line number Diff line number Diff line change
@@ -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);
});
60 changes: 60 additions & 0 deletions packages/react-text/src/typographyStyles/typographyStyles.ts
Original file line number Diff line number Diff line change
@@ -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,
});
2 changes: 1 addition & 1 deletion packages/react-text/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"lib": ["es5", "dom"],
"lib": ["es2015", "dom"],
andrefcdias marked this conversation as resolved.
Show resolved Hide resolved
"outDir": "dist",
"jsx": "react",
"declaration": true,
Expand Down