Document and test Button component's "small" size

.changeset/early-kangaroos-appear.md

@@ -0,0 +1,6 @@
+---
+'@primer/brand-primitives': patch
+'@primer/react-brand': patch
+---
+
+Corrected block padding of `size="small"` Button component

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

@@ -49,6 +49,7 @@ The `subtle` variant of Button indicates that the action is a low priority one.
 
 ```jsx live
 <Stack direction="vertical" alignItems="flex-start">
+  <Button size="small">Register now</Button>
   <Button size="medium">Register now</Button>
   <Button size="large">Register now</Button>
 </Stack>

packages/design-tokens/src/tokens/functional/size/size.json

@@ -17,7 +17,7 @@
           "value": "{base.size.12}"
         },
         "paddingBlock": {
-          "value": "{base.size.12}"
+          "value": "{base.size.8}"
         },
         "paddingInline": {
           "condensed": {

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

@@ -78,6 +78,12 @@ export const SubtleDisabled = () => (
   </Button>
 )
 
+export const Small = () => (
+  <Button as="a" variant="primary" size="small" href="#">
+    Small action
+  </Button>
+)
+
 export const Large = () => (
   <Button as="a" variant="primary" size="large" href="#">
     Large action
@@ -101,8 +107,8 @@ export const Polymorphism = () => (
   </Button>
 )
 
-/* 
-  Storybook Interactions cannot natively simulate hover state on CSS pseudo-class. 
+/*
+  Storybook Interactions cannot natively simulate hover state on CSS pseudo-class.
   Only simulates JS-based state.
   TODO: Investigate perf impact of using "https://storybook.js.org/addons/storybook-addon-pseudo-states"
 */
@@ -120,8 +126,8 @@ WithHoverInteraction.play = async ({canvasElement}) => {
 }
 WithHoverInteraction.storyName = 'Primary button with hover interaction'
 
-/* 
-  Storybook Interactions cannot natively simulate hover state on CSS pseudo-class. 
+/*
+  Storybook Interactions cannot natively simulate hover state on CSS pseudo-class.
   Only simulates JS-based state.
   TODO: Investigate perf impact of using "https://storybook.js.org/addons/storybook-addon-pseudo-states"
 */
@@ -139,8 +145,8 @@ SecondaryWithHoverInteraction.play = async ({canvasElement}) => {
 }
 SecondaryWithHoverInteraction.storyName = 'Secondary button with hover interaction'
 
-/* 
-  Storybook Interactions cannot natively simulate hover state on CSS pseudo-class. 
+/*
+  Storybook Interactions cannot natively simulate hover state on CSS pseudo-class.
   Only simulates JS-based state.
   TODO: Investigate perf impact of using "https://storybook.js.org/addons/storybook-addon-pseudo-states"
 */

packages/react/src/Button/Button.test.tsx

@@ -2,7 +2,7 @@ import React, {render, cleanup} from '@testing-library/react'
 import '@testing-library/jest-dom'
 import userEvent from '@testing-library/user-event'
 
-import {Button} from './Button'
+import {Button, ButtonSizes} from './Button'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import {SearchIcon} from '@primer/octicons-react'
 
@@ -249,24 +249,29 @@ describe('Button', () => {
   })
 
   it('spans full width when block prop is true', () => {
-    const {getByTestId} = render(
-      <Button block={true} data-testid="test-button">
-        Full-Width Button
-      </Button>,
-    )
+    const {getByRole} = render(<Button block={true}>Full-Width Button</Button>)
 
-    const btnEl = getByTestId('test-button')
+    const btnEl = getByRole('button')
 
-    // Ensure the button has the block CSS class when block is true
     expect(btnEl.classList).toContain('Button--block')
   })
 
   it('is not block by default', () => {
-    const {getByTestId} = render(<Button data-testid="test-button">Default Button</Button>)
+    const {getByRole} = render(<Button>Default Button</Button>)
 
-    const btnEl = getByTestId('test-button')
+    const btnEl = getByRole('button')
 
-    // Ensure the button does not have the CSS class when block is false (default)
     expect(btnEl.classList).not.toContain('Button--block')
   })
+
+  it('applies the correct class for each size', () => {
+    for (const i in ButtonSizes) {
+      const size = ButtonSizes[i]
+      const {getAllByRole} = render(<Button size={size}>Button</Button>)
+
+      const btnEl = getAllByRole('button')
+
+      expect(btnEl[i].classList).toContain(`Button--size-${size}`)
+    }
+  })
 })

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

@@ -82,6 +82,13 @@ test.describe('Visual Comparison: Button', () => {
     expect(await page.screenshot()).toMatchSnapshot()
   })
 
+  test('Button / Small', async ({page}) => {
+    await page.goto('http://localhost:6006/iframe.html?args=&id=components-button-features--small&viewMode=story')
+
+    await page.waitForTimeout(500)
+    expect(await page.screenshot()).toMatchSnapshot()
+  })
+
   test('Button / Large', async ({page}) => {
     await page.goto('http://localhost:6006/iframe.html?args=&id=components-button-features--large&viewMode=story')