Add size and weight props to Text

.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,150 @@
 import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
-import {themes} from '../test-helpers/themes'
+
+// only testing light theme because this component is only concerned with text size and weight
 
 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,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`Text.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  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`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-text--playground',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text--default',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Default.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text--default',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('Small', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-small',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Small.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-small',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('Medium', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-medium',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Medium.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-medium',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('Large', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-large',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Large.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--size-large',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('LightWeight', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--light-weight',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Light.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--light-weight',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('NormalWeight', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--normal-weight',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Normal.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--normal-weight',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('MediumWeight', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--medium-weight',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Medium.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--medium-weight',
+      })
+      await expect(page).toHaveNoViolations()
+    })
+  })
+
+  test.describe('SemiboldWeight', () => {
+    test('default @vrt', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--semibold-weight',
+      })
+
+      // Default state
+      expect(await page.screenshot()).toMatchSnapshot(`Text.Semibold.png`)
+    })
+
+    test('axe @aat', async ({page}) => {
+      await visit(page, {
+        id: 'components-text-features--semibold-weight',
+      })
+      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