Add size and weight props to Text (#4834)

* add size and weight props

* add fallbacks

* polymorphic?

* test ci

* snapshots

* test(vrt): update snapshots

* lint

* Create gold-cups-explode.md

* fix playground

* refactor(e2e): update Text e2e test

---------

Co-authored-by: langermank <langermank@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

.changeset/gold-cups-explode.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `size` and `weight` props to `Text`

e2e/components/Text.test.ts

@@ -1,61 +1,61 @@
 import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
 
-test.describe('Text', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-text--default',
+  },
+  {
+    title: 'Small',
+    id: 'components-text-features--size-small',
+  },
+  {
+    title: 'Medium',
+    id: 'components-text-features--size-medium',
+  },
+  {
+    title: 'Large',
+    id: 'components-text-features--size-large',
+  },
+  {
+    title: 'LightWeight',
+    id: 'components-text-features--light-weight',
+  },
+  {
+    title: 'NormalWeight',
+    id: 'components-text-features--normal-weight',
+  },
+  {
+    title: 'MediumWeight',
+    id: 'components-text-features--medium-weight',
+  },
+  {
+    title: 'SemiboldWeight',
+    id: 'components-text-features--semibold-weight',
+  },
+] as const
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Text.Default.${theme}.png`)
-        })
+// only testing light theme because this component is only concerned with text size and weight
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
+test.describe('Text', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      test('default @vrt', async ({page}) => {
+        await visit(page, {
+          id: story.id,
         })
-      })
-    }
-  })
 
-  test.describe('Playground', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--playground',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Text.Playground.${theme}.png`)
-        })
+        // Default state
+        expect(await page.screenshot()).toMatchSnapshot(`Text.${story.title}.png`)
+      })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--playground',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
+      test('axe @aat', async ({page}) => {
+        await visit(page, {
+          id: story.id,
         })
+        await expect(page).toHaveNoViolations()
       })
-    }
-  })
+    })
+  }
 })

packages/react/src/Text/Text.docs.json

@@ -14,6 +14,14 @@
     {
       "name": "sx",
       "type": "SystemStyleObject"
+    },
+    {
+      "name": "size",
+      "type": "'large' | 'medium' | 'small'"
+    },
+    {
+      "name": "weight",
+      "type": "'light' | 'normal' | 'medium' | 'semibold'"
     }
   ],
   "subcomponents": []

packages/react/src/Text/Text.features.stories.tsx

@@ -19,7 +19,49 @@ export const Polymorphism = () => (
 )
 
 export const StyledText = () => (
-  <Text as="p" sx={{color: 'fg.onEmphasis', bg: 'neutral.emphasis', p: 2}}>
+  <Text as="p" sx={{color: 'fg.onEmphasis', bg: 'neutral.emphasis', p: 2}} size="small">
+    Stylized text
+  </Text>
+)
+
+export const SizeSmall = () => (
+  <Text as="span" size="small">
+    Stylized text
+  </Text>
+)
+
+export const SizeMedium = () => (
+  <Text as="span" size="medium">
+    Stylized text
+  </Text>
+)
+
+export const SizeLarge = () => (
+  <Text as="span" size="large">
+    Stylized text
+  </Text>
+)
+
+export const LightWeight = () => (
+  <Text as="span" weight="light">
+    Stylized text
+  </Text>
+)
+
+export const NormalWeight = () => (
+  <Text as="span" weight="normal">
+    Stylized text
+  </Text>
+)
+
+export const MediumWeight = () => (
+  <Text as="span" weight="medium">
+    Stylized text
+  </Text>
+)
+
+export const SemiboldWeight = () => (
+  <Text as="span" weight="semibold">
     Stylized text
   </Text>
 )

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

