Move Avatar + AvatarStack styles to PVC

.changeset/perfect-jokes-switch.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Move `Avatar` + `AvatarStack` styles to PVC

app/components/primer/beta/avatar.pcss

@@ -0,0 +1,73 @@
+/* avatar */
+
+.avatar {
+  display: inline-block;
+  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
+  line-height: 1;
+  vertical-align: middle;
+  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */
+  border-radius: var(--primer-borderRadius-medium, 6px);
+  flex-shrink: 0;
+  box-shadow: 0 0 0 1px var(--color-avatar-border);
+}
+
+.avatar-link {
+  float: left;
+  line-height: 1;
+}
+
+/* User for example on /stars and /user for grids of avatars */
+.avatar-group-item {
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+/* Border radius */
+
+.avatar-1,
+.avatar-2,
+.avatar-small {
+  border-radius: var(--primer-borderRadius-small, 4px);
+}
+
+/* Sizes */
+
+.avatar-1 {
+  width: var(--base-size-16, 16px);
+  height: var(--base-size-16, 16px);
+}
+
+.avatar-2 {
+  width: var(--base-size-20, 20px);
+  height: var(--base-size-20, 20px);
+}
+
+.avatar-3 {
+  width: var(--base-size-24, 24px);
+  height: var(--base-size-24, 24px);
+}
+
+.avatar-4 {
+  width: var(--base-size-28, 28px);
+  height: var(--base-size-28, 28px);
+}
+
+.avatar-5 {
+  width: var(--base-size-32, 32px);
+  height: var(--base-size-32, 32px);
+}
+
+.avatar-6 {
+  width: var(--base-size-40, 40px);
+  height: var(--base-size-40, 40px);
+}
+
+.avatar-7 {
+  width: var(--base-size-48, 48px);
+  height: var(--base-size-48, 48px);
+}
+
+.avatar-8 {
+  width: var(--base-size-64, 64px);
+  height: var(--base-size-64, 64px);
+}

app/components/primer/beta/avatar_stack.pcss

@@ -0,0 +1,141 @@
+/* AvatarStack */
+
+/* Stacked avatars can be used to show who is participating in thread when
+** there is limited space available. */
+
+.AvatarStack {
+  position: relative;
+  min-width: 26px;
+  height: 20px;
+
+  & .AvatarStack-body {
+    position: absolute;
+  }
+
+  &.AvatarStack--two {
+    min-width: 36px;
+  }
+
+  &.AvatarStack--three-plus {
+    min-width: 46px;
+  }
+}
+
+.AvatarStack-body {
+  display: flex;
+  background: var(--color-canvas-default);
+  border-radius: 100px;
+
+  & .avatar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    box-sizing: content-box;
+    margin-right: -11px;
+    background-color: var(--color-canvas-default);
+    border-right: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
+    border-radius: var(--primer-borderRadius-small, 4px);
+    box-shadow: none;
+    transition: margin 0.1s ease-in-out;
+
+    &:first-child {
+      z-index: 3;
+    }
+
+    &:last-child {
+      z-index: 1;
+      border-right: 0;
+    }
+
+    & img {
+      border-radius: var(--primer-borderRadius-small, 4px);
+    }
+
+    /* Account for 4+ avatars */
+    &:nth-child(n + 4) {
+      display: none;
+      opacity: 0;
+    }
+  }
+
+  &:hover {
+    & .avatar {
+      margin-right: 3px;
+    }
+
+    & .avatar:nth-child(n + 4) {
+      display: flex;
+      opacity: 1;
+    }
+
+    & .avatar-more {
+      display: none !important;
+    }
+  }
+}
+
+.avatar.avatar-more {
+  z-index: 1;
+  margin-right: 0;
+  background: var(--color-canvas-subtle);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    height: 20px;
+    content: '';
+    border-radius: 2px;
+    outline: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
+  }
+
+  &::before {
+    width: 17px;
+    background: var(--color-avatar-stack-fade-more);
+  }
+
+  &::after {
+    width: 14px;
+    background: var(--color-avatar-stack-fade);
+  }
+}
+
+/* Right aligned variation */
+
+.AvatarStack--right {
+  & .AvatarStack-body {
+    right: 0;
+    flex-direction: row-reverse;
+
+    &:hover .avatar {
+      margin-right: 0;
+      margin-left: 3px;
+    }
+
+    & .avatar:not(:last-child) {
+      border-left: 0;
+    }
+  }
+
+  & .avatar.avatar-more {
+    background: var(--color-avatar-stack-fade);
+
+    &::before {
+      width: 5px;
+    }
+
+    &::after {
+      width: 2px;
+      background: var(--color-canvas-subtle);
+    }
+  }
+
+  & .avatar {
+    margin-right: 0;
+    margin-left: -11px;
+    border-right: 0;
+    border-left: var(--primer-borderWidth-thin, 1px) solid var(--color-canvas-default);
+  }
+}

