Merge branch 'main' into 3688-remove-wildcard-exports

.changeset/angry-pants-brush.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add `className` prop to `FormControl.Label` component

.changeset/grumpy-hairs-look.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add support for `aria-disabled` in `Button`

.changeset/lucky-lamps-invite.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add `classname` prop support to `ActionList.Description` component

.changeset/odd-zoos-judge.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update confirmation dialog body to default color. Removing the muted color override.

.changeset/pre.json

@@ -11,6 +11,8 @@
     "example-theming": "0.0.0"
   },
   "changesets": [
+    "angry-brooms-knock",
+    "angry-pants-brush",
     "angry-tigers-jump",
     "beige-schools-kneel",
     "big-pumas-sit",
@@ -49,6 +51,7 @@
     "good-years-attack",
     "green-poems-play",
     "green-schools-smell",
+    "grumpy-hairs-look",
     "happy-fireants-mate",
     "honest-ligers-fly",
     "hot-baboons-allow",
@@ -60,6 +63,7 @@
     "little-bats-approve",
     "long-pans-travel",
     "lovely-days-march",
+    "lucky-lamps-invite",
     "lucky-oranges-camp",
     "mighty-parrots-carry",
     "modern-cooks-invite",
@@ -68,32 +72,39 @@
     "new-shirts-beam",
     "nice-moles-know",
     "odd-rings-applaud",
+    "odd-zoos-judge",
     "olive-donkeys-exercise",
     "orange-steaks-do",
+    "perfect-fishes-camp",
     "pink-actors-cross",
     "plenty-books-agree",
     "purple-apricots-relax",
     "quick-adults-buy",
     "quick-feet-sip",
     "quiet-rules-rescue",
+    "real-seahorses-grab",
     "selectpanel-announcements",
     "selfish-carpets-breathe",
     "serious-sheep-love",
     "serious-terms-sniff",
     "seven-scissors-explain",
+    "shiny-cheetahs-flash",
+    "shiny-otters-call",
     "short-boats-cover",
     "silent-fireants-kneel",
     "silent-planes-grab",
     "silly-weeks-clap",
     "silver-cheetahs-compare",
     "six-owls-walk",
     "sixty-olives-glow",
+    "slimy-sloths-whisper",
     "slow-walls-drum",
     "soft-tips-chew",
     "sour-cooks-dress",
     "sour-cycles-warn",
     "spicy-eggs-melt",
     "spicy-flies-sniff",
+    "spicy-pants-breathe",
     "spotty-melons-sit",
     "stale-lizards-report",
     "stale-pets-tan",
@@ -103,6 +114,7 @@
     "tame-boats-hide",
     "ten-gifts-own",
     "ten-masks-smoke",
+    "thin-keys-move",
     "thin-planes-grow",
     "thirty-pets-impress",
     "thirty-tips-bow",
@@ -119,6 +131,7 @@
     "wet-apples-hide",
     "wet-otters-pull",
     "wicked-books-occur",
+    "wicked-ties-walk",
     "yellow-tools-call",
     "young-meals-worry"
   ]

.changeset/shiny-cheetahs-flash.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: ActionList Group className prop

.changeset/slimy-sloths-whisper.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(ProgressBar): add aria-valuetext attribute

.changeset/spicy-pants-breathe.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update CSS styles for CounterLabel to allow overrides for color, background color

.changeset/thin-keys-move.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add 'className' prop to `Dialog` component

.changeset/three-jokes-bow.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Make sure all components accept `className` as a prop on outermost component element.

.changeset/wicked-ties-walk.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add `className` prop support to `Textarea` component

.eslintrc.js

