RubyGems - openproject-primer_view_components - Versions diffs - 0.77.0 → 0.78.1 - Mend

openproject-primer_view_components 0.77.0 → 0.78.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

data/app/components/primer/alpha/tree_view/tree_view.d.ts CHANGED Viewed

@@ -38,6 +38,7 @@ export declare class TreeViewElement extends HTMLElement {
     changeSelectStrategy(newStrategy: SelectStrategy): void;
     infoFromNode(node: Element, newCheckedValue?: TreeViewCheckedValue): TreeViewNodeInfo | null;
     selectVariant(node: Element): SelectVariant;
+    updateHiddenFormInputs(): void;
 }
 declare global {
     interface Window {

data/app/components/primer/alpha/tree_view/tree_view.js CHANGED Viewed

@@ -56,28 +56,17 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             });
             if (!somethingChanged)
                 return;
-            const newInputs = [];
-            // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
-            for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
-                const newInput = this.formInputPrototype.cloneNode();
-                newInput.removeAttribute('data-target');
-                newInput.removeAttribute('form');
-                const payload = {
-                    path: this.getNodePath(node),
-                };
-                const inputValue = this.getFormInputValueForNode(node);
-                if (inputValue)
-                    payload.value = inputValue;
-                newInput.value = JSON.stringify(payload);
-                newInputs.push(newInput);
-            }
-            this.formInputContainer.replaceChildren(...newInputs);
+            this.updateHiddenFormInputs();
         });
         updateInputsObserver.observe(this, {
             childList: true,
             subtree: true,
             attributeFilter: ['aria-checked'],
         });
+        // Correctly initialize the form
+        if (this.formInputContainer) {
+            this.updateHiddenFormInputs();
+        }
         // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
         customElements.whenDefined('tree-view-sub-tree-node').then(() => {
             // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
@@ -287,6 +276,24 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
     selectVariant(node) {
         return (node.getAttribute('data-select-variant') || 'none');
     }
+    updateHiddenFormInputs() {
+        const newInputs = [];
+        // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+        for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+            const newInput = this.formInputPrototype.cloneNode();
+            newInput.removeAttribute('data-target');
+            newInput.removeAttribute('form');
+            const payload = {
+                path: this.getNodePath(node),
+            };
+            const inputValue = this.getFormInputValueForNode(node);
+            if (inputValue)
+                payload.value = inputValue;
+            newInput.value = JSON.stringify(payload);
+            newInputs.push(newInput);
+        }
+        this.formInputContainer.replaceChildren(...newInputs);
+    }
 };
 _TreeViewElement_abortController = new WeakMap();
 _TreeViewElement_instances = new WeakSet();

data/app/components/primer/alpha/tree_view/tree_view.ts CHANGED Viewed

@@ -45,26 +45,7 @@ export class TreeViewElement extends HTMLElement {
       if (!somethingChanged) return
-      const newInputs = []
-      // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
-      for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
-        const newInput = this.formInputPrototype.cloneNode() as HTMLInputElement
-        newInput.removeAttribute('data-target')
-        newInput.removeAttribute('form')
-        const payload: {path: string[]; value?: string} = {
-          path: this.getNodePath(node),
-        }
-        const inputValue = this.getFormInputValueForNode(node)
-        if (inputValue) payload.value = inputValue
-        newInput.value = JSON.stringify(payload)
-        newInputs.push(newInput)
-      }
-      this.formInputContainer.replaceChildren(...newInputs)
+      this.updateHiddenFormInputs()
     })
     updateInputsObserver.observe(this, {
@@ -73,6 +54,11 @@ export class TreeViewElement extends HTMLElement {
       attributeFilter: ['aria-checked'],
     })
+    // Correctly initialize the form
+    if (this.formInputContainer) {
+      this.updateHiddenFormInputs()
+    }
     // eslint-disable-next-line github/no-then -- We don't want to wait for this to resolve, just get on with it
     customElements.whenDefined('tree-view-sub-tree-node').then(() => {
       // depends on TreeViewSubTreeNodeElement#eachAncestorSubTreeNode, which may not be defined yet
@@ -483,6 +469,29 @@ export class TreeViewElement extends HTMLElement {
   selectVariant(node: Element): SelectVariant {
     return (node.getAttribute('data-select-variant') || 'none') as SelectVariant
   }
+  updateHiddenFormInputs() {
+    const newInputs = []
+    // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+    for (const node of this.querySelectorAll('[role=treeitem][aria-checked=true]')) {
+      const newInput = this.formInputPrototype.cloneNode() as HTMLInputElement
+      newInput.removeAttribute('data-target')
+      newInput.removeAttribute('form')
+      const payload: {path: string[]; value?: string} = {
+        path: this.getNodePath(node),
+      }
+      const inputValue = this.getFormInputValueForNode(node)
+      if (inputValue) payload.value = inputValue
+      newInput.value = JSON.stringify(payload)
+      newInputs.push(newInput)
+    }
+    this.formInputContainer.replaceChildren(...newInputs)
+  }
 }
 if (!window.customElements.get('tree-view')) {

data/app/components/primer/open_project/page_header.css CHANGED Viewed

	@@ -1 +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}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{height:var(--control-small-size)}
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}@media screen and (min-width:543.98px){.PageHeader--noBreadcrumb .PageHeader-contextBar{display:none}}.PageHeader--noBreadcrumb .PageHeader-titleBar{line-height:var(--control-small-size)}.PageHeader--noBreadcrumb .PageHeader-actions{height:var(--control-small-size)}

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

@@ -17,6 +17,7 @@
     ".PageHeader-leadingAction",
     ".PageHeader-parentLink",
     ".PageHeader--noBreadcrumb .PageHeader-contextBar",
-    ".PageHeader--noBreadcrumb .PageHeader-titleBar"
+    ".PageHeader--noBreadcrumb .PageHeader-titleBar",
+    ".PageHeader--noBreadcrumb .PageHeader-actions"
   ]
 }

