Merge branch 'main' into autocomplete-pcss

.changeset/dull-rabbits-glow.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Avoid double-registering of exported components

.changeset/perfect-jokes-switch.md

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

.changeset/stale-houses-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+testing to ensure CSS classes used by PVC components are valid, according to the available selectors

app/components/primer/alpha/x_banner.ts

@@ -1,7 +1,7 @@
 import {controller, target} from '@github/catalyst'
 
 @controller
-export class XBannerElement extends HTMLElement {
+class XBannerElement extends HTMLElement {
   @target titleText: HTMLElement
 
   dismiss() {

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

@@ -4,6 +4,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

@@ -15,7 +15,6 @@
  *= require @primer/css/dist/tooltips.css
  *= require @primer/css/dist/overlay.css
  *= require @primer/css/dist/utilities.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

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -24,7 +24,7 @@
   - title: AvatarStack
     url: "/components/beta/avatarstack"
   - title: Banner
-    url: "/components/beta/banner"
+    url: "/components/alpha/banner"
   - title: Blankslate
     url: "/components/beta/blankslate"
   - title: BorderBox

previews/primer/alpha/banner_preview.rb

@@ -48,7 +48,7 @@ def scheme_warning
       #
       # @!endgroup
 
-      # @label Dismissable 
+      # @label Dismissable
       def dismissable
         render(Primer::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
       end

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