RFC: Simplified component structure for react-text wrappers (#18817)

Co-authored-by: Tringa Krasniqi <tkrasniqi@microsoft.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Bernardo Sunderhus <bernardo.sunderhus@gmail.com>
Co-authored-by: ling1726 <lingfangao@hotmail.com>

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

@@ -16,9 +16,16 @@ const body: MakeStylesStyleFunctionRule<Theme>;
 // @public
 const caption: MakeStylesStyleFunctionRule<Theme>;
 
+// @public
+export const Display: React_2.ForwardRefExoticComponent<DisplayProps & React_2.RefAttributes<HTMLElement>>;
+
 // @public (undocumented)
 const display: MakeStylesStyleFunctionRule<Theme>;
 
+// @public
+export interface DisplayProps extends Omit<TextProps, 'font' | 'size'> {
+}
+
 // @public (undocumented)
 const headline: MakeStylesStyleFunctionRule<Theme>;
 

packages/react-text/src/Display.ts

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

packages/react-text/src/Text.stories.tsx

@@ -0,0 +1,82 @@
+import { makeStyles } from '@fluentui/react-make-styles';
+import * as React from 'react';
+import { Text, TextProps } from './Text';
+
+const useStyles = makeStyles({
+  container: {
+    width: '100px',
+  },
+});
+
+export const TextStory = (props: TextProps) => {
+  const styles = useStyles();
+  return (
+    <div className={styles.container}>
+      <Text {...props}>This is an example of the Text component's usage.</Text>
+    </div>
+  );
+};
+
+TextStory.argTypes = {
+  wrap: {
+    defaultValue: true,
+    control: 'boolean',
+  },
+  truncate: {
+    defaultValue: false,
+    control: 'boolean',
+  },
+  underline: {
+    defaultValue: false,
+    control: 'boolean',
+  },
+  block: {
+    defaultValue: false,
+    control: 'boolean',
+  },
+  italic: {
+    defaultValue: false,
+    control: 'boolean',
+  },
+  strikethrough: {
+    defaultValue: false,
+    control: 'boolean',
+  },
+  size: {
+    defaultValue: 300,
+    type: { name: 'number', required: false },
+    control: {
+      type: 'select',
+      options: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000],
+    },
+  },
+  font: {
+    defaultValue: 'base',
+    type: { name: 'string', required: false },
+    control: {
+      type: 'select',
+      options: ['base', 'monospace', 'numeric'],
+    },
+  },
+  weight: {
+    defaultValue: 'regular',
+    type: { name: 'string', required: false },
+    control: {
+      type: 'select',
+      options: ['regular', 'medium', 'semibold'],
+    },
+  },
+  align: {
+    defaultValue: 'start',
+    type: { name: 'string', required: false },
+    control: {
+      type: 'select',
+      options: ['start', 'center', 'end', 'justify'],
+    },
+  },
+};
+
+export default {
+  title: 'Components/Text',
+  component: Text,
+};

packages/react-text/src/TextWrappers.stories.mdx

@@ -0,0 +1,9 @@
+import { Display } from './components/Display';
+import { FluentProvider } from '@fluentui/react-provider';
+import { webLightTheme } from '@fluentui/react-theme';
+
+<Meta title="Components/Text/Wrappers" />
+
+<FluentProvider theme={webLightTheme}>
+  <Display block>Display text wrapper, semibold, base1000</Display>
+</FluentProvider>

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Display } from './Display';
+import { isConformant } from '../../common/isConformant';
+
+describe('Display', () => {
+  isConformant({
+    Component: Display,
+    displayName: 'Display',
+  });
+
+  it('renders a default state', () => {
+    const result = render(<Display>Default Display</Display>);
+    expect(result.container).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { renderText, useText, useTextStyles } from '../Text/index';
+import { typographyStyles } from '../../typographyStyles/index';
+import { DisplayProps } from './Display.types';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: typographyStyles.display,
+});
+
+/**
+ * Text wrapper component for the Display typography variant
+ */
+export const Display = React.forwardRef<HTMLElement, DisplayProps>((props, ref) => {
+  const styles = useStyles();
+  const state = useText(props, ref);
+  useTextStyles(state);
+
+  state.className = mergeClasses(state.className, styles.root, props.className);
+
+  return renderText(state);
+});
+
+Display.displayName = 'Display';

packages/react-text/src/components/Display/Display.types.ts

@@ -0,0 +1,6 @@
+import { TextProps } from '../Text/index';
+
+/**
+ * Display Props
+ */
+export interface DisplayProps extends Omit<TextProps, 'font' | 'size'> {}

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Display renders a default state 1`] = `
+<div>
+  <span
+    class=""
+  >
+    Default Display
+  </span>
+</div>
+`;

packages/react-text/src/components/Display/index.ts

@@ -0,0 +1,2 @@
+export * from './Display';
+export * from './Display.types';

packages/react-text/src/index.ts

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