data/app/components/primer/open_project/page_header.css.map CHANGED Viewed

	@@ -1 +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,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}"]}
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,CAGA,uCACE,iDACE,YACF,CACF,CAIE,+CACE,qCACF,CAEA,8CACE,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 and actions height with the toggle menu button for proper vertical alignment */\n.PageHeader--noBreadcrumb {\n & .PageHeader-titleBar {\n line-height: var(--control-small-size);\n }\n\n & .PageHeader-actions {\n height: var(--control-small-size);\n }\n}"]}

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

@@ -91,7 +91,13 @@
   }
 }
-/* Match the title bar height with the toggle menu button for proper vertical alignment */
-.PageHeader--noBreadcrumb .PageHeader-titleBar {
-  height: var(--control-small-size);
+/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
+.PageHeader--noBreadcrumb {
+  & .PageHeader-titleBar {
+    line-height: var(--control-small-size);
+  }
+  & .PageHeader-actions {
+    height: var(--control-small-size);
+  }
 }

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

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

data/lib/primer/view_components/version.rb CHANGED Viewed

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 77
-      PATCH = 0
+      MINOR = 78
+      PATCH = 1
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/alpha/tree_view_preview/form_input.html.erb CHANGED Viewed

@@ -2,7 +2,7 @@
   <%= render(Primer::Alpha::Stack.new) do %>
     <%= render(Primer::Alpha::TreeView.new(form_arguments: { builder: f, name: "folder_structure" })) do |tree| %>
       <% tree.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, value: 0) do |sub_tree| %>
-        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1) %>
+        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1, checked: true) %>
         <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant, value: 2) %>
       <% end %>

data/previews/primer/open_project/filterable_tree_view_preview/form_input.html.erb CHANGED Viewed

@@ -7,7 +7,7 @@
         <% end %>
         <% hogwarts.with_sub_tree(label: "Slytherin", select_variant: select_variant, expanded: expanded) do |hufflepuff| %>
-          <% hufflepuff.with_leaf(label: "Draco Malfoy", select_variant: select_variant) %>
+          <% hufflepuff.with_leaf(label: "Draco Malfoy", select_variant: select_variant, checked: true) %>
         <% end %>
         <% hogwarts.with_sub_tree(label: "Hufflepuff", select_variant: select_variant, expanded: expanded) do |hufflepuff| %>

data/previews/primer/open_project/page_header_preview.rb CHANGED Viewed

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

data/static/constants.json CHANGED Viewed

@@ -1831,6 +1831,7 @@
       "chevron-left",
       "triangle-left"
     ],
+    "BREADCRUMB_TRUNCATE_AT": 200,
     "DEFAULT_ACTION_SCHEME": "default",
     "DEFAULT_BACK_BUTTON_ICON": "arrow-left",
     "DEFAULT_BREADCRUMBS_DISPLAY": [

data/static/info_arch.json CHANGED Viewed

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

data/static/previews.json CHANGED Viewed

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

metadata CHANGED Viewed

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