add disable_expand to AvatarStack (#3740)

Author: sarahkemi

.changeset/rotten-banks-speak.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+Add `disable_expand` param to AvatarStack for React component parity

app/components/primer/beta/avatar_stack.pcss

@@ -1,3 +1,8 @@
+/* stylelint-disable selector-max-specificity */
+/* The selector-max-specificity rule is disabled here because the nested selectors
+ in AvatarStack require high specificity to properly override default styles and 
+ achieve the intended visual stacking. */
+
 /* AvatarStack */
 
 /* Stacked avatars can be used to show who is participating in thread when
@@ -60,7 +65,7 @@
     }
   }
 
-  &:hover {
+  &:hover:not([data-disable-expand]) {
     & .avatar {
       margin-right: var(--base-size-4);
     }
@@ -74,6 +79,10 @@
       display: none !important;
     }
   }
+
+  &[data-disable-expand] {
+    position: relative;
+  }
 }
 
 .avatar.avatar-more {
@@ -110,7 +119,7 @@
     right: 0;
     flex-direction: row-reverse;
 
-    &:hover .avatar {
+    &:hover:not([data-disable-expand]) .avatar {
       margin-right: 0;
       margin-left: var(--base-size-4);
     }

app/components/primer/beta/avatar_stack.rb

@@ -22,14 +22,16 @@ class AvatarStack < Primer::Component
       # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>
       # @param align [Symbol] <%= one_of(Primer::Beta::AvatarStack::ALIGN_OPTIONS) %>
       # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
+      # @param disable_expand [Boolean] Whether to disable the expand behavior on hover. If true, avatars will not expand.
       # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
       #   The default tag is <%= pretty_value(Primer::Beta::AvatarStack::DEFAULT_BODY_TAG) %> but can be changed using `tag:`
       #   to <%= one_of(Primer::Beta::AvatarStack::BODY_TAG_OPTIONS, lower: true) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
+      def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, disable_expand: false, body_arguments: {}, **system_arguments)
         @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
         @system_arguments = system_arguments
         @tooltipped = tooltipped
+        @disable_expand = disable_expand
         @body_arguments = body_arguments
         @direction = @body_arguments[:direction]
 
@@ -39,6 +41,7 @@ def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_a
           "AvatarStack-body",
           @body_arguments[:classes]
         )
+        @body_arguments[:"data-disable-expand"] = true if @disable_expand
 
         @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
         @system_arguments[:classes] = class_names(

previews/primer/beta/avatar_stack_preview.rb

@@ -11,8 +11,9 @@ class AvatarStackPreview < ViewComponent::Preview
       # @param align select [["Left", left], ["Right", right]]
       # @param tooltipped toggle
       # @param tooltip_label text
-      def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
-        render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |component|
+      # @param disable_expand toggle
+      def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!", disable_expand: false)
+        render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, disable_expand: disable_expand, body_arguments: { label: tooltip_label })) do |component|
           Array.new(number_of_avatars&.to_i || 1) do
             component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
           end
@@ -97,6 +98,17 @@ def with_tooltip
           component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
         end
       end
+
+      # @label With disabled expand
+      def with_disabled_expand
+        render(Primer::Beta::AvatarStack.new(disable_expand: true)) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
       #
       # @!endgroup
     end

test/components/beta/avatar_stack_test.rb

@@ -109,4 +109,18 @@ def test_renders_three_plus_avatar_stack
       end
     end
   end
+
+  def test_renders_with_disable_expand
+    render_inline(Primer::Beta::AvatarStack.new(disable_expand: true)) do |component|
+      component.with_avatar(src: "Foo", alt: "Bar")
+      component.with_avatar(src: "Foo", alt: "Bar")
+      component.with_avatar(src: "Foo", alt: "Bar")
+    end
+
+    assert_selector(".AvatarStack") do
+      assert_selector(".AvatarStack-body[data-disable-expand]") do
+        assert_selector("img.avatar", count: 3)
+      end
+    end
+  end
 end