Merge branch 'next-major' into remove-from-draft-bundle

.changeset/breezy-fireants-tickle.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Button counter contrast fixes

.changeset/brown-beds-cover.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add experimental Table.ErrorDialog component

.changeset/curvy-windows-walk.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Add `role="dialog"` to overlay

.changeset/eleven-humans-sneeze.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+PageLayout.Content no longer renders as `main` by default. Instead, developers may add a `main` landmark within `Pagelayout.Content` themselves.

.changeset/empty-snakes-join.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Upgrade @primer/octicons-react dependency to `^19.1.0`

.changeset/few-papayas-brush.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Add a z-index to make it appear on the top of the stack

.changeset/happy-rings-arrive.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add pullQueued state to StateLabel

.changeset/kind-scissors-type.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+`Pagination`: Use `<button>` instead of `<span>` for disabled prev/next controls to improve accessibility

.changeset/modern-coins-destroy.md

@@ -1,5 +1,5 @@
 ---
-"@primer/react": major
+"@primer/react": minor
 ---
 
 Update PRC ActionList implementation to have similar semantics to PVC.

.changeset/polite-chicken-fix.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+passthrough form control label props

.changeset/spicy-shoes-press.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Octicons (previously known StyledOcticons) to use React.forwardRef()

.changeset/swift-cows-rest.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Rename component StyledOcticon to Octicon

.changeset/twenty-tips-attend.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Counter label forwards refs and dom props

.changeset/two-cycles-provide.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Address ToggleSwitch accessibility feedback

.github/pull_request_template.md

@@ -10,6 +10,7 @@ Please provide before/after screenshots for any visual changes
 
 - [ ] Added/updated tests
 - [ ] Added/updated documentation
