From a975691c64f85ad7a0d8296b0ce035886ffce179 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 26 Dec 2025 17:49:34 +0000
Subject: [PATCH 1/2] Initial plan


From 0d27451d670ac8ccf2f8dcb7d3ba10adc18eeb1d Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 26 Dec 2025 17:58:35 +0000
Subject: [PATCH 2/2] Replace DialogScrollDisabled class with
 data-dialog-scroll-disabled attribute when perf flag is ON

Co-authored-by: mattcosta7 <8616962+mattcosta7@users.noreply.github.com>
---
 packages/react/src/Dialog/Dialog.module.css |  5 +++--
 packages/react/src/Dialog/Dialog.test.tsx   | 12 ++++++------
 packages/react/src/Dialog/Dialog.tsx        |  8 +++++---
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/react/src/Dialog/Dialog.module.css b/packages/react/src/Dialog/Dialog.module.css
index dbf6df6f12f..c67177f1f5c 100644
--- a/packages/react/src/Dialog/Dialog.module.css
+++ b/packages/react/src/Dialog/Dialog.module.css
@@ -247,10 +247,11 @@ body:not([data-dialog-scroll-optimized]):has(.Dialog.DisableScroll) {
 }
 
 /*
- * PERFORMANCE OPTIMIZATION: Direct class on body - O(1) lookup
+ * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup
  * Active when primer_react_css_has_selector_perf flag is ON
  */
-body:global(.DialogScrollDisabled) {
+/* stylelint-disable-next-line selector-no-qualifying-type */
+body[data-dialog-scroll-disabled] {
   /* stylelint-disable-next-line primer/spacing */
   padding-right: var(--prc-dialog-scrollgutter) !important;
   overflow: hidden !important;
diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx
index 2d41fe267b4..b6d14ca9809 100644
--- a/packages/react/src/Dialog/Dialog.test.tsx
+++ b/packages/react/src/Dialog/Dialog.test.tsx
@@ -364,12 +364,12 @@ describe('Footer button loading states', () => {
       )
 
       expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
-      expect(document.body.classList.contains('DialogScrollDisabled')).toBe(true)
+      expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(true)
 
       unmount()
 
       expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
-      expect(document.body.classList.contains('DialogScrollDisabled')).toBe(false)
+      expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
     })
 
     it('handles multiple dialogs with ref counting when flag is ON', () => {
@@ -380,7 +380,7 @@ describe('Footer button loading states', () => {
       )
 
       expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
-      expect(document.body.classList.contains('DialogScrollDisabled')).toBe(true)
+      expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(true)
 
       // Render second dialog
       const {unmount: unmount2} = render(
@@ -391,21 +391,21 @@ describe('Footer button loading states', () => {
 
       // Attribute should still be present
       expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
-      expect(document.body.classList.contains('DialogScrollDisabled')).toBe(true)
+      expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(true)
 
       // Unmount first dialog
       unmount1()
 
       // Attribute and class should still be present (second dialog is still open)
       expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
-      expect(document.body.classList.contains('DialogScrollDisabled')).toBe(true)
+      expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(true)
 
       // Unmount second dialog
       unmount2()
 
       // Now both should be removed
       expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
-      expect(document.body.classList.contains('DialogScrollDisabled')).toBe(false)
+      expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
     })
 
     it('handles multiple dialogs correctly when flag is OFF', () => {
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 39d1a58bb9d..630e5b60a28 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/packages/react/src/Dialog/Dialog.tsx
@@ -301,9 +301,9 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
     document.body.style.setProperty('--prc-dialog-scrollgutter', `${scrollbarWidth}px`)
 
     if (usePerfOptimization) {
-      // Optimized path: set attribute and class on body
+      // Optimized path: set attributes on body
       document.body.setAttribute('data-dialog-scroll-optimized', '')
-      document.body.classList.add('DialogScrollDisabled')
+      document.body.setAttribute('data-dialog-scroll-disabled', '')
     } else {
       // Legacy path: only add class (CSS :has() selector handles the rest)
       document.body.classList.add('DialogScrollDisabled')
@@ -319,9 +319,11 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
       if (remainingDialogs.length === 0) {
         // No more dialogs open, clean up body
         document.body.style.removeProperty('--prc-dialog-scrollgutter')
-        document.body.classList.remove('DialogScrollDisabled')
         if (usePerfOptimization) {
           document.body.removeAttribute('data-dialog-scroll-optimized')
+          document.body.removeAttribute('data-dialog-scroll-disabled')
+        } else {
+          document.body.classList.remove('DialogScrollDisabled')
         }
       }
     }