Add Popover component

app/assets/javascripts/polaris_view_components/index.js

@@ -1,15 +1,17 @@
 import Modal from './modal_controller'
 import Polaris from './polaris_controller'
+import Popover from './popover_controller'
 import ResourceItem from './resource_item_controller'
 import Scrollable from './scrollable_controller'
 import Select from './select_controller'
 import TextField from './text_field_controller'
 
-export { Modal, Polaris, ResourceItem, Scrollable, Select, TextField }
+export { Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField }
 
 export function registerPolarisControllers(application) {
   application.register('polaris-modal', Modal)
   application.register('polaris', Polaris)
+  application.register('polaris-popover', Popover)
   application.register('polaris-resource-item', ResourceItem)
   application.register('polaris-scrollable', Scrollable)
   application.register('polaris-select', Select)

app/assets/javascripts/polaris_view_components/popover_controller.js

@@ -0,0 +1,45 @@
+import { Controller } from "@hotwired/stimulus"
+import { createPopper } from "@popperjs/core/dist/esm"
+
+export default class extends Controller {
+  static targets = ["activator", "popover"]
+  static classes = ["open", "closed"]
+  static values = {
+    placement: String,
+    active: Boolean
+  }
+
+  connect() {
+    createPopper(this.activatorTarget, this.popoverTarget, {
+      placement: this.placementValue,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 5],
+          },
+        },
+      ]
+    })
+    if (this.activeValue) {
+      this.show()
+    }
+  }
+
+  toggle() {
+    this.popoverTarget.classList.toggle(this.closedClass)
+    this.popoverTarget.classList.toggle(this.openClass)
+  }
+
+  show() {
+    this.popoverTarget.classList.remove(this.closedClass)
+    this.popoverTarget.classList.add(this.openClass)
+  }
+
+  hide(event) {
+    if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
+      this.popoverTarget.classList.remove(this.openClass)
+      this.popoverTarget.classList.add(this.closedClass)
+    }
+  }
+}

app/assets/stylesheets/polaris_view_components/custom.css

@@ -50,3 +50,13 @@ a.Polaris-Tag__Button {
 .Polaris-ResourceItem__Owned--offset {
   padding-left: 2rem;
 }
+
+/* Popover */
+.Polaris-Popover {
+  margin: 0;
+}
+
+.Polaris-Popover__PopoverOverlay--closed {
+  visibility: hidden;
+  pointer-events: none;
+}

app/components/polaris/popover/pane_component.html.erb

@@ -0,0 +1,25 @@
+<% pane_content = capture do %>
+  <% if sections.present? %>
+    <% sections.each do |section| %>
+      <%= section %>
+    <% end %>
+  <% end %>
+
+  <% if @sectioned %>
+    <%= render Polaris::Popover::SectionComponent.new do %>
+      <%= content %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>
+
+<% if @fixed %>
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <%= pane_content %>
+  <% end %>
+<% else %>
+  <%= render Polaris::ScrollableComponent.new(shadow: true, **system_arguments) do %>
+    <%= pane_content %>
+  <% end %>
+<% end %>

app/components/polaris/popover/pane_component.rb

@@ -0,0 +1,20 @@
+class Polaris::Popover::PaneComponent < Polaris::NewComponent
+  renders_many :sections, Polaris::Popover::SectionComponent
+
+  def initialize(fixed: false, sectioned: false, **system_arguments)
+    @fixed = fixed
+    @sectioned = sectioned
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Popover__Pane",
+        "Polaris-Popover__Pane--fixed": @fixed,
+      )
+    end
+  end
+end

app/components/polaris/popover/section_component.rb

@@ -0,0 +1,19 @@
+class Polaris::Popover::SectionComponent < Polaris::NewComponent
+  def initialize(**system_arguments)
+    @system_arguments = system_arguments
+  end
+
+  def system_arguments
+    @system_arguments.tap do |opts|
+      opts[:tag] = "div"
+      opts[:classes] = class_names(
+        @system_arguments[:classes],
+        "Polaris-Popover__Section",
+      )
+    end
+  end
+
+  def call
+    render(Polaris::BaseComponent.new(**system_arguments)) { content }
+  end
+end

app/components/polaris/popover_component.html.erb

@@ -0,0 +1,38 @@
+<div
+  data-controller="polaris-popover"
+  data-polaris-popover-active-value="<%= @active %>"
+  data-polaris-popover-placement-value="<%= popperjs_placement %>"
+  data-polaris-popover-open-class="Polaris-Popover__PopoverOverlay--open"
+  data-polaris-popover-closed-class="Polaris-Popover__PopoverOverlay--closed"
+  style="display: inline-block;"
+>
+  <div data-polaris-popover-target="activator">
+    <% if activator.present? %>
+      <%= activator %>
+    <% elsif button.present? %>
+      <%= button %>
+    <% end %>
+  </div>
+
+  <%= render Polaris::BaseComponent.new(**system_arguments) do %>
+    <%= render Polaris::BaseComponent.new(**popover_arguments) do %>
+      <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+      <div style="">
+        <div class="Polaris-Popover__Wrapper">
+          <%= render Polaris::BaseComponent.new(**content_arguments) do %>
+            <% if panes.present? %>
+              <% panes.each do |pane| %>
+                <%= pane %>
+              <% end %>
+            <% else %>
+              <%= render Polaris::Popover::PaneComponent.new(sectioned: @sectioned) do %>
+                <%= content %>
+              <% end %>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+      <div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
+    <% end %>
+  <% end %>
+</div>

app/components/polaris/popover_component.rb

@@ -0,0 +1,88 @@
+module Polaris
+  class PopoverComponent < Polaris::NewComponent
+    ALIGNMENT_DEFAULT = :center
+    ALIGNMENT_OPTIONS = [:left, :right, :center]
+
+    POSITION_DEFAULT = :below
+    POSITION_OPTIONS = [:above, :below]
+
+    renders_one :button, -> (**system_arguments) do
+      system_arguments[:data] ||= {}
+      prepend_option(system_arguments[:data], :action, "polaris-popover#toggle click@window->polaris-popover#hide")
+      Polaris::ButtonComponent.new(**system_arguments)
+    end
+    renders_one :activator
+    renders_many :panes, Polaris::Popover::PaneComponent
+
+    def initialize(
+      active: false,
+      fixed: false,
+      fluid_content: false,
+      full_height: false,
+      full_width: false,
+      sectioned: false,
+      alignment: ALIGNMENT_DEFAULT,
+      position: POSITION_DEFAULT,
+      **system_arguments
+    )
+      @active = active
+      @fixed = fixed
+      @fluid_content = fluid_content
+      @full_height = full_height
+      @full_width = full_width
+      @sectioned = sectioned
+      @alignment = fetch_or_fallback(ALIGNMENT_OPTIONS, alignment, ALIGNMENT_DEFAULT)
+      @position = fetch_or_fallback(POSITION_OPTIONS, position, POSITION_DEFAULT)
+      @system_arguments = system_arguments
+      @popover_arguments = {}
+      @content_arguments = {}
+    end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:data] ||= {}
+        opts[:data]["polaris_popover_target"] = "popover"
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-PositionedOverlay",
+          "Polaris-Popover__PopoverOverlay",
+          "Polaris-Popover__PopoverOverlay--closed",
+          "Polaris-Popover__PopoverOverlay--fixed": @fixed,
+        )
+      end
+    end
+
+    def popover_arguments
+      @popover_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:classes] = class_names(
+          @content_arguments[:classes],
+          "Polaris-Popover",
+          "Polaris-Popover--fullWidth": @full_width,
+          "Polaris-Popover--positionedAbove": @position == :above,
+        )
+      end
+    end
+
+    def content_arguments
+      @content_arguments.tap do |opts|
+        opts[:tag] = "div"
+        opts[:tabindex] ||= "-1"
+        opts[:classes] = class_names(
+          @content_arguments[:classes],
+          "Polaris-Popover__Content",
+          "Polaris-Popover__Content--fluidContent": @fluid_content,
+          "Polaris-Popover__Content--fullHeight": @full_height,
+        )
+      end
+    end
+
+    def popperjs_placement
+      placement = (@position == :above) ? "top" : "bottom"
+      placement += "-start" if @alignment == :left
+      placement += "-end" if @alignment == :right
+      placement
+    end
+  end
+end

app/helpers/polaris/view_helper.rb

@@ -36,6 +36,7 @@ module ViewHelper
       page_actions:             "Polaris::PageActionsComponent",
       pagination:               "Polaris::PaginationComponent",
       progress_bar:             "Polaris::ProgressBarComponent",
+      popover:                  "Polaris::PopoverComponent",
       radio_button:             "Polaris::RadioButtonComponent",
       resource_list:            "Polaris::ResourceListComponent",
       resource_item:            "Polaris::ResourceItemComponent",

demo/test/components/previews/actions/action_list_component_preview/default.html.erb

@@ -1,4 +1,8 @@
-<%= polaris_action_list do |action_list| %>
-  <% action_list.item { "Import file" } %>
-  <% action_list.item(url: "#") { "Export file" } %>
+<%= polaris_popover(active: true) do |popover| %>
+  <% popover.button(disclosure: true) { "More actions" } %>
+
+  <%= polaris_action_list do |action_list| %>
+    <% action_list.item { "Import file" } %>
+    <% action_list.item(url: "#") { "Export file" } %>
+  <% end %>
 <% end %>

demo/test/components/previews/actions/action_list_component_preview/sectioned.html.erb

@@ -1,11 +1,15 @@
-<%= polaris_action_list do |action_list| %>
-  <% action_list.section(title: "File options") do |section| %>
-    <% section.item(icon: "ImportMinor") { "Import file" } %>
-    <% section.item(icon: "ExportMinor") { "Export file" } %>
-  <% end %>
+<%= polaris_popover(active: true) do |popover| %>
+  <% popover.button(disclosure: true) { "More actions" } %>
+
+  <%= polaris_action_list do |action_list| %>
+    <% action_list.section(title: "File options") do |section| %>
+      <% section.item(icon: "ImportMinor") { "Import file" } %>
+      <% section.item(icon: "ExportMinor") { "Export file" } %>
+    <% end %>
 
-  <% action_list.section(title: "Section 2") do |section| %>
-    <% section.item(icon: "ImportMinor") { "Import file" } %>
-    <% section.item(icon: "ExportMinor") { "Export file" } %>
+    <% action_list.section(title: "Section 2") do |section| %>
+      <% section.item(icon: "ImportMinor") { "Import file" } %>
+      <% section.item(icon: "ExportMinor") { "Export file" } %>
+    <% end %>
   <% end %>
 <% end %>

demo/test/components/previews/actions/action_list_component_preview/with_destructive_item.html.erb

@@ -1,7 +1,11 @@
-<%= polaris_action_list do |action_list| %>
-  <% action_list.section(title: "File options") do |section| %>
-    <% section.item(icon: "ImportMinor", active: true) { "Import file" } %>
-    <% section.item(icon: "ExportMinor") { "Export file" } %>
-    <% section.item(icon: "DeleteMinor", destructive: true) { "Delete file" } %>
+<%= polaris_popover(active: true) do |popover| %>
+  <% popover.button(disclosure: true) { "More actions" } %>
+
+  <%= polaris_action_list do |action_list| %>
+    <% action_list.section(title: "File options") do |section| %>
+      <% section.item(icon: "ImportMinor", active: true) { "Import file" } %>
+      <% section.item(icon: "ExportMinor") { "Export file" } %>
+      <% section.item(icon: "DeleteMinor", destructive: true) { "Delete file" } %>
+    <% end %>
   <% end %>
 <% end %>

demo/test/components/previews/actions/action_list_component_preview/with_help_text.html.erb

@@ -1,9 +1,13 @@
-<%= polaris_action_list do |action_list| %>
-  <% action_list.item(
-    help_text: "Manage your blog articles"
-  ) { "Blog posts" } %>
-  <% action_list.item(
-    help_text: "Manage blogs published to your Online Store",
-    url: "#",
-  ) { "Blogs" } %>
+<%= polaris_popover(active: true) do |popover| %>
+  <% popover.button(disclosure: true) { "More actions" } %>
+
+  <%= polaris_action_list do |action_list| %>
+    <% action_list.item(
+      help_text: "Manage your blog articles"
+    ) { "Blog posts" } %>
+    <% action_list.item(
+      help_text: "Manage blogs published to your Online Store",
+      url: "#",
+    ) { "Blogs" } %>
+  <% end %>
 <% end %>

demo/test/components/previews/actions/action_list_component_preview/with_icon_and_suffix.html.erb

@@ -1,9 +1,13 @@
-<%= polaris_action_list do |action_list| %>
-  <% action_list.item(icon: "ImportMinor", active: true) do |item| %>
-    <% item.suffix do %>
-      <%= polaris_icon(name: "TickSmallMinor") %>
+<%= polaris_popover(active: true) do |popover| %>
+  <% popover.button(disclosure: true) { "More actions" } %>
+
+  <%= polaris_action_list do |action_list| %>
+    <% action_list.item(icon: "ImportMinor", active: true) do |item| %>
+      <% item.suffix do %>
+        <%= polaris_icon(name: "TickSmallMinor") %>
+      <% end %>
+      Import file
     <% end %>
-    Import file
+    <% action_list.item(icon: "ExportMinor") { "Export file" } %>
   <% end %>
-  <% action_list.item(icon: "ExportMinor") { "Export file" } %>
 <% end %>