Merge a396ff4 into 5746c74

.changeset/big-days-obey.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Changes the alignment of the validation message icon to be vertically center-aligned with the first line of text.

.changeset/brave-cherries-march.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+ActionMenu: Calling `event.preventDefault` inside `onSelect` of `ActionList.Item` will prevent the default behavior of closing the menu

.changeset/early-beds-whisper.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Add filter input label and description

.changeset/eleven-sloths-laugh.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move  `lodash.isempty` and `lodash.isobject` from `devDependencies` to `dependencies`

.changeset/fluffy-pants-play.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Loosen `@primitives` dependency

.changeset/khaki-walls-applaud.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixing toggle bug on Treeview when it initially receives focus

.changeset/pink-beds-fetch.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Remove `aria-hidden=true` from `span`s with required asterisk

.changeset/rare-humans-watch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Announce changes to screen readers

.changeset/rotten-dogs-hang.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Remove chroma-js dependency. Companion to #3243

.changeset/small-queens-vanish.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+SelectPanel: Add `title` prop

.changeset/tiny-melons-march.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add @primer/react/experimental entrypoint as an alternative to drafts

.changeset/weak-jokes-chew.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+FilteredActionList now uses new ActionList as a base, and SelectPanel reflects those changes.

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

@@ -6,12 +6,19 @@ on:
     types: [opened, edited]
   issue_comment:
     types: [created, edited]
+  discussion:
+    types: [created, edited]
+
+permissions:
+  issues: write
+  pull-requests: write
+  discussions: write
 
 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 }}
+    if: ${{ github.event.issue || github.event.pull_request || github.event.discussion  }}
     steps:
       - name: Get action 'github/accessibility-alt-text-bot'
-        uses: github/accessibility-alt-text-bot@v1.0.0
+        uses: github/accessibility-alt-text-bot@v1.2.0

.github/workflows/ci.yml

@@ -3,10 +3,12 @@ on:
   push:
     branches:
       - main
+      - next-major
   pull_request:
   merge_group:
     branches:
       - main
+      - next-major
     types:
       - checks_requested
 
@@ -158,7 +160,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx build-storybook
+        run: npx storybook build
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook
@@ -204,7 +206,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx build-storybook
+        run: npx storybook build
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook

.github/workflows/release-notification.yml

@@ -0,0 +1,15 @@
+name: Release notification
+on:
+  release:
+    types:
+      - published
+
+jobs:
+  notify:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: gr2m/release-notifier-action@v1
+        with:
+          app_id: ${{ secrets.RELEASE_NOTIFIER_APP_ID }}
+          private_key: ${{ secrets.RELEASE_NOTIFIER_APP_PRIVATE_KEY }}
+          dispatch_event_type: 'release:primer/react'

.github/workflows/release-schedule.yml

@@ -1,6 +1,8 @@
 name: Release Schedule
 on:
   workflow_dispatch:
+  schedule:
+    - cron: '30 13 * * MON'
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.workflow_run.head_branch }}
@@ -86,7 +88,7 @@ jobs:
 
             // Issue IDs
             const id = `primer-release-schedule:${format(start, 'yyyy-MM-dd')}`;
-            const previousId = `primer-release-schedule:${format(previousStart, 'yyyy-M-dd')}`;
+            const previousId = `primer-release-schedule:${format(previousStart, 'yyyy-MM-dd')}`;
 
             core.startGroup(`Previous schedule: ${previousId}`);
             core.info(`Start: ${previousStart}`);
@@ -105,7 +107,7 @@ jobs:
               '<!-- Provide updates for release activities, like cutting releases and different integration points -->',
               '',
               ...eachDayOfInterval({ start, end }).map((day) => {
-                return `- ${format(day, 'EEEE do')}`;
+                return `- ${format(day, 'EEEE, LLLL do')}`;
               }),
               '',
             ].join('\n');
@@ -191,7 +193,7 @@ jobs:
               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 += `| 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';

.github/workflows/vrt.yml

@@ -42,7 +42,7 @@ jobs:
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
-        run: npx build-storybook
+        run: npx storybook build
       - name: Install browsers
         run: npx playwright install --with-deps
       - name: Run storybook

.storybook/main.js

@@ -4,7 +4,12 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
-    {name: '@storybook/addon-essentials', options: {backgrounds: false}},
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        backgrounds: false,
+      },
+    },
     '@storybook/addon-storysource',
     '@storybook/addon-interactions',
     '@storybook/addon-a11y',
@@ -16,26 +21,33 @@ module.exports = {
       },
     },
     {
-      name: 'storybook-css-modules', // TODO: replace with @storybook/addon-styling for storybook v7
-      options: {cssModulesLoaderOptions: {modules: {localIdentName: 'prc_[local]-[hash:base64:5]'}}},
-    },
-  ],
-  core: {
-    builder: {
-      name: 'webpack5',
+      name: 'storybook-css-modules',
+      // TODO: replace with @storybook/addon-styling for storybook v7
       options: {
-        fsCache: true,
+        cssModulesLoaderOptions: {
+          modules: {
+            localIdentName: 'prc_[local]-[hash:base64:5]',
+          },
+        },
       },
     },
-  },
+  ],
   features: {
     interactionsDebugger: true,
     storyStoreV7: true,
     buildStoriesJson: true,
   },
-  framework: '@storybook/react',
-  reactOptions: {
-    fastRefresh: true,
-    strictMode: true,
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {
+      fastRefresh: true,
+      strictMode: true,
+      builder: {
+        fsCache: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: true,
   },
 }

.storybook/preview.js

@@ -23,12 +23,6 @@ Object.entries(PrimerBreakpoints).forEach(([viewport, value]) => {
   }
 })
 
-addons.setConfig({
-  // Some stories may set up keyboard event handlers, which can be interfered
-  // with by these keyboard shortcuts.
-  enableShortcuts: false,
-})
-
 export const parameters = {
   actions: {argTypesRegex: '^on[A-Z].*'},
   html: {

contributor-docs/adrs/adr-010-behavior-isolation.md

@@ -84,7 +84,7 @@ Primer React's [recent addition of the Relative Time component](https://github.c
 
 ```typescript
 const root = (typeof globalThis !== 'undefined' ? globalThis : window) as typeof window
