primer_view_components 0.18.0 → 0.18.1

data/app/components/primer/dialog_helper.js

@@ -18,7 +18,6 @@ function dialogInvokerButtonHandler(event) {
     // If the user is clicking a valid dialog trigger
     let dialogId = button === null || button === void 0 ? void 0 : button.getAttribute('data-show-dialog-id');
     if (dialogId) {
-        event.stopPropagation();
         const dialog = document.getElementById(dialogId);
         if (dialog instanceof HTMLDialogElement) {
             dialog.showModal();
@@ -26,7 +25,6 @@ function dialogInvokerButtonHandler(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();
-            event.stopPropagation();
         }
     }
     dialogId = button.getAttribute('data-close-dialog-id') || button.getAttribute('data-submit-dialog-id');
@@ -54,6 +52,21 @@ export class DialogHelperElement extends HTMLElement {
             for (const record of records) {
                 if (record.target === this.dialog) {
                     this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'));
+                    // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+                    // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+                    // any popover that is currently open, regardless of whether or not another top layer element,
+                    // such as a <dialog> is nested inside.
+                    // See https://github.com/whatwg/html/issues/9998.
+                    // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
+                    // we must undo the work they did to hide ancestral popovers of the dialog:
+                    if (this.dialog.hasAttribute('open')) {
+                        let node = this.dialog;
+                        while (node) {
+                            node = node.closest('[popover]:not(:popover-open)');
+                            if (node)
+                                node.showPopover();
+                        }
+                    }
                 }
             }
         }).observe(this, { subtree: true, attributeFilter: ['open'] });
@@ -65,11 +78,8 @@ export class DialogHelperElement extends HTMLElement {
     handleEvent(event) {
         const target = event.target;
         const dialog = this.dialog;
-        if (!(dialog === null || dialog === void 0 ? void 0 : dialog.open))
-            return;
-        // if the target is inside the dialog, but is not the dialog itself, leave
-        // the dialog open
-        if ((target === null || target === void 0 ? void 0 : target.closest('dialog')) === dialog && target !== dialog)
+        // The click target _must_ be the dialog element itself, and not elements underneath or inside.
+        if (target !== dialog || !(dialog === null || dialog === void 0 ? void 0 : dialog.open))
             return;
         const rect = dialog.getBoundingClientRect();
         const clickWasInsideDialog = rect.top <= event.clientY &&

data/app/components/primer/dialog_helper.ts

@@ -7,7 +7,6 @@ function dialogInvokerButtonHandler(event: Event) {
   // 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()
@@ -15,7 +14,6 @@ function dialogInvokerButtonHandler(event: 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()
-      event.stopPropagation()
     }
   }
 
@@ -46,6 +44,20 @@ export class DialogHelperElement extends HTMLElement {
       for (const record of records) {
         if (record.target === this.dialog) {
           this.ownerDocument.body.classList.toggle('has-modal', this.dialog.hasAttribute('open'))
+          // In some older browsers, such as Chrome 122, when a top layer element (such as a dialog)
+          // opens from within a popover, the "hide all popovers" internal algorithm runs, hiding
+          // any popover that is currently open, regardless of whether or not another top layer element,
+          // such as a <dialog> is nested inside.
+          // See https://github.com/whatwg/html/issues/9998.
+          // This is fixed by https://github.com/whatwg/html/pull/10116, but while we still support browsers that present this bug,
+          // we must undo the work they did to hide ancestral popovers of the dialog:
+          if (this.dialog.hasAttribute('open')) {
+            let node: HTMLElement | null = this.dialog
+            while (node) {
+              node = node.closest('[popover]:not(:popover-open)')
+              if (node) node.showPopover()
+            }
+          }
         }
       }
     }).observe(this, {subtree: true, attributeFilter: ['open']})
@@ -58,11 +70,8 @@ export class DialogHelperElement extends HTMLElement {
   handleEvent(event: MouseEvent) {
     const target = event.target as HTMLElement
     const dialog = this.dialog
-    if (!dialog?.open) return
-
-    // if the target is inside the dialog, but is not the dialog itself, leave
-    // the dialog open
-    if (target?.closest('dialog') === dialog && target !== dialog) return
+    // The click target _must_ be the dialog element itself, and not elements underneath or inside.
+    if (target !== dialog || !dialog?.open) return
 
     const rect = dialog.getBoundingClientRect()
     const clickWasInsideDialog =

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 18
-      PATCH = 0
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb

@@ -0,0 +1,9 @@
+<%= render(Primer::Alpha::Overlay.new(title: "An overlay")) do |o| %>
+  <% o.with_show_button() { "Show overlay" } %>
+  <% o.with_body() do %>
+    <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, position: position, subtitle: subtitle, visually_hide_title: false)) do |d| %>
+      <% d.with_show_button { button_text } %>
+      <% d.with_body { body_text} %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb

@@ -12,3 +12,10 @@
     <% end %>
   <% end %>
 <% end %>
+
+<div style="margin-top:2rem">
+<%= render(Primer::Beta::Flash.new(scheme: :warning)) do %>
+  <p>Please be careful nesting dialogs! Note that in this example, opening the second dialog does not close the first.</p>
+  <p>Closing a dialog while opening a dialog inside, will cause both to be invisible which will lead to undesired effects!</p>
+<% end %>
+</div>

data/previews/primer/alpha/dialog_preview.rb

@@ -248,6 +248,29 @@ module Primer
                                visually_hide_title: visually_hide_title
                              })
       end
+
+      # @label Dialog inside Overlay
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
+      # @param position [Symbol] select [center, right, left]
+      # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
+      # @param visually_hide_title [Boolean] toggle
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def dialog_inside_overlay(title: "Test Dialog", subtitle: nil, position: :center, size: :medium, button_text: "Show Dialog", body_text: "Content", position_narrow: :fullscreen, visually_hide_title: false)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               position: position,
+                               size: size,
+                               button_text: button_text,
+                               body_text: body_text,
+                               position_narrow: position_narrow,
+                               visually_hide_title: visually_hide_title
+                             })
+      end
     end
   end
 end

data/static/info_arch.json

@@ -3375,6 +3375,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
+        "name": "dialog_inside_overlay",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [

data/static/previews.json

@@ -3139,6 +3139,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
+        "name": "dialog_inside_overlay",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.18.0
+  version: 0.18.1
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-31 00:00:00.000000000 Z
+date: 2024-02-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -728,6 +728,7 @@ files:
 - previews/primer/alpha/dialog_preview/autofocus_element.html.erb
 - previews/primer/alpha/dialog_preview/body_has_scrollbar_overflow.html.erb
 - previews/primer/alpha/dialog_preview/custom_header.html.erb
+- previews/primer/alpha/dialog_preview/dialog_inside_overlay.html.erb
 - previews/primer/alpha/dialog_preview/nested_dialog.html.erb
 - previews/primer/alpha/dialog_preview/scroll_container.html.erb
 - previews/primer/alpha/dialog_preview/test.html.erb