Revert Dialog body scroll-lock styling from broad :has(...) to explicit body classes (#4069)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Jon Rohan <rohan@github.com>

Author: Copilot

.changeset/thirty-cougars-matter.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Revert Dialog body scroll-lock styling from broad `:has(...)` to explicit body classes

app/components/primer/alpha/dialog.pcss

@@ -21,8 +21,11 @@
   syntax: "<length>";
 }
 
-body:has(dialog:modal.Overlay--disableScroll) {
+body.has-modal {
   padding-right: var(--dialog-scrollgutter) !important;
+}
+
+body.has-modal-disable-scroll {
   overflow: hidden !important;
 }
 

app/components/primer/dialog_helper.ts

@@ -3,6 +3,14 @@ function setScrollGutter(doc: Document) {
   doc.body.style.setProperty('--dialog-scrollgutter', `${window.innerWidth - doc.body.clientWidth}px`)
 }
 
+function updateBodyModalClasses(doc: Document) {
+  doc.body.classList.toggle('has-modal', Boolean(doc.querySelector('dialog[open]')))
+  doc.body.classList.toggle(
+    'has-modal-disable-scroll',
+    Boolean(doc.querySelector('dialog[open].Overlay--disableScroll')),
+  )
+}
+
 function dialogInvokerButtonHandler(event: Event) {
   const target = event.target as HTMLElement
   const button = target?.closest('button')
@@ -69,6 +77,8 @@ function dialogInvokerButtonHandler(event: Event) {
           {once: true},
         )
       }
+
+      updateBodyModalClasses(dialog.ownerDocument)
     }
   }
 
@@ -77,6 +87,7 @@ function dialogInvokerButtonHandler(event: Event) {
     const dialog = document.getElementById(dialogId)
     if (dialog instanceof HTMLDialogElement && dialog.open) {
       dialog.close()
+      updateBodyModalClasses(dialog.ownerDocument)
     }
   }
 }
@@ -91,6 +102,7 @@ export class DialogHelperElement extends HTMLElement {
     const {signal} = (this.#abortController = new AbortController())
     document.addEventListener('click', dialogInvokerButtonHandler, true)
     document.addEventListener('click', this, {signal})
+    this.dialog?.addEventListener('close', () => updateBodyModalClasses(this.dialog!.ownerDocument), {signal})
     new MutationObserver(records => {
       for (const record of records) {
         if (record.target === this.dialog) {
@@ -107,14 +119,17 @@ export class DialogHelperElement extends HTMLElement {
 
   #handleDialogOpenAttribute() {
     if (!this.dialog) return
+    const {ownerDocument} = this.dialog
     // We don't want to show the Dialog component as non-modal
     if (this.dialog.matches('[open]:not(:modal)')) {
       // eslint-disable-next-line no-restricted-syntax
       this.dialog.addEventListener('close', e => e.stopImmediatePropagation(), {once: true})
       this.dialog.close()
-      setScrollGutter(this.dialog.ownerDocument)
+      setScrollGutter(ownerDocument)
       this.dialog.showModal()
     }
+
+    updateBodyModalClasses(ownerDocument)
   }
 
   handleEvent(event: MouseEvent) {

test/components/primer/alpha/dialog_test.rb

@@ -27,6 +27,22 @@ def test_renders_show_button
         assert_selector("[data-show-dialog-id]")
       end
 
+      def test_applies_disable_scroll_class_by_default
+        render_inline(Primer::Alpha::Dialog.new(title: "Title")) do |component|
+          component.with_body { "Hello" }
+        end
+
+        assert_selector("dialog.Overlay--disableScroll")
+      end
+
+      def test_does_not_apply_disable_scroll_class_when_disabled
+        render_inline(Primer::Alpha::Dialog.new(title: "Title", disable_scroll: false)) do |component|
+          component.with_body { "Hello" }
+        end
+
+        refute_selector("dialog.Overlay--disableScroll")
+      end
+
       def test_renders_icon_show_button
         render_preview :playground, params: { icon: :ellipsis }
 

test/css/component_specific_selectors_test.rb

@@ -38,7 +38,9 @@ class ComponentSpecificSelectorsTest < Minitest::Test
       ".Banner .Banner-close"
     ],
     Primer::Alpha::Dialog => [
-      ".Overlay"
+      ".Overlay",
+      ".has-modal",
+      ".has-modal-disable-scroll"
     ],
     Primer::Alpha::Layout => [
       ".Layout-divider",