From fcb393484cda3e0b974237869a38819a369ee173 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Thu, 26 Oct 2023 14:33:43 +0545
Subject: [PATCH 01/28] feat[#50499]: Add back button and breadcrumbs to page
 header

---
 .changeset/green-bananas-kneel.md             |  5 ++
 .../primer/open_project/page_header.html.erb  |  2 +
 .../primer/open_project/page_header.pcss      | 10 ++++
 .../primer/open_project/page_header.rb        | 48 +++++++++++++++++++
 .../open_project/page_header_preview.rb       | 36 ++++++++++++++
 static/classes.json                           |  6 +++
 6 files changed, 107 insertions(+)
 create mode 100644 .changeset/green-bananas-kneel.md

diff --git a/.changeset/green-bananas-kneel.md b/.changeset/green-bananas-kneel.md
new file mode 100644
index 0000000000..3230bee30e
--- /dev/null
+++ b/.changeset/green-bananas-kneel.md
@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Add back button and breadcrumbs support to PageHeader
diff --git a/app/components/primer/open_project/page_header.html.erb b/app/components/primer/open_project/page_header.html.erb
index b006b62880..b0cae4e4e4 100644
--- a/app/components/primer/open_project/page_header.html.erb
+++ b/app/components/primer/open_project/page_header.html.erb
@@ -1,4 +1,6 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= breadcrumbs %>
+  <%= back_button %>
   <%= title %>
   <%= description %>
   <%= actions %>
diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index 41efc1a65a..df0f0d9eb1 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -43,3 +43,13 @@
     margin-top: var(--base-size-4);
   }
 }
+
+.PageHeader-breadcrumbs {
+  display: block;
+  width: 100%;
+  margin-bottom: var(--base-size-8);
+}
+
+.PageHeader-back_button {
+  margin-right: var(--base-size-4);
+}
diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 2009fe3e07..042f06b197 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -50,6 +50,44 @@ class PageHeader < Primer::Component
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      # Optional backbutton prepend the title
+      renders_one :back_button, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :a
+        system_arguments[:icon] = "arrow-left"
+        system_arguments[:scheme] = :invisible
+        system_arguments[:size] = :medium
+        system_arguments[:aria] = { label: I18n.t("button_back") }
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-back_button")
+
+        Primer::Beta::IconButton.new(**system_arguments)
+      }
+
+      # Optional breadcrumbs above the title row
+      # Items can be an array of string, hash {href, text} or an anchor tag string
+      renders_one :breadcrumbs, lambda { |items, show_breadcrumb: true|
+        return if !show_breadcrumb
+
+        render(Primer::Beta::Breadcrumbs.new(classes: ["PageHeader-breadcrumbs"] )) do |breadcrumbs|
+          items.each do |item|
+
+            # transform anchor tag strings to {href, text} objects
+            # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
+            if (item.is_a?(String) && item.start_with?("\u003c"))
+              item = transformLinkHtmlStringToObject(item)
+            end
+
+            case item
+            when String
+              breadcrumbs.with_item(href: '#') { item }
+            when Hash
+              breadcrumbs.with_item(href: item[:href]) { item[:text] }
+            end
+          end
+        end
+      }
+
+
       def initialize(**system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
 
@@ -64,6 +102,16 @@ def initialize(**system_arguments)
       def render?
         title?
       end
+
+      private
+
+      def transformLinkHtmlStringToObject(html_string)
+        # Parse the HTML
+        doc = Nokogiri::HTML.fragment(html_string)
+        # Extract href and text
+        anchor = doc.at('a')
+        { href: anchor['href'], text: anchor.text }
+      end
     end
   end
 end
diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index f5c37d1ad7..8f67ba0ce9 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -33,6 +33,42 @@ def large_title
         end
       end
 
+      # @label Back button
+      def back_button
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title() { "Hello" }
+          header.with_back_button(href: "#")
+        end
+      end
+
+      # @label Back button and breadcrumbs
+      def back_button_and_breadcrumbs
+        breadcrumb_items = [
+          {href: "/root", text: "Root"},
+          "\u003ca href=\"/root/sub\"\u003eSub\u003c/a\u003e" ,
+          "test"
+        ]
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title() { "Hello" }
+          header.with_back_button(href: "#")
+          header.with_breadcrumbs(breadcrumb_items)
+        end
+      end
+
+      # @label Breadcrumbs don't show breadcrumb
+      def back_button_and_no_breadcrumbs
+        breadcrumb_items = [
+          "test1",
+          "test2" ,
+          "test3"
+        ]
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title() { "Hello" }
+          header.with_back_button(href: "#")
+          header.with_breadcrumbs(breadcrumb_items, show_breadcrumb: false)
+        end
+      end
+
       # @label With actions
       def actions
         render_with_template(locals: {})
diff --git a/static/classes.json b/static/classes.json
index c83e8df87c..9c1be8a078 100644
--- a/static/classes.json
+++ b/static/classes.json
@@ -435,6 +435,12 @@
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader-back_button": [
+    "Primer::OpenProject::PageHeader"
+  ],
+  "PageHeader-breadcrumbs": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],

