diff --git a/.changeset/poor-crabs-rhyme.md b/.changeset/poor-crabs-rhyme.md new file mode 100644 index 0000000000..b338016ab4 --- /dev/null +++ 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 index 92771b4dd1..dfa62adead 100644 --- 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 index d21404b807..50b8f901f9 100644 --- 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 index 15ec40c926..9e98674da9 100644 --- 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 index 0f9a6ce497..674d44a41d 100644 --- 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 index 3d7992d4b3..8344800284 100644 --- 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: "/" })