+- [ ] Changes are [SSR compatible](https://github.com/primer/react/blob/main/contributor-docs/CONTRIBUTING.md#ssr-compatibility)
 - [ ] Tested in Chrome
 - [ ] Tested in Firefox
 - [ ] Tested in Safari

.github/workflows/accessibility-alt-text-bot.yml

@@ -0,0 +1,17 @@
+name: accessibility-alt-text-bot
+on:
+  issues:
+    types: [opened, edited]
+  pull_request:
+    types: [opened, edited]
+  issue_comment:
+    types: [created, edited]
+
+jobs:
+  accessibility_alt_text_bot:
+    name: Check alt text is set on issue or pull requests
+    runs-on: ubuntu-latest
+    if: ${{ github.event.issue || github.event.pull_request }}
+    steps:
+      - name: Get action 'github/accessibility-alt-text-bot'
+        uses: github/accessibility-alt-text-bot@v1.0.0

.github/workflows/deploy_production.yml

@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+  workflow_dispatch:
 
 permissions:
   contents: read
@@ -33,7 +34,11 @@ jobs:
         run: |
           if gh api --silent https://api.github.com/repos/${{ github.repository }}/pages ; then
             echo "::set-output name=pages::1"
+          else
+            echo "::set-output name=pages::0"
           fi
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Log has pages
         run: echo ${{ steps.has-pages.outputs.pages }}

.github/workflows/release-schedule.yml

@@ -0,0 +1,221 @@
+name: Release Schedule
+on:
+  workflow_dispatch:
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
+  cancel-in-progress: true
+
+permissions: {}
+
+jobs:
+  release-conductor:
+    if: ${{ github.repository == 'primer/react' }}
+    runs-on: ubuntu-latest
+    outputs:
+      conductor: ${{ steps.pagerduty.outputs.result }}
+    steps:
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Fetch user from pagerduty schedule
+        id: pagerduty
+        uses: actions/github-script@v6
+        env:
+          PAGERDUTY_API_KEY: ${{ secrets.PAGERDUTY_API_KEY_SID }}
+        with:
+          result-encoding: string
+          script: |
+            const { PAGERDUTY_API_KEY } = process.env;
+
+            const today = new Date().toISOString().slice(0, 10); // format: 2022-11-24
+            const url = new URL('https://api.pagerduty.com/schedules/P3IIVC4');
+            url.searchParams.append('since', today);
+            url.searchParams.append('until', today);
+
+            const response = await fetch(url, {
+              headers: {
+               'Content-Type': 'application/json',
+               'Authorization': `Token token=${PAGERDUTY_API_KEY}`
+              }
+            });
+            const data = await response.json();
+            const conductor = data.schedule.final_schedule.rendered_schedule_entries[0].user.summary;
+
+            core.info(`${conductor} is release conductor`);
+
+            return conductor;
+
+  create-tracking-issue:
+    needs: release-conductor
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install packages for github-script
+        run: npm i date-fns
+      - name: Create Release Issue
+        uses: actions/github-script@v6
+        env:
+          RELEASE_CONDUCTOR: ${{ needs.release-conductor.outputs.conductor }}
+        with:
+          script: |
+            const eachDayOfInterval = require('date-fns/eachDayOfInterval');
+            const startOfWeek = require('date-fns/startOfWeek');
+            const nextFriday = require('date-fns/nextFriday');
+            const format = require('date-fns/format');
+            const previousMonday = require('date-fns/previousMonday');
+
+            const { RELEASE_CONDUCTOR } = process.env;
+
+            core.info(`Release conductor: ${RELEASE_CONDUCTOR}`);
+
+            // Current schedule
+            const today = new Date();
+            const start = startOfWeek(today, { weekStartsOn: 1 });
+            const end = nextFriday(start);
+
+            // Previous schedule
+            const previousStart = previousMonday(start);
+            const previousEnd = nextFriday(previousStart);
+
+            // Issue IDs
+            const id = `primer-release-schedule:${format(start, 'yyyy-MM-dd')}`;
+            const previousId = `primer-release-schedule:${format(previousStart, 'yyyy-M-dd')}`;
+
+            core.startGroup(`Previous schedule: ${previousId}`);
+            core.info(`Start: ${previousStart}`);
+            core.info(`End: ${previousEnd}`)
+            core.endGroup();
+
+            core.startGroup(`Current schedule: ${id}`);
+            core.info(`Start: ${start}`);
+            core.info(`End: ${end}`)
+            core.endGroup();
+
+            const ISSUE_TITLE = 'Release Tracking';
+            const timeline = [
+              '## Timeline',
+              '',
+              '<!-- Provide updates for release activities, like cutting releases and different integration points -->',
+              '',
+              ...eachDayOfInterval({ start, end }).map((day) => {
+                return `- ${format(day, 'EEEE do')}`;
+              }),
+              '',
+            ].join('\n');
+            const checklist = [
+              '## Checklist',
+              '',
+              '- [ ] Checks have passed on the integration Pull Request downstream',
+              '- [ ] Release tracking Pull Request has been merged',
+              '- [ ] Stable release available on npm',
+              '- [ ] Downstream repos have been updated to latest',
+              '',
+            ].join('\n');
+            const notes = [
+              '## Notes',
+              '',
+              '<!-- Provide any notes for this release that may be helpful for a future conductor or for consumers -->',
+              ''
+            ].join('\n');
+
+            let ISSUE_BODY = `<!-- ${id} -->\n\n`;
+
+            ISSUE_BODY += `_This is a scheduled issue for tracking the release between ${format(start, 'EEEE do')} and ${format(end, 'EEEE do')}_\n\n`;
+
+            const iterator = github.paginate.iterator(
+              github.rest.issues.listForRepo,
+              {
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                state: 'open',
+                per_page: 100,
+              }
+            );
+
+            let releaseIssue = null;
+
+            for await (const page of iterator) {
+              releaseIssue = page.data.find((issue) => {
+                return issue.title === ISSUE_TITLE;
+              });
+              if (releaseIssue) {
+                break;
+              }
+            }
+
+            // There is no previously open release tracking issue
+            if (!releaseIssue) {
+              ISSUE_BODY += '| Last week | Value |\n';
+              ISSUE_BODY += '| :-------- | :---- |\n';
+              ISSUE_BODY += '| Issue     |       |\n';
+              ISSUE_BODY += '| Conductor |       |\n';
+              ISSUE_BODY += '| Release Pull Request | [Link](https://gh.io/AAksvvr) |\n';
+              ISSUE_BODY += '| Integration tests    | [Link](https://gh.io/AAkr65h) |\n';
+              ISSUE_BODY += '\n';
+              ISSUE_BODY += timeline;
+              ISSUE_BODY += '\n';
+              ISSUE_BODY += checklist;
+              ISSUE_BODY += '\n';
+              ISSUE_BODY += notes;
+
+              await github.rest.issues.create({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                title: ISSUE_TITLE,
+                body: ISSUE_BODY,
+                assignees: [RELEASE_CONDUCTOR],
+              });
+              return;
+            }
+
+            core.info(`Found release issue: ${releaseIssue.html_url}`);
+
+            // We already have an issue open for the current release
+            if (releaseIssue.body.includes(id)) {
+              return;
+            }
+
+            // This is the previous release issue
+            if (releaseIssue.body.includes(previousId)) {
+              const assignees = releaseIssue.assignees.map((assignee) => {
+                return assignee.login;
+              }).join(' ');
+
+              ISSUE_BODY += '| Last week | Value |\n';
+              ISSUE_BODY += '| :-------- | :---- |\n';
+              ISSUE_BODY += `| Issue     | [${releaseIssue.title}](${releaseIssue.html_url}) |\n`;
+              ISSUE_BODY += '| Conductor | ${assignees} |\n';
+              ISSUE_BODY += '| Release Pull Request | [Link](https://gh.io/AAksvvr) |\n';
+              ISSUE_BODY += '| Integration tests    | [Link](https://gh.io/AAkr65h) |\n';
+              ISSUE_BODY += '\n';
+              ISSUE_BODY += timeline;
+              ISSUE_BODY += '\n';
+              ISSUE_BODY += checklist;
+              ISSUE_BODY += '\n';
+              ISSUE_BODY += notes;
+
+              // Create the current release issue
+              await github.rest.issues.create({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                title: ISSUE_TITLE,
+                body: ISSUE_BODY,
+                assignees: [RELEASE_CONDUCTOR],
+              });
+
+              // Close the previous release issue
+              await github.rest.issues.update({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: releaseIssue.number,
+                state: 'closed',
+                state_reason: 'completed',
+              });
+            }

.gitignore

@@ -6,6 +6,7 @@ coverage/
 dist/
 lib/
 lib-esm/
+css/
 public/
 stats.html
 .env

.storybook/main.js

@@ -15,6 +15,10 @@ module.exports = {
         optimizationLevel: 2,
       },
     },
+    {
+      name: 'storybook-css-modules', // TODO: replace with @storybook/addon-styling for storybook v7
+      options: {cssModulesLoaderOptions: {modules: {localIdentName: 'prc_[local]-[hash:base64:5]'}}},
+    },
   ],
   core: {
     builder: {

.storybook/preview.js

@@ -2,6 +2,12 @@ import {addons} from '@storybook/addons'
 import {withThemeProvider, withSurroundingElements, toolbarTypes} from '../src/utils/story-helpers'
 import {PrimerBreakpoints} from '../src/utils/layout'
 
+// primitives v8
+import './primitives-v8.css'
+// primitives v7 for fallback, commented out by default
+// uncomment it for testing
+// import './primitives-v7.css'
+
 export const globalTypes = toolbarTypes
 export const decorators = [withThemeProvider, withSurroundingElements]
 

.storybook/primitives-v7.css

@@ -0,0 +1,2 @@
+@import '@primer/css/dist/primitives.css';
+@import '@primer/css/dist/color-modes.css';