@@ -14,6 +14,8 @@ export const Playground: StoryFn<typeof Text> = args => <Text {...args}>{args.te
 Playground.args = {
   text: 'Playground',
   as: 'span',
+  size: 'medium',
+  weight: 'normal',
 }
 
 Playground.argTypes = {
@@ -29,12 +31,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  theme: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
   ref: {
     controls: false,
     table: {
@@ -47,4 +43,16 @@ Playground.argTypes = {
       disable: true,
     },
   },
+  size: {
+    control: {
+      type: 'radio',
+    },
+    options: ['small', 'medium', 'large'],
+  },
+  weight: {
+    control: {
+      type: 'radio',
+    },
+    options: ['light', 'normal', 'medium', 'semibold'],
+  },
 }

packages/react/src/Text/Text.tsx

@@ -5,11 +5,52 @@ import type {SxProp} from '../sx'
 import sx from '../sx'
 import type {ComponentProps} from '../utils/types'
 
-const Text = styled.span<SystemTypographyProps & SystemCommonProps & SxProp>`
+type StyledTextProps = {
+  size?: 'large' | 'medium' | 'small'
+  weight?: 'light' | 'normal' | 'medium' | 'semibold'
+} & SystemTypographyProps &
+  SystemCommonProps &
+  SxProp
+
+const Text = styled.span.attrs<StyledTextProps>(({size, weight}) => ({
+  'data-size': size,
+  'data-weight': weight,
+}))<StyledTextProps>`
   ${TYPOGRAPHY};
   ${COMMON};
+
+  &:where([data-size='small']) {
+    font-size: var(--text-body-size-small, 0.75rem);
+    line-height: var(--text-body-lineHeight-small, 1.6666);
+  }
+
+  &:where([data-size='medium']) {
+    font-size: var(--text-body-size-medium, 0.875rem);
+    line-height: var(--text-body-lineHeight-medium, 1.4285);
+  }
+
+  &:where([data-size='large']) {
+    font-size: var(--text-body-size-large, 1rem);
+    line-height: var(--text-body-lineHeight-large, 1.5);
+  }
+
+  &:where([data-weight='light']) {
+    font-weight: var(--base-text-weight-light, 300);
+  }
+
+  &:where([data-weight='normal']) {
+    font-weight: var(--base-text-weight-normal, 400);
+  }
+
+  &:where([data-weight='medium']) {
+    font-weight: var(--base-text-weight-medium, 500);
+  }
+
+  &:where([data-weight='semibold']) {
+    font-weight: var(--base-text-weight-semibold, 600);
+  }
+
   ${sx};
 `
-
 export type TextProps = ComponentProps<typeof Text>
 export default Text

packages/react/src/__tests__/__snapshots__/TextInputWithTokens.test.tsx.snap

@@ -831,6 +831,37 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = `
   color: var(--fgColor-muted,var(--color-fg-muted,#656d76));
 }
 
+.c9:where([data-size='small']) {
+  font-size: var(--text-body-size-small,0.75rem);
+  line-height: var(--text-body-lineHeight-small,1.6666);
+}
+
+.c9:where([data-size='medium']) {
+  font-size: var(--text-body-size-medium,0.875rem);
+  line-height: var(--text-body-lineHeight-medium,1.4285);
+}
+
+.c9:where([data-size='large']) {
+  font-size: var(--text-body-size-large,1rem);
+  line-height: var(--text-body-lineHeight-large,1.5);
+}
+
+.c9:where([data-weight='light']) {
+  font-weight: var(--base-text-weight-light,300);
+}
+
+.c9:where([data-weight='normal']) {
+  font-weight: var(--base-text-weight-normal,400);
+}
+
+.c9:where([data-weight='medium']) {
+  font-weight: var(--base-text-weight-medium,500);
+}
+
+.c9:where([data-weight='semibold']) {
+  font-weight: var(--base-text-weight-semibold,600);
+}
+
 .c0 {
   font-size: 14px;
   line-height: 20px;

packages/react/src/__tests__/__snapshots__/ThemeProvider.test.tsx.snap

@@ -6,6 +6,37 @@ exports[`has default theme 1`] = `
   margin-bottom: 4px;
 }
 
+.c0:where([data-size='small']) {
+  font-size: var(--text-body-size-small,0.75rem);
+  line-height: var(--text-body-lineHeight-small,1.6666);
+}
+
+.c0:where([data-size='medium']) {
+  font-size: var(--text-body-size-medium,0.875rem);
+  line-height: var(--text-body-lineHeight-medium,1.4285);
+}
+
+.c0:where([data-size='large']) {
+  font-size: var(--text-body-size-large,1rem);
+  line-height: var(--text-body-lineHeight-large,1.5);
+}
+
+.c0:where([data-weight='light']) {
+  font-weight: var(--base-text-weight-light,300);
+}
+
+.c0:where([data-weight='normal']) {
+  font-weight: var(--base-text-weight-normal,400);
+}
+
+.c0:where([data-weight='medium']) {
+  font-weight: var(--base-text-weight-medium,500);
+}
+
+.c0:where([data-weight='semibold']) {
+  font-weight: var(--base-text-weight-semibold,600);
+}
+
 <span
   class="c0"
   color="fg.default"