@@ -238,6 +238,7 @@ module.exports = {
         'react/jsx-no-undef': 'off',
         'react/jsx-key': 'off',
         'react/jsx-no-comment-textnodes': 'off',
+        'react-hooks/rules-of-hooks': 'off',
         'import/no-anonymous-default-export': 'off',
         'prettier/prettier': 'off',
         // These a11y rules should eventually be re-enabled

.gitignore

@@ -37,3 +37,6 @@ blob-report
 
 # TypeScript
 *.tsbuildinfo
+
+# ESLint
+.eslintcache

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

@@ -0,0 +1,137 @@
+# Primer React Styled Components to CSS Modules Refactoring Guide
+
+This guide outlines the steps to follow when refactoring Primer React components from Styled Components to CSS Modules.
+
+---
+
+## Table of Contents
+
+- [Primer React Styled Components to CSS Modules Refactoring Guide](#primer-react-styled-components-to-css-modules-refactoring-guide)
+  - [Table of Contents](#table-of-contents)
+  - [Before Refactoring a Component](#before-refactoring-a-component)
+  - [How to Migrate](#how-to-migrate)
+    - [Refactoring Styled-Components to CSS Modules](#refactoring-styled-components-to-css-modules)
+    - [When Refactoring a Component](#when-refactoring-a-component)
+    - [Testing the Migration](#testing-the-migration)
+  - [Releasing a Component](#releasing-a-component)
+
+---
+
+## Before Refactoring a Component
+
+- **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.
+
+---
+
+## How to Migrate
+
+### Refactoring Styled-Components to CSS Modules
+
+- **Replace `${get('...')}` Syntax:**
+
+  - Migrate these to CSS variables find the appropriate variable in [our primitives docs](https://primer.style/foundations/primitives/color).
+
+  ```diff
+    {
+  -   color: `${get('colors.fg.default')}`
+  +   color: var(--fgColor-default)
+    }
+  ```
+
+  - No need for fallbacks in CSS Modules.
+
+### When Refactoring a Component
+
+1. **Check for `className` and `style` Prop:**
+   - Ensure the component accepts a `className` _on the top DOM level only_ for styling from outside of primer/react.
+   - Ensure the component accepts a `style` prop for more dynamic styling like positioning.
+2. **Feature Flagging:**
+
+   - Add a feature flag to toggle the `sx` prop for controlled rollout (staff shipping). How it's used will be based on the implementation of the component. For most you'll be able to `useFeatureFlag` and toggle between components. For more complex styled components, you can use the utility `toggleStyledComponent` which will render based on the feature flag string provided.
+
+     ```jsx
+     /* When there is an exisiting styled component, use the `toggleStyledComponent` utility. */
+     const StyledDiv = toggleStyledComponent(
+       'primer_react_css_modules_team',
+       'div',
+       styled.div`
+         display: flex;
+
+         ${sx};
+       `,
+     )
+     const enabled = useFeatureFlag('primer_react_css_modules_team')
+     return <StyledDiv className={clsx({[classes.DivStyle]: enabled})} {...props} />
+     ```
+
+3. **Create CSS Module:**
+   - Add a corresponding `{Component}.module.css` file.
+4. **Import CSS Modules:**
+
+   - Use the CSS module in the component.
+
+     ```js
+     import classes from './{Component}.module.css'
+     ```
+
+   - Add CSS classes behind the `primer_react_css_modules_team` feature flag. For guidelines on how to write styles, see our [CSS authoring guide](./authoring-css.md)
+
+5. **Ensure Component still accepts `sx` styling**
+
+   - Until we migrate all uses of `sx`, we need to ensure the component will accept `sx` props inside the feature flag. This will often default to using the `Box` component if an `sx` prop is passed in.
+
+     ```jsx
+     const enabled = useFeatureFlag('primer_react_css_modules_team')
+     if (enabled) {
+       if (sxProp !== defaultSxProp) {
+         /* Use of Box here to support sx props */
+         return <Box as="div" sx={sxProp} {...props} />
+       }
+       return <div {...props} />
+     }
+     ```
+
+6. **Ensure Component accepts `className` along with our CSS Module class name**
+
+### Testing the Migration
+
+- **Support for `className`:**
+  - Ensure the component works properly with the `className` prop. This will need a feature flag turned on when testing like this.
+    ```js
+    it('should support `className` on the outermost element', () => {
+      const Element = () => <Component className={'test-class-name'} />
+      const FeatureFlagElement = () => {
+        return (
+          <FeatureFlags
+            flags={{
+              primer_react_css_modules_team: true,
+              primer_react_css_modules_staff: true,
+              primer_react_css_modules_ga: true,
+            }}
+          >
+            <Element />
+          </FeatureFlags>
+        )
+      }
+      expect(render(<Element />).container.firstChild).toHaveClass('test-class-name')
+      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.
+
+---
+
+## Releasing a Component
+
+- **Merge Process:**
+  - Once merged into Dotcom, the component will be part of the `primer_react_css_modules_team` rollout.
+  - We progress components through levels of feature flags as we roll them out to make sure we address any bugs with the minimum amount of audience.
+- **Monitor Team Ship:**
+  - Watch for any issues or regressions during the team ship phase. If anything is spotted, [create an issue in `github/primer`](https://github.com/github/primer/issues/new?template=04-bug-report.yml) and let us know in the [#primer slack channel](https://github-grid.enterprise.slack.com/archives/CSGAVNZ19).

e2e/components/ActionList.test.ts

@@ -712,4 +712,32 @@ test.describe('ActionList', () => {
       })
     }
   })
+
+  test.describe('Group Heading with Classname', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-dev--group-heading-custom-classname',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Group Heading with Classname.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-actionlist-dev--group-heading-custom-classname',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

examples/app-router/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.0.0-rc.10",
+    "@primer/react": "37.0.0-rc.11",
     "next": "^14.2.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/codesandbox/package.json

@@ -15,12 +15,12 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "@primer/react": "37.0.0-rc.10",
+    "@primer/react": "37.0.0-rc.11",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",

examples/consumer-test/package.json

@@ -6,10 +6,10 @@
     "check": "tsc --noEmit"
   },
   "dependencies": {
-    "@types/react": "^18.2.14",
+    "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.19",
     "@types/styled-components": "^5.1.11",
-    "@primer/react": "37.0.0-rc.10",
+    "@primer/react": "37.0.0-rc.11",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "styled-components": "^5.3.11",

examples/theming/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^19.9.0",
-    "@primer/react": "37.0.0-rc.10",
+    "@primer/react": "37.0.0-rc.11",
     "clsx": "^1.2.1",
     "next": "^14.2.10",
     "react": "^18.3.1",