app/components/primer/primer.pcss

@@ -3,6 +3,8 @@
 @import "./alpha/banner.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/segmented_control.pcss";
+@import "./beta/avatar.pcss";
+@import "./beta/avatar_stack.pcss";
 @import "./beta/breadcrumbs.pcss";
 @import "./beta/button.pcss";
 @import "./beta/counter.pcss";

demo/app/assets/stylesheets/application.css

@@ -16,7 +16,6 @@
  *= require @primer/css/dist/overlay.css
  *= require @primer/css/dist/utilities.css
  *= require @primer/css/dist/autocomplete.css
- *= require @primer/css/dist/avatars.css
  *= require @primer/css/dist/branch-name.css
  *= require @primer/css/dist/header.css
  *= require @primer/css/dist/loaders.css

previews/primer/beta/avatar_preview.rb

@@ -13,14 +13,70 @@ def playground(size: 24, shape: :circle, href: nil)
         render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
       end
 
-      # @label Default options
+      # @label Default
+      def default
+        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label As link
       #
-      # @param size [Integer] select [16, 20, 24, 32, 40, 48, 80]
-      # @param shape [Symbol] select [circle, square]
       # @param href [String] text
-      def default(size: 24, shape: :circle, href: nil)
-        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
+      def as_link(href: "#")
+        render(Primer::Beta::Avatar.new(href: href, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @!group Sizes
+      #
+      # @label 16px
+      def size_16
+        render(Primer::Beta::Avatar.new(size: 16, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 20px
+      def size_20
+        render(Primer::Beta::Avatar.new(size: 20, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 24px
+      def size_24
+        render(Primer::Beta::Avatar.new(size: 24, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 32px
+      def size_32
+        render(Primer::Beta::Avatar.new(size: 32, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
+
+      # @label 40px
+      def size_40
+        render(Primer::Beta::Avatar.new(size: 40, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 48px
+      def size_48
+        render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label 80px
+      def size_80
+        render(Primer::Beta::Avatar.new(size: 80, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
+
+      # @!group Shape
+      #
+      # @label Circle
+      def shape_circle
+        render(Primer::Beta::Avatar.new(shape: :circle, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label Square
+      def shape_square
+        render(Primer::Beta::Avatar.new(shape: :square, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+      #
+      # @!endgroup
     end
   end
 end

previews/primer/beta/avatar_stack_preview.rb

@@ -19,23 +19,64 @@ def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false,
         end
       end
 
-      # @label Default options
+      # @label Default
+      def default
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @!group Multiple avatars
       #
-      # @param number_of_avatars [Integer] number
-      # @param tag select [["div", div], ["span", span]]
-      # @param align select [["Left", left], ["Right", right]]
-      # @param tooltipped toggle
-      # @param tooltip_label text
-      def default(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 |c|
-          Array.new(number_of_avatars || 1) do
-            c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
-          end
+      # @label 1 avatar
+      def avatar_1
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
-      # @!group More Examples
+      # @label 2 avatars
+      def avatar_2
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
 
+      # @label 3 avatars
+      def avatar_3
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 4 avatars
+      def avatar_4
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label 5 avatars
+      def avatar_5
+        render(Primer::Beta::AvatarStack.new) do |c|
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+      #
+      # @!endgroup
+
+      # @!group More options
+      #
       # @label Align right
       def align_right
         render(Primer::Beta::AvatarStack.new(align: :right)) do |c|
@@ -53,6 +94,7 @@ def with_tooltip
           c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
+      #
       # @!endgroup
     end
   end