do not allow non-modal Alpha::Dialog (#2582)

.changeset/cyan-cats-bow.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Ensure Alpha::Dialog is always opened as modal

app/components/primer/dialog_helper.ts

@@ -83,16 +83,29 @@ export class DialogHelperElement extends HTMLElement {
     new MutationObserver(records => {
       for (const record of records) {
         if (record.target === this.dialog) {
-          this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'))
+          this.#handleDialogOpenAttribute()
         }
       }
     }).observe(this, {subtree: true, attributeFilter: ['open']})
+    this.#handleDialogOpenAttribute()
   }
 
   disconnectedCallback() {
     this.#abortController?.abort()
   }
 
+  #handleDialogOpenAttribute() {
+    if (!this.dialog) return
+    this.ownerDocument.body.classList.toggle('has-modal', this.dialog.matches(':modal'))
+    // 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()
+      this.dialog.showModal()
+    }
+  }
+
   handleEvent(event: MouseEvent) {
     const target = event.target as HTMLElement
     const dialog = this.dialog

previews/primer/alpha/dialog_preview.rb

@@ -272,6 +272,30 @@ def dialog_inside_overlay(title: "Test Dialog", subtitle: nil, position: :center
                                visually_hide_title: visually_hide_title
                              })
       end
+
+      # @label Initially Open
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
+      # @param position [Symbol] select [center, left, right]
+      # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
+      # @param visually_hide_title [Boolean] toggle
+      # @param disable_button [Boolean] toggle
+      # @param button_text [String] text
+      # @param body_text [String] text
+      # @param icon [Symbol] octicon
+      # @snapshot interactive
+      def initally_open(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false, icon: nil, disable_button: false)
+        render(Primer::Alpha::Dialog.new(open: true, title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
+          if icon.present? && (icon != :none)
+            d.with_show_button(icon: icon, "aria-label": icon.to_s, disabled: disable_button)
+          else
+            d.with_show_button(disabled: disable_button) { button_text }
+          end
+          d.with_body { body_text }
+        end
+      end
     end
   end
 end