From ee8a1ddf6ee85a47b4181e4b0e8cd99a620dab0f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 31 Oct 2023 13:57:21 +0545
Subject: [PATCH 02/28] chore[#50499]: Set renders_one BackButton attributes
 size and icon defaults

---
 app/components/primer/open_project/page_header.rb | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 042f06b197..1b5deb9394 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -13,6 +13,9 @@ class PageHeader < Primer::Component
         DEFAULT_HEADER_VARIANT
       ].freeze
 
+      DEFAULT_BACK_BUTTON_SIZE = :medium
+      DEFAULT_BACK_BUTTON_ICON = "arrow-left"
+
       status :open_project
 
       # The title of the page header
@@ -51,12 +54,14 @@ class PageHeader < Primer::Component
       }
 
       # Optional backbutton prepend the title
-      renders_one :back_button, lambda { |**system_arguments|
+      renders_one :back_button, lambda { |
+        size: DEFAULT_BACK_BUTTON_SIZE,
+        icon: DEFAULT_BACK_BUTTON_ICON,
+        **system_arguments
+      |
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :a
-        system_arguments[:icon] = "arrow-left"
         system_arguments[:scheme] = :invisible
-        system_arguments[:size] = :medium
         system_arguments[:aria] = { label: I18n.t("button_back") }
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-back_button")
 

From 648d4fc2b8a4f41f1eb6a07b9562f910c3a04ce6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 31 Oct 2023 13:59:13 +0545
Subject: [PATCH 03/28] fix[#50499]: Remove I18n from PageHeader

---
 app/components/primer/open_project/page_header.rb | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 1b5deb9394..21e0215c47 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -62,7 +62,6 @@ class PageHeader < Primer::Component
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :a
         system_arguments[:scheme] = :invisible
-        system_arguments[:aria] = { label: I18n.t("button_back") }
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-back_button")
 
         Primer::Beta::IconButton.new(**system_arguments)

From 3d70f161c87dd9359991764cdd339e65f6e0d433 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 31 Oct 2023 15:53:23 +0545
Subject: [PATCH 04/28] fix[#50499]: Rename CSS class PageHeader-back_button to
 PageHeader-backButton

---
 app/components/primer/open_project/page_header.pcss | 2 +-
 app/components/primer/open_project/page_header.rb   | 4 ++--
 static/classes.json                                 | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index df0f0d9eb1..d9cf8c8288 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -50,6 +50,6 @@
   margin-bottom: var(--base-size-8);
 }
 
-.PageHeader-back_button {
+.PageHeader-backButton {
   margin-right: var(--base-size-4);
 }
diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 21e0215c47..d113820e86 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -53,7 +53,7 @@ class PageHeader < Primer::Component
         Primer::BaseComponent.new(**system_arguments)
       }
 
-      # Optional backbutton prepend the title
+      # Optional back button prepend the title
       renders_one :back_button, lambda { |
         size: DEFAULT_BACK_BUTTON_SIZE,
         icon: DEFAULT_BACK_BUTTON_ICON,
@@ -62,7 +62,7 @@ class PageHeader < Primer::Component
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :a
         system_arguments[:scheme] = :invisible
-        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-back_button")
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-backButton")
 
         Primer::Beta::IconButton.new(**system_arguments)
       }
diff --git a/static/classes.json b/static/classes.json
index 9c1be8a078..1ad3f1312b 100644
--- a/static/classes.json
+++ b/static/classes.json
@@ -435,7 +435,7 @@
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-back_button": [
+  "PageHeader-backButton": [
     "Primer::OpenProject::PageHeader"
   ],
   "PageHeader-breadcrumbs": [

From 017bbda17f8cdbb100c21bd0470dcbb676e5d4ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 31 Oct 2023 16:03:38 +0545
Subject: [PATCH 05/28] fix[#50499]: Fix RuboCop errors and warnings

---
 .../primer/open_project/page_header.rb        | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index d113820e86..ff68f4c14f 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -64,34 +64,29 @@ class PageHeader < Primer::Component
         system_arguments[:scheme] = :invisible
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-backButton")
 
-        Primer::Beta::IconButton.new(**system_arguments)
+        Primer::Beta::IconButton.new(size: size, icon: icon, **system_arguments)
       }
 
       # Optional breadcrumbs above the title row
       # Items can be an array of string, hash {href, text} or an anchor tag string
       renders_one :breadcrumbs, lambda { |items, show_breadcrumb: true|
-        return if !show_breadcrumb
+        return unless show_breadcrumb
 
-        render(Primer::Beta::Breadcrumbs.new(classes: ["PageHeader-breadcrumbs"] )) do |breadcrumbs|
+        render(Primer::Beta::Breadcrumbs.new(classes: ["PageHeader-breadcrumbs"])) do |breadcrumbs|
           items.each do |item|
-
             # transform anchor tag strings to {href, text} objects
             # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
-            if (item.is_a?(String) && item.start_with?("\u003c"))
-              item = transformLinkHtmlStringToObject(item)
-            end
+            item = anchor_string_to_object(item) if item.is_a?(String) && item.start_with?("\u003c")
 
-            case item
-            when String
-              breadcrumbs.with_item(href: '#') { item }
-            when Hash
+            if item.is_a?(String)
+              breadcrumbs.with_item(href: "#") { item }
+            else
               breadcrumbs.with_item(href: item[:href]) { item[:text] }
             end
           end
         end
       }
 
-
       def initialize(**system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
 
@@ -109,12 +104,12 @@ def render?
 
       private
 
-      def transformLinkHtmlStringToObject(html_string)
+      def anchor_string_to_object(html_string)
         # Parse the HTML
         doc = Nokogiri::HTML.fragment(html_string)
         # Extract href and text
-        anchor = doc.at('a')
-        { href: anchor['href'], text: anchor.text }
+        anchor = doc.at("a")
+        { href: anchor["href"], text: anchor.text }
       end
     end
   end

From 5bf4dae52a49510d0e07ec04f71812dc727fd902 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 15:15:28 +0545
Subject: [PATCH 06/28] fix[#50499]: Vertically center back button

---
 app/components/primer/open_project/page_header.pcss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index d9cf8c8288..48fe753980 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -7,6 +7,7 @@
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
+  align-items: center; /* Keep back button vertically aligned. */
 
   @media (max-width: 767.98px) {
     border-bottom: 0;

From fee9a1a92b94fdca53e7bd2827d55049432c79b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 15:17:10 +0545
Subject: [PATCH 07/28] fix[#50499]: Add aria-label in preview for
 with_back_button

---
 previews/primer/open_project/page_header_preview.rb | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index 8f67ba0ce9..9896128969 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -37,7 +37,7 @@ def large_title
       def back_button
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title() { "Hello" }
-          header.with_back_button(href: "#")
+          header.with_back_button(href: "#", 'aria-label': "Back")
         end
       end
 
@@ -50,7 +50,7 @@ def back_button_and_breadcrumbs
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title() { "Hello" }
-          header.with_back_button(href: "#")
+          header.with_back_button(href: "#", 'aria-label': "Back")
           header.with_breadcrumbs(breadcrumb_items)
         end
       end
@@ -64,7 +64,7 @@ def back_button_and_no_breadcrumbs
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title() { "Hello" }
-          header.with_back_button(href: "#")
+          header.with_back_button(href: "#", 'aria-label': "Back")
           header.with_breadcrumbs(breadcrumb_items, show_breadcrumb: false)
         end
       end

From 4a96f5fac2bebc62eb5bafbe66fe788186cfc379 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 15:22:02 +0545
Subject: [PATCH 08/28] test[#50499]: Add renders_back_button test

---
 .../primer/open_project/page_header_test.rb          | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/test/components/primer/open_project/page_header_test.rb b/test/components/primer/open_project/page_header_test.rb
index 0d55394845..590fe3cac1 100644
--- a/test/components/primer/open_project/page_header_test.rb
+++ b/test/components/primer/open_project/page_header_test.rb
@@ -49,4 +49,16 @@ def test_renders_actions
     assert_text("An action")
     assert_selector(".PageHeader-actions")
   end
+
+  def test_renders_back_button
+    render_inline(Primer::OpenProject::PageHeader.new) do |header|
+      header.with_title { "Hello" }
+      header.with_back_button(href: "/link", 'aria-label': "Back")
+    end
+
+    assert_text("Hello")
+    assert_selector(".PageHeader-title")
+    assert_selector(".PageHeader-backButton")
+    assert_selector(".Button-withTooltip a[href='/link']")
+  end
 end

From e3da4f1dfbe680abe61ff659578c2fa2fa337cfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 15:48:37 +0545
Subject: [PATCH 09/28] test[#50499]: Add renders_breadcrumbs test

---
 .../primer/open_project/page_header_test.rb   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/test/components/primer/open_project/page_header_test.rb b/test/components/primer/open_project/page_header_test.rb
index 590fe3cac1..80df474e82 100644
--- a/test/components/primer/open_project/page_header_test.rb
+++ b/test/components/primer/open_project/page_header_test.rb
@@ -61,4 +61,25 @@ def test_renders_back_button
     assert_selector(".PageHeader-backButton")
     assert_selector(".Button-withTooltip a[href='/link']")
   end
+
+  def test_renders_breadcrumbs
+    breadcrumb_items = [
+      {href: "/foo", text: "Foo"},
+      "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e" ,
+      "test"
+    ]
+
+    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("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item a[href='/foo']")
+    assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item a[href='/foo/bar']")
+    assert_selector("nav[aria-label='Breadcrumb'].PageHeader-breadcrumbs .breadcrumb-item a[href='#']")
+  end
 end

From 59e53242d32693ab729028860a08f4232bb3793f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 16:30:00 +0545
Subject: [PATCH 10/28] fix[#50499]: Fix class names in PageHeader

---
 app/components/primer/open_project/page_header.rb   | 2 +-
 previews/primer/open_project/page_header_preview.rb | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index ff68f4c14f..16c0577bfa 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -72,7 +72,7 @@ class PageHeader < Primer::Component
       renders_one :breadcrumbs, lambda { |items, show_breadcrumb: true|
         return unless show_breadcrumb
 
-        render(Primer::Beta::Breadcrumbs.new(classes: ["PageHeader-breadcrumbs"])) do |breadcrumbs|
+        render(Primer::Beta::Breadcrumbs.new(classes: class_names("PageHeader-breadcrumbs"))) do |breadcrumbs|
           items.each do |item|
             # transform anchor tag strings to {href, text} objects
             # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index 9896128969..a2fe7f3683 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -44,8 +44,8 @@ def back_button
       # @label Back button and breadcrumbs
       def back_button_and_breadcrumbs
         breadcrumb_items = [
-          {href: "/root", text: "Root"},
-          "\u003ca href=\"/root/sub\"\u003eSub\u003c/a\u003e" ,
+          {href: "/foo", text: "Foo"},
+          "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e" ,
           "test"
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|

From 3f9114069c37522a1c4b808fc79a2374e813027a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 16:32:25 +0545
Subject: [PATCH 11/28] chore[#50499]: Remove show_breadcrumb option in
 PageHeader.with_breadcrumbs

---
 .../primer/open_project/page_header.rb        |  4 +---
 .../open_project/page_header_preview.rb       | 19 -------------------
 2 files changed, 1 insertion(+), 22 deletions(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 16c0577bfa..85c9a73874 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -69,9 +69,7 @@ class PageHeader < Primer::Component
 
       # Optional breadcrumbs above the title row
       # Items can be an array of string, hash {href, text} or an anchor tag string
-      renders_one :breadcrumbs, lambda { |items, show_breadcrumb: true|
-        return unless show_breadcrumb
-
+      renders_one :breadcrumbs, lambda { |items|
         render(Primer::Beta::Breadcrumbs.new(classes: class_names("PageHeader-breadcrumbs"))) do |breadcrumbs|
           items.each do |item|
             # transform anchor tag strings to {href, text} objects
diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index a2fe7f3683..5ba8fa81a0 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -54,25 +54,6 @@ def back_button_and_breadcrumbs
           header.with_breadcrumbs(breadcrumb_items)
         end
       end
-
-      # @label Breadcrumbs don't show breadcrumb
-      def back_button_and_no_breadcrumbs
-        breadcrumb_items = [
-          "test1",
-          "test2" ,
-          "test3"
-        ]
-        render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title() { "Hello" }
-          header.with_back_button(href: "#", 'aria-label': "Back")
-          header.with_breadcrumbs(breadcrumb_items, show_breadcrumb: false)
-        end
-      end
-
-      # @label With actions
-      def actions
-        render_with_template(locals: {})
-      end
     end
   end
 end

From 67b763f03341f534130dbcba77b15f2f1e6cde3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 16:35:50 +0545
Subject: [PATCH 12/28] chore[#50499]: Remove manually added static classes

---
 static/classes.json | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/static/classes.json b/static/classes.json
index 1ad3f1312b..c83e8df87c 100644
--- a/static/classes.json
+++ b/static/classes.json
@@ -435,12 +435,6 @@
   "PageHeader-actions": [
     "Primer::OpenProject::PageHeader"
   ],
-  "PageHeader-backButton": [
-    "Primer::OpenProject::PageHeader"
-  ],
-  "PageHeader-breadcrumbs": [
-    "Primer::OpenProject::PageHeader"
-  ],
   "PageHeader-description": [
     "Primer::OpenProject::PageHeader"
   ],

From 83513c49c7dd90de5b41ee28f32d51c31e320a0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 16:42:02 +0545
Subject: [PATCH 13/28] feat[#50499]: Support **system_arguments in PageHeader
 breadcrumbs slot

---
 app/components/primer/open_project/page_header.rb | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 85c9a73874..334495ad19 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -69,8 +69,9 @@ class PageHeader < Primer::Component
 
       # Optional breadcrumbs above the title row
       # Items can be an array of string, hash {href, text} or an anchor tag string
-      renders_one :breadcrumbs, lambda { |items|
-        render(Primer::Beta::Breadcrumbs.new(classes: class_names("PageHeader-breadcrumbs"))) do |breadcrumbs|
+      renders_one :breadcrumbs, lambda { |items, **system_arguments|
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
+        render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
             # transform anchor tag strings to {href, text} objects
             # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"

From 68f12e048565783f14ae6ccaef22468f8109a83f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 16:52:17 +0545
Subject: [PATCH 14/28] fix[#50499]: Readd @label With actions in
 PageHeaderPreview

---
 previews/primer/open_project/page_header_preview.rb | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index 5ba8fa81a0..a9d64b0ec3 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -54,6 +54,11 @@ def back_button_and_breadcrumbs
           header.with_breadcrumbs(breadcrumb_items)
         end
       end
+
+      # @label With actions
+      def actions
+        render_with_template(locals: {})
+      end
     end
   end
 end

From 33a363de26eddcf4d9db49bcfe9bb3e4129b39be Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Wed, 1 Nov 2023 16:55:55 +0545
Subject: [PATCH 15/28] fix[#50499]: Fix spaces

---
 test/components/primer/open_project/page_header_test.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/components/primer/open_project/page_header_test.rb b/test/components/primer/open_project/page_header_test.rb
index 80df474e82..c9fc6bfd0f 100644
--- a/test/components/primer/open_project/page_header_test.rb
+++ b/test/components/primer/open_project/page_header_test.rb
@@ -64,8 +64,8 @@ def test_renders_back_button
 
   def test_renders_breadcrumbs
     breadcrumb_items = [
-      {href: "/foo", text: "Foo"},
-      "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e" ,
+      { href: "/foo", text: "Foo" },
+      "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e",
       "test"
     ]
 

From b5069e07b9803771985e4279126e9e2041ef83d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 7 Nov 2023 12:28:37 +0545
Subject: [PATCH 16/28] fix[#50499]: Change PageHeader align-items to baseline

---
 app/components/primer/open_project/page_header.pcss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index 48fe753980..0906ddd063 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -7,7 +7,7 @@
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
   flex-flow: row wrap;
   justify-content: flex-end; /* Keep actions right aligned. */
-  align-items: center; /* Keep back button vertically aligned. */
+  align-items: baseline; /* Keep back button vertically aligned. */
 
   @media (max-width: 767.98px) {
     border-bottom: 0;

From 76f469df012db394deefbee2730ed597a3b99e83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 7 Nov 2023 12:44:14 +0545
Subject: [PATCH 17/28] fix[#50499]: Add size and icon options and use
 fetch_or_fallback

---
 app/components/primer/open_project/page_header.rb | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 334495ad19..253a8a0efb 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -14,7 +14,18 @@ class PageHeader < Primer::Component
       ].freeze
 
       DEFAULT_BACK_BUTTON_SIZE = :medium
+      BACK_BUTTON_SIZE_OPTIONS = [
+        :small,
+        DEFAULT_HEADER_VARIANT,
+        :large
+      ].freeze
+
       DEFAULT_BACK_BUTTON_ICON = "arrow-left"
+      BACK_BUTTON_ICON_OPTIONS = [
+        DEFAULT_BACK_BUTTON_ICON,
+        "chevron-left",
+        "triangle-left"
+      ].freeze
 
       status :open_project
 
@@ -62,6 +73,8 @@ class PageHeader < Primer::Component
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :a
         system_arguments[:scheme] = :invisible
+        system_arguments[:size] = fetch_or_fallback(BACK_BUTTON_SIZE_OPTIONS, size, DEFAULT_BACK_BUTTON_SIZE)
+        system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-backButton")
 
         Primer::Beta::IconButton.new(size: size, icon: icon, **system_arguments)

From 4f57dc1fc37937e8913fcf64a527fb094e825bed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 7 Nov 2023 15:02:53 +0545
Subject: [PATCH 18/28] chore[#50499]: Add params options in preview for
 PageHeader with back button

---
 previews/primer/open_project/page_header_preview.rb | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index a9d64b0ec3..f918601bfd 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -34,10 +34,13 @@ def large_title
       end
 
       # @label Back button
-      def back_button
+      # @param href [String] text
+      # @param size [Symbol] select [small, medium, large]
+      # @param icon [String] select ["arrow-left", "chevron-left", "triangle-left"]
+      def back_button(href: "#", size: :medium, icon: "arrow-left")
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title() { "Hello" }
-          header.with_back_button(href: "#", 'aria-label': "Back")
+          header.with_back_button(href: href, size: size, icon: icon, 'aria-label': "Back")
         end
       end
 

From 18e5c94954831e91aacfea69f576c20e54c15f31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 7 Nov 2023 15:09:17 +0545
Subject: [PATCH 19/28] chore[#50499]: Add params information in back_button
 slot

---
 app/components/primer/open_project/page_header.rb | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 253a8a0efb..ae98beb986 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -65,6 +65,10 @@ class PageHeader < Primer::Component
       }
 
       # Optional back button prepend the title
+      #
+      # @param size [Symbol] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_SIZE_OPTIONS) %>
+      # @param icon [String] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_ICON_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :back_button, lambda { |
         size: DEFAULT_BACK_BUTTON_SIZE,
         icon: DEFAULT_BACK_BUTTON_ICON,
@@ -77,7 +81,7 @@ class PageHeader < Primer::Component
         system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-backButton")
 
-        Primer::Beta::IconButton.new(size: size, icon: icon, **system_arguments)
+        Primer::Beta::IconButton.new(**system_arguments)
       }
 
       # Optional breadcrumbs above the title row

From 2f4ad116c8af238453406341d8352606c81b4f5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 7 Nov 2023 15:42:13 +0545
Subject: [PATCH 20/28] chore[#50499]: Add params options in preview for
 PageHeader with breadcrumbs

---
 app/components/primer/open_project/page_header.rb | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index ae98beb986..992e725a9e 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -85,7 +85,9 @@ class PageHeader < Primer::Component
       }
 
       # Optional breadcrumbs above the title row
-      # Items can be an array of string, hash {href, text} or an anchor tag string
+      #
+      # @param items [Array<String, Hash>] Items is an array of strings, hash {href, text} or an anchor tag string
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :breadcrumbs, lambda { |items, **system_arguments|
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|

From 6db598940b30264eaba38c2ed37eb8518c9bdca3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 7 Nov 2023 15:42:46 +0545
Subject: [PATCH 21/28] chore[#50499]: Add anchor_tag_string helper function

---
 app/components/primer/open_project/page_header.rb | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/app/components/primer/open_project/page_header.rb b/app/components/primer/open_project/page_header.rb
index 992e725a9e..4e99187d09 100644
--- a/app/components/primer/open_project/page_header.rb
+++ b/app/components/primer/open_project/page_header.rb
@@ -92,9 +92,7 @@ class PageHeader < Primer::Component
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
-            # transform anchor tag strings to {href, text} objects
-            # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
-            item = anchor_string_to_object(item) if item.is_a?(String) && item.start_with?("\u003c")
+            item = anchor_string_to_object(item) if anchor_tag_string?(item)
 
             if item.is_a?(String)
               breadcrumbs.with_item(href: "#") { item }
@@ -122,6 +120,8 @@ def render?
 
       private
 
+      # transform anchor tag strings to {href, text} objects
+      # e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
       def anchor_string_to_object(html_string)
         # Parse the HTML
         doc = Nokogiri::HTML.fragment(html_string)
@@ -129,6 +129,11 @@ def anchor_string_to_object(html_string)
         anchor = doc.at("a")
         { href: anchor["href"], text: anchor.text }
       end
+
+      # Check if the item is an anchor tag string e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
+      def anchor_tag_string?(item)
+        item.is_a?(String) && item.start_with?("\u003c")
+      end
     end
   end
 end

From cdc8973f8ddbc3d4f808eaa0de3bd3d5bbd949a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <me@coffeedev.io>
Date: Tue, 7 Nov 2023 19:27:33 +0545
Subject: [PATCH 22/28] fix[#50499]: Fix back button and title wrapping on
 small screen

---
 .../primer/open_project/page_header.html.erb      |  8 +++++---
 .../primer/open_project/page_header.pcss          | 15 ++++++++-------
 .../primer/open_project/page_header_preview.rb    |  2 +-
 .../page_header_preview/actions.html.erb          |  3 ++-
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/app/components/primer/open_project/page_header.html.erb b/app/components/primer/open_project/page_header.html.erb
index b0cae4e4e4..bf35aae4d1 100644
--- a/app/components/primer/open_project/page_header.html.erb
+++ b/app/components/primer/open_project/page_header.html.erb
@@ -1,7 +1,9 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= breadcrumbs %>
-  <%= back_button %>
-  <%= title %>
+  <div class="PageHeader-titleBar">
+    <%= back_button %>
+    <%= title %>
+    <%= actions %>
+  </div>
   <%= description %>
-  <%= actions %>
 <% end %>
diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index 0906ddd063..3728bf5750 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -5,20 +5,24 @@
   padding-bottom: var(--stack-padding-condensed);
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);
-  flex-flow: row wrap;
-  justify-content: flex-end; /* Keep actions right aligned. */
-  align-items: baseline; /* Keep back button vertically aligned. */
+  flex-flow: column;
 
   @media (max-width: 767.98px) {
     border-bottom: 0;
   }
 }
 
+.PageHeader-titleBar {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-end;
+  align-items: baseline; /* Keep back button vertically aligned. */
+}
+
 .PageHeader-title {
   font-size: 24px;
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
-  order: 0;
 }
 
 .PageHeader-title--large {
@@ -30,15 +34,12 @@
   font-size: var(--text-body-size-medium);
   color: var(--fgColor-muted);
   flex: 1 100%;
-  order: 2;
 }
 
 /* Add 1 or 2 buttons to the right of the heading */
 .PageHeader-actions {
   margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
-  align-self: center;
   justify-content: flex-end;
-  order: 1;
 
   & + .PageHeader-description {
     margin-top: var(--base-size-4);
diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index f918601bfd..86441643ad 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -52,7 +52,7 @@ def back_button_and_breadcrumbs
           "test"
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title() { "Hello" }
+          header.with_title() { "Hello this is a long title for testing" }
           header.with_back_button(href: "#", 'aria-label': "Back")
           header.with_breadcrumbs(breadcrumb_items)
         end
diff --git a/previews/primer/open_project/page_header_preview/actions.html.erb b/previews/primer/open_project/page_header_preview/actions.html.erb
index 94abde45b2..f0dec71e3f 100644
--- a/previews/primer/open_project/page_header_preview/actions.html.erb
+++ b/previews/primer/open_project/page_header_preview/actions.html.erb
@@ -1,10 +1,11 @@
 <%= render(Primer::OpenProject::PageHeader.new) do |component| %>
   <% component.with_title(tag: :h1) do %>
-    A title
+    Hello this is a long title for testing
   <% end %>
   <% component.with_description do %>
     A description with actions
   <% end %>
+  <% component.with_back_button(href: "#", 'aria-label': "Back") %>
   <% component.with_actions do %>
     <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
       <% component.with_show_button { "Menu" } %>

From 4f0227edc7b7555e977769c1793abd383ef8c858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 8 Nov 2023 17:51:44 +0545
Subject: [PATCH 23/28] chore[#50499]: Remove long testing title from preview

---
 previews/primer/open_project/page_header_preview.rb            | 2 +-
 .../primer/open_project/page_header_preview/actions.html.erb   | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index 86441643ad..71fabccce5 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -52,7 +52,7 @@ def back_button_and_breadcrumbs
           "test"
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title() { "Hello this is a long title for testing" }
+          header.with_title() { "A title" }
           header.with_back_button(href: "#", 'aria-label': "Back")
           header.with_breadcrumbs(breadcrumb_items)
         end
diff --git a/previews/primer/open_project/page_header_preview/actions.html.erb b/previews/primer/open_project/page_header_preview/actions.html.erb
index f0dec71e3f..94abde45b2 100644
--- a/previews/primer/open_project/page_header_preview/actions.html.erb
+++ b/previews/primer/open_project/page_header_preview/actions.html.erb
@@ -1,11 +1,10 @@
 <%= render(Primer::OpenProject::PageHeader.new) do |component| %>
   <% component.with_title(tag: :h1) do %>
-    Hello this is a long title for testing
+    A title
   <% end %>
   <% component.with_description do %>
     A description with actions
   <% end %>
-  <% component.with_back_button(href: "#", 'aria-label': "Back") %>
   <% component.with_actions do %>
     <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
       <% component.with_show_button { "Menu" } %>

From 5f79542c21281b16d1ac27288c46f0f6dfb4a130 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 8 Nov 2023 17:52:33 +0545
Subject: [PATCH 24/28] chore[#50499]: Remove back button in breadcrumb preview

---
 previews/primer/open_project/page_header_preview.rb | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index 71fabccce5..bc7376ca92 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -33,7 +33,7 @@ def large_title
         end
       end
 
-      # @label Back button
+      # @label With back button
       # @param href [String] text
       # @param size [Symbol] select [small, medium, large]
       # @param icon [String] select ["arrow-left", "chevron-left", "triangle-left"]
@@ -44,16 +44,15 @@ def back_button(href: "#", size: :medium, icon: "arrow-left")
         end
       end
 
-      # @label Back button and breadcrumbs
-      def back_button_and_breadcrumbs
+      # @label With breadcrumbs
+      def breadcrumbs
         breadcrumb_items = [
           {href: "/foo", text: "Foo"},
           "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e" ,
-          "test"
+          "Baz"
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title() { "A title" }
-          header.with_back_button(href: "#", 'aria-label': "Back")
           header.with_breadcrumbs(breadcrumb_items)
         end
       end

From a0afd49775b6da10c8466b30dece2cc30149b6f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 8 Nov 2023 17:54:49 +0545
Subject: [PATCH 25/28] chore[#50499]: Sort PageHeader with-alternatives
 alphabetically

---
 previews/primer/open_project/page_header_preview.rb | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index bc7376ca92..f51a600c69 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -33,6 +33,11 @@ def large_title
         end
       end
 
+      # @label With actions
+      def actions
+        render_with_template(locals: {})
+      end
+
       # @label With back button
       # @param href [String] text
       # @param size [Symbol] select [small, medium, large]
@@ -56,11 +61,6 @@ def breadcrumbs
           header.with_breadcrumbs(breadcrumb_items)
         end
       end
-
-      # @label With actions
-      def actions
-        render_with_template(locals: {})
-      end
     end
   end
 end

From 7ee873cb8637aa7356591bace9cb9dc9aeb9d341 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 8 Nov 2023 18:13:05 +0545
Subject: [PATCH 26/28] chore[#50499]: Add toggles for back button and
 breadcrumbs in playground

---
 .../open_project/page_header_preview.rb       | 22 ++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index f51a600c69..a386a76d6e 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -18,10 +18,22 @@ def default
       # @param variant [Symbol] select [medium, large]
       # @param title [String] text
       # @param description [String] text
-      def playground(variant: :medium, title: "Hello", description: "Last updated 5 minutes ago by XYZ.")
+      # @param with_back_button [Boolean]
+      # @param with_breadcrumbs [Boolean]
+      def playground(
+        variant: :medium,
+        title: "Hello",
+        description: "Last updated 5 minutes ago by XYZ.",
+        with_back_button: false,
+        with_breadcrumbs: false
+      )
+        breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
+
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title(variant: variant) { title }
           header.with_description { description }
+          header.with_back_button(href: "#", 'aria-label': "Back") if with_back_button
+          header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs
         end
       end
 
@@ -44,7 +56,7 @@ def actions
       # @param icon [String] select ["arrow-left", "chevron-left", "triangle-left"]
       def back_button(href: "#", size: :medium, icon: "arrow-left")
         render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title() { "Hello" }
+          header.with_title { "Hello" }
           header.with_back_button(href: href, size: size, icon: icon, 'aria-label': "Back")
         end
       end
@@ -52,12 +64,12 @@ def back_button(href: "#", size: :medium, icon: "arrow-left")
       # @label With breadcrumbs
       def breadcrumbs
         breadcrumb_items = [
-          {href: "/foo", text: "Foo"},
-          "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e" ,
+          { href: "/foo", text: "Foo" },
+          "\u003ca href=\"/foo/bar\"\u003eBar\u003c/a\u003e",
           "Baz"
         ]
         render(Primer::OpenProject::PageHeader.new) do |header|
-          header.with_title() { "A title" }
+          header.with_title { "A title" }
           header.with_breadcrumbs(breadcrumb_items)
         end
       end

From dbfdaf9e2f244ef4ed79cb59cb7da02b3a1d137d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominic=20Br=C3=A4unlein?= <d.braeunlein@openproject.com>
Date: Wed, 8 Nov 2023 18:29:48 +0545
Subject: [PATCH 27/28] chore[#50499]: Add back button size parameter to
 playground

---
 previews/primer/open_project/page_header_preview.rb | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/previews/primer/open_project/page_header_preview.rb b/previews/primer/open_project/page_header_preview.rb
index a386a76d6e..bbf5dea68b 100644
--- a/previews/primer/open_project/page_header_preview.rb
+++ b/previews/primer/open_project/page_header_preview.rb
@@ -19,12 +19,14 @@ def default
       # @param title [String] text
       # @param description [String] text
       # @param with_back_button [Boolean]
+      # @param back_button_size [Symbol] select [small, medium, large]
       # @param with_breadcrumbs [Boolean]
       def playground(
         variant: :medium,
         title: "Hello",
         description: "Last updated 5 minutes ago by XYZ.",
         with_back_button: false,
+        back_button_size: :medium,
         with_breadcrumbs: false
       )
         breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
@@ -32,7 +34,7 @@ def playground(
         render(Primer::OpenProject::PageHeader.new) do |header|
           header.with_title(variant: variant) { title }
           header.with_description { description }
-          header.with_back_button(href: "#", 'aria-label': "Back") if with_back_button
+          header.with_back_button(href: "#", size: back_button_size, 'aria-label': "Back") if with_back_button
           header.with_breadcrumbs(breadcrumb_items) if with_breadcrumbs
         end
       end

From 6ce609dd59b5a1691b26bf7453981084dfaff4de Mon Sep 17 00:00:00 2001
From: Henriette Darge <h.darge@openproject.com>
Date: Thu, 9 Nov 2023 09:43:02 +0100
Subject: [PATCH 28/28] Center back button in any cases. Unfortunately, there
 is a two pixel misalignment which we have to cancel out. This is most likely
 coming from the arrow being thinner than the font

---
 app/components/primer/open_project/page_header.pcss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/components/primer/open_project/page_header.pcss b/app/components/primer/open_project/page_header.pcss
index 3728bf5750..df67b3fc02 100644
--- a/app/components/primer/open_project/page_header.pcss
+++ b/app/components/primer/open_project/page_header.pcss
@@ -16,7 +16,7 @@
   display: flex;
   flex-flow: row;
   justify-content: flex-end;
-  align-items: baseline; /* Keep back button vertically aligned. */
+  align-items: center; /* Keep back button vertically aligned. */
 }
 
 .PageHeader-title {
@@ -53,5 +53,6 @@
 }
 
 .PageHeader-backButton {
+  margin-top: 2px; /* to center align with label */
   margin-right: var(--base-size-4);
 }