Skip to content

feat: Add no_title support (and stories) for RelativeTime #2872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jun 4, 2024
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions app/components/primer/beta/relative_time.rb
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ class RelativeTime < Primer::Component
# @param format_style [Symbol] The format the display should take. <%= one_of(Primer::Beta::RelativeTime::FORMAT_STYLE_OPTIONS) %>
# @param lang [string] The language to use.
# @param title [string] Provide a custom title to the element.
# @param no_title [Boolean] Removes the `title` attribute provided on the element by default.
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
def initialize(
datetime:,
Expand All @@ -120,6 +121,7 @@ def initialize(
format_style: nil,
lang: nil,
title: nil,
no_title: nil,
**system_arguments
)
@system_arguments = deny_tag_argument(**system_arguments)
Expand All @@ -137,6 +139,7 @@ def initialize(
@system_arguments[:threshold] = threshold if threshold.present?
@system_arguments[:precision] = precision if precision.present?
@system_arguments[:title] = title if title.present?
@system_arguments[:"no-title"] = no_title if no_title.present?
@system_arguments[:lang] = lang if lang.present?
@system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
@system_arguments[:"format-style"] = format_style if format_style.present?
Expand Down
12 changes: 12 additions & 0 deletions previews/primer/beta/relative_time_preview.rb
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,18 @@ def count_down_timer(
title: title
))
end

# @label No Title Attribute
# @snapshot
def no_title_attribute()
render(Primer::Beta::RelativeTime.new(datetime: Time.utc(2020, 1, 1, 0, 0, 0), no_title: true))
end

# @label Link With Tooltip
# @snapshot
def link_with_tooltip()
render_with_template
end
end
end
end
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<% time = Time.utc(2020, 1, 1, 0, 0, 0) %>

<%= render(Primer::Beta::Link.new(href: "#", id: "link")) do |link| %>
<% link.with_tooltip(id: "tool-tip", text: time.to_s) %>
<%= render(Primer::Beta::RelativeTime.new(id: "relative-time", datetime: time, no_title: true)) %>
<% end %>

<script>
// When `<relative-time>`’s `title` changes, update `<tool-tip>` text.
document.getElementById("relative-time").addEventListener("relative-time-updated", ({newTitle}) => {
document.getElementById("tool-tip").textContent = newTitle
})
</script>
Loading