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

ADD
app/components/primer/link_component.erb
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+ <%= content %>
+ <%= tooltip %>
+<% end %>

MODIFY
app/components/primer/link_component.rb
app/components/primer/link_component.rb
@@ -15,6 +15,23 @@ module Primer
DEFAULT_TAG = :a
TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+ # `Tooltip` that appears on mouse hover or keyboard focus over the link. 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, "Links with a tooltip must have a unique `id` set on the `LinkComponent`." 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 Default
# <%= render(Primer::LinkComponent.new(href: "#")) { "Link" } %>
#
@@ -31,6 +48,15 @@ module Primer
# @example Span as link
# <%= render(Primer::LinkComponent.new(tag: :span)) { "Span as a link" } %>
#
+ # @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::LinkComponent.new(href: "#", id: "link-with-tooltip")) do |c| %>
+ # <% c.tooltip(text: "Tooltip text") %>
+ # Link
+ # <% end %>
+ #
# @param tag [String] <%= one_of(Primer::LinkComponent::TAG_OPTIONS) %>
# @param href [String] URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
# @param scheme [Symbol] <%= one_of(Primer::LinkComponent::SCHEME_MAPPINGS.keys) %>
@@ -39,6 +65,9 @@ module Primer
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
def initialize(href: nil, tag: DEFAULT_TAG, scheme: DEFAULT_SCHEME, muted: false, underline: true, **system_arguments)
@system_arguments = system_arguments
+
+ @id = @system_arguments[:id]
+
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
@system_arguments[:href] = href
@system_arguments[:classes] = class_names(
@@ -50,10 +79,6 @@ module Primer
)
end
- def call
- render(Primer::BaseComponent.new(**@system_arguments)) { content }
- end
-
def before_render
raise ArgumentError, "href is required when using <a> tag" if @system_arguments[:tag] == :a && @system_arguments[:href].nil? && !Rails.env.production?
end

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

MODIFY
stories/primer/link_component_stories.rb
stories/primer/link_component_stories.rb
@@ -16,4 +16,20 @@ class Primer::LinkComponentStories < ViewComponent::Storybook::Stories
"This is a link!"
end
end
+
+ story(:with_tooltip) do
+ controls do
+ href "https://github.com/"
+ muted false
+ underline true
+ text(:id, "link-with-tooltip")
+ select(:scheme, Primer::LinkComponent::SCHEME_MAPPINGS.keys, Primer::LinkComponent::DEFAULT_SCHEME)
+ select(:tag, Primer::LinkComponent::TAG_OPTIONS, Primer::LinkComponent::DEFAULT_TAG)
+ end
+
+ content do |c|
+ c.tooltip(text: "Tooltip text")
+ "This is a link!"
+ end
+ end
end

Add `Tooltip` support to `Link` (#1069)