Merge branch 'main' into css_modules_banner_remove_flag

.changeset/brave-cheetahs-prove.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move Select component from team to staff flag

.changeset/chilled-goats-visit.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move Spinner component from team to staff flag

.changeset/grumpy-cherries-deny.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Move Details component from team to staff flag

e2e/components/Textarea.test.ts

@@ -43,6 +43,10 @@ const stories = [
     id: 'components-textarea-features--custom-width',
     title: 'Custom Width',
   },
+  {
+    id: 'components-textarea-dev--dev-default',
+    title: 'Dev Default',
+  },
 ] as const
 
 test.describe('Textarea', () => {

examples/app-router/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.4.0",
+    "@primer/react": "37.5.0",
     "next": "^14.2.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

examples/codesandbox/package.json

@@ -20,7 +20,7 @@
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.2.1",
-    "@primer/react": "37.4.0",
+    "@primer/react": "37.5.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",

examples/consumer-test/package.json

@@ -9,7 +9,7 @@
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.2.19",
     "@types/styled-components": "^5.1.11",
-    "@primer/react": "37.4.0",
+    "@primer/react": "37.5.0",
     "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.4.0",
+    "@primer/react": "37.5.0",
     "clsx": "^1.2.1",
     "next": "^14.2.10",
     "react": "^18.3.1",

packages/react/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @primer/react
 
+## 37.5.0
+
+### Minor Changes
+
+- [#5253](https://github.com/primer/react/pull/5253) [`729c0fa`](https://github.com/primer/react/commit/729c0fac9a8d84f20bb77c046063837b38e90d37) Thanks [@hussam-i-am](https://github.com/hussam-i-am)! - Deprecate width, minWidth and maxWidth props from TextInput
+
+- [#5169](https://github.com/primer/react/pull/5169) [`a2efba0`](https://github.com/primer/react/commit/a2efba0079304e25dd700523dbfa35fab56249ad) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(ActionList): do not truncate description by default
+
+- [#5254](https://github.com/primer/react/pull/5254) [`ac6ddcd`](https://github.com/primer/react/commit/ac6ddcd4b15526dd6f5ad6072a4daa57087eb1e7) Thanks [@hussam-i-am](https://github.com/hussam-i-am)! - Convert UnstyledTextInput to use CSS Modules behing feature flag
+
+- [#5246](https://github.com/primer/react/pull/5246) [`c4ecb73`](https://github.com/primer/react/commit/c4ecb7312c1f595361a6b5a247c73af894c0be54) Thanks [@keithamus](https://github.com/keithamus)! - Migrate DialogV1 to CSS Modules
+
+### Patch Changes
+
+- [#5277](https://github.com/primer/react/pull/5277) [`a9088e6`](https://github.com/primer/react/commit/a9088e60b6f60ee13e309b7c263def781caba97e) Thanks [@langermank](https://github.com/langermank)! - Fix `TreeViewItem` folder icon color in legacy fallback theme + update VRT
+
+- [#4745](https://github.com/primer/react/pull/4745) [`3f508c7`](https://github.com/primer/react/commit/3f508c7778839a8bfd659adcb21a1eda558e0f0a) Thanks [@cihad](https://github.com/cihad)! - UnderlineNav: Display loading counters only for items with the "counter" prop.
+
+- [#5283](https://github.com/primer/react/pull/5283) [`d6ea909`](https://github.com/primer/react/commit/d6ea909eb3ef8c2ae178ee590865b80108fa3390) Thanks [@jonrohan](https://github.com/jonrohan)! - Move VisuallyHidden component from team to staff flag
+
+- [#5292](https://github.com/primer/react/pull/5292) [`d3959f3`](https://github.com/primer/react/commit/d3959f3685bcf8aff908efe69cbf80c92c85483c) Thanks [@jonrohan](https://github.com/jonrohan)! - Move Stack component from team to staff flag
+
+- [#5280](https://github.com/primer/react/pull/5280) [`973130e`](https://github.com/primer/react/commit/973130e9119e1f592345d3e67c1b61f37957191b) Thanks [@jonrohan](https://github.com/jonrohan)! - Move Checkbox CSS module feature flag from staff to ga
+
 ## 37.4.0
 
 ### Minor Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/react",
-  "version": "37.4.0",
+  "version": "37.5.0",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",

packages/react/src/Checkbox/Checkbox.tsx

@@ -163,7 +163,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
     },
     ref,
   ): ReactElement => {
-    const enabled = useFeatureFlag('primer_react_css_modules_staff')
+    const enabled = useFeatureFlag('primer_react_css_modules_ga')
     const checkboxRef = useProvidedRefOrCreate(ref as React.RefObject<HTMLInputElement>)
     const checkboxGroupContext = useContext(CheckboxGroupContext)
     const handleOnChange: ChangeEventHandler<HTMLInputElement> = e => {

packages/react/src/Details/Details.tsx

@@ -8,7 +8,7 @@ import {clsx} from 'clsx'
 import classes from './Details.module.css'
 import {useMergedRefs} from '../internal/hooks/useMergedRefs'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
 
 const StyledDetails = toggleStyledComponent(
   CSS_MODULES_FEATURE_FLAG,

packages/react/src/DialogV1/Dialog.module.css

@@ -0,0 +1,67 @@
+.Overlay {
+  &::before {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 99;
+    display: block;
+    cursor: default;
+    content: ' ';
+    background: var(--overlay-backdrop-bgColor);
+  }
+}
+
+.CloseIcon {
+  position: absolute;
+  top: var(--base-size-8);
+  right: var(--base-size-16);
+}
+
+.Dialog {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  z-index: 999;
+  max-height: 80vh;
+  margin: 10vh auto;
+  background-color: var(--bgColor-default);
+  border-radius: var(--borderRadius-medium);
+  outline: none;
+  box-shadow: var(--shadow-floating-large);
+  transform: translateX(-50%);
+
+  &:where([data-width='default']) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 440px;
+  }
+
+  &:where([data-width='narrow']) {
+    width: 320px;
+  }
+
+  &:where([data-width='wide']) {
+    /* stylelint-disable-next-line primer/responsive-widths */
+    width: 640px;
+  }
+
+  @media screen and (max-width: 750px) {
+    width: 100dvw;
+    height: 100dvh;
+    margin: 0;
+    border-radius: 0;
+  }
+}
+
+.Header {
+  display: flex;
+  padding: var(--base-size-16);
+  background: var(--bgColor-muted);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
+
+  @media screen and (max-width: 750px) {
+    border-radius: 0;
+  }
+}

packages/react/src/DialogV1/Dialog.test.tsx

@@ -4,6 +4,7 @@ import {Dialog} from '../DialogV1'
 import {render as HTMLRender, fireEvent} from '@testing-library/react'
 import axe from 'axe-core'
 import {behavesAsComponent} from '../utils/testing'
+import {FeatureFlags} from '../FeatureFlags'
 
 /* Dialog Version 1*/
 
@@ -113,6 +114,25 @@ describe('Dialog', () => {
     behavesAsComponent({Component: Dialog.Header})
   })
 
+  it('should support `className` on the Dialog element', () => {
+    const Element = () => <Dialog isOpen 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(HTMLRender(<Element />).container.children[1]).toHaveClass('test-class-name')
+    expect(HTMLRender(<FeatureFlagElement />).container.children[1]).toHaveClass('test-class-name')
+  })
+
   it('should have no axe violations', async () => {
     const spy = jest.spyOn(console, 'warn').mockImplementation()
     const {container} = HTMLRender(comp)