Merge branch 'main' into 3692-remove-tabpanels-component

.changeset/beige-schools-kneel.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add `link` variant to Button

.changeset/config.json

@@ -6,5 +6,5 @@
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["docs", "example-*", "codesandbox", "rollup-plugin-import-css"]
+  "ignore": ["docs", "example-*", "codesandbox"]
 }

.changeset/dry-trainers-protect.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Update Primer React to emit *.css files that are imported by emitted *.js files for styling

.changeset/moody-rivers-impress.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Header: Add overflow when there are a lot of items

.changeset/pre.json

@@ -8,7 +8,17 @@
     "example-consumer-test": "0.0.0",
     "example-nextjs": "0.0.0",
     "@primer/react": "36.27.0",
-    "rollup-plugin-import-css": "0.0.0"
+    "rollup-plugin-import-css": "0.0.0",
+    "postcss-preset-primer": "0.0.0"
   },
-  "changesets": []
+  "changesets": [
+    "beige-schools-kneel",
+    "dry-trainers-protect",
+    "fluffy-ravens-thank",
+    "four-shoes-yell",
+    "four-tables-glow",
+    "lovely-days-march",
+    "moody-rivers-impress",
+    "young-meals-worry"
+  ]
 }

.changeset/tough-pans-punch.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update Blankslate component to use CSS Modules behind a feature flag

.changeset/young-meals-worry.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Bumps @github/relative-time-element to v4.4.2

.github/workflows/ci.yml

@@ -48,6 +48,8 @@ jobs:
         run: npm ci
       - name: Lint JavaScript
         run: npm run lint
+      - name: Lint CSS
+        run: npm run lint:css
       - name: Lint markdown
         run: npm run lint:md
 

.github/workflows/consumer_test.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build @primer/react
-        run: npm run build -w @primer/react
+        run: npm run build -w rollup-plugin-import-css -w @primer/react
       # Output the artifact as a tarball in `consumer-test`. Write the
       # information for this package in `consumer-test/pack.json` so we can read
       # from it later to install the package

.github/workflows/release_candidate.yml

@@ -42,9 +42,19 @@ jobs:
 
       - name: Publish release candidate
         run: |
+          # Remove existing pre.json if one exists. Snapshots are not allowed
+          # in pre-release mode.
+          # TODO: remove in v37
+          rm .changeset/pre.json
+
           pkg_json_path=packages/react/package.json
           version=$(jq -r .version $pkg_json_path)
-          echo "$( jq ".version = \"$(echo $version)-rc.$(git rev-parse --short HEAD)\"" $pkg_json_path )" > $pkg_json_path
+
+          # Update how the version is generated in these prereleases. By
+          # default, -rc. is included in versions when `pre.json` is present.
+          # Add this back in when we exit the v37 release
+          # TODO: remove in v37
+          echo "$( jq ".version = \"$(echo $version).$(git rev-parse --short HEAD)\"" $pkg_json_path )" > $pkg_json_path
           npx changeset publish --tag next
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.stylelintignore

@@ -0,0 +1,5 @@
+docs/public/**/*.css
+**/lib-esm/**/*.css
+**/lib/**/*.css
+**/dist/**/*.css
+**/.next/**/*.css

e2e/components/Blankslate.test.ts

