Add `Tooltip` support to `Button`
MODIFY
CHANGELOG.md
CHANGELOG.md
@@ -36,6 +36,10 @@ The category for changes related to documentation, testing and tooling. Also, fo
_Cameron Dutro_
+- Add `Tooltip` support to `Button`.
+
+ _Hector Garcia_
+
### Bug Fixes
- Ensure tooltip arrow position and tooltip width is correct.

MODIFY
app/components/primer/button_component.html.erb
app/components/primer/button_component.html.erb
<%= render Primer::BaseButton.new(**@system_arguments) do -%>
<%= leading_visual %><%= trimmed_content %><%= trailing_visual %><%= primer_octicon("triangle-down", ml: 2, mr: -1) if @dropdown %>
+ <%= tooltip %>
<% end -%>

MODIFY
app/components/primer/button_component.rb
app/components/primer/button_component.rb
@@ -56,6 +56,23 @@ module Primer
}
alias counter trailing_visual_counter # remove alias when all buttons are migrated to new slot names
+ # `Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.
+ # **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.
+ # Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+ #
+ # @param type [Symbol] (:description) <%= one_of(Primer::Alpha::Tooltip::TYPE_OPTIONS) %>
+ # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Alpha::Tooltip) %>.
+ renders_one :tooltip, lambda { |**system_arguments|
+ raise ArgumentError, "Buttons with a tooltip must have a unique `id` set on the `Button`." if @id.blank? && !Rails.env.production?
+
+ @system_arguments = system_arguments
+
+ @system_arguments[:for_id] = @id
+ @system_arguments[:type] ||= :description
+
+ Primer::Alpha::Tooltip.new(**@system_arguments)
+ }
+
# @example Schemes
# <%= render(Primer::ButtonComponent.new) { "Default" } %>
# <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
@@ -96,6 +113,15 @@ module Primer
# Button
# <% end %>
#
+ # @example With tooltip
+ # @description
+ # Use tooltips sparingly and as a last resort. Consult the <%= link_to_component(Primer::Alpha::Tooltip) %> documentation for more information.
+ # @code
+ # <%= render(Primer::ButtonComponent.new(id: "button-with-tooltip")) do |c| %>
+ # <% c.tooltip(text: "Tooltip text") %>
+ # Button
+ # <% end %>
+ #
# @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
# @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
# @param size [Symbol] <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
@@ -118,6 +144,9 @@ module Primer
@dropdown = dropdown
@system_arguments = system_arguments
+
+ @id = @system_arguments[:id]
+
@system_arguments[:classes] = class_names(
system_arguments[:classes],
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],

MODIFY
lib/tasks/docs.rake
lib/tasks/docs.rake
@@ -96,7 +96,8 @@ namespace :docs do
Primer::TimeAgoComponent,
Primer::Alpha::UnderlinePanels,
Primer::Alpha::TabPanels,
- Primer::Alpha::Tooltip
+ Primer::Alpha::Tooltip,
+ Primer::ButtonComponent
]
all_components = Primer::Component.descendants - [Primer::BaseComponent]

MODIFY
stories/primer/button_component_stories.rb
stories/primer/button_component_stories.rb
@@ -19,6 +19,24 @@ class Primer::ButtonComponentStories < ViewComponent::Storybook::Stories
end
end
+ story(:with_tooltip) do
+ controls do
+ select(:scheme, Primer::ButtonComponent::SCHEME_OPTIONS, :primary)
+ select(:size, Primer::ButtonComponent::SIZE_OPTIONS, :medium)
+ select(:tag, Primer::BaseButton::TAG_OPTIONS, :button)
+ select(:type, Primer::BaseButton::TYPE_OPTIONS, :button)
+ text(:id, "button-with-tooltip")
+ group_item false
+ dropdown false
+ disabled false
+ end
+
+ content do |c|
+ c.tooltip(text: "Tooltip text")
+ "Click me"
+ end
+ end
+
story(:with_leading_visual) do
controls do
select(:scheme, Primer::ButtonComponent::SCHEME_OPTIONS, :primary)

Add `Tooltip` support to `Button` (#1058)