-const HTMLElement = root.HTMLElement || (null as unknown as typeof window['HTMLElement'])
+const HTMLElement = root.HTMLElement || (null as unknown as (typeof window)['HTMLElement'])
 ```
 
 These lines could also be added to the global context, to avoid adding it to each element.

docs/content/PageLayout.mdx

@@ -241,14 +241,14 @@ navigation container is used for.
 
 ### With `aria-label`
 
-Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
+Using `aria-label` along with `PageLayout.Header` or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
 
 ```jsx live
 <PageLayout>
   <PageLayout.Header aria-label="header">
     <Placeholder label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Content aria-label="content">
+  <PageLayout.Content>
     <Placeholder label="Content" height={240} />
   </PageLayout.Content>
   <PageLayout.Pane>
@@ -262,15 +262,15 @@ Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `Pag
 
 ### With `aria-labelledby`
 
-Using `aria-labelledby` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for each landmark role by using the given `id` to associate the landmark with the content with the corresponding `id`. This is helpful when you have a visible item that visually communicates the type of content which you would like to associate to the landmark itself.
+Using `aria-labelledby` along with `PageLayout.Header` or `PageLayout.Footer` creates a unique label for each landmark role by using the given `id` to associate the landmark with the content with the corresponding `id`. This is helpful when you have a visible item that visually communicates the type of content which you would like to associate to the landmark itself.
 
 ```jsx live
 <PageLayout>
   <PageLayout.Header aria-labelledby="header-label">
     <Placeholder id="header-label" label="Header" height={64} />
   </PageLayout.Header>
-  <PageLayout.Content aria-labelledby="main-label">
-    <Placeholder id="main-label" label="Content" height={240} />
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
   </PageLayout.Content>
   <PageLayout.Pane>
     <Placeholder label="Pane" height={120} />
@@ -300,15 +300,35 @@ Using `aria-labelledby` along with `PageLayout.Header`, `PageLayout.Content`, or
 </PageLayout>
 ```
 
+### With `<main>` landmark
+
+```jsx live
+<PageLayout>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Content>
+    <main>
+      <Placeholder label="Content" height={240} />
+    </main>
+  </PageLayout.Content>
+  <PageLayout.Pane resizable>
+    <Placeholder label="Pane" height={120} />
+  </PageLayout.Pane>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
 ## Accessibility
 
-The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header`, `PageLayout.Content`, and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page.
+The `PageLayout` component uses [landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role) for `PageLayout.Header` and `PageLayout.Footer` in order to make it easier for screen reader users to navigate between sections of the page.
 
-| Component            | Landmark role                                                                                           |
-| :------------------- | :------------------------------------------------------------------------------------------------------ |
-| `PageLayout.Header`  | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role)           |
-| `PageLayout.Content` | [`main`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/main_role)               |
-| `PageLayout.Footer`  | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) |
+| Component           | Landmark role                                                                                           |
+| :------------------ | :------------------------------------------------------------------------------------------------------ |
+| `PageLayout.Header` | [`banner`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/banner_role)           |
+| `PageLayout.Footer` | [`contentinfo`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/contentinfo_role) |
 
 Each component may be labeled through either `aria-label` or `aria-labelledby` in order to provide a unique label for the landmark. This can be helpful when there are multiple landmarks of the same type on the page.
 
@@ -318,6 +338,14 @@ Each component may be labeled through either `aria-label` or `aria-labelledby` i
 - [WCAG, ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
 - [MDN, Landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role)
 
+### `PageLayout.Content`
+
+The `PageLayout.Content` component does not provide a default `<main>` landmark role.
+If you want to utilize a `<main>` landmark with this component, you may supply one directly [as a child of `PageLayout.Content`](#with-main-landmark).
+When using `<main>` ensure that no other `<main>` landmark exists on the page, as there should only be one per page.
+
+- [`main` usage](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/main.html)
+
 ### `PageLayout.Pane`
 
 The `PageLayout.Pane` component does not provide a default landmark role as the

docs/content/SelectPanel.mdx

@@ -12,20 +12,18 @@ A `SelectPanel` provides an anchor that will open an overlay with a list of sele
 
 ```javascript live noinline
 function getColorCircle(color) {
-  return function () {
-    return (
-      <Box
-        borderWidth="1px"
-        borderStyle="solid"
-        bg={color}
-        borderColor={color}
-        width={14}
-        height={14}
-        borderRadius={10}
-        margin="auto"
-      />
-    )
-  }
+  return (
+    <Box
+      borderWidth="1px"
+      borderStyle="solid"
+      bg={color}
+      borderColor={color}
+      width={14}
+      height={14}
+      borderRadius={10}
+      margin="auto"
+    />
+  )
 }
 
 const items = [