@@ -0,0 +1,145 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+import {viewports} from '../test-helpers/viewports'
+
+const stories: Array<{title: string; id: string; viewports?: Array<keyof typeof viewports>}> = [
+  {
+    title: 'Default',
+    id: 'drafts-components-blankslate--default',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'Narrow',
+    id: 'drafts-components-blankslate-features--narrow',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'Spacious',
+    id: 'drafts-components-blankslate-features--spacious',
+    viewports: ['primer.breakpoint.xs', 'primer.breakpoint.sm'],
+  },
+  {
+    title: 'With Border',
+    id: 'drafts-components-blankslate-features--with-border',
+    viewports: ['primer.breakpoint.sm'],
+  },
+  {
+    title: 'With Primary Action',
+    id: 'drafts-components-blankslate-features--with-primary-action',
+    viewports: ['primer.breakpoint.sm'],
+  },
+  {
+    title: 'With Secondary Action',
+    id: 'drafts-components-blankslate-features--with-secondary-action',
+    viewports: ['primer.breakpoint.sm'],
+  },
+  {
+    title: 'With Visual',
+    id: 'drafts-components-blankslate-features--with-visual',
+    viewports: ['primer.breakpoint.sm'],
+  },
+]
+
+test.describe('Blankslate', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules: true,
+                },
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${theme}.png`)
+          })
+
+          test('default (styled-components) @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules: false,
+                },
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${theme}.png`)
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules: true,
+                },
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+
+          test('axe (styled-components) @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+
+      if (story.viewports) {
+        for (const name of story.viewports) {
+          test(`${name} @vrt`, async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                featureFlags: {
+                  primer_react_css_modules: true,
+                },
+              },
+            })
+            const width = viewports[name]
+
+            await page.setViewportSize({
+              width,
+              height: 667,
+            })
+            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${name}.png`)
+          })
+
+          test(`${name} (styled-components) @vrt`, async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                featureFlags: {
+                  primer_react_css_modules: false,
+                },
+              },
+            })
+            const width = viewports[name]
+
+            await page.setViewportSize({
+              width,
+              height: 667,
+            })
+            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${name}.png`)
+          })
+        }
+      }
+    })
+  }
+})

e2e/components/Button.test.ts

@@ -173,6 +173,40 @@ test.describe('Button', () => {
     }
   })
 
+  test.describe('Link', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--link',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Link.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--link',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
   test.describe('Large', () => {
     for (const theme of themes) {
       test.describe(theme, () => {

e2e/test-helpers/storybook.ts

@@ -1,10 +1,18 @@
 import type {Page} from '@playwright/test'
 import {waitForImages} from './waitForImages'
 
+type Value =
+  | string
+  | boolean
+  | number
+  | {
+      [Key: string]: Value
+    }
+
 interface Options {
   id: string
   args?: Record<string, string | boolean>
-  globals?: Record<string, string>
+  globals?: Record<string, Value>
 }
 
 const {STORYBOOK_URL = 'http://localhost:6006'} = process.env
@@ -28,9 +36,13 @@ export async function visit(page: Page, options: Options) {
     let params = ''
     for (const [key, value] of Object.entries(globals)) {
       if (params !== '') {
-        params += '&'
+        params += ';'
+      }
+      if (typeof value === 'object') {
+        params += serializeObject(value, key)
+      } else {
+        params += `${key}:${value}`
       }
-      params += `${key}:${value}`
     }
     url.searchParams.set('globals', params)
   }
@@ -46,3 +58,22 @@ export async function visit(page: Page, options: Options) {
 
   await waitForImages(page)
 }
+
+function serializeObject<T extends {[Key: string]: Value}>(object: T, parentPath: string): string {
+  return Object.entries(object)
+    .map(([key, value]) => {
+      if (typeof value === 'object') {
+        return serializeObject(value, `${parentPath}.${key}`)
+      }
+      return `${parentPath}.${key}:${serialize(value)}`
+    })
+    .join(';')
+}
+
+function serialize(value: Value): string {
+  if (typeof value === 'boolean') {
+    return `!${value}`
+  }
+
+  return `${value}`
+}

examples/app-router/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "36.27.0",
+    "@primer/react": "37.0.0-rc.0",
     "next": "^14.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/codesandbox/package.json

@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "@primer/react": "36.27.0",
+    "@primer/react": "37.0.0-rc.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",

examples/consumer-test/package.json

@@ -9,7 +9,7 @@
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.19",
     "@types/styled-components": "^5.1.11",
-    "@primer/react": "*",
+    "@primer/react": "37.0.0-rc.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "styled-components": "^5.3.11",

examples/nextjs/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "19.x",
-    "@primer/react": "36.27.0",
+    "@primer/react": "37.0.0-rc.0",
     "next": "^14.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",