openproject-primer_view_components 0.70.1 → 0.70.3

data/app/components/primer/alpha/tool_tip.js

@@ -9,7 +9,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
+var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_showReason, _ToolTipElement_update, _ToolTipElement_updateControl, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
 import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
 const isPopoverOpen = (() => {
@@ -233,26 +233,7 @@ class ToolTipElement extends HTMLElement {
         }
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, false);
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
-        if (!this.control)
-            return;
-        this.setAttribute('role', 'tooltip');
-        __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
-        __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
-        const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
-        this.addEventListener('mouseleave', this, { signal });
-        this.addEventListener('toggle', this, { signal });
-        this.control.addEventListener('mouseenter', this, { signal });
-        this.control.addEventListener('mouseleave', this, { signal });
-        this.control.addEventListener('focus', this, { signal });
-        this.control.addEventListener('mousedown', this, { signal });
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore popoverTargetElement is not in the type definition
-        this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
-            signal,
-        });
-        this.ownerDocument.addEventListener('focusout', focusOutListener);
-        this.ownerDocument.addEventListener('focusin', focusInListener);
-        this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControl).call(this);
     }
     disconnectedCallback() {
         tooltips.delete(this);
@@ -296,7 +277,10 @@ class ToolTipElement extends HTMLElement {
     attributeChangedCallback(name) {
         if (!this.isConnected)
             return;
-        if (name === 'id' || name === 'data-type') {
+        if (name === 'for') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControl).call(this);
+        }
+        else if (name === 'id' || name === 'data-type') {
             __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
         }
         else if (name === 'data-direction') {
@@ -316,6 +300,27 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
         this.classList.remove(...DIRECTION_CLASSES);
         this.classList.add(TOOLTIP_SR_ONLY_CLASS);
     }
+}, _ToolTipElement_updateControl = function _ToolTipElement_updateControl() {
+    if (!this.control)
+        return;
+    this.setAttribute('role', 'tooltip');
+    __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")?.abort();
+    __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
+    const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
+    this.addEventListener('mouseleave', this, { signal });
+    this.addEventListener('toggle', this, { signal });
+    this.control.addEventListener('mouseenter', this, { signal });
+    this.control.addEventListener('mouseleave', this, { signal });
+    this.control.addEventListener('focus', this, { signal });
+    this.control.addEventListener('mousedown', this, { signal });
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore popoverTargetElement is not in the type definition
+    this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
+        signal,
+    });
+    this.ownerDocument.addEventListener('focusout', focusOutListener);
+    this.ownerDocument.addEventListener('focusin', focusInListener);
+    this.ownerDocument.addEventListener('keydown', this, { signal, capture: true });
 }, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
     if (!this.id || !this.control)
         return;
@@ -431,7 +436,7 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     }
     this.classList.add(`tooltip-${direction}`);
 };
-ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id'];
+ToolTipElement.observedAttributes = ['data-type', 'data-direction', 'id', 'for'];
 if (!window.customElements.get('tool-tip')) {
     window.ToolTipElement = ToolTipElement;
     window.customElements.define('tool-tip', ToolTipElement);

data/app/components/primer/alpha/tool_tip.ts

@@ -234,28 +234,7 @@ class ToolTipElement extends HTMLElement {
     this.#update(false)
     this.#allowUpdatePosition = true
 
-    if (!this.control) return
-
-    this.setAttribute('role', 'tooltip')
-
-    this.#abortController?.abort()
-    this.#abortController = new AbortController()
-    const {signal} = this.#abortController
-
-    this.addEventListener('mouseleave', this, {signal})
-    this.addEventListener('toggle', this, {signal})
-    this.control.addEventListener('mouseenter', this, {signal})
-    this.control.addEventListener('mouseleave', this, {signal})
-    this.control.addEventListener('focus', this, {signal})
-    this.control.addEventListener('mousedown', this, {signal})
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore popoverTargetElement is not in the type definition
-    this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
-      signal,
-    })
-    this.ownerDocument.addEventListener('focusout', focusOutListener)
-    this.ownerDocument.addEventListener('focusin', focusInListener)
-    this.ownerDocument.addEventListener('keydown', this, {signal, capture: true})
+    this.#updateControl()
   }
 
   disconnectedCallback() {
@@ -303,7 +282,7 @@ class ToolTipElement extends HTMLElement {
     }
   }
 
