@openproject/primer-view-components 0.28.1 → 0.28.2-rc.b51d911a

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

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall,.25rem)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}@media (max-width:543.98px){.PageHeader--singleAction .PageHeader-action{display:flex!important;position:absolute;top:10px}}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);padding-bottom:var(--base-size-4,.25rem);width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4,.25rem);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}
+.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.PageHeader-contextBar{margin-bottom:var(--base-size-8,.5rem)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall,.25rem)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium,1.25rem);font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}@media (max-width:543.98px){.PageHeader--singleAction .PageHeader-action{display:flex!important;position:absolute;top:10px}}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4,.25rem);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto}

package/app/components/primer/open_project/page_header_element.d.ts

@@ -1,4 +1,6 @@
 declare class PageHeaderElement extends HTMLElement {
+    actionItems: HTMLElement[];
+    connectedCallback(): void;
     menuItemClick(event: Event): void;
 }
 declare global {

package/app/components/primer/open_project/page_header_element.js

@@ -4,8 +4,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { controller } from '@github/catalyst';
+import { controller, targets } from '@github/catalyst';
 let PageHeaderElement = class PageHeaderElement extends HTMLElement {
+    connectedCallback() {
+        for (const item of this.actionItems) {
+            /*
+            If there is only one action to be shown, we show that instead of the mobile action menu. However, the buttons should be the smaller button variant.
+            Unfortunately, the `size` attribute does not support responsive attributes and the .pcss syntax does not support inheritance between classes.
+            So we have to add the class manually here.
+            */
+            if (window.innerWidth <= 544) {
+                item.classList.add('Button--small');
+            }
+        }
+    }
     menuItemClick(event) {
         const currentTarget = event.currentTarget;
         const id = currentTarget?.getAttribute('data-for');
@@ -14,6 +26,9 @@ let PageHeaderElement = class PageHeaderElement extends HTMLElement {
         }
     }
 };
+__decorate([
+    targets
+], PageHeaderElement.prototype, "actionItems", void 0);
 PageHeaderElement = __decorate([
     controller
 ], PageHeaderElement);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openproject/primer-view-components",
-  "version": "0.28.1",
+  "version": "0.28.2-rc.b51d911a",
   "description": "ViewComponents of the Primer Design System for OpenProject",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/info_arch.json

@@ -16658,8 +16658,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/breadcrumbs",
-        "name": "breadcrumbs",
+        "preview_path": "primer/open_project/page_header/non_bold_breadcrumbs",
+        "name": "non_bold_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [

package/static/previews.json

@@ -5249,8 +5249,8 @@
         }
       },
       {
-        "preview_path": "primer/open_project/page_header/breadcrumbs",
-        "name": "breadcrumbs",
+        "preview_path": "primer/open_project/page_header/non_bold_breadcrumbs",
+        "name": "non_bold_breadcrumbs",
         "snapshot": "false",
         "skip_rules": {
           "wont_fix": [