Add footer slot to DropdownComponent (#4682)

Author: adrianthedev

app/assets/stylesheets/css/components/ui/dropdown.css

@@ -160,6 +160,34 @@
   outline-offset: var(--focus-outline-offset-inset);
 }
 
+/* ==========================================================================
+   Footer (DropdownComponent with_footer)
+   A row under the list, outside the scrollable group and the inline search's
+   filter scope — always visible. Items share the menu-item metrics but read
+   quieter, as footer actions rather than options.
+   ========================================================================== */
+
+.dropdown-menu__footer {
+  @apply flex flex-col self-stretch p-1 border-t border-tertiary;
+}
+
+.dropdown-menu__footer :is(a, button) {
+  @apply flex items-center w-full justify-start gap-1.5 px-2 py-1.5 min-h-8 rounded-md border-none bg-transparent whitespace-nowrap text-content-secondary font-normal text-sm cursor-pointer leading-5;
+
+  &:hover {
+    @apply bg-secondary text-content;
+  }
+
+  &:focus-visible {
+    @apply bg-primary;
+    outline-offset: var(--focus-outline-offset-inset);
+  }
+
+  svg {
+    @apply shrink-0 size-4 text-inherit;
+  }
+}
+
 .dropdown-menu__icon,
 .dropdown-menu__list > :is(a, button) svg {
   @apply shrink-0 size-4 text-inherit;

app/components/avo/u_i/dropdown_component.html.erb

@@ -29,6 +29,9 @@
           <% if @searchable %>
             <p class="dropdown-menu__search-empty" data-popover-menu-target="empty" hidden>No matching options</p>
           <% end %>
+          <% if footer? %>
+            <div class="dropdown-menu__footer"><%= footer %></div>
+          <% end %>
         </div>
       <% end %>
     <% end %>

app/components/avo/u_i/dropdown_component.rb

@@ -14,6 +14,9 @@ class Avo::UI::DropdownComponent < Avo::BaseComponent
 
   renders_one :trigger
   renders_one :items
+  # A row pinned under the list — outside the scrollable group and the inline
+  # search's filter scope, so it stays visible. Popover mode only.
+  renders_one :footer
 
   # this is used to trigger the dropdown menu from trigger element
   # data: {action: component.action} => click->dropdown-menu#toggle

spec/dummy/test/components/previews/u_i/dropdown_component_preview.rb

@@ -42,6 +42,11 @@ def default
     def searchable
       render_with_template(template: "u_i/dropdown_component_preview/searchable")
     end
+
+    # Popover dropdown with a footer row pinned under the (filterable) list
+    def with_footer
+      render_with_template(template: "u_i/dropdown_component_preview/with_footer")
+    end
     # @!endgroup
   end
 end

spec/dummy/test/components/previews/u_i/dropdown_component_preview/with_footer.html.erb

@@ -0,0 +1,24 @@
+<div class="border-2 border-gray-200 rounded-md p-4 w-96 flex justify-center items-center">
+  <%= render Avo::UI::DropdownComponent.new(popover_mode: true, searchable: true) do |component| %>
+    <% component.with_trigger do %>
+      <button type="button"
+              class="inline-flex items-center justify-center rounded-md p-1 cursor-pointer"
+              popovertarget="<%= component.popover_id %>"
+              aria-haspopup="menu"
+              aria-label="Fruits">
+        <%= svg "tabler/outline/dots-vertical" %>
+      </button>
+    <% end %>
+    <% component.with_items do %>
+      <% %w[Apple Avocado Banana Cherry Mango Peach Pear Plum].each do |fruit| %>
+        <%= button_tag(fruit, type: "button") %>
+      <% end %>
+    <% end %>
+    <% component.with_footer do %>
+      <%= link_to "#" do %>
+        <%= svg "tabler/outline/external-link" %>
+        All fruits
+      <% end %>
+    <% end %>
+  <% end %>
+</div>