diff --git a/.changeset/unlucky-bags-perform.md b/.changeset/unlucky-bags-perform.md new file mode 100644 index 0000000000..8a015fb1d0 --- /dev/null +++ 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 index 2c26aa3fc3..8031d86bf1 100644 --- 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 index 6eb426869e..35a9716d90 100644 --- a/previews/primer/beta/icon_button_preview.rb +++ b/previews/primer/beta/icon_button_preview.rb @@ -11,6 +11,7 @@ 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, @@ -18,7 +19,8 @@ def playground( 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 index d3cb092ac5..7df14de4ef 100644 --- 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 index 3c3c8d4782..db57b78369 100644 --- 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