Add small Label option (#946)

Author: danielguillan

.changeset/rich-rules-fix.md

@@ -0,0 +1,7 @@
+---
+'@primer/react-brand': patch
+---
+
+Added a new `small` size option for `Label`
+
+🔗 [See documentation for usage examples](https://primer.style/brand/components/Label/react#sizes)

apps/docs/content/components/Label/react.mdx

@@ -30,10 +30,11 @@ This is the default variant for the Label component. It corresponds to the `m
 
 ### Sizes
 
-Use the `size` prop to change the size of the `Label` component. The `medium` size is recommended for small titles or headings and the `large` size is recommended for large titles or section intros.
+Use the `size` prop to adjust the size of the `Label` component. The `small` size is ideal for body text. The `medium` size is recommended for small headings and `large` is suitable for large headings or section intros.
 
 ```jsx live
 <Stack direction="horizontal" alignItems="flex-start" padding="none">
+  <Label size="small">Small</Label>
   <Label size="medium">Medium</Label>
   <Label size="large">Large</Label>
 </Stack>

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

@@ -9,7 +9,13 @@ export default {
   component: Label,
 } as Meta<typeof Label>
 
-export const Large = () => <Label size="large">Large</Label>
+export const Sizes = () => (
+  <Stack direction="horizontal" flexWrap="wrap">
+    <Label size="small">Small</Label>
+    <Label size="medium">Medium</Label>
+    <Label size="large">Large</Label>
+  </Stack>
+)
 
 export const Color = () => (
   <Stack alignItems="flex-start" direction="horizontal" flexWrap="wrap">

packages/react/src/Label/Label.module.css

@@ -28,8 +28,6 @@
   color: var(--brand-Label-color-start, var(--brand-Label-color, currentColor));
   position: relative;
   height: min-content;
-  padding-inline: var(--base-size-16);
-  padding-block: var(--base-size-4);
   background: none;
   text-align: center;
 }
@@ -54,12 +52,26 @@
   mask-composite: exclude;
 }
 
+.Label--size-small {
+  min-height: var(--base-size-20);
+  padding-inline: var(--base-size-8);
+  padding-block: var(--base-size-2);
+}
+
+.Label--size-small .Label__label {
+  font-size: var(--base-size-12) !important; /* Font size not available in the typographic scale */
+}
+
 .Label--size-medium {
   min-height: var(--base-size-28);
+  padding-inline: var(--base-size-16);
+  padding-block: var(--base-size-4);
 }
 
 .Label--size-large {
   min-height: var(--base-size-32);
+  padding-inline: var(--base-size-16);
+  padding-block: var(--base-size-4);
 }
 
 .Label--color-default {

packages/react/src/Label/Label.module.css.d.ts

@@ -23,6 +23,7 @@ declare const styles: {
   readonly "Label--gradient": string;
   readonly "Label--size-large": string;
   readonly "Label--size-medium": string;
+  readonly "Label--size-small": string;
   readonly "Label__icon-visual": string;
   readonly "Label__label": string;
   readonly "Label__leading-visual": string;

packages/react/src/Label/Label.test.tsx

@@ -1,7 +1,7 @@
 import React, {render, cleanup} from '@testing-library/react'
 import '@testing-library/jest-dom'
 
-import {Label} from './Label'
+import {Label, LabelSizes} from './Label'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import {CopilotIcon} from '@primer/octicons-react'
 
@@ -32,14 +32,11 @@ describe('Label', () => {
     expect(labelEl.classList).toContain(expectedShapeClass)
   })
 
-  it('renders the correct size', () => {
-    const expectedSize = `large`
-    const expectedSizeClass = `Label--size-${expectedSize}`
-
-    const {getByTestId} = render(<Label size={expectedSize}>{mockText}</Label>)
-
+  it.each(LabelSizes)('renders the correct size: %s', size => {
+    const {getByTestId} = render(<Label size={size}>{mockText}</Label>)
     const labelEl = getByTestId(Label.testIds.root)
-    expect(labelEl.classList).toContain(expectedSizeClass)
+
+    expect(labelEl.classList).toContain(`Label--size-${size}`)
   })
 
   it('renders the correct default color', () => {

packages/react/src/Label/Label.tsx

@@ -19,10 +19,10 @@ import {Icon} from '@primer/octicons-react'
 const Gradients = [...BiColorGradients, ...TriColorGradients] as const
 
 export const LabelColors = [...Colors, ...Gradients] as const
-export const LabelSizes = ['medium', 'large'] as const
+export const LabelSizes = ['small', 'medium', 'large'] as const
 
 export const defaultLabelColor = LabelColors[0]
-export const defaultLabelSize = LabelSizes[0]
+export const defaultLabelSize = LabelSizes[1]
 
 export type LabelProps = BaseProps<HTMLSpanElement> & {
   /**
@@ -95,7 +95,7 @@ const _Label = forwardRef<HTMLSpanElement, LabelProps>(
           </span>
         )}
         <span className={clsx(styles['Label__text'])}>
-          <Text as="span" size={size === 'medium' ? '100' : '200'} className={clsx(styles['Label__label'])}>
+          <Text as="span" size={size === 'large' ? '200' : '100'} className={clsx(styles['Label__label'])}>
             {children}
           </Text>
         </span>

packages/react/src/Label/Label.visual.spec.ts

@@ -21,8 +21,8 @@ test.describe('Visual Comparison: Label', () => {
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()
   })
 
-  test('Label / Large', async ({page}) => {
-    await page.goto('http://localhost:6006/iframe.html?args=&id=components-label-features--large&viewMode=story')
+  test('Label / Sizes', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-label-features--sizes&viewMode=story')
 
     await page.waitForTimeout(500)
     expect(await page.screenshot({fullPage: true})).toMatchSnapshot()