openproject-primer_view_components 0.78.0 → 0.79.0

data/app/components/primer/open_project/page_header.css

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 auto;font-size:var(--text-body-size-medium)}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:var(--base-size-2)}.PageHeader-parentLink{flex:1 1 auto}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{line-height:var(--control-small-size)}
+.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 auto;font-size:var(--text-body-size-medium)}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:var(--base-size-2)}.PageHeader-parentLink{flex:1 1 auto}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{line-height:var(--control-small-size)}.PageHeader--noBreadcrumb .PageHeader-actions{height:var(--control-small-size)}

data/app/components/primer/open_project/page_header.css.json

@@ -17,6 +17,7 @@
     ".PageHeader-leadingAction",
     ".PageHeader-parentLink",
     ".PageHeader--noBreadcrumb .PageHeader-contextBar",
-    ".PageHeader--noBreadcrumb .PageHeader-titleBar"
+    ".PageHeader--noBreadcrumb .PageHeader-titleBar",
+    ".PageHeader--noBreadcrumb .PageHeader-actions"
   ]
 }

data/app/components/primer/open_project/page_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF,CAGA,uCACE,iDACE,YACF,CACF,CAGA,+CACE,qCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n  height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 auto;\n}\n\n.PageHeader-description--underlined-links a {\n  /* Ensure the accessibility is met, given that the description is written in light grey */\n  text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: var(--base-size-2); /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n\n/* Hide the context bar on desktop when no breadcrumb is visible */\n@media screen and (min-width: 543.98px) {\n  .PageHeader--noBreadcrumb .PageHeader-contextBar {\n    display: none;\n  }\n}\n\n/* Match the title bar height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb .PageHeader-titleBar {\n  line-height: var(--control-small-size);\n}"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF,CAGA,uCACE,iDACE,YACF,CACF,CAIE,+CACE,qCACF,CAEA,8CACE,gCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--base-size-8);\n  margin-bottom: var(--base-size-16);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n  border-bottom: none;\n  padding-bottom: 0;\n  margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n  margin-bottom: var(--base-size-8);\n  height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n  font-size: var(--text-title-size-medium);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 auto;\n}\n\n.PageHeader-description--underlined-links a {\n  /* Ensure the accessibility is met, given that the description is written in light grey */\n  text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n  overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n  min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n  margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n  justify-content: flex-end;\n  display: flex;\n  align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n}\n\n.PageHeader-leadingAction {\n  margin-top: var(--base-size-2); /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n\n/* Hide the context bar on desktop when no breadcrumb is visible */\n@media screen and (min-width: 543.98px) {\n  .PageHeader--noBreadcrumb .PageHeader-contextBar {\n    display: none;\n  }\n}\n\n/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb {\n  & .PageHeader-titleBar {\n    line-height: var(--control-small-size);\n  }\n\n  & .PageHeader-actions {\n    height: var(--control-small-size);\n  }\n}"]}

data/app/components/primer/open_project/page_header.pcss

@@ -91,7 +91,13 @@
   }
 }
 
-/* Match the title bar height with the toggle menu button for proper vertical alignment */
-.PageHeader--noBreadcrumb .PageHeader-titleBar {
-  line-height: var(--control-small-size);
+/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
+.PageHeader--noBreadcrumb {
+  & .PageHeader-titleBar {
+    line-height: var(--control-small-size);
+  }
+
+  & .PageHeader-actions {
+    height: var(--control-small-size);
+  }
 }

data/app/components/primer/primer.d.ts

@@ -30,6 +30,7 @@ import './alpha/tree_view/tree_view';
 import './alpha/tree_view/tree_view_icon_pair_element';
 import './alpha/tree_view/tree_view_sub_tree_node_element';
 import './alpha/tree_view/tree_view_include_fragment_element';
+import './open_project/avatar_fallback';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';

data/app/components/primer/primer.js

@@ -30,6 +30,7 @@ import './alpha/tree_view/tree_view';
 import './alpha/tree_view/tree_view_icon_pair_element';
 import './alpha/tree_view/tree_view_sub_tree_node_element';
 import './alpha/tree_view/tree_view_include_fragment_element';
+import './open_project/avatar_fallback';
 import './open_project/page_header_element';
 import './open_project/zen_mode_button';
 import './open_project/sub_header_element';

data/app/components/primer/primer.pcss

@@ -45,6 +45,7 @@
 @import "./alpha/action_bar.pcss";
 
 /* OP specifics */
+@import "./open_project/avatar_stack.pcss";
 @import "./open_project/page_header.pcss";
 @import "./open_project/drag_handle.pcss";
 @import "./open_project/border_grid.pcss";

data/app/components/primer/primer.ts

@@ -30,6 +30,7 @@ import './alpha/tree_view/tree_view'
 import './alpha/tree_view/tree_view_icon_pair_element'
 import './alpha/tree_view/tree_view_sub_tree_node_element'
 import './alpha/tree_view/tree_view_include_fragment_element'
+import './open_project/avatar_fallback'
 import './open_project/page_header_element'
 import './open_project/zen_mode_button'
 import './open_project/sub_header_element'

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 78
+      MINOR = 79
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/tree_view_preview/form_input.html.erb

@@ -2,7 +2,7 @@
   <%= render(Primer::Alpha::Stack.new) do %>
     <%= render(Primer::Alpha::TreeView.new(form_arguments: { builder: f, name: "folder_structure" })) do |tree| %>
       <% tree.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, value: 0) do |sub_tree| %>