-  static observedAttributes = ['data-type', 'data-direction', 'id']
+  static observedAttributes = ['data-type', 'data-direction', 'id', 'for']
 
   #update(isOpen: boolean) {
     if (isOpen) {
@@ -321,13 +300,40 @@ class ToolTipElement extends HTMLElement {
   attributeChangedCallback(name: string) {
     if (!this.isConnected) return
 
-    if (name === 'id' || name === 'data-type') {
+    if (name === 'for') {
+      this.#updateControl()
+    } else if (name === 'id' || name === 'data-type') {
       this.#updateControlReference()
     } else if (name === 'data-direction') {
       this.#updateDirection()
     }
   }
 
+  #updateControl() {
+    if (!this.control) return
+
+    this.setAttribute('role', 'tooltip')
+
+    this.#abortController?.abort()
+    this.#abortController = new AbortController()
+    const {signal} = this.#abortController
+
+    this.addEventListener('mouseleave', this, {signal})
+    this.addEventListener('toggle', this, {signal})
+    this.control.addEventListener('mouseenter', this, {signal})
+    this.control.addEventListener('mouseleave', this, {signal})
+    this.control.addEventListener('focus', this, {signal})
+    this.control.addEventListener('mousedown', this, {signal})
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore popoverTargetElement is not in the type definition
+    this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
+      signal,
+    })
+    this.ownerDocument.addEventListener('focusout', focusOutListener)
+    this.ownerDocument.addEventListener('focusin', focusInListener)
+    this.ownerDocument.addEventListener('keydown', this, {signal, capture: true})
+  }
+
   #updateControlReference() {
     if (!this.id || !this.control) return
     if (this.type === 'label') {

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(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.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 100%;font-size:var(--text-body-size-medium)}.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:2px}.PageHeader-parentLink{flex:1 1 auto}
+.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.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 100%;font-size:var(--text-body-size-medium)}.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:2px}.PageHeader-parentLink{flex:1 1 auto}

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,qCAAsC,CADtC,6CAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAUA,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCACF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,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,cAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\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}\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 100%;\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: 2px; /* 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,qCAAsC,CADtC,6CAIF,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,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,cAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\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 100%;\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: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n}\n"]}

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

@@ -20,6 +20,7 @@
   justify-content: flex-end;
   align-items: center;
   margin-bottom: var(--base-size-8);
+  height: var(--control-small-size);
 }
 
 .PageHeader-titleBar {

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

@@ -186,11 +186,16 @@ module Primer
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
         system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
 
+        parent_item = nil
+
         # show parent link if there is a parent for current page
-        if items.length > 1
-          link_arguments = {}
-          parent_item = items[items.length - 2]
+        items.reverse_each do |item|
+          parent_item = item if item.is_a?(Hash) && item[:skip_for_mobile] != true
+          break if parent_item.present?
+        end
 
+        if parent_item.present? && parent_item[:href].present?
+          link_arguments = {}
           link_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, DEFAULT_BACK_BUTTON_ICON)
           link_arguments[:href] = parent_item[:href]
           link_arguments[:target] = "_top"

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 70
-      PATCH = 1
+      PATCH = 3
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/open_project/page_header_preview.rb

@@ -256,6 +256,16 @@ module Primer
           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
     end
   end
 end

data/static/info_arch.json

@@ -19122,6 +19122,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
+        "name": "skip_breadcrumb_item",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": []

data/static/previews.json

@@ -6109,6 +6109,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/page_header/skip_breadcrumb_item",
+        "name": "skip_breadcrumb_item",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.70.1
+  version: 0.70.3
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-19 00:00:00.000000000 Z
+date: 2025-07-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview