Merge branch 'main' of github.com:primer/react into refactor/remove-s…

…srprovider

.changeset/beige-schools-kneel.md

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

.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,24 @@
+{
+  "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",
+    "postcss-preset-primer": "0.0.0"
+  },
+  "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/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

.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,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`)
+          })
+        }
+      }
+    })
+  }
+})

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, () => {

examples/app-router/package.json

@@ -1,5 +1,6 @@
 {
   "name": "example-app-router",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
     "clean": "rimraf .next",
@@ -9,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

@@ -1,5 +1,6 @@
 {
   "name": "example-consumer-test",
+  "version": "0.0.0",
   "private": true,
   "scripts": {
     "check": "tsc --noEmit"
@@ -8,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",