-        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1) %>
+        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1, checked: true) %>
         <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant, value: 2) %>
       <% end %>
 

data/previews/primer/beta/avatar_stack_preview.rb

@@ -11,8 +11,9 @@ module Primer
       # @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,26 @@ module Primer
           component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
         end
       end
+
+      # @label With individual avatar tooltips
+      def with_individual_tooltips
+        render(Primer::Beta::AvatarStack.new) do |component|
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "https://github.com/user1", tooltip: "User 1")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "https://github.com/user2", tooltip: "User 2")
+          component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "https://github.com/user3", tooltip: "User 3")
+        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

data/previews/primer/open_project/avatar_stack_preview.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label OpenProject AvatarStack
+    class AvatarStackPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param number_of_avatars [Integer] number
+      # @param with_fallbacks toggle
+      # @param align select [["Left", left], ["Right", right]]
+      def playground(number_of_avatars: 3, with_fallbacks: true, align: :left)
+        render(Primer::OpenProject::AvatarStack.new(align: align)) do |component|
+          Array.new(number_of_avatars&.to_i || 1) do |i|
+            if with_fallbacks
+              component.with_avatar_with_fallback(src: nil, alt: "User #{i + 1}", unique_id: i + 1)
+            else
+              component.with_avatar_with_fallback(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+            end
+          end
+        end
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::OpenProject::AvatarStack.new) do |component|
+          component.with_avatar_with_fallback(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+        end
+      end
+
+      # @label With fallback avatars
+      # @snapshot
+      def with_fallback_avatars
+        render(Primer::OpenProject::AvatarStack.new) do |component|
+          component.with_avatar_with_fallback(src: nil, alt: "Alice Johnson", unique_id: 1)
+          component.with_avatar_with_fallback(src: nil, alt: "Bob Smith", unique_id: 2)
+          component.with_avatar_with_fallback(src: nil, alt: "Charlie Brown", unique_id: 3)
+        end
+      end
+
+      # @label Mixed (image and fallback)
+      def mixed_avatars
+        render(Primer::OpenProject::AvatarStack.new) do |component|
+          component.with_avatar_with_fallback(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          component.with_avatar_with_fallback(src: nil, alt: "Alice Johnson", unique_id: 10)
+          component.with_avatar_with_fallback(src: nil, alt: "Bob Smith", unique_id: 20)
+        end
+      end
+
+      # @label Align right with fallbacks
+      def align_right_with_fallbacks
+        render(Primer::OpenProject::AvatarStack.new(align: :right)) do |component|
+          component.with_avatar_with_fallback(src: nil, alt: "Alice Johnson", unique_id: 1)
+          component.with_avatar_with_fallback(src: nil, alt: "Bob Smith", unique_id: 2)
+          component.with_avatar_with_fallback(src: nil, alt: "Charlie Brown", unique_id: 3)
+        end
+      end
+
+      # @label With tooltip and fallbacks
+      def with_tooltip_and_fallbacks
+        render(Primer::OpenProject::AvatarStack.new(tooltipped: true, body_arguments: { label: "Team members" })) do |component|
+          component.with_avatar_with_fallback(src: nil, alt: "Alice Johnson", unique_id: 1)
+          component.with_avatar_with_fallback(src: nil, alt: "Bob Smith", unique_id: 2)
+          component.with_avatar_with_fallback(src: nil, alt: "Charlie Brown", unique_id: 3)
+        end
+      end
+    end
+  end
+end

data/previews/primer/open_project/avatar_with_fallback_preview/fallback_multiple.html.erb

@@ -0,0 +1,7 @@
+<div class="d-flex gap-3 flex-items-center">
+  <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Alice Johnson", unique_id: 10)) %>
+  <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Bob Smith", unique_id: 20)) %>
+  <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Charlie Brown", unique_id: 30)) %>
+  <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Diana Prince", unique_id: 40)) %>
+  <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Eve Anderson", unique_id: 50)) %>
+</div>

data/previews/primer/open_project/avatar_with_fallback_preview/fallback_sizes.html.erb

@@ -0,0 +1,34 @@
+<div class="d-flex gap-3 flex-items-center flex-wrap">
+  <div class="d-flex flex-column flex-items-center gap-2">
+    <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Test User", unique_id: 100, size: 16)) %>
+    <span class="text-small">16px</span>
+  </div>
+  <div class="d-flex flex-column flex-items-center gap-2">
+    <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Test User", unique_id: 100, size: 20)) %>
+    <span class="text-small">20px</span>
+  </div>
+  <div class="d-flex flex-column flex-items-center gap-2">
+    <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Test User", unique_id: 100, size: 24)) %>
+    <span class="text-small">24px</span>
+  </div>
+  <div class="d-flex flex-column flex-items-center gap-2">
+    <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Test User", unique_id: 100, size: 32)) %>
+    <span class="text-small">32px</span>
+  </div>
+  <div class="d-flex flex-column flex-items-center gap-2">
+    <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Test User", unique_id: 100, size: 40)) %>
+    <span class="text-small">40px</span>
+  </div>
+  <div class="d-flex flex-column flex-items-center gap-2">
+    <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Test User", unique_id: 100, size: 48)) %>
+    <span class="text-small">48px</span>
+  </div>
+  <div class="d-flex flex-column flex-items-center gap-2">
+    <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Test User", unique_id: 100, size: 64)) %>
+    <span class="text-small">64px</span>
+  </div>
+  <div class="d-flex flex-column flex-items-center gap-2">
+    <%= render(Primer::OpenProject::AvatarWithFallback.new(src: nil, alt: "Test User", unique_id: 100, size: 80)) %>
+    <span class="text-small">80px</span>
+  </div>
+</div>

data/previews/primer/open_project/avatar_with_fallback_preview.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # @label AvatarWithFallback
+    class AvatarWithFallbackPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param size [Integer] select [16, 20, 24, 32, 40, 48, 64, 80]
+      # @param shape [Symbol] select [circle, square]
+      # @param href [String] text
+      # @param with_src [Boolean] toggle
+      def playground(size: 24, shape: :circle, href: nil, with_src: false)
+        if with_src
+          render(Primer::OpenProject::AvatarWithFallback.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
+        else
+          render(Primer::OpenProject::AvatarWithFallback.new(alt: "OpenProject Admin", unique_id: 4, size: size, shape: shape, href: href))
+        end
+      end
+
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::OpenProject::AvatarWithFallback.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @label With image src
+      # @snapshot
+      def with_image
+        render(Primer::OpenProject::AvatarWithFallback.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
+      # @!group Fallback (Initials)
+      #
+      # @label Fallback with initials
+      # @snapshot
+      def fallback_default
+        render(Primer::OpenProject::AvatarWithFallback.new(alt: "OpenProject Admin", unique_id: 4))
+      end
+
+      # @label Fallback single name
+      # @snapshot
+      def fallback_single_name
+        render(Primer::OpenProject::AvatarWithFallback.new(alt: "John", unique_id: 2))
+      end
+
+      # @label Fallback multiple users
+      def fallback_multiple
+        render_with_template(locals: {})
+      end
+
+      # @label Fallback sizes
+      def fallback_sizes
+        render_with_template(locals: {})
+      end
+
+      # @label Fallback square shape
+      # @snapshot
+      def fallback_square
+        render(Primer::OpenProject::AvatarWithFallback.new(alt: "OpenProject Org", unique_id: 100, shape: :square))
+      end
+
+      # @label Fallback as link
+      def fallback_as_link
+        render(Primer::OpenProject::AvatarWithFallback.new(alt: "Jane Doe", unique_id: 3, href: "#"))
+      end
+      #
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/open_project/filterable_tree_view_preview/form_input.html.erb

@@ -7,7 +7,7 @@
         <% end %>
 
         <% hogwarts.with_sub_tree(label: "Slytherin", select_variant: select_variant, expanded: expanded) do |hufflepuff| %>
-          <% hufflepuff.with_leaf(label: "Draco Malfoy", select_variant: select_variant) %>
+          <% hufflepuff.with_leaf(label: "Draco Malfoy", select_variant: select_variant, checked: true) %>
         <% end %>
 
         <% hogwarts.with_sub_tree(label: "Hufflepuff", select_variant: select_variant, expanded: expanded) do |hufflepuff| %>

data/static/arguments.json

@@ -4031,6 +4031,12 @@
         "default": "`nil`",
         "description": "The URL to link to. If used, component will be wrapped by an `<a>` tag."
       },
+      {
+        "name": "tooltip",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Tooltip text to display on hover when href is provided."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -4065,6 +4071,12 @@
         "default": "`false`",
         "description": "Whether to add a tooltip to the stack or not."
       },
+      {
+        "name": "disable_expand",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to disable the expand behavior on hover. If true, avatars will not expand."
+      },
       {
         "name": "body_arguments",
         "type": "Hash",
@@ -5705,6 +5717,104 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::AvatarStack",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectAvatarStack",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/avatar_stack.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/avatar_stack/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "One of `:div` or `:span`."
+      },
+      {
+        "name": "align",
+        "type": "Symbol",
+        "default": "`:left`",
+        "description": "One of `:left` or `:right`."
+      },
+      {
+        "name": "tooltipped",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to add a tooltip to the stack or not."
+      },
+      {
+        "name": "disable_expand",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to disable the expand behavior on hover. If true, avatars will not expand."
+      },
+      {
+        "name": "body_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Parameters to add to the Body. If `tooltipped` is set, has the same arguments as [Tooltip](/components/tooltip). The default tag is `:div` but can be changed using `tag:` to one of `:div` or `:span`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::AvatarWithFallback",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectAvatarWithFallback",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/avatar_with_fallback.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/avatar_with_fallback/default/",
+    "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The source url of the avatar image. When nil, renders a fallback with initials."
+      },
+      {
+        "name": "alt",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Alt text for the avatar. Used for accessibility and to generate initials when src is nil."
+      },
+      {
+        "name": "size",
+        "type": "Integer",
+        "default": "`20`",
+        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, `64`, or `80`."
+      },
+      {
+        "name": "shape",
+        "type": "Symbol",
+        "default": "`:circle`",
+        "description": "Shape of the avatar. One of `:circle` or `:square`."
+      },
+      {
+        "name": "href",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The URL to link to. If used, component will be wrapped by an `<a>` tag."
+      },
+      {
+        "name": "unique_id",
+        "type": "String, Integer",
+        "default": "`nil`",
+        "description": "Unique identifier for generating consistent avatar colors across renders."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::BorderBox::CollapsibleHeader",
     "status": "open_project",

data/static/audited_at.json

@@ -139,6 +139,8 @@
   "Primer::IconButton": "",
   "Primer::LayoutComponent": "",
   "Primer::Navigation::TabComponent": "",
+  "Primer::OpenProject::AvatarStack": "",
+  "Primer::OpenProject::AvatarWithFallback": "",
   "Primer::OpenProject::BorderBox::CollapsibleHeader": "",
   "Primer::OpenProject::BorderGrid": "",
   "Primer::OpenProject::BorderGrid::Cell": "",

data/static/classes.json

@@ -96,7 +96,8 @@
     "Primer::Beta::AvatarStack"
   ],
   "AvatarStack-body": [
-    "Primer::Beta::AvatarStack"
+    "Primer::Beta::AvatarStack",
+    "Primer::OpenProject::AvatarStack"
   ],
   "Banner": [
     "Primer::Alpha::Banner"

data/static/constants.json

@@ -1695,6 +1695,13 @@
   "Primer::Navigation::TabComponent": {
     "GeneratedSlotMethods": "Primer::Navigation::TabComponent::GeneratedSlotMethods"
   },
+  "Primer::OpenProject::AvatarStack": {
+    "GeneratedSlotMethods": "Primer::OpenProject::AvatarStack::GeneratedSlotMethods"
+  },
+  "Primer::OpenProject::AvatarWithFallback": {
+    "FONT_STACK": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "GeneratedSlotMethods": "Primer::OpenProject::AvatarWithFallback::GeneratedSlotMethods"
+  },
   "Primer::OpenProject::BorderBox::CollapsibleHeader": {
     "GeneratedSlotMethods": "Primer::OpenProject::BorderBox::CollapsibleHeader::GeneratedSlotMethods"
   },