openproject-primer_view_components 0.87.0 → 0.88.0

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

@@ -15,7 +15,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_eventIsSingleSelection, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent;
+var _TreeViewElement_instances, _TreeViewElement_abortController, _TreeViewElement_autoExpandFrom, _TreeViewElement_eventIsActivation, _TreeViewElement_nodeForEvent, _TreeViewElement_handleNodeEvent, _TreeViewElement_eventIsCheckboxToggle, _TreeViewElement_handleCheckboxToggle, _TreeViewElement_eventIsSingleSelection, _TreeViewElement_handleNodeActivated, _TreeViewElement_handleNodeFocused, _TreeViewElement_handleNodeKeyboardEvent, _TreeViewElement_checkNodeOnly;
 import { controller, target } from '@github/catalyst';
 import { useRovingTabIndex } from './tree_view_roving_tab_index';
 let TreeViewElement = class TreeViewElement extends HTMLElement {
@@ -97,8 +97,8 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         // behavior for these element types is user- or browser-defined
         if (!(node instanceof HTMLDivElement))
             return;
-        const path = this.getNodePath(node);
-        const nodeInfo = this.infoFromNode(node, 'true');
+        const newCheckedValue = this.getNodeCheckedValue(node) === 'true' ? 'false' : 'true';
+        const nodeInfo = this.infoFromNode(node, newCheckedValue);
         const checkSuccess = this.dispatchEvent(new CustomEvent('treeViewBeforeNodeChecked', {
             bubbles: true,
             cancelable: true,
@@ -106,11 +106,11 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         }));
         if (!checkSuccess)
             return;
-        if (this.getNodeCheckedValue(node) === 'true') {
+        if (newCheckedValue === 'false') {
             this.setNodeCheckedValue(node, 'false');
         }
         else {
-            this.checkOnlyAtPath(path);
+            __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_checkNodeOnly).call(this, node);
         }
         this.dispatchEvent(new CustomEvent('treeViewNodeChecked', {
             bubbles: true,
@@ -142,7 +142,7 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         return this.querySelector('[aria-current=true]');
     }
     get activeNodes() {
-        return document.querySelectorAll('[aria-checked="true"]');
+        return this.querySelectorAll('[aria-checked="true"]');
     }
     expandAtPath(path) {
         const node = this.subTreeAtPath(path);
@@ -175,10 +175,10 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
         this.setNodeCheckedValue(node, 'false');
     }
     checkOnlyAtPath(path) {
-        for (const el of this.activeNodes) {
-            this.uncheckAtPath(this.getNodePath(el));
-        }
-        this.checkAtPath(path);
+        const node = this.nodeAtPath(path);
+        if (!node)
+            return;
+        __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_checkNodeOnly).call(this, node);
     }
     toggleCheckedAtPath(path) {
         const node = this.nodeAtPath(path);
@@ -286,6 +286,9 @@ let TreeViewElement = class TreeViewElement extends HTMLElement {
             const payload = {
                 path: this.getNodePath(node),
             };
+            const nodeId = node.getAttribute('data-node-id');
+            if (nodeId)
+                payload.nodeId = nodeId;
             const inputValue = this.getFormInputValueForNode(node);
             if (inputValue)
                 payload.value = inputValue;
@@ -424,7 +427,12 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
             }
             else if (this.selectVariant(node) === 'single') {
                 event.preventDefault();
-                this.checkOnlyAtPath(this.getNodePath(node));
+                if (this.getNodeCheckedValue(node) === 'true') {
+                    this.setNodeCheckedValue(node, 'false');
+                }
+                else {
+                    __classPrivateFieldGet(this, _TreeViewElement_instances, "m", _TreeViewElement_checkNodeOnly).call(this, node);
+                }
             }
             else if (node instanceof HTMLAnchorElement) {
                 // simulate click on space
@@ -433,6 +441,14 @@ _TreeViewElement_handleNodeKeyboardEvent = function _TreeViewElement_handleNodeK
             break;
     }
 };
+_TreeViewElement_checkNodeOnly = function _TreeViewElement_checkNodeOnly(node) {
+    for (const el of this.activeNodes) {
+        if (el === node)
+            continue;
+        this.setNodeCheckedValue(el, 'false');
+    }
+    this.setNodeCheckedValue(node, 'true');
+};
 __decorate([
     target
 ], TreeViewElement.prototype, "formInputContainer", void 0);

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

@@ -179,8 +179,8 @@ export class TreeViewElement extends HTMLElement {
     // behavior for these element types is user- or browser-defined
     if (!(node instanceof HTMLDivElement)) return
 
-    const path = this.getNodePath(node)
-    const nodeInfo = this.infoFromNode(node, 'true')
+    const newCheckedValue = this.getNodeCheckedValue(node) === 'true' ? 'false' : 'true'
+    const nodeInfo = this.infoFromNode(node, newCheckedValue)
 
     const checkSuccess = this.dispatchEvent(
       new CustomEvent('treeViewBeforeNodeChecked', {
@@ -192,10 +192,10 @@ export class TreeViewElement extends HTMLElement {
 
     if (!checkSuccess) return
 
-    if (this.getNodeCheckedValue(node) === 'true') {
+    if (newCheckedValue === 'false') {
       this.setNodeCheckedValue(node, 'false')
     } else {
-      this.checkOnlyAtPath(path)
+      this.#checkNodeOnly(node)
     }
 
     this.dispatchEvent(
@@ -271,7 +271,11 @@ export class TreeViewElement extends HTMLElement {
         } else if (this.selectVariant(node) === 'single') {
           event.preventDefault()
 
-          this.checkOnlyAtPath(this.getNodePath(node))
+          if (this.getNodeCheckedValue(node) === 'true') {
+            this.setNodeCheckedValue(node, 'false')
+          } else {
+            this.#checkNodeOnly(node)
+          }
         } else if (node instanceof HTMLAnchorElement) {
           // simulate click on space
           node.click()
@@ -313,7 +317,7 @@ export class TreeViewElement extends HTMLElement {
   }
 
   get activeNodes() {
-    return document.querySelectorAll('[aria-checked="true"]')
+    return this.querySelectorAll('[aria-checked="true"]')
   }
 
   expandAtPath(path: string[]) {
@@ -352,11 +356,19 @@ export class TreeViewElement extends HTMLElement {
   }
 
   checkOnlyAtPath(path: string[]) {
+    const node = this.nodeAtPath(path)
+    if (!node) return
+
+    this.#checkNodeOnly(node)
+  }
+
+  #checkNodeOnly(node: Element) {
     for (const el of this.activeNodes) {
-      this.uncheckAtPath(this.getNodePath(el))
+      if (el === node) continue
+      this.setNodeCheckedValue(el, 'false')
     }
 
-    this.checkAtPath(path)
+    this.setNodeCheckedValue(node, 'true')
   }
 
   toggleCheckedAtPath(path: string[]) {
@@ -479,10 +491,13 @@ export class TreeViewElement extends HTMLElement {
       newInput.removeAttribute('data-target')
       newInput.removeAttribute('form')
 
-      const payload: {path: string[]; value?: string} = {
+      const payload: {path: string[]; nodeId?: string; value?: string} = {
         path: this.getNodePath(node),
       }
 
+      const nodeId = node.getAttribute('data-node-id')
+      if (nodeId) payload.nodeId = nodeId
+
       const inputValue = this.getFormInputValueForNode(node)
       if (inputValue) payload.value = inputValue
 

data/app/components/primer/open_project/avatar_fallback.js

@@ -100,6 +100,6 @@ let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
     }
 };
 AvatarFallbackElement = __decorate([
-    controller
+    controller('avatar-fallback')
 ], AvatarFallbackElement);
 export { AvatarFallbackElement };

data/app/components/primer/open_project/avatar_fallback.ts

@@ -13,7 +13,7 @@ import {controller} from '@github/catalyst'
  * due to a Catalyst bug where @attr accessors aren't properly initialized
  * when elements have pre-existing attribute values.
  */
-@controller
+@controller('avatar-fallback')
 export class AvatarFallbackElement extends HTMLElement {
   private img: HTMLImageElement | null = null
   private testImage: HTMLImageElement | null = null

data/app/components/primer/open_project/border_box/collapsible_header.js

@@ -17,5 +17,5 @@ let CollapsibleHeaderElement = class CollapsibleHeaderElement extends Collapsibl
     }
 };
 CollapsibleHeaderElement = __decorate([
-    controller
+    controller('collapsible-header')
 ], CollapsibleHeaderElement);

data/app/components/primer/open_project/border_box/collapsible_header.ts

@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {CollapsibleElement} from '../collapsible'
 
-@controller
+@controller('collapsible-header')
 class CollapsibleHeaderElement extends CollapsibleElement {
   connectedCallback() {
     if (!this.closest('.Box')) {

data/app/components/primer/open_project/collapsible_section.js

@@ -12,5 +12,5 @@ let CollapsibleSectionElement = class CollapsibleSectionElement extends Collapsi
     }
 };
 CollapsibleSectionElement = __decorate([
-    controller
+    controller('collapsible-section')
 ], CollapsibleSectionElement);

data/app/components/primer/open_project/collapsible_section.ts

@@ -1,7 +1,7 @@
 import {controller} from '@github/catalyst'
 import {CollapsibleElement} from './collapsible'
 
-@controller
+@controller('collapsible-section')
 class CollapsibleSectionElement extends CollapsibleElement {
   get baseClass(): string {
     return 'CollapsibleSection'

data/app/components/primer/open_project/danger_dialog_form_helper.js

@@ -62,7 +62,7 @@ __decorate([
     attr
 ], DangerDialogFormHelperElement.prototype, "confirmationLiveMessageUnchecked", void 0);
 DangerDialogFormHelperElement = __decorate([
-    controller
+    controller('danger-dialog-form-helper')
 ], DangerDialogFormHelperElement);
 if (!window.customElements.get('danger-dialog-form-helper')) {
     window.DangerDialogFormHelperElement = DangerDialogFormHelperElement;

data/app/components/primer/open_project/danger_dialog_form_helper.ts

@@ -3,7 +3,7 @@ import type {LiveRegionElement} from '@primer/live-region-element'
 
 const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]'
 
-@controller
+@controller('danger-dialog-form-helper')
 class DangerDialogFormHelperElement extends HTMLElement {
   @target checkbox: HTMLInputElement | undefined
   @target liveRegion: LiveRegionElement

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

@@ -18,7 +18,7 @@ module Primer
       # @param legend_text [String] A legend should be short and concise. The String will also be read by assistive technology.
       # @param visually_hide_legend [Boolean] Controls if the legend is visible. If `true`, screen reader only text will be added.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(legend_text: nil, visually_hide_legend: false, **system_arguments) # rubocop:disable Lint/MissingSuper
+      def initialize(legend_text: nil, visually_hide_legend: false, **system_arguments)
         @legend_text = legend_text
         @visually_hide_legend = visually_hide_legend
         @system_arguments = deny_tag_argument(**system_arguments)
@@ -40,7 +40,7 @@ module Primer
 
         attr_reader :text
 
-        def initialize(text: nil, visually_hide_legend: false, **system_arguments) # rubocop:disable Lint/MissingSuper
+        def initialize(text: nil, visually_hide_legend: false, **system_arguments)
           @text = text
 
           @system_arguments = deny_tag_argument(**system_arguments)

data/app/components/primer/open_project/filterable_tree_view.js

@@ -224,6 +224,7 @@ _FilterableTreeViewElement_updateCheckedNodeIds = function _FilterableTreeViewEl
                 }
                 __classPrivateFieldGet(this, _FilterableTreeViewElement_checkedNodeIds, "f").set(nodeId, nodeInfo.checkedValue);
                 const payload = { path: nodeInfo.path };
+                payload.nodeId = nodeId;
                 const dataValue = node.getAttribute('data-value');
                 if (dataValue)
                     payload.value = dataValue;
@@ -689,7 +690,7 @@ __decorate([
     target
 ], FilterableTreeViewElement.prototype, "includeSubItemsCheckBox", void 0);
 FilterableTreeViewElement = __decorate([
-    controller
+    controller('filterable-tree-view')
 ], FilterableTreeViewElement);
 export { FilterableTreeViewElement };
 if (!window.customElements.get('filterable-tree-view')) {

data/app/components/primer/open_project/filterable_tree_view.ts

@@ -18,7 +18,7 @@ type NodeState = {
 
 const ASYNC_DEBOUNCE_MS = 300
 
-@controller
+@controller('filterable-tree-view')
 export class FilterableTreeViewElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @target filterModeControlList: HTMLElement
@@ -119,7 +119,8 @@ export class FilterableTreeViewElement extends HTMLElement {
           }
 
           this.#checkedNodeIds.set(nodeId, nodeInfo.checkedValue)
-          const payload: {path: string[]; value?: string} = {path: nodeInfo.path}
+          const payload: {path: string[]; nodeId?: string; value?: string} = {path: nodeInfo.path}
+          payload.nodeId = nodeId
           const dataValue = node.getAttribute('data-value')
           if (dataValue) payload.value = dataValue
           this.#checkedNodeFormPayloads.set(nodeId, payload)

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

@@ -29,10 +29,10 @@ module Primer
         # no slot provided
         return false if rows.empty? && columns.empty? && boxes.empty?
 
-        if [rows, columns, boxes].count { |arr| !arr.empty? } == 1
+        if [rows, columns, boxes].one? { |arr| !arr.empty? }
           # only rows or columns or boxes are used
           true
-        elsif [rows, columns, boxes].count { |arr| !arr.empty? } > 1
+        elsif [rows, columns, boxes].many? { |arr| !arr.empty? }
           # rows, columns and boxes are used together, which is not allowed
           raise ArgumentError, "You can't mix row, column and box slots"
         end

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

@@ -33,7 +33,7 @@ module Primer
       # @param scheme [Symbol] <%= one_of(Primer::OpenProject::InlineMessage::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::OpenProject::InlineMessage::SIZE_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(scheme:, size: DEFAULT_SIZE, **system_arguments) # rubocop:disable Lint/MissingSuper
+      def initialize(scheme:, size: DEFAULT_SIZE, **system_arguments)
         resolved_scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme)
         resolved_size   = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
 

data/app/components/primer/open_project/input_group.html.erb

@@ -4,6 +4,15 @@
     <%= trailing_action %>
   <% end %>
 
+  <% if @text_input_validation_message %>
+    <div class="FormControl-inlineValidation mt-1" id="<%= @text_input_validation_message_id %>">
+      <span class="FormControl-inlineValidation--visual">
+        <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      </span>
+      <span><%= @text_input_validation_message %></span>
+    </div>
+  <% end %>
+
   <% if caption %>
     <%= caption %>
   <% end %>

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

@@ -49,6 +49,19 @@ module Primer
       renders_one :text_input, lambda { |readonly: true, **system_arguments|
         deny_single_argument(:input_width, "Set the `input_width` on the `InputGroup`", **system_arguments)
         deny_single_argument(:caption, "Set the `caption` on the `InputGroup`", **system_arguments)
+
+        # Extract validation_message so it can be rendered outside the flex row.
+        # This prevents the trailing action from misaligning when validation is present.
+        @text_input_validation_message = system_arguments.delete(:validation_message)
+        if @text_input_validation_message
+          @text_input_validation_message_id = self.class.generate_id(base_name: "input-group-validation")
+          system_arguments[:invalid] = true
+          system_arguments[:aria] = merge_aria(
+            system_arguments,
+            { aria: { describedby: @text_input_validation_message_id } }
+          )
+        end
+
         system_arguments[:input_width] = @system_arguments[:input_width]
 
         system_arguments[:classes] = class_names(

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

@@ -288,7 +288,7 @@ module Primer
       end
 
       def render_mobile_menu?
-        actions.count > 1
+        actions.many?
       end
 
       def show_state?

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

@@ -15,7 +15,7 @@ let PageHeaderElement = class PageHeaderElement extends HTMLElement {
     }
 };
 PageHeaderElement = __decorate([
-    controller
+    controller('page-header')
 ], PageHeaderElement);
 if (!window.customElements.get('page-header')) {
     window.PageHeaderElement = PageHeaderElement;

data/app/components/primer/open_project/page_header_element.ts

@@ -1,6 +1,6 @@
 import {controller} from '@github/catalyst'
 
-@controller
+@controller('page-header')
 class PageHeaderElement extends HTMLElement {
   menuItemClick(event: Event) {
     const currentTarget = event.currentTarget as HTMLButtonElement

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

@@ -269,9 +269,7 @@ module Primer
           key = :"page-#{page[:num]}-break"
           content = "…"
 
-          props.merge!(
-            role: "presentation"
-          )
+          props[:role] = "presentation"
         end
 
         props[:class] = class_names("Page", props[:class])

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

@@ -40,7 +40,7 @@ module Primer
               @mobile_actions ||= []
               mobile_component =  Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
                                                                **icon_args)
-              @mobile_actions.push({ component: mobile_component, block: block})
+              @mobile_actions.push({ component: mobile_component, block: block })
 
               Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
             end
@@ -65,9 +65,9 @@ module Primer
             mobile_component =  Primer::OpenProject::SubHeader::Menu.new(icon_only: true,
                                                                          display: MOBILE_ACTIONS_DISPLAY,
                                                                          **kwargs)
-            @mobile_actions.push({ component: mobile_component, block: block})
+            @mobile_actions.push({ component: mobile_component, block: block })
 
-            Primer::OpenProject::SubHeader::Menu.new(icon_only: icon_only,display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
+            Primer::OpenProject::SubHeader::Menu.new(icon_only: icon_only, display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
           },
         }
       }
@@ -146,7 +146,7 @@ module Primer
             if icon_only
               Primer::Beta::IconButton.new(**icon_args)
             else
-              @mobile_filter_button =  Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
+              @mobile_filter_button = Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
                                                                     **icon_args)
 
               Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
@@ -194,18 +194,18 @@ module Primer
       }
 
       renders_one :segmented_control, lambda { |**system_arguments, &block|
-          deny_tag_argument(**system_arguments)
-          system_arguments[:mr] ||= 2
-          system_arguments = set_as_hidden_filter_target(system_arguments)
-
-          @segmented_control_block = block
-          @mobile_segmented_control = Primer::OpenProject::SubHeader::SegmentedControl.new(
-            hide_labels: true,
-            display: MOBILE_ACTIONS_DISPLAY,
-            **system_arguments
-          )
-
-          Primer::OpenProject::SubHeader::SegmentedControl.new(display: DESKTOP_ACTIONS_DISPLAY, **system_arguments)
+        deny_tag_argument(**system_arguments)
+        system_arguments[:mr] ||= 2
+        system_arguments = set_as_hidden_filter_target(system_arguments)
+
+        @segmented_control_block = block
+        @mobile_segmented_control = Primer::OpenProject::SubHeader::SegmentedControl.new(
+          hide_labels: true,
+          display: MOBILE_ACTIONS_DISPLAY,
+          **system_arguments
+        )
+
+        Primer::OpenProject::SubHeader::SegmentedControl.new(display: DESKTOP_ACTIONS_DISPLAY, **system_arguments)
       }
 
       renders_one :text, lambda { |**system_arguments|

data/app/components/primer/open_project/sub_header_element.js

@@ -69,7 +69,7 @@ __decorate([
     targets
 ], SubHeaderElement.prototype, "filterExpandButton", void 0);
 SubHeaderElement = __decorate([
-    controller
+    controller('sub-header')
 ], SubHeaderElement);
 if (!window.customElements.get('sub-header')) {
     window.SubHeaderElement = SubHeaderElement;

data/app/components/primer/open_project/sub_header_element.ts

@@ -1,6 +1,6 @@
 import {controller, target, targets} from '@github/catalyst'
 
-@controller
+@controller('sub-header')
 class SubHeaderElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @targets shownItemsOnExpandedFilter: HTMLElement[]

data/app/components/primer/open_project/zen_mode_button.js

@@ -56,7 +56,7 @@ __decorate([
     target
 ], ZenModeButtonElement.prototype, "button", void 0);
 ZenModeButtonElement = __decorate([
-    controller
+    controller('zen-mode-button')
 ], ZenModeButtonElement);
 if (!window.customElements.get('zen-mode-button')) {
     window.ZenModeButtonElement = ZenModeButtonElement;

data/app/components/primer/open_project/zen_mode_button.ts

@@ -1,6 +1,6 @@
 import {controller, target} from '@github/catalyst'
 
-@controller
+@controller('zen-mode-button')
 class ZenModeButtonElement extends HTMLElement {
   @target button: HTMLElement
   inZenMode = false

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/tree_view_preview/doubled_path.html.erb

@@ -0,0 +1,12 @@
+<div style="max-width: 400px">
+  <%= render(Primer::Alpha::TreeView.new) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "src", expanded: true, select_variant: :single) do |sub_tree| %>
+      <% sub_tree.with_leaf(label: "button.rb", select_variant: :single) %>
+      <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: :single) %>
+    <% end %>
+
+    <% tree_view.with_leaf(label: "action_menu.rb", select_variant: :single) %>
+    <% tree_view.with_leaf(label: "action_menu.rb", select_variant: :single) %>
+    <% tree_view.with_leaf(label: "action_menu.rb", select_variant: :single) %>
+  <% end %>
+</div>

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

@@ -1,15 +1,15 @@
 <%= form_with(url: primer_view_components.generic_form_submission_path(format: :json)) do |f| %>
   <%= 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, checked: true) %>
-        <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant, value: 2) %>
+      <% tree.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, value: 0, data: { node_id: "src" }) do |sub_tree| %>
+        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1, checked: true, data: { node_id: "src-button-rb" }) %>
+        <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant, value: 2, data: { node_id: "src-icon-button-rb" }) %>
       <% end %>
 
-      <% tree.with_leaf(label: "action_menu.rb", select_variant: select_variant, value: 3) %>
-      <% tree.with_sub_tree(label: "Docs & legal requirements", select_variant: select_variant, value: 4) do |sub_tree| %>
-        <% sub_tree.with_leaf(label: "Readme.md", select_variant: select_variant, value: 5) %>
-        <% sub_tree.with_leaf(label: "Copyright.md", select_variant: select_variant, value: 6) %>
+      <% tree.with_leaf(label: "action_menu.rb", select_variant: select_variant, value: 3, data: { node_id: "action-menu-rb" }) %>
+      <% tree.with_sub_tree(label: "Docs & legal requirements", select_variant: select_variant, value: 4, data: { node_id: "docs" }) do |sub_tree| %>
+        <% sub_tree.with_leaf(label: "Readme.md", select_variant: select_variant, value: 5, data: { node_id: "docs-readme-md" }) %>
+        <% sub_tree.with_leaf(label: "Copyright.md", select_variant: select_variant, value: 6, data: { node_id: "docs-copyright-md" }) %>
       <% end %>
     <% end %>
 

data/previews/primer/alpha/tree_view_preview.rb

@@ -197,6 +197,12 @@ module Primer
         })
       end
 
+      # @label Doubled paths
+      # @hidden
+      def doubled_path
+        render_with_template
+      end
+
       private
 
       def coerce_bool(value)

data/previews/primer/open_project/input_group_preview.rb

@@ -71,6 +71,15 @@ module Primer
           menu.with_caption { "Some caption" }
         end
       end
+
+      # @label With error message
+      # @snapshot
+      def with_error_message
+        render(Primer::OpenProject::InputGroup.new) do |menu|
+          menu.with_text_input(name: "a name", label: "My input group", validation_message: "Custom validation message", value: "Copyable value")
+          menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
+        end
+      end
     end
   end
 end

data/static/arguments.json

@@ -6188,25 +6188,25 @@
       {
         "name": "filter_input_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_FILTER_INPUT_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [TextField](/components/alpha/textfield) component."
       },
       {
         "name": "filter_mode_control_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [SegmentedControl](/components/alpha/segmentedcontrol) component."
       },
       {
         "name": "include_sub_items_check_box_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [CheckBox](/components/alpha/checkbox) component."
       },
       {
         "name": "no_results_node_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_NO_RESULTS_NODE_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to a [TreeView::LeafNode](/components/alpha/treeviewleafnode) component that appears when no items match the filter criteria."
       }
     ]
@@ -6600,12 +6600,12 @@
     ]
   },
   {
-    "component": "OpenProject::SubHeader::QuickActionComponent",
+    "component": "OpenProject::SubHeader::QuickAction",
     "status": "open_project",
     "a11y_reviewed": false,
-    "short_name": "OpenProjectSubHeaderQuickActionComponent",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
+    "short_name": "OpenProjectSubHeaderQuickAction",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_action_component.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_action/default/",
     "parameters": []
   },
   {