Merge branch 'main' into ddoyle2017/update-underlinepanels

.changeset/serious-melons-own.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Pagination: Optimize the page rendering algorithm and prevent layout shifts.

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
     'plugin:primer-react/recommended',
     'plugin:import/typescript',
     'plugin:ssr-friendly/recommended',
+    'plugin:clsx/recommended',
   ],
   settings: {
     react: {

examples/app-router/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.9.1",
+    "@primer/react": "37.10.0",
     "next": "^14.2.15",
     "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.3.3",
-    "@primer/react": "37.9.1",
+    "@primer/react": "37.10.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.7",

examples/theming/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^19.14.0",
-    "@primer/react": "37.9.1",
+    "@primer/react": "37.10.0",
     "clsx": "^1.2.1",
     "next": "^14.2.15",
     "react": "^18.3.1",

package.json

@@ -56,6 +56,7 @@
     "@typescript-eslint/parser": "^7.3.1",
     "eslint": "8.56.0",
     "eslint-import-resolver-typescript": "3.6.1",
+    "eslint-plugin-clsx": "0.0.9",
     "eslint-plugin-github": "5.0.2",
     "eslint-plugin-jest": "28.8.3",
     "eslint-plugin-jsx-a11y": "6.7.1",

packages/react/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @primer/react
 
+## 37.10.0
+
+### Minor Changes
+
+- [#5457](https://github.com/primer/react/pull/5457) [`b1e5699`](https://github.com/primer/react/commit/b1e56994d460ee088508445d28150abc902781a8) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove CSS modules feature flag from ButtonGroup
+
+- [#5458](https://github.com/primer/react/pull/5458) [`b763ecd`](https://github.com/primer/react/commit/b763ecd69c8f024feaaabdc31d8805dd50007736) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove CSS modules feature flag from Details
+
+- [#5463](https://github.com/primer/react/pull/5463) [`b55025c`](https://github.com/primer/react/commit/b55025cf2bf7f349cecb856449508bf822507c6d) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove CSS modules feature flag from Radio
+
+- [#5462](https://github.com/primer/react/pull/5462) [`8b8ec3c`](https://github.com/primer/react/commit/8b8ec3c64fce6f113b81f4169fe9460d1cef1967) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove the CSS module feature flag from Pagehead
+
+### Patch Changes
+
+- [#5488](https://github.com/primer/react/pull/5488) [`e352e19`](https://github.com/primer/react/commit/e352e192dae7ae7b24420f4afae08871536c0484) Thanks [@hectahertz](https://github.com/hectahertz)! - Pagination: Hides the `Pagination` Previous and Next buttons from the accessibility tree when they are disabled.
+
 ## 37.9.1
 
 ### Patch Changes

packages/react/package.json

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

packages/react/src/Pagination/Pagination.module.css

@@ -103,16 +103,8 @@
   box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
 }
 
-.Page[aria-disabled]:first-child,
-.Page[aria-disabled]:hover:first-child {
-  /* stylelint-disable-next-line primer/spacing */
-  margin: 0 2px;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-right: 6px;
-}
-
-.Page[aria-disabled],
-.Page[aria-disabled]:hover,
+.Page[aria-hidden],
+.Page[aria-hidden]:hover,
 .Page[role='presentation'],
 .Page[role='presentation']:hover {
   color: var(--fgColor-disabled);

packages/react/src/Pagination/Pagination.tsx

@@ -91,17 +91,8 @@ const Page = toggleStyledComponent(
       box-shadow: inset 0 0 0 3px ${get('colors.fg.onEmphasis')};
     }
 
-    &[aria-disabled],
-    &[aria-disabled]:hover {
-      margin: 0 2px;
-
-      &:first-child {
-        margin-right: 6px;
-      }
-    }
-
-    &[aria-disabled],
-    &[aria-disabled]:hover,
+    &[aria-hidden],
+    &[aria-hidden]:hover,
     &[role='presentation'],
     &[role='presentation']:hover {
       color: ${get('colors.primer.fg.disabled')}; // check