Graduate primer_react_css_has_selector_perf feature flag

.changeset/graduate-css-has-selector-perf-flag.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Graduate `primer_react_css_has_selector_perf` feature flag: the CSS `:has()` performance optimization (`body[data-dialog-scroll-disabled]`) is now the default behavior for Dialog scroll disabling

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

@@ -285,27 +285,8 @@
  }
 }
 
-/* DisableScroll class is added to Dialog when scroll should be disabled on body */
-.DisableScroll {
- /* This class is used as a selector target for the legacy :has() CSS selector */
-}
-
-/*
- * LEGACY: Scoped :has() selector with negation guard
- * Only evaluates when data-dialog-scroll-optimized is NOT present on body.
- * When the attribute IS present (flag ON), browser skips :has() evaluation
- * because the :not() check fails first (O(1) attribute lookup).
- */
-/* stylelint-disable-next-line selector-no-qualifying-type */
-body:not([data-dialog-scroll-optimized]):has(.Dialog.DisableScroll) {
- /* stylelint-disable-next-line primer/spacing */
- padding-right: var(--prc-dialog-scrollgutter) !important;
- overflow: hidden !important;
-}
-
 /*
  * PERFORMANCE OPTIMIZATION: Direct attribute on body - O(1) lookup
- * Active when primer_react_css_has_selector_perf flag is ON
  */
 /* stylelint-disable-next-line selector-no-qualifying-type */
 body[data-dialog-scroll-disabled] {

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

@@ -1,19 +1,13 @@
 import React from 'react'
 import {render, fireEvent, waitFor} from '@testing-library/react'
-import {describe, expect, it, vi, beforeEach} from 'vitest'
+import {describe, expect, it, vi} from 'vitest'
 import userEvent from '@testing-library/user-event'
 import {Dialog} from './Dialog'
 import {Button} from '../Button'
 import {implementsClassName} from '../utils/testing'
 import classes from './Dialog.module.css'
-import {FeatureFlags} from '../FeatureFlags'
-import {__resetDialogScrollOptimizedCount} from '../FeatureFlags/FeatureFlags'
 
 describe('Dialog', () => {
- beforeEach(() => {
- __resetDialogScrollOptimizedCount()
- })
-
  implementsClassName(Dialog, classes.Dialog)
  it('renders with role "dialog" by default', () => {
  const {getByRole} = render(<Dialog onClose={() => {}}>Pay attention to me</Dialog>)
@@ -394,126 +388,32 @@ describe('Footer button loading states', () => {
  expect(deleteButton).not.toHaveAttribute('data-loading', 'true')
  })
 
- describe('primer_react_css_has_selector_perf feature flag', () => {
- it('does not add data-dialog-scroll-optimized or data-dialog-scroll-disabled when flag is OFF', () => {
- const {unmount} = render(
- <FeatureFlags flags={{primer_react_css_has_selector_perf: false}}>
- <Dialog onClose={() => {}}>Dialog content</Dialog>
- </FeatureFlags>,
- )
-
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
- expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
+ describe('scroll disable behavior', () => {
+ it('sets data-dialog-scroll-disabled on body when dialog mounts', () => {
+ const {unmount} = render(<Dialog onClose={() => {}}>Dialog content</Dialog>)
 
- unmount()
-
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
- expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
- })
-
- it('adds data-dialog-scroll-optimized at provider level and data-dialog-scroll-disabled when dialog mounts', () => {
- const {unmount} = render(
- <FeatureFlags flags={{primer_react_css_has_selector_perf: true}}>
- <Dialog onClose={() => {}}>Dialog content</Dialog>
- </FeatureFlags>,
- )
-
- // Provider sets data-dialog-scroll-optimized, Dialog sets data-dialog-scroll-disabled
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
  expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(true)
 
  unmount()
 
- // Both should be removed on unmount
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
- expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
- })
-
- it('sets data-dialog-scroll-optimized even when no dialogs are open', () => {
- const {unmount} = render(
- <FeatureFlags flags={{primer_react_css_has_selector_perf: true}}>
- <div>No dialogs here</div>
- </FeatureFlags>,
- )
-
- // Provider sets the attribute even without dialogs
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
  expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
-
- unmount()
-
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
  })
 
- it('handles multiple dialogs with ref counting when flag is ON', () => {
- const {unmount: unmount1} = render(
- <FeatureFlags flags={{primer_react_css_has_selector_perf: true}}>
- <Dialog onClose={() => {}}>Dialog 1</Dialog>
- </FeatureFlags>,
- )
+ it('handles multiple dialogs with ref counting', () => {
+ const {unmount: unmount1} = render(<Dialog onClose={() => {}}>Dialog 1</Dialog>)
 
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
  expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(true)
 
- // Render second dialog
- const {unmount: unmount2} = render(
- <FeatureFlags flags={{primer_react_css_has_selector_perf: true}}>
- <Dialog onClose={() => {}}>Dialog 2</Dialog>
- </FeatureFlags>,
- )
+ const {unmount: unmount2} = render(<Dialog onClose={() => {}}>Dialog 2</Dialog>)
 
- // Attributes should still be present
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(true)
  expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(true)
 
- // Unmount first dialog
+ // Unmount first dialog - attribute should still be present
  unmount1()
-
- // Attributes should still be present (second dialog and provider are still mounted)
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).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.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
- })
-
- it('handles multiple dialogs correctly when flag is OFF', () => {
- const {unmount: unmount1} = render(
- <FeatureFlags flags={{primer_react_css_has_selector_perf: false}}>
- <Dialog onClose={() => {}}>Dialog 1</Dialog>
- </FeatureFlags>,
- )
-
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
- expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
-
- // Render second dialog
- const {unmount: unmount2} = render(
- <FeatureFlags flags={{primer_react_css_has_selector_perf: false}}>
- <Dialog onClose={() => {}}>Dialog 2</Dialog>
- </FeatureFlags>,
- )
-
- // Attributes should not be present
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
- expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
-
- // Unmount first dialog
- unmount1()
-
- // Attributes should still not be present
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
- expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
-
- // Unmount second dialog
+ // Unmount second dialog - attribute should be removed
  unmount2()
-
- // Attributes should still not be present
- expect(document.body.hasAttribute('data-dialog-scroll-optimized')).toBe(false)
  expect(document.body.hasAttribute('data-dialog-scroll-disabled')).toBe(false)
  })
  })

packages/react/src/Dialog/Dialog.tsx

@@ -20,6 +20,13 @@ import {useResizeObserver} from '../hooks/useResizeObserver'
 
 /* Dialog Version 2 */
 
+/**
+ * Ref count for data-dialog-scroll-disabled attribute management.
+ * Tracks how many dialogs are currently open to know when to remove the attribute.
+ * This is client-only: it is only accessed inside useEffect, which never runs on the server.
+ */
+let dialogScrollDisabledCount = 0
+
 /**
  * Props that characterize a button to be rendered into the footer of
  * a Dialog.
@@ -271,7 +278,6 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
  const autoFocusedFooterButtonRef = useRef<HTMLButtonElement>(null)
  for (const footerButton of footerButtons) {
  if (footerButton.autoFocus) {
- // eslint-disable-next-line react-hooks/immutability
  footerButton.ref = autoFocusedFooterButtonRef
  }
  }
@@ -313,29 +319,16 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
 
  React.useEffect(() => {
  const scrollbarWidth = window.innerWidth - document.body.clientWidth
- const dialog = dialogRef.current
- const usePerfOptimization = document.body.hasAttribute('data-dialog-scroll-optimized')
 
- // Add DisableScroll class to this dialog (for legacy :has() selector path)
- dialog?.classList.add(classes.DisableScroll)
+ dialogScrollDisabledCount++
  document.body.style.setProperty('--prc-dialog-scrollgutter', `${scrollbarWidth}px`)
-
- if (usePerfOptimization) {
- // Optimized path: set attribute on body for direct CSS targeting
- document.body.setAttribute('data-dialog-scroll-disabled', '')
- }
- // Legacy path: no action needed - CSS :has(.Dialog.DisableScroll) handles it
+ document.body.setAttribute('data-dialog-scroll-disabled', '')
 
  return () => {
- dialog?.classList.remove(classes.DisableScroll)
-
- const remainingDialogs = document.querySelectorAll(`.${classes.DisableScroll}`)
-
- if (remainingDialogs.length === 0) {
+ dialogScrollDisabledCount--
+ if (dialogScrollDisabledCount === 0) {
  document.body.style.removeProperty('--prc-dialog-scrollgutter')
- if (usePerfOptimization) {
- document.body.removeAttribute('data-dialog-scroll-disabled')
- }
+ document.body.removeAttribute('data-dialog-scroll-disabled')
  }
  }
  }, [])

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

@@ -3,7 +3,6 @@ import {FeatureFlagScope} from './FeatureFlagScope'
 export const DefaultFeatureFlags = FeatureFlagScope.create({
  primer_react_breadcrumbs_overflow_menu: false,
  primer_react_css_anchor_positioning: false,
- primer_react_css_has_selector_perf: false,
  primer_react_select_panel_fullscreen_on_narrow: false,
  primer_react_select_panel_order_selected_at_top: false,
  primer_react_select_panel_remove_active_descendant: false,

packages/react/src/FeatureFlags/FeatureFlags.tsx

@@ -2,57 +2,17 @@ import type React from 'react'
 import {useContext, useMemo} from 'react'
 import {FeatureFlagContext} from './FeatureFlagContext'
 import {FeatureFlagScope, type FeatureFlags} from './FeatureFlagScope'
-import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect'
 
 export type FeatureFlagsProps = React.PropsWithChildren<{
  flags: FeatureFlags
 }>
 
-/**
- * Ref count for data-dialog-scroll-optimized attribute management.
- *
- * NOTE: This is temporary infrastructure while we feature flag the CSS :has()
- * performance optimization (primer_react_css_has_selector_perf). Once the flag
- * is removed and the optimization is the default behavior, this ref counting
- * can be removed - the attribute can simply always be present.
- *
- * @internal - Not part of the public API
- */
-let dialogScrollOptimizedCount = 0
-
-/**
- * Reset the ref count for testing purposes only.
- *
- * @internal - Not part of the public API. Only exported for test isolation.
- */
-export function __resetDialogScrollOptimizedCount(): void {
- dialogScrollOptimizedCount = 0
- document.body.removeAttribute('data-dialog-scroll-optimized')
-}
-
 export function FeatureFlags({children, flags}: FeatureFlagsProps) {
  const parentFeatureFlags = useContext(FeatureFlagContext)
  const value = useMemo(() => {
  const scope = FeatureFlagScope.merge(parentFeatureFlags, FeatureFlagScope.create(flags))
  return scope
  }, [parentFeatureFlags, flags])
 
- const isOptimizationEnabled = value.enabled('primer_react_css_has_selector_perf')
-
- // Set body attribute for CSS :has() optimization when flag is enabled
- useIsomorphicLayoutEffect(() => {
- if (isOptimizationEnabled) {
- dialogScrollOptimizedCount++
- document.body.setAttribute('data-dialog-scroll-optimized', '')
-
- return () => {
- dialogScrollOptimizedCount--
- if (dialogScrollOptimizedCount === 0) {
- document.body.removeAttribute('data-dialog-scroll-optimized')
- }
- }
- }
- }, [isOptimizationEnabled])
-
  return <FeatureFlagContext.Provider value={value}>{children}</FeatureFlagContext.Provider>
 }