openproject-primer_view_components 0.76.0 → 0.77.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}
+.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{height:var(--control-small-size)}

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

@@ -15,6 +15,8 @@
     ".PageHeader-actions",
     ".PageHeader-breadcrumbs",
     ".PageHeader-leadingAction",
-    ".PageHeader-parentLink"
+    ".PageHeader-parentLink",
+    ".PageHeader--noBreadcrumb .PageHeader-contextBar",
+    ".PageHeader--noBreadcrumb .PageHeader-titleBar"
   ]
 }

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","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"]}
+{"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,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 height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb .PageHeader-titleBar {\n  height: var(--control-small-size);\n}"]}

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

@@ -83,3 +83,15 @@
 .PageHeader-parentLink {
   flex: 1 1 auto;
 }
+
+/* Hide the context bar on desktop when no breadcrumb is visible */
+@media screen and (min-width: 543.98px) {
+  .PageHeader--noBreadcrumb .PageHeader-contextBar {
+    display: none;
+  }
+}
+
+/* Match the title bar height with the toggle menu button for proper vertical alignment */
+.PageHeader--noBreadcrumb .PageHeader-titleBar {
+  height: var(--control-small-size);
+}

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

@@ -40,7 +40,6 @@ module Primer
           "PageHeader-title",
           "PageHeader-title--#{variant}"
         )
-
         Primer::OpenProject::PageHeader::Title.new(state: @state, **system_arguments)
       }
 
@@ -181,12 +180,17 @@ module Primer
         Primer::Beta::IconButton.new(icon: icon, **system_arguments)
       }
 
-      # Optional breadcrumbs above the title row
-      # By default shown on wider screens. Can be overridden with system_argument: display
-      #
+      # Using PageHeader without breadcrumbs is only recommended in special cases.
+      # In doubt, please check the PageHeader component documentation.
       # @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, selected_item_font_weight: :bold, **system_arguments|
+        if items.nil?
+          # No breadcrumbs → mark the PageHeader with a special class
+          @system_arguments[:classes] = class_names(@system_arguments[:classes], "PageHeader--noBreadcrumb")
+          return
+        end
+
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
         system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
 

data/lib/primer/view_components/version.rb

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

data/previews/primer/open_project/page_header_preview.rb

@@ -191,6 +191,32 @@ module Primer
         end
       end
 
+      # @label Without breadcrumbs
+      # A PageHeader example that renders without breadcrumbs.
+      # This should only be done for *entry pages* (such as overview pages).
+      # In case of doubt, please check with the Dream team.
+      def without_breadcrumbs
+        render(Primer::OpenProject::PageHeader.new) do |header|
+          header.with_title { "Hello" }
+          header.with_breadcrumbs(nil)
+          header.with_description { "This PageHeader does not have any breadcrumbs." }
+          header.with_action_button(mobile_icon: "star", mobile_label: "Star") do |button|
+            button.with_leading_visual_icon(icon: "star")
+            "Star"
+          end
+        end
+      end
+
+      # @label With skipable breadcrumb items
+      def skip_breadcrumb_item
+        render(Primer::OpenProject::PageHeader.new) do |component|
+          component.with_title { "Resize me to mobile screen size" }
+          component.with_breadcrumbs([{ href: "/foo", text: "Foo" },
+                                      { href: "/bar", text: "Bar", skip_for_mobile: true },
+                                      "Baz"])
+        end
+      end
+
       # @label With tab nav
       #
       def tab_nav
@@ -257,16 +283,6 @@ module Primer
         end
       end
 
-      # @label With skipable breadcrumb items
-      def skip_breadcrumb_item
-        render(Primer::OpenProject::PageHeader.new) do |component|
-          component.with_title { "Resize me to mobile screen size" }
-          component.with_breadcrumbs([{ href: "/foo", text: "Foo" },
-                                      { href: "/bar", text: "Bar", skip_for_mobile: true },
-                                       "Baz"])
-        end
-      end
-
       # @label With a link in the description
       def description
         render_with_template(template: "primer/open_project/page_header_preview/description")

data/static/classes.json

@@ -481,6 +481,9 @@
   "PageHeader": [
     "Primer::OpenProject::PageHeader"
   ],
+  "PageHeader--noBreadcrumb": [
+    "Primer::OpenProject::PageHeader"
+  ],
   "PageHeader--withTabNav": [
     "Primer::OpenProject::PageHeader"
   ],

data/static/info_arch.json

@@ -20376,7 +20376,7 @@
       },
       {
         "name": "breadcrumbs",
-        "description": "Optional breadcrumbs above the title row\nBy default shown on wider screens. Can be overridden with system_argument: display",
+        "description": "Using PageHeader without breadcrumbs is only recommended in special cases.\nIn doubt, please check the PageHeader component documentation.",
         "parameters": [
           {
             "name": "items",
@@ -20564,8 +20564,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/tab_nav",
-        "name": "tab_nav",
+        "preview_path": "primer/open_project/page_header/without_breadcrumbs",
+        "name": "without_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20577,8 +20577,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control",
-        "name": "segmented_control",
+        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
+        "name": "skip_breadcrumb_item",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20590,8 +20590,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
-        "name": "segmented_control_mobile_icons",
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -20603,8 +20603,21 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
-        "name": "skip_breadcrumb_item",
+        "preview_path": "primer/open_project/page_header/segmented_control",
+        "name": "segmented_control",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
+        "name": "segmented_control_mobile_icons",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

data/static/previews.json

@@ -6184,8 +6184,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/tab_nav",
-        "name": "tab_nav",
+        "preview_path": "primer/open_project/page_header/without_breadcrumbs",
+        "name": "without_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6197,8 +6197,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control",
-        "name": "segmented_control",
+        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
+        "name": "skip_breadcrumb_item",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6210,8 +6210,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
-        "name": "segmented_control_mobile_icons",
+        "preview_path": "primer/open_project/page_header/tab_nav",
+        "name": "tab_nav",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
@@ -6223,8 +6223,21 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
-        "name": "skip_breadcrumb_item",
+        "preview_path": "primer/open_project/page_header/segmented_control",
+        "name": "segmented_control",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/segmented_control_mobile_icons",
+        "name": "segmented_control_mobile_icons",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.76.0
+  version: 0.77.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-11-02 00:00:00.000000000 Z
+date: 2025-11-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview