Separating anchored position and Overlay class (#2088)

primer · Jun 23, 2023 · b79fec8 · b79fec8
1 parent f231e2e
commit b79fec8
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 28 deletions.
diff --git a/.changeset/popular-impalas-sin.md b/.changeset/popular-impalas-sin.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Separating `<anchored-position>` web component and the .Overlay class into separate markup.
diff --git a/app/components/primer/alpha/overlay.html.erb b/app/components/primer/alpha/overlay.html.erb
@@ -1,11 +1,13 @@
 <%= show_button %>
 
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= header %>
-  <% if content.present? %>
-    <%= content %>
-  <% else %>
-    <%= body %>
-    <%= footer %>
+  <%= render Primer::BaseComponent.new(tag: :div, classes: @wrapper_classes) do %>
+    <%= header %>
+    <% if content.present? %>
+      <%= content %>
+    <% else %>
+      <%= body %>
+      <%= footer %>
+    <% end %>
   <% end %>
 <% end %>
diff --git a/app/components/primer/alpha/overlay.pcss b/app/components/primer/alpha/overlay.pcss
@@ -1,25 +1,30 @@
-.Overlay[popover] {
+anchored-position[popover] {
   border-width: 0;
   padding: 0;
   position: absolute;
   min-width: 192px;
   inset: auto;
+  overflow: visible;
 }
 
-.Overlay[popover]:not(.\:popover-open) {
+.Overlay {
+  display: flex;
+}
+
+anchored-position[popover]:not(.\:popover-open) {
   display: none;
 }
 
 /* This reverts the declaration above for native popover, where `:popover-open` is supported */
 @supports selector(:popover-open) {
-  .Overlay[popover]:not(.\:popover-open) {
+  anchored-position[popover]:not(.\:popover-open) {
     display: revert;
   }
 }
 
 /* This reverts the declaration above for native popover, where `:open` is supported (Chrome 113, Safari TP) */
 @supports selector(:open) {
-  .Overlay[popover]:not(.\:popover-open) {
+  anchored-position[popover]:not(.\:popover-open) {
       display: revert;
   }
 }
diff --git a/app/components/primer/alpha/overlay.rb b/app/components/primer/alpha/overlay.rb
@@ -171,10 +171,9 @@ def initialize(
         @system_arguments[:role] = fetch_or_fallback(ROLE_OPTIONS, role) if role.present?
 
         @system_arguments[:id] = id.to_s
-        @system_arguments[:classes] = class_names(
+        @wrapper_classes = class_names(
           "Overlay",
-          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
-          system_arguments[:classes]
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
         )
         @system_arguments[:tag] = "anchored-position"
         @system_arguments[:anchor] = anchor || "overlay-show-#{@system_arguments[:id]}"

diff --git a/app/components/primer/anchored_position.ts b/app/components/primer/anchored_position.ts
@@ -134,23 +134,9 @@ export default class AnchoredPositionElement extends HTMLElement implements Posi
     this.#animationFrame = requestAnimationFrame(() => {
       const anchor = this.anchorElement
       if (!anchor) return
-      const {left, top, anchorSide, anchorAlign} = getAnchoredPosition(this, anchor, this)
+      const {left, top} = getAnchoredPosition(this, anchor, this)
       this.style.top = `${top}px`
       this.style.left = `${left}px`
-      this.classList.remove(
-        'Overlay--anchorAlign-start',
-        'Overlay--anchorAlign-center',
-        'Overlay--anchorAlign-end',
-        'Overlay--anchorSide-insideTop',
-        'Overlay--anchorSide-insideBottom',
-        'Overlay--anchorSide-insideLeft',
-        'Overlay--anchorSide-insideRight',
-        'Overlay--anchorSide-insideCenter',
-        'Overlay--anchorSide-outsideTop',
-        'Overlay--anchorSide-outsideLeft',
-        'Overlay--anchorSide-outsideRight'
-      )
-      this.classList.add(`Overlay--anchorAlign-${anchorAlign}`, `Overlay--anchorSide-${anchorSide}`)
     })
   }
 }

diff --git a/previews/primer/alpha/overlay_preview.rb b/previews/primer/alpha/overlay_preview.rb
@@ -163,6 +163,17 @@ def middle_of_page_with_relative_container(title: "Test Overlay", subtitle: nil,
                                body_text: body_text
                              })
       end
+
+      # @label Dialog with header and footer
+      #
+      def dialog_with_header_footer
+        render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
+          d.with_header(title: "Large Dialog Header", divider: true)
+          d.with_show_button { "Show Overlay" }
+          d.with_footer { "Large Dialog Footer" }
+          d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
+        end
+      end
     end
   end
 end