refactor Dialog to use <dialog> internally (#2364)

.changeset/wise-coats-buy.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Primer::Alpha::Dialog uses <dialog> internally

app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -275,7 +275,15 @@ export class ActionMenuElement extends HTMLElement {
       if (this.#isOpen()) {
         this.#hide()
       }
+      const activeElement = this.ownerDocument.activeElement
+      const lostFocus = this.ownerDocument.activeElement === this.ownerDocument.body
+      const focusInClosedMenu = this.contains(activeElement)
+      if (lostFocus || focusInClosedMenu) {
+        setTimeout(() => this.invokerElement?.focus(), 0)
+      }
     }
+    // a modal <dialog> element will close all popovers
+    setTimeout(() => this.#show(), 0)
     dialog.addEventListener('close', handleDialogClose, {signal})
     dialog.addEventListener('cancel', handleDialogClose, {signal})
   }

app/components/primer/alpha/dialog.html.erb

@@ -1,5 +1,5 @@
 <%= show_button %>
-<div class="Overlay--hidden <%= @backdrop_classes %>" data-modal-dialog-overlay>
+<dialog-helper>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <%= header %>
     <% if content.present? %>
@@ -9,4 +9,4 @@
       <%= footer %>
     <% end %>
   <% end %>
-</div>
+</dialog-helper>

app/components/primer/alpha/dialog.pcss

@@ -1,5 +1,15 @@
 /* Overlay */
 
+dialog.Overlay:not([open]) {
+  display: none;
+}
+
+/* dialog defualts to CanvasText not inherit */
+dialog.Overlay {
+  color: var(--fgColor-default);
+}
+
+
 .Overlay--hidden {
   display: none !important;
 }

app/components/primer/alpha/dialog.rb

@@ -125,8 +125,7 @@ def initialize(
         @position_narrow = position_narrow
         @visually_hide_title = visually_hide_title
 
-        @system_arguments[:tag] = "modal-dialog"
-        @system_arguments[:role] = "dialog"
+        @system_arguments[:tag] = "dialog"
         @system_arguments[:id] = @id
         @system_arguments[:aria] = { modal: true }
         @system_arguments[:aria] = merge_aria(

app/components/primer/alpha/overlay.pcss

@@ -6,6 +6,12 @@ anchored-position[popover] {
   overflow: visible;
 }
 
+.Overlay {
+  display: flex;
+  border-width: 0;
+  padding: 0;
+}
+
 anchored-position:not(.Overlay) {
   background: none;
 }
@@ -15,6 +21,7 @@ anchored-position:not(.Overlay) {
   display: none
 }
 
-anchored-position.not-anchored::backdrop {
+anchored-position.not-anchored::backdrop, dialog::backdrop {
   background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
 }
+

app/components/primer/dialog_helper.ts

@@ -0,0 +1,77 @@
+function dialogInvokerButtonHandler(event: Event) {
+  const target = event.target as HTMLElement
+  const button = target?.closest('button')
+
+  if (!button || button.hasAttribute('disabled') || button.getAttribute('aria-disabled') === 'true') return
+
+  // If the user is clicking a valid dialog trigger
+  let dialogId = button?.getAttribute('data-show-dialog-id')
+  if (dialogId) {
+    event.stopPropagation()
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof HTMLDialogElement) {
+      dialog.showModal()
+      // A buttons default behaviour in some browsers it to send a pointer event
+      // If the behaviour is allowed through the dialog will be shown but then
+      // quickly hidden- as if it were never shown. This prevents that.
+      event.preventDefault()
+    }
+  }
+
+  dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id')
+  if (dialogId) {
+    const dialog = document.getElementById(dialogId)
+    if (dialog instanceof HTMLDialogElement && dialog.open) {
+      dialog.close()
+    }
+  }
+}
+
+export class DialogHelperElement extends HTMLElement {
+  get dialog() {
+    return this.querySelector('dialog')
+  }
+
+  #abortController: AbortController | null = null
+  connectedCallback() {
+    const {signal} = (this.#abortController = new AbortController())
+    document.addEventListener('click', dialogInvokerButtonHandler)
+    document.addEventListener('click', this, {signal})
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  handleEvent(event: MouseEvent) {
+    const target = event.target as HTMLElement
+    const dialog = this.dialog
+    if (!dialog?.open) return
+    if (target?.closest('dialog') !== dialog) return
+
+    const rect = dialog.getBoundingClientRect()
+    const clickWasInsideDialog =
+      rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width
+
+    if (!clickWasInsideDialog) {
+      dialog.close()
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    DialogHelperElement: typeof DialogHelperElement
+  }
+  interface HTMLElementTagNameMap {
+    'dialog-helper': DialogHelperElement
+  }
+}
+
+if (!window.customElements.get('dialog-helper')) {
+  window.DialogHelperElement = DialogHelperElement
+  window.customElements.define('dialog-helper', DialogHelperElement)
+}

app/components/primer/primer.ts

@@ -2,9 +2,9 @@ import '@github/include-fragment-element'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'
+import './dialog_helper'
 import './focus_group'
 import './alpha/image_crop'
-import './alpha/modal_dialog'
 import './beta/nav_list'
 import './beta/nav_list_group_element'
 import './alpha/segmented_control'