Merge branch 'main' into joshblack/update-mono-font

.changeset/fresh-hotels-begin.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Sync theme in effect

.changeset/khaki-rules-breathe.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+Use `aria-required` instead of `required` on required form elements
+
+<!-- Changed components: TextInput, Textarea -->

.changeset/many-ants-pump.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Adapts Blankslate to render proportionally in narrow areas.
+
+<!-- Changed components: Blankslate -->

.changeset/rotten-apples-bake.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+use <BaseStyles> in confirm()

.changeset/smooth-tips-breathe.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': minor
+---
+
+Supports inactive ActionList items by letting users pass the required message to the `inactiveText` prop.
+
+<!-- Changed components: ActionList, ActionMenu, NavList -->

.changeset/sweet-onions-heal.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixed confirm() leaving <div>s in the DOM.

.changeset/weak-balloons-search.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Portal avoids useless createElement

.github/workflows/stale.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     if: ${{ github.repository == 'primer/react' }}
     steps:
-      - uses: actions/stale@v8
+      - uses: actions/stale@v9
         with:
           # General settings
           days-before-stale: 60

.storybook/main.js

@@ -50,4 +50,7 @@ module.exports = {
   docs: {
     autodocs: false,
   },
+  typescript: {
+    reactDocgen: 'react-docgen',
+  },
 }

docs/content/overriding-styles.mdx

@@ -4,7 +4,7 @@ title: Overriding styles with the sx prop
 
 Our goal with Primer React is to hit the sweet spot between providing too little and too much styling flexibility; too little and the design system is too rigid, and too much and it becomes too difficult to maintain a consistent style. Our components are designed to cover common usage patterns, but sometimes a component just isn't _quite_ flexible enough to look the way you need it to look. For those cases, we provide the `sx` prop.
 
-The `sx` prop allows ad-hoc styling that is still theme-aware. Declare the styles you want to apply in CamelCase object notation, and try to use theme values in appropriate CSS properties when possible. If you've passed a custom theme using `ThemeProvider` or a `theme` prop, the `sx` prop will honor the custom theme. For more information on theming in Primer React, check out [the Primer Theme documentation](/primer-theme).
+The `sx` prop allows ad-hoc styling that is still theme-aware. Declare the styles you want to apply in camelCase object notation, and try to use theme values in appropriate CSS properties when possible. If you've passed a custom theme using `ThemeProvider` or a `theme` prop, the `sx` prop will honor the custom theme. For more information on theming in Primer React, check out [the Primer Theme documentation](/primer-theme).
 
 ## When to use the `sx` prop
 

e2e/components/ActionList.test.ts

@@ -454,4 +454,64 @@ test.describe('ActionList', () => {
       })
     }
   })
+
+  test.describe('Inactive Item', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-features--inactive-item',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `ActionList.Inactive Item.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-features--inactive-item',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Inactive Multiselect', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-features--inactive-multiselect',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `ActionList.Inactive Multiselect.${theme}.png`,
+          )
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-features--inactive-multiselect',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

e2e/components/ActionMenu.test.ts

@@ -31,6 +31,41 @@ test.describe('ActionMenu', () => {
     }
   })
 
+  test.describe('Inactive Items', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionmenu-features--links-and-actions',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+            `ActionMenu.Links And Actions.${theme}.png`,
+          )
+
+          // Open menu
+          await page.locator('button', {hasText: 'Open menu'}).waitFor()
+          await page.getByRole('button', {name: 'Open menu'}).click()
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot()
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionmenu-features--links-and-actions',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
   test.describe('Links And Actions', () => {
     for (const theme of themes) {
       test.describe(theme, () => {