Fix AvatarComponent to apply the avatar-small class, not avatar--small
MODIFY
CHANGELOG.md
CHANGELOG.md
*Steve Richert*
+* Fix `AvatarComponent` to apply the `avatar-small` class rather than `avatar--small`.
+
+ *Steve Richert*
+
## 0.0.27
* Promote `BreadcrumbComponent` and `ProgressBarComponent` to beta status.

MODIFY
app/components/primer/avatar_component.rb
app/components/primer/avatar_component.rb
@@ -37,7 +37,7 @@ module Primer
@avatar_classes = class_names(
"avatar",
- "avatar--small" => size < SMALL_THRESHOLD,
+ "avatar-small" => size < SMALL_THRESHOLD,
"circle" => !square
)

MODIFY
docs/content/components/avatar.md
docs/content/components/avatar.md
@@ -17,7 +17,7 @@ for organizations or any other non-human avatars.
### Default
-<Example src="<img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img>" />
+<Example src="<img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img>" />
```erb
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
@@ -25,7 +25,7 @@ for organizations or any other non-human avatars.
### Square
-<Example src="<img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small '></img>" />
+<Example src="<img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small '></img>" />
```erb
<%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
@@ -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 '><img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img></a>" />
```erb
<%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>

MODIFY
docs/content/components/avatarstack.md
docs/content/components/avatarstack.md
@@ -15,7 +15,7 @@ Use AvatarStack to stack multiple avatars together.
### Default
-<Example src="<div class='AvatarStack AvatarStack--three-plus '> <div class='AvatarStack-body '> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img> <div class='avatar avatar-more'></div> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img></div></div>" />
+<Example src="<div class='AvatarStack AvatarStack--three-plus '> <div class='AvatarStack-body '> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img> <div class='avatar avatar-more'></div> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img></div></div>" />
```erb
<%= render(Primer::AvatarStackComponent.new) do |c| %>
@@ -27,7 +27,7 @@ Use AvatarStack to stack multiple avatars together.
### Align right
-<Example src="<div class='AvatarStack AvatarStack--right AvatarStack--three-plus '> <div class='AvatarStack-body '> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img> <div class='avatar avatar-more'></div> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img></div></div>" />
+<Example src="<div class='AvatarStack AvatarStack--right AvatarStack--three-plus '> <div class='AvatarStack-body '> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img> <div class='avatar avatar-more'></div> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img></div></div>" />
```erb
<%= render(Primer::AvatarStackComponent.new(align: :right)) do |c| %>
@@ -39,7 +39,7 @@ Use AvatarStack to stack multiple avatars together.
### With tooltip
-<Example src="<div class='AvatarStack AvatarStack--three-plus '> <div aria-label='This is a tooltip!' class='AvatarStack-body tooltipped tooltipped-n '> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img> <div class='avatar avatar-more'></div> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar--small circle '></img></div></div>" />
+<Example src="<div class='AvatarStack AvatarStack--three-plus '> <div aria-label='This is a tooltip!' class='AvatarStack-body tooltipped tooltipped-n '> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img> <div class='avatar avatar-more'></div> <img src='http://placekitten.com/200/200' alt='@kittenuser' size='20' height='20' width='20' class='avatar avatar-small circle '></img></div></div>" />
```erb
<%= render(Primer::AvatarStackComponent.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>

MODIFY
test/components/avatar_component_test.rb
test/components/avatar_component_test.rb
@@ -26,14 +26,14 @@ class PrimerAvatarComponentTest < Minitest::Test
def test_defaults_adds_small_modifier_when_size_is_less_than_threshold
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", size: Primer::AvatarComponent::SMALL_THRESHOLD - 1))
- assert_selector("img.avatar.avatar--small")
+ assert_selector("img.avatar.avatar-small")
end
def test_defaults_does_not_add_small_modifier_when_size_is_greater_than_threshold
render_inline(Primer::AvatarComponent.new(src: "https://github.com/github.png", alt: "github", size: Primer::AvatarComponent::SMALL_THRESHOLD + 1))
assert_selector("img.avatar")
- refute_selector(".avatar--small")
+ refute_selector(".avatar-small")
end
def test_adds_custom_classes
@@ -84,8 +84,8 @@ class PrimerAvatarComponentTest < Minitest::Test
def test_adds_small_modifier_to_link_wrapper_when_size_is_less_than_threshold
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("a.avatar.avatar-small") do
+ assert_selector("img.avatar.avatar-small")
end
end
@@ -95,7 +95,7 @@ class PrimerAvatarComponentTest < Minitest::Test
assert_selector("a.avatar") do
assert_selector("img.avatar")
end
- refute_selector(".avatar--small")
+ refute_selector(".avatar-small")
end
def test_adds_custom_classes_to_link_wrapper

Fix AvatarComponent to apply the avatar-small class, not avatar--small