Merge branch 'francinelucca/3477-prcdialog-best-practice-prevent-dial…

…og-from-closing-on-accidental-mouse-release' of github.com:primer/react into francinelucca/3477-prcdialog-best-practice-prevent-dialog-from-closing-on-accidental-mouse-release

.changeset/dirty-pianos-wash.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Change the Link component feature flag from primer_react_css_modules_staff to primer_react_css_modules_ga

.changeset/dull-turkeys-cheer.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Removes the feature flag from the `Blankslate` component to always render with CSS modules.

.changeset/eighty-houses-beg.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+fix(Dialog): track mousedown event to prevent accidental closing

.changeset/flat-avocados-cheer.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Utilizes `[disabled]` selector instead of `:disabled` in `TooltipV2` to address a false positive

.changeset/odd-rings-applaud.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Update Banner to use CSS Modules behind feature flag

.changeset/selfish-carpets-breathe.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Update tab in UnderlinePanels to set explicit type

.eslintrc.js

@@ -61,6 +61,7 @@ module.exports = {
   // rules which apply to JS, TS, etc.
   rules: {
     'no-shadow': 'off',
+    'react/button-has-type': 'error',
     'react/prop-types': 'off',
     'react/display-name': 'off',
     'react-hooks/exhaustive-deps': 'error',

e2e/components/Banner.test.ts

@@ -77,6 +77,24 @@ test.describe('Banner', () => {
               id: story.id,
               globals: {
                 colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules_team: true,
+                },
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${theme}.png`)
+          })
+
+          test('default (styled-components) @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules_team: false,
+                },
               },
             })
 
@@ -89,6 +107,22 @@ test.describe('Banner', () => {
               id: story.id,
               globals: {
                 colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules_team: true,
+                },
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+
+          test('axe (styled-components) @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+                featureFlags: {
+                  primer_react_css_modules_team: false,
+                },
               },
             })
             await expect(page).toHaveNoViolations()
@@ -101,6 +135,29 @@ test.describe('Banner', () => {
           test(`${name} @vrt`, async ({page}) => {
             await visit(page, {
               id: story.id,
+              globals: {
+                featureFlags: {
+                  primer_react_css_modules_team: true,
+                },
+              },
+            })
+            const width = viewports[name]
+
+            await page.setViewportSize({
+              width,
+              height: 667,
+            })
+            expect(await page.screenshot()).toMatchSnapshot(`Banner.${story.title}.${name}.png`)
+          })
+
+          test(`${name} (styled-components) @vrt`, async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                featureFlags: {
+                  primer_react_css_modules_team: false,
+                },
+              },
             })
             const width = viewports[name]
 

e2e/components/Blankslate.test.ts

@@ -51,24 +51,6 @@ test.describe('Blankslate', () => {
               id: story.id,
               globals: {
                 colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules_ga: true,
-                },
-              },
-            })
-
-            // Default state
-            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${theme}.png`)
-          })
-
-          test('default (styled-components) @vrt', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules_ga: false,
-                },
               },
             })
 
@@ -77,19 +59,6 @@ test.describe('Blankslate', () => {
           })
 
           test('axe @aat', async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                colorScheme: theme,
-                featureFlags: {
-                  primer_react_css_modules_ga: true,
-                },
-              },
-            })
-            await expect(page).toHaveNoViolations()
-          })
-
-          test('axe (styled-components) @aat', async ({page}) => {
             await visit(page, {
               id: story.id,
               globals: {
@@ -106,29 +75,6 @@ test.describe('Blankslate', () => {
           test(`${name} @vrt`, async ({page}) => {
             await visit(page, {
               id: story.id,
-              globals: {
-                featureFlags: {
-                  primer_react_css_modules_ga: true,
-                },
-              },
-            })
-            const width = viewports[name]
-
-            await page.setViewportSize({
-              width,
-              height: 667,
-            })
-            expect(await page.screenshot()).toMatchSnapshot(`Blankslate.${story.title}.${name}.png`)
-          })
-
-          test(`${name} (styled-components) @vrt`, async ({page}) => {
-            await visit(page, {
-              id: story.id,
-              globals: {
-                featureFlags: {
-                  primer_react_css_modules_ga: false,
-                },
-              },
             })
             const width = viewports[name]
 

e2e/components/Link.test.ts

@@ -32,7 +32,7 @@ test.describe('Link', () => {
               globals: {
                 colorScheme: theme,
                 featureFlags: {
-                  primer_react_css_modules_staff: true,
+                  primer_react_css_modules_ga: true,
                 },
               },
             })
@@ -55,7 +55,7 @@ test.describe('Link', () => {
               globals: {
                 colorScheme: theme,
                 featureFlags: {
-                  primer_react_css_modules_staff: true,
+                  primer_react_css_modules_ga: true,
                 },
               },
             })

examples/app-router/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@primer/react": "37.0.0-rc.5",
-    "next": "^14.2.8",
+    "next": "^14.2.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "5.x",

examples/codesandbox/package.json

@@ -26,6 +26,6 @@
     "eslint-plugin-react-refresh": "^0.4.7",
     "styled-components": "5.x",
     "typescript": "^5.4.5",
-    "vite": "^5.2.6"
+    "vite": "^5.2.14"
   }
 }

examples/theming/package.json

@@ -13,7 +13,7 @@
     "@primer/octicons-react": "^19.9.0",
     "@primer/react": "37.0.0-rc.5",
     "clsx": "^1.2.1",
-    "next": "^14.2.8",
+    "next": "^14.2.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "5.x",