Merge branch 'main' into add-keybinding-hint

.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/fluffy-ravens-thank.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+- Adjust checkbox and radio border color values for high contrast themes
+- Add default border to SegmentedControl
+- Add inset box-shadow to StatusLabel to prep for new border-color in dark high contrast

.changeset/four-shoes-yell.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Set `openOnFocus` default to `false`, making the menu closed initially rather than opening on focus of input

.changeset/four-tables-glow.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add the deprecated Dialog, Octicon, Pagehead, TabNav, and Tooltip components to @primer/react/deprecated

.changeset/lovely-days-march.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+ActionList: Adds `aria-labelledby` to `ActionList.TrailingVisual`, making it part of the accessible name of `ActionList.Item`

.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

@@ -0,0 +1,14 @@
+{
+  "mode": "pre",
+  "tag": "rc",
+  "initialVersions": {
+    "docs": "1.0.0",
+    "codesandbox": "0.0.0",
+    "example-app-router": "0.0.0",
+    "example-consumer-test": "0.0.0",
+    "example-nextjs": "0.0.0",
+    "@primer/react": "36.27.0",
+    "rollup-plugin-import-css": "0.0.0"
+  },
+  "changesets": []
+}

.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_canary.yml

@@ -41,6 +41,11 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
       - name: Publish canary release
         run: |
+          # Remove existing pre.json if one exists. Snapshots are not allowed
+          # in pre-release mode.
+          # TODO: remove in v37
+          rm .changeset/pre.json
+
           echo -e "---\n$( jq .name packages/react/package.json ): patch\n---\n\nFake entry to force publishing" > .changeset/force-snapshot-release.md
           npx changeset version --snapshot
           npx changeset publish --tag canary

.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,92 @@
+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,
+              },
+            })
+
+            // 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,
+              },
+            })
+            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: {},
+            })
+            const width = viewports[name]
+
+            await page.setViewportSize({
+              width,
+              height: 667,
+            })
+            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${name}.png`)
+          })
+        }
+      }
+    })
+  }
+})

examples/app-router/package.json

@@ -1,5 +1,6 @@
 {
   "name": "example-app-router",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
     "clean": "rimraf .next",

examples/consumer-test/package.json

@@ -1,5 +1,6 @@
 {
   "name": "example-consumer-test",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
     "check": "tsc --noEmit"