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