Remove ability to show trailing action buttons in ActionList and NavL…

…ist on hover (#1873)
primer · Mar 9, 2023 · 125861b · 125861b
1 parent 1b92964
commit 125861b
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 30 deletions.
diff --git a/.changeset/poor-crabs-rhyme.md b/.changeset/poor-crabs-rhyme.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Remove ability to show trailing action buttons in ActionList and NavList on hover
diff --git a/app/components/primer/alpha/action_list/item.rb b/app/components/primer/alpha/action_list/item.rb
@@ -84,12 +84,16 @@ class Item < Primer::Component
         # A button rendered after the trailing icon that can be used to show a menu, activate
         # a dialog, etc.
         #
-        # @param show_on_hover [Boolean] Whether or not to show the button when the list item is hovered. If `true`, the button will be invisible until hovered. If `false`, the button will always be visible. Defaults to `false`.
         # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::IconButton) %>.
-        renders_one :trailing_action, lambda { |show_on_hover: false, **system_arguments|
-          @trailing_action_on_hover = show_on_hover
+        renders_one :trailing_action, lambda { |**system_arguments|
+          Primer::Beta::IconButton.new(
+            classes: class_names(
+              system_arguments[:classes],
+              "ActionListItem-trailingAction"
+            ),
 
-          Primer::Beta::IconButton.new(scheme: :invisible, classes: ["ActionListItem-trailingAction"], **system_arguments)
+            **system_arguments
+          )
         }
 
         # `Tooltip` that appears on mouse hover or keyboard focus over the trailing action button. Use tooltips sparingly and as
@@ -167,7 +171,6 @@ def initialize(
           @truncate_label = truncate_label
           @disabled = disabled
           @active = active
-          @trailing_action_on_hover = false
           @id = id
           @system_arguments = system_arguments
           @content_arguments = content_arguments
@@ -231,7 +234,6 @@ def before_render
           @system_arguments[:classes] = class_names(
             @system_arguments[:classes],
             "ActionListItem--withActions" => trailing_action.present?,
-            "ActionListItem--trailingActionHover" => @trailing_action_on_hover,
             "ActionListItem--navActive" => active?
           )
 

diff --git a/app/components/primer/alpha/nav_list.rb b/app/components/primer/alpha/nav_list.rb
@@ -94,10 +94,10 @@ def self.custom_element_name
       #     <% component.with_group do |group| %>
       #       <% group.with_heading(title: "My Favorite Foods") %>
       #       <% group.with_item(label: "Popplers", selected_by_ids: :popplers, href: "/foods/popplers") do |item| %>
-      #         <% item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Add new food", size: :medium) %>
+      #         <% item.with_trailing_action(icon: "plus", "aria-label": "Add new food", size: :medium) %>
       #       <% end %>
       #       <% group.with_item(label: "Slurm", selected_by_ids: :slurm, href: "/foods/slurm") do |item| %>
-      #         <% item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Add new food", size: :medium) %>
+      #         <% item.with_trailing_action(icon: "plus", "aria-label": "Add new food", size: :medium) %>
       #       <% end %>
       #     <% end %>
       #   <% end %>

diff --git a/previews/primer/alpha/action_list_preview.rb b/previews/primer/alpha/action_list_preview.rb
@@ -135,7 +135,6 @@ def heading(
       # @param private_leading_action_icon [Symbol] octicon
       # @param private_trailing_action_icon [Symbol] octicon
       # @param trailing_action toggle
-      # @param trailing_action_on_hover toggle
       # @param tooltip toggle
       def item(
         label: "Label",
@@ -156,7 +155,6 @@ def item(
         trailing_visual_text: nil,
         private_leading_action_icon: nil,
         private_trailing_action_icon: nil,
-        trailing_action_on_hover: false,
         trailing_action: false,
         tooltip: false
       )
@@ -195,7 +193,7 @@ def item(
             item.with_private_trailing_action_icon(icon: private_trailing_action_icon)
           end
 
-          item.with_trailing_action(show_on_hover: trailing_action_on_hover, icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
+          item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium) if trailing_action && trailing_action != :none
 
           item.description { description } if description
 
@@ -294,18 +292,7 @@ def item_trailing_action
                  aria: { label: "List heading" }
                )) do |component|
           component.with_item(label: "Default item", href: "/") do |item|
-            item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Button tooltip", size: :medium)
-          end
-        end
-      end
-
-      # @label Item [trailing action on hover]
-      def item_trailing_action_hover
-        render(Primer::Alpha::ActionList.new(
-                 aria: { label: "List heading" }
-               )) do |component|
-          component.with_item(label: "Default item", href: "/") do |item|
-            item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Button tooltip", size: :medium)
+            item.with_trailing_action(icon: "plus", "aria-label": "Button tooltip", size: :medium)
           end
         end
       end

diff --git a/previews/primer/alpha/nav_list_preview/trailing_action.html.erb b/previews/primer/alpha/nav_list_preview/trailing_action.html.erb
@@ -2,7 +2,7 @@
   <% list.with_group do |group| %>
     <%= group.with_heading(title: "Shopping list") %>
     <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
-      <%= item.with_trailing_action(show_on_hover: true, icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
+      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
     <% end %>
     <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
       <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>

diff --git a/test/components/alpha/action_list_test.rb b/test/components/alpha/action_list_test.rb
@@ -33,12 +33,6 @@ def test_item_tooltip
         assert_selector(".ActionListItem > tool-tip")
       end
 
-      def test_item_trailing_action_on_hover
-        render_preview(:item, params: { trailing_action: "arrow-down", trailing_action_on_hover: true })
-
-        assert_selector(".ActionListItem--trailingActionHover")
-      end
-
       def test_item_leading_visual_avatar
         render_preview(:item, params: { leading_visual_avatar_src: "/" })