Set avatar link wrapper line height to fix an overflow bug
MODIFY
app/components/primer/avatar_component.rb
app/components/primer/avatar_component.rb
@@ -24,33 +24,32 @@ module Primer
# @param square [Boolean] Used to create a square avatar.
# @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
- def initialize(src:, alt:, size: 20, square: false, href: nil, classes: nil, **image_arguments)
+ def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
@href = href
+ @system_arguments = system_arguments
+ @system_arguments[:tag] = :img
+ @system_arguments[:src] = src
+ @system_arguments[:alt] = alt
+ @system_arguments[:size] = size
+ @system_arguments[:height] = size
+ @system_arguments[:width] = size
- @image_arguments = image_arguments
- @image_arguments[:tag] = :img
- @image_arguments[:src] = src
- @image_arguments[:alt] = alt
- @image_arguments[:size] = size
- @image_arguments[:height] = size
- @image_arguments[:width] = size
-
- @avatar_classes = class_names(
+ @system_arguments[:classes] = class_names(
+ system_arguments[:classes],
"avatar",
"avatar-small" => size < SMALL_THRESHOLD,
- "circle" => !square
+ "circle" => !square,
+ "lh-0" => !!href # Addresses a overflow issue with linked avatars
)
-
- @all_classes = class_names(classes, @avatar_classes)
end
def call
if @href
- render(Primer::LinkComponent.new(href: @href, classes: @all_classes)) do
- render(Primer::BaseComponent.new(classes: @avatar_classes, **@image_arguments)) { content }
+ render(Primer::LinkComponent.new(href: @href, classes: @system_arguments[:classes])) do
+ render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
end
else
- render(Primer::BaseComponent.new(classes: @all_classes, **@image_arguments)) { content }
+ render(Primer::BaseComponent.new(**@system_arguments)) { content }
end
end
end

MODIFY
docs/content/components/avatar.md
docs/content/components/avatar.md
@@ -33,7 +33,7 @@ for organizations or any other non-human avatars.
### Link
-<Example src="<a href='#' class='avatar avatar-small circle '><img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img></a>" />
+<Example src="<a href='#' class='avatar avatar-small circle lh-0 '><img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20'></img></a>" />
```erb
<%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>

MODIFY
test/components/avatar_component_test.rb
test/components/avatar_component_test.rb
@@ -60,7 +60,8 @@ class PrimerAvatarComponentTest < Minitest::Test
assert_selector("a.avatar") do |(a)|
assert_equal("#given-href", a["href"])
- assert_selector("img.avatar")
+ assert_selector("img")
+ refute_selector("img.avatar")
end
end
@@ -68,7 +69,8 @@ class PrimerAvatarComponentTest < Minitest::Test
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#"))
assert_selector("a.avatar.circle") do
- assert_selector("img.avatar.circle")
+ assert_selector("img")
+ refute_selector("img.circle")
end
end
@@ -76,7 +78,7 @@ class PrimerAvatarComponentTest < Minitest::Test
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#", square: true))
assert_selector("a.avatar") do
- assert_selector("img.avatar")
+ assert_selector("img")
end
refute_selector(".circle")
end
@@ -85,7 +87,8 @@ class PrimerAvatarComponentTest < Minitest::Test
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#", size: Primer::AvatarComponent::SMALL_THRESHOLD - 1))
assert_selector("a.avatar.avatar-small") do
- assert_selector("img.avatar.avatar-small")
+ assert_selector("img")
+ refute_selector("img.avatar-small")
end
end
@@ -93,7 +96,7 @@ class PrimerAvatarComponentTest < Minitest::Test
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#", size: Primer::AvatarComponent::SMALL_THRESHOLD + 1))
assert_selector("a.avatar") do
- assert_selector("img.avatar")
+ assert_selector("img")
end
refute_selector(".avatar-small")
end
@@ -102,10 +105,19 @@ class PrimerAvatarComponentTest < Minitest::Test
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#", classes: "custom-class"))
assert_selector("a.avatar.custom-class") do
- assert_selector("img.avatar")
- end
+ assert_selector("img")
refute_selector("img.custom-class")
end
+ end
+
+ def test_clears_link_wrapper_line_height
+ render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", href: "#"))
+
+ assert_selector("a.lh-0") do
+ assert_selector("img")
+ refute_selector("img.lh-0")
+ end
+ end
def test_status
assert_component_state(Primer::AvatarComponent, :beta)

Set avatar link wrapper line height to fix an overflow bug