Let the ui/tab component only render as a button element

solidusio · Jul 27, 2023 · 25af019 · 25af019
1 parent be4945b
commit 25af019
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/admin/app/components/solidus_admin/ui/tab/component.rb b/admin/app/components/solidus_admin/ui/tab/component.rb
@@ -7,13 +7,7 @@ class SolidusAdmin::UI::Tab::Component < SolidusAdmin::BaseComponent
     l: %w[h-12 px-4 body-text-bold],
   }
 
-  TAG_NAMES = {
-    a: :a,
-    button: :button,
-  }
-
-  def initialize(text:, size: :m, tag: :a, **attributes)
-    @tag = tag
+  def initialize(text:, size: :m, **attributes)
     @text = text
     @size = size
     @attributes = attributes
@@ -39,7 +33,7 @@ def initialize(text:, size: :m, tag: :a, **attributes)
 
   def call
     content_tag(
-      TAG_NAMES.fetch(@tag.to_sym),
+      :button,
       @text,
       **@attributes
     )

diff --git a/admin/app/components/solidus_admin/ui/table/component.html.erb b/admin/app/components/solidus_admin/ui/table/component.html.erb
@@ -11,7 +11,15 @@
   <% toolbar_classes = "h-14 p-2 bg-white border-b border-gray-100 justify-start items-center gap-2 visible:flex hidden:hidden" %>
 
   <div class="<%= toolbar_classes %>" data-<%= stimulus_id %>-target="scopesToolbar">
-    <%= render @tab_component.new(text: "All", 'aria-current': true, scheme: :secondary, href: "") %>
+    <form>
+      <%= render @tab_component.new(
+        text: "All",
+        'aria-current': true,
+        scheme: :secondary,
+        formaction: "",
+        formmethod: "get",
+      ) %>
+    </form>
   </div>
 
   <% if @batch_actions %>

diff --git a/admin/spec/components/previews/solidus_admin/ui/tab/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/tab/component_preview/overview.html.erb
@@ -10,7 +10,7 @@
       <td class="font-bold px-3 py-1"><%= state.to_s.humanize %></td>
       <% current_component::SIZES.keys.each do |size| %>
         <td class="px-3 py-1 text-center">
-          <%= render current_component.new(size: size, text: text, disabled: state == :disabled, active: state == :active) %>
+          <%= render current_component.new(size: size, text: text, 'aria-disabled': state == :disabled, 'aria-active': state == :active) %>
         </td>
       <% end %>
     </tr>