Truncate breadcrumb elements in PageHeader

Author: HDinger

.changeset/lovely-seals-say.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Truncate Pageheader breadcrumb items when they are too long

app/components/primer/open_project/page_header.rb

@@ -23,6 +23,7 @@ class PageHeader < Primer::Component
       DEFAULT_LEADING_ACTION_DISPLAY = [:none, :flex].freeze
       DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
       DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
+      BREADCRUMB_TRUNCATE_AT = 200
 
       STATE_DEFAULT = :show
       STATE_EDIT = :edit
@@ -222,9 +223,17 @@ class PageHeader < Primer::Component
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
             if item.is_a?(String)
-              breadcrumbs.with_item(href: "#", font_weight: selected_item_font_weight) { item }
+              breadcrumbs.with_item(href: "#", font_weight: selected_item_font_weight) do
+                render(Primer::Beta::Truncate.new) do |truncate|
+                  truncate.with_item(max_width: BREADCRUMB_TRUNCATE_AT) { item }
+                end
+              end
             else
-              breadcrumbs.with_item(href: item[:href], target: "_top") { item[:text] }
+              breadcrumbs.with_item(href: item[:href], target: "_top") do
+                render(Primer::Beta::Truncate.new) do |truncate|
+                  truncate.with_item(max_width: BREADCRUMB_TRUNCATE_AT) { item[:text] }
+                end
+              end
             end
           end
         end

previews/primer/open_project/page_header_preview.rb

@@ -191,6 +191,19 @@ def non_bold_breadcrumbs
         end
       end
 
+      # @label With truncated breadcrumbs
+      # Long breadcrumb elements are truncated after 200px
+      def truncated_breadcrumbs
+        breadcrumb_items = [{ href: "/foo", text: "OpenProject" },
+                            { href: "/bar", text: "Stream Dream team" },
+                            { href: "/baz", text: "A very long sub project that will be truncated" },
+                            "Hello"]
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "A title" }
+          header.with_breadcrumbs(breadcrumb_items, selected_item_font_weight: :normal)
+        end
+      end
+
       # @label Without breadcrumbs
       # A PageHeader example that renders without breadcrumbs.
       # This should only be done for *entry pages* (such as overview pages).

test/components/primer/open_project/page_header_test.rb

@@ -215,6 +215,26 @@ def test_renders_non_bold_breadcrumbs
     assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item:not(.text-bold) a[href='#']")
   end
 
+  def test_renders_truncated_breadcrumb
+    breadcrumb_items = [{ href: "/foo", text: "OpenProject" },
+                        { href: "/bar", text: "Stream Dream team" },
+                        { href: "/baz", text: "A very long sub project that will be truncated" },
+                        "Hello"]
+
+    render_inline(Primer::OpenProject::PageHeader.new) do |header|
+      header.with_title { "Hello" }
+      header.with_breadcrumbs(breadcrumb_items)
+    end
+
+    assert_text("Hello")
+    assert_selector(".PageHeader-title")
+    assert_selector(".PageHeader-breadcrumbs")
+    assert_selector(".PageHeader-parentLink")
+
+    assert_selector(".breadcrumb-item a[href='/baz'] .Truncate > .Truncate-text[style='max-width: 135px;']",
+                    text: "A very long sub project that will be truncated")
+  end
+
   def test_renders_tab_nav
     render_inline(Primer::OpenProject::PageHeader.new) do |header|
       header.with_title { "Hello" }