Use data-dialog-scroll-disabled attribute instead of class when perf flag is enabled

[Copilot]

When primer_react_css_has_selector_perf feature flag is enabled, replace the DialogScrollDisabled class with a data-dialog-scroll-disabled attribute for consistency with existing data-dialog-scroll-optimized and other body-level data attributes.

Changelog

Changed

• Dialog.tsx: When perf flag is ON, use setAttribute('data-dialog-scroll-disabled', '') instead of classList.add('DialogScrollDisabled'). Legacy path (flag OFF) unchanged.
• Dialog.module.css: Changed optimized selector from body:global(.DialogScrollDisabled) to body[data-dialog-scroll-disabled], eliminating need for :global() wrapper.
• Dialog.test.tsx: Tests now check hasAttribute('data-dialog-scroll-disabled') when flag is ON, maintain class checks when flag is OFF.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Behavior change is gated behind existing feature flag. No breaking changes.

Testing & Reviewing

All Dialog tests updated and passing. Both flag states (ON/OFF) maintain correct behavior with ref counting for multiple dialogs.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

Original prompt

Summary

When the primer_react_css_has_selector_perf feature flag is enabled, use a data-dialog-scroll-disabled attribute on body instead of the DialogScrollDisabled class for consistency and cleaner CSS.

Changes Required

1. packages/react/src/Dialog/Dialog.tsx

In the useEffect where usePerfOptimization is true, replace:

document.body.classList.add('DialogScrollDisabled')
// and in cleanup:
document.body.classList.remove('DialogScrollDisabled')

With:

document.body.setAttribute('data-dialog-scroll-disabled', '')
// and in cleanup:
document.body.removeAttribute('data-dialog-scroll-disabled')

Note: When the flag is OFF (legacy path), keep using classList.add/remove('DialogScrollDisabled') as before.

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

Change the optimized selector from:

body:global(.DialogScrollDisabled) {
  padding-right: var(--prc-dialog-scrollgutter) !important;
  overflow: hidden !important;
}

To:

body[data-dialog-scroll-disabled] {
  padding-right: var(--prc-dialog-scrollgutter) !important;
  overflow: hidden !important;
}

This removes the need for :global() since attribute selectors don't have CSS module scoping issues.

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

Update the tests for the feature flag to check for the attribute instead of the class when the flag is ON:

• Change document.body.classList.contains('DialogScrollDisabled') to document.body.hasAttribute('data-dialog-scroll-disabled') in tests where primer_react_css_has_selector_perf: true
• Keep the class checks for tests where primer_react_css_has_selector_perf: false (legacy behavior)

Rationale

• Consistency: The PR already uses data-dialog-scroll-optimized attribute. Using data-dialog-scroll-disabled for the scroll lock is more consistent.
• Repo patterns: The repo uses data-* attributes on body elsewhere (e.g., data-color-mode, data-light-theme).
• Cleaner CSS: No need for :global() wrapper with attribute selectors.

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0d27451

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the integration-tests: skipped manually label to skip these checks.