Merge branch 'main' into mp/add-actionbar-and-actionmenu-stories

.changeset/odd-singers-hammer.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update Blankslate description text to always be centered

.changeset/tender-dodos-walk.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Treevieew):do not add aria-describedby attribute when empty leading/trailing visual

.changeset/thirty-worms-accept.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move ButtonGroup css module feature flag to staff

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

@@ -108,5 +108,7 @@ Some behaviors can be implemented as vanilla JavaScript without introducing addi
 In general, _portions of behaviors_ that affect or rely on **user interactions and events**, **shared state**, or **CSS styles** should be kept in React Hooks. Parts of the behavior that can be implemented in isolation of these concepts should be built with no dependency on React or other libraries.
 
 [^1]: https://codesandbox.io/s/demo-styling-custom-element-g973d?file=/src/index.tsx
+
 [^2]: https://github.com/github/details-dialog-element/blob/main/src/index.ts#L195
+
 [^3]: https://github.com/github/details-dialog-element#details-dialog-close

contributor-docs/migrating-to-css-modules.md

@@ -21,7 +21,6 @@ This guide outlines the steps to follow when refactoring Primer React components
 
 - **Verify VRT (Visual Regression Testing) Coverage:**
   - Check for missing VRT coverage. We utilize the VRT tests to make sure we're matching styling in production with current expectations. Components should have a Storybook story for every "feature" or option available that impacts the UI for VRT to capture in a screenshot.
-  - Make sure there are `dev` stories for any edge cases spotted in production for the component (ie. `sx` prop, custom className, styled system attributes). `dev` stories may include things that we wouldn't normally recommend for the purpose of stress testing what happens when PRC components are overridden with custom styles.
 - **Ensure All Visual Changes Are Completed:**
   - Make necessary visual changes **before** creating the CSS Modules refactor PR.
 
@@ -121,11 +120,65 @@ This guide outlines the steps to follow when refactoring Primer React components
       expect(render(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
     })
     ```
-- **Regression Testing:**
-  - Validate that no visual regressions occur when the feature flag is enabled. The `vrt*` tests are setup to compare the feature flagged component with the original component and will fail if there is a mismatch.
 - **Handling `sx` Prop:**
   - Confirm the `sx` prop behaves correctly with the feature flag enabled.
 
+#### Visual regression testing
+
+Validate that no visual regressions occur when the feature flag is enabled. The `vrt*` tests are setup to compare the feature flagged component with the original component and will fail if there is a mismatch.
+
+- Add `dev` stories for any edge cases spotted in production for the component (ie. `sx` prop, custom className, styled system attributes). `dev` stories may include things that we wouldn't normally recommend for the purpose of stress testing what happens when PRC components are overridden with custom styles.
+- Setup VRT tests for `dev` stories. Copy an existing test in the corresponding test file in the [e2e directory](https://github.com/primer/react/tree/main/e2e/components) and update the id to match the new `dev` story.
+
+Example test file:
+
+```ts
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+const stories = [
+  {
+    title: 'Dev: Test color',
+    id: 'components-{componentname}-dev--customcolor',
+  },
+] as const
+
+test.describe('ComponentName', () => {
+  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({animations: 'disabled'})).toMatchSnapshot(
+              `ComponentName.${story.title}.${theme}.png`,
+            )
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
+})
+```
+
 ---
 
 ## Releasing a Component

e2e/components/BranchName.test.ts

@@ -2,110 +2,58 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('BranchName', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-branchname--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`BranchName.Default.${theme}.png`)
-
-          // Focus state
-          await page.keyboard.press('Tab')
-          expect(await page.screenshot()).toMatchSnapshot(`BranchName.Default.${theme}.focus.png`)
-        })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-branchname--default',
+    focus: true,
+  },
+  {
+    title: 'Not A Link',
+    id: 'components-branchname-features--not-a-link',
+    focus: false,
+  },
+  {
+    title: 'With A Branch Icon',
+    id: 'components-branchname-features--with-branch-icon',
+    focus: false,
+  },
+] as const
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-branchname--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+test.describe('BranchName', () => {
+  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,
               },
-            },
-          })
-        })
-      })
-    }
-  })
-
-  test.describe('Not A Link', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-branchname-features--not-a-link',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`BranchName.Not A Link.${theme}.png`)
-        })
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-branchname-features--not-a-link',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
-              },
-            },
-          })
-        })
-      })
-    }
-  })
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`)
 
-  test.describe('With A Branch Icon', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-branchname-features--with-branch-icon',
-            globals: {
-              colorScheme: theme,
-            },
+            // Focus state
+            if (story.focus) {
+              await page.keyboard.press('Tab')
+              expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`)
+            }
           })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`BranchName.With A Branch Icon.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-branchname-features--with-branch-icon',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations({
-            rules: {
-              'color-contrast': {
-                enabled: theme !== 'dark_dimmed',
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
               },
-            },
+            })
+            await expect(page).toHaveNoViolations()
           })
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })