Move the panel menu inside the ui/panel component

admin/app/components/solidus_admin/orders/show/component.html.erb

@@ -14,12 +14,12 @@
  <% end %>
 
  <%= page_with_sidebar_aside do %>
- <%= render component('ui/panel').new(title: panel_title_with_more_links(t(".customer"), [
- link_to(t(".edit_email"), solidus_admin.order_customer_path(@order), class: "p-2 hover:bg-gray-25 rounded-sm text-black"),
- link_to(t(".edit_shipping"), solidus_admin.new_order_ship_address_path(@order), class: "p-2 hover:bg-gray-25 rounded-sm text-black"),
- link_to(t(".edit_billing"), solidus_admin.new_order_bill_address_path(@order), class: "p-2 hover:bg-gray-25 rounded-sm text-black"),
- @order.user && button_to(t(".remove_customer"), solidus_admin.order_customer_path(@order), method: :delete, class: "p-2 hover:bg-gray-25 rounded-sm text-red-500"),
- ].compact)) do |panel| %>
+ <%= render component('ui/panel').new(title: t(".customer")) do |panel| %>
+ <% panel.with_menu t(".edit_email"), solidus_admin.order_customer_path(@order) %>
+ <% panel.with_menu t(".edit_shipping"), solidus_admin.new_order_ship_address_path(@order) %>
+ <% panel.with_menu t(".edit_billing"), solidus_admin.new_order_bill_address_path(@order) %>
+ <% panel.with_menu t(".remove_customer"), solidus_admin.order_customer_path(@order), method: :delete, class: "text-red-500" if @order.user %>
+
  <% panel.with_section(class: 'flex flex-col gap-6') do %>
  <%# CUSTOMER %>
  <% if @order.user %>

admin/app/components/solidus_admin/orders/show/component.rb

@@ -29,25 +29,6 @@ def format_address(address)
  ], " ")
  end
 
- def panel_title_with_more_links(title, links)
- tag.details(
- tag.summary(
- tag.span(
- safe_join([
- title,
- component("ui/icon").new(
- name: "more-line",
- alt: t("spree.edit"),
- class: "cursor-pointer w-[22px] h-[22px]"
- ).render_in(self),
- ]),
- class: 'flex items-center justify-between text-black',
- )
- ) + tag.div(safe_join(links, " "), class: "body-small absolute border border-gray-100 mt-0.5 right-0 flex min-w-[10rem] flex-col p-2 rounded-sm shadow-lg bg-white z-10"),
- class: 'relative',
- )
- end
-
  def customer_name(user)
  (
  user.default_user_bill_address ||

admin/app/components/solidus_admin/ui/panel/component.html.erb

@@ -10,29 +10,67 @@
  items-start
  inline-flex
  w-full
+ relative
  "
  data-controller="<%= stimulus_id %>"
 >
+ <% if menus? %>
+ <details class="absolute top-0 right-0 m-6">
+ <summary title="<%= t(".more") %>">
+ <%= render component("ui/icon").new(
+ name: "more-line",
+ class: "cursor-pointer w-[22px] h-[22px] hover:fill-gray-500 [[open]_&]:fill-gray-500"
+ ) %>
+ </summary>
+ <div
+ class="
+ body-small
+ absolute
+ border
+ border-gray-100
+ mt-0.5
+ right-0
+ flex
+ min-w-[10rem]
+ flex-col
+ p-2
+ rounded-sm
+ shadow-lg
+ bg-white
+ z-10
+ "
+ >
+ <% menus.each do |menu| %>
+ <%= menu %>
+ <% end %>
+ </div>
+ </details>
+ <% end %>
+
  <% if @title %>
- <h2 class="mt-0 p-6 w-full">
- <span class="body-title"><%= @title %></span>
- <%= render component('ui/toggletip').new(text: @title_hint) if @title_hint %>
- </h2>
+ <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
+ <h2>
+ <span class="body-title"><%= @title %></span>
+ <%= render component("ui/toggletip").new(text: @title_hint) if @title_hint %>
+ </h2>
+ </section>
  <% end %>
 
  <% sections.each do |section| %>
  <%= section %>
  <% end %>
 
  <% if content.present? %>
- <div class="p-6 w-full flex flex-col gap-6 <%= 'pt-0' if @title.present? && !sections? %>">
+ <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
  <%= content %>
- </div>
+ </section>
  <% end %>
 
  <% if action? %>
- <div class="flex gap-2 items-center border-t border-gray-100 p-6 w-full">
- <%= action %>
- </div>
+ <section class="border-gray-100 border-t w-full first-of-type:border-t-0 p-6">
+ <div class="flex justify-between items-center">
+ <%= action %>
+ </div>
+ </section>
  <% end %>
 </div>

admin/app/components/solidus_admin/ui/panel/component.rb

@@ -12,13 +12,21 @@ class SolidusAdmin::UI::Panel::Component < SolidusAdmin::BaseComponent
 
  renders_many :sections, ->(wide: false, high: false, **args, &block) do
  tag.section(**args, class: "
- border-gray-100 border-t w-full
+ border-gray-100 border-t w-full first-of-type:border-t-0
  #{'px-6' unless wide}
  #{'py-6' unless high}
  #{args[:class]}
  ", &block)
  end
 
+ renders_many :menus, ->(name, url, **args) do
+ if args[:method]
+ button_to(name, url, **args, class: "p-2 hover:bg-gray-25 rounded-sm text-black #{args[:class]}")
+ else
+ link_to(name, url, **args, class: "p-2 hover:bg-gray-25 rounded-sm text-black #{args[:class]}")
+ end
+ end
+
  # @param title [String] the title of the panel
  # @param title_hint [String] the title hint of the panel
  def initialize(title: nil, title_hint: nil)

admin/app/components/solidus_admin/ui/panel/component.yml

@@ -0,0 +1,2 @@
+en:
+ more: "More"

admin/spec/components/previews/solidus_admin/ui/panel/component_preview/overview.html.erb

@@ -1,4 +1,21 @@
 <div class="mb-8">
+ <div class="mb-8">
+ <h6 class="text-gray-500 mb-3 mt-0">
+ Full
+ </h6>
+
+ <%= render current_component.new(title: "SEO") do |panel| %>
+ <% panel.with_menu("Foo", "#foo") %>
+ <% panel.with_menu("Bar", "#bar") %>
+ <% panel.with_section do %><label>SKU:ABC-123</label><% end %>
+ <% panel.with_section do %><label>SKU:ABC-123</label><% end %>
+ <% panel.with_section do %><label>SKU:ABC-123</label><% end %>
+ <% panel.with_section do %><label>SKU:ABC-123</label><% end %>
+ <% panel.with_action(name: "Foo", href: "#foo") %>
+ <% end %>
+ </div>
+
+
  <h6 class="text-gray-500 mb-3 mt-0">
  Content only
  </h6>
@@ -61,3 +78,13 @@
  <% panel.with_action(name: "Foo", href: "#foo") %>
  <% end %>
 </div>
+
+<div class="mb-8">
+ <h6 class="text-gray-500 mb-3 mt-0">
+ With a menu
+ </h6>
+
+ <%= render current_component.new(title: "SEO") do |panel| %>
+ <% panel.with_menu("Foo", "#foo") %>
+ <% end %>
+</div>

admin/spec/features/order_spec.rb

@@ -17,6 +17,7 @@
  open_customer_menu
  expect(page).not_to have_content("Remove customer")
  expect(order.reload.user).to be_nil
+ expect(page).to be_axe_clean
  end
 
  it "allows changing the order email" do
@@ -33,6 +34,7 @@
  end
  expect(page).to have_content("Order was updated successfully")
  expect(page).to have_content("Order contact email [email protected]", normalize_ws: true)
+ expect(page).to be_axe_clean
  end
 
  context "in cart state" do
@@ -76,6 +78,6 @@
  private
 
  def open_customer_menu
- find("summary", text: "Customer").click
+ find("summary[title='More']").click
  end
 end