Icon button hide tooltip (#1491)

primer · Oct 13, 2022 · f43bd08 · f43bd08
1 parent 37cace5
commit f43bd08
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 4 deletions.
diff --git a/.changeset/unlucky-bags-perform.md b/.changeset/unlucky-bags-perform.md
@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Allow IconButton tooltips to be hidden
diff --git a/app/components/primer/beta/icon_button.rb b/app/components/primer/beta/icon_button.rb
@@ -54,12 +54,14 @@ class IconButton < Primer::Component
       # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
       # @param aria-label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
       # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
+      # @param show_tooltip [Boolean] Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition.
       # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+      def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, show_tooltip: true, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
         @icon = icon
 
         @wrapper_arguments = wrapper_arguments
+        @show_tooltip = show_tooltip
         @system_arguments = system_arguments
         @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
 
@@ -99,7 +101,7 @@ def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, tooltip_dir
       private
 
       def render_tooltip?
-        @system_arguments[:tag] != :summary
+        @show_tooltip && @system_arguments[:tag] != :summary
       end
     end
   end

diff --git a/previews/primer/beta/icon_button_preview.rb b/previews/primer/beta/icon_button_preview.rb
@@ -11,14 +11,16 @@ class IconButtonPreview < ViewComponent::Preview
       # @param disabled toggle
       # @param tag select [a, summary, button]
       # @param icon [Symbol] octicon
+      # @param show_tooltip toggle
       def playground(
         scheme: :default,
         size: :medium,
         id: "button-preview",
         tag: :button,
         disabled: false,
         icon: :plus,
-        aria_label: "Button"
+        aria_label: "Button",
+        show_tooltip: true
       )
         render(Primer::Beta::IconButton.new(
                  scheme: scheme,
@@ -27,7 +29,8 @@ def playground(
                  tag: tag,
                  disabled: disabled,
                  icon: icon,
-                 "aria-label": aria_label
+                 "aria-label": aria_label,
+                 show_tooltip: show_tooltip
                ))
       end
 

diff --git a/static/arguments.json b/static/arguments.json
@@ -1359,6 +1359,12 @@
         "default": "N/A",
         "description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
       },
+      {
+        "name": "show_tooltip",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition."
+      },
       {
         "name": "tooltip_direction",
         "type": "Symbol",

diff --git a/test/components/primer/beta/icon_button_test.rb b/test/components/primer/beta/icon_button_test.rb
@@ -19,4 +19,11 @@ def test_adds_wrapper_arguments
 
     assert_selector(".Button-withTooltip#foo")
   end
+
+  def test_allows_hiding_tooltip
+    render_inline(Primer::Beta::IconButton.new(icon: :star, "aria-label": "Star", show_tooltip: false))
+
+    refute_selector(".Button-withTooltip")
+    refute_selector("tool-tip")
+  end
 end