openproject-primer_view_components 0.70.5 → 0.72.0

data/app/components/primer/{open_project → alpha}/tree_view.pcss

@@ -143,6 +143,10 @@
     text-decoration-color: var(--control-fgColor-rest);
   }
 
+  & :has(.TreeViewItemContent[aria-disabled="true"]) {
+    cursor: not-allowed;
+  }
+
   & .TreeViewItemContent {
     display: flex;
     height: 100%;
@@ -208,6 +212,41 @@
         }
       }
     }
+
+    &[aria-disabled='true'] {
+      pointer-events: none;
+
+      & .TreeViewItemContentText {
+        color: var(--control-fgColor-disabled);
+      }
+
+      & .TreeViewItemVisual {
+        fill: var(--control-fgColor-disabled);
+
+        /* stylelint-disable-next-line max-nesting-depth, selector-max-compound-selectors, selector-max-specificity */
+        & svg {
+          fill: var(--control-fgColor-disabled);
+        }
+      }
+
+      & .FormControl-checkbox {
+        /* stylelint-disable-next-line max-nesting-depth */
+        @media (hover: hover) {
+          /* stylelint-disable-next-line max-nesting-depth, selector-max-specificity */
+          &:hover {
+            cursor: not-allowed;
+          }
+        }
+      }
+
+      @media (hover: hover) {
+        /* stylelint-disable-next-line max-nesting-depth */
+        &:hover {
+          cursor: not-allowed;
+          background-color: transparent;
+        }
+      }
+    }
   }
 
   & .TreeViewItemContentText {

data/app/components/primer/{open_project → alpha}/tree_view.rb

@@ -6,7 +6,7 @@
 # following describes how the components fit together at a high level, using React-like syntax. Each element
 # in the diagram corresponds to one of three types of object:
 #
-# 1. Elements with TitleCase tags represent components in the Primer::OpenProject::TreeView namespace, eg. <LeafNode>.
+# 1. Elements with TitleCase tags represent components in the Primer::Alpha::TreeView namespace, eg. <LeafNode>.
 # 2. Elements with dasherized-tags are web components/custom elements, eg. <tree-view>.
 # 3. Elements with lowercase tags are regular 'ol HTML elements, eg. <ul>.
 #
@@ -143,7 +143,7 @@
 # </SubTree>
 
 module Primer
-  module OpenProject
+  module Alpha
     # TreeView is a hierarchical list of items that may have a parent-child relationship where children
     # can be toggled into view by expanding or collapsing their parent item.
     #
@@ -169,7 +169,7 @@ module Primer
     # Providing items statically is done using the `leaf` and `sub_tree` slots:
     #
     # ```erb
-    # <%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+    # <%= render(Primer::Alpha::TreeView.new) do |tree| %>
     #   <% tree.with_sub_tree(label: "Directory") do |sub_tree| %>
     #     <% sub_tree.with_leaf(label: "File 1")
     #   <% end %>
@@ -186,7 +186,7 @@ module Primer
     # the URL to fetch nodes from:
     #
     # ```erb
-    # <%= render(Primer::OpenProject::TreeView.new) do |tree| %>
+    # <%= render(Primer::Alpha::TreeView.new) do |tree| %>
     #   <% tree.with_sub_tree(label: "Directory") do |sub_tree| %>
     #     <% sub_tree.with_loading_spinner(src: primer_view_components.tree_view_items_path) %>
     #   <% end %>
@@ -212,10 +212,10 @@ module Primer
     # Mime::Type.register("text/fragment+html", :html_fragment)
     # ```
     #
-    # Render a `Primer::OpenProject::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:
+    # Render a `Primer::Alpha::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:
     #
     # ```erb
-    # <%= render(Primer::OpenProject::TreeView::SubTree.new(path: @path, node_variant: :div)) do |tree| %>
+    # <%= render(Primer::Alpha::TreeView::SubTree.new(path: @path, node_variant: :div)) do |tree| %>
     #   <% tree.with_leaf(...) %>
     #   <% tree.with_sub_tree(...) do |sub_tree| %>
     #     ...
@@ -355,22 +355,24 @@ module Primer
     # both the `treeViewNodeChecked` and `treeViewBeforeNodeChecked` events provide an array of `TreeViewNodeInfo`
     # objects, which contain entries for every modified node in the tree.
     class TreeView < Primer::Component
+      status :alpha
+
       DEFAULT_NODE_VARIANT = :div
       NODE_VARIANT_OPTIONS = [DEFAULT_NODE_VARIANT, :anchor, :button].freeze
 
       # @!parse
       #   # Adds an leaf node to the tree. Leaf nodes are nodes that do not have children.
       #   #
-      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::OpenProject::TreeView::LeafNode) %>
-      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::OpenProject::TreeView::LeafNode) %>, or whatever class is passed as the `component_klass` argument.
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::TreeView::LeafNode) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::TreeView::LeafNode) %>, or whatever class is passed as the `component_klass` argument.
       #   def with_leaf(**system_arguments, &block)
       #   end
 
       # @!parse
       #   # Adds a sub-tree node to the tree. Sub-trees are nodes that have children, which can be both leaf nodes and other sub-trees.
       #   #
-      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::OpenProject::TreeView::SubTreeNode) %>
-      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::OpenProject::TreeView::SubTreeNode) %>, or whatever class is passed as the `component_klass` argument.
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::TreeView::SubTreeNode) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Alpha::TreeView::SubTreeNode) %>, or whatever class is passed as the `component_klass` argument.
       #   def with_sub_tree(**system_arguments, &block)
       #   end
 
@@ -404,10 +406,12 @@ module Primer
 
       attr_reader :node_variant
 
-      # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
+      # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::Alpha::TreeView::NODE_VARIANT_OPTIONS) %>
+      # @param form_arguments [Hash] These arguments allow the selections made within a `TreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
-      def initialize(node_variant: DEFAULT_NODE_VARIANT, **system_arguments)
+      def initialize(node_variant: DEFAULT_NODE_VARIANT, form_arguments: {}, **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
+        @form_arguments = form_arguments
 
         @node_variant = fetch_or_fallback(NODE_VARIANT_OPTIONS, node_variant, DEFAULT_NODE_VARIANT)
 
@@ -419,6 +423,10 @@ module Primer
         )
       end
 
+      def acts_as_form_input?
+        @form_arguments[:builder] && @form_arguments[:name]
+      end
+
       private
 
       def before_render

data/app/components/primer/beta/breadcrumbs.css

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;max-width:100%}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}
+.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .15em 0 .5em;transform:rotate(15deg) translateY(.0625em)}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}

data/app/components/primer/beta/breadcrumbs.css.json

@@ -3,7 +3,6 @@
   "selectors": [
     ".breadcrumb-item",
     ".breadcrumb-item:after",
-    ".breadcrumb-item:first-child",
     ":is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after",
     ".breadcrumb-item-selected a"
   ]

data/app/components/primer/beta/breadcrumbs.css.map

@@ -1 +1 @@
-{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CADhB,kBAAoB,CAEpB,cAgBF,CAdE,uBAOE,2DAA6D,CAF7D,UAAW,CAJX,oBAAqB,CACrB,WAAa,CAEb,aAAe,CAIf,2CACF,CAEA,6BACE,aACF,CAKA,8FACE,YACF,CAIF,4BACE,4BAA6B,CAE7B,wBAA0B,CAD1B,sCAAgC,CAAhC,8BAEF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  /* stylelint-disable-next-line primer/spacing */\n  margin-left: -0.35em;\n  list-style: none;\n  max-width: 100%;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.5em;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  text-decoration: none !important;\n  cursor: default !important;\n}\n"]}
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CACrB,eAAgB,CAChB,cAYF,CAVE,uBAOE,2DAA6D,CAF7D,UAAW,CAJX,oBAAqB,CACrB,WAAa,CAEb,qBAAwB,CAIxB,2CACF,CAKA,8FACE,YACF,CAIF,4BACE,4BAA6B,CAE7B,wBAA0B,CAD1B,sCAAgC,CAAhC,8BAEF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  list-style: none;\n  max-width: 100%;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    /* stylelint-disable-next-line primer/spacing */\n    margin: 0 0.15em 0 0.5em;\n    content: '';\n    /* stylelint-disable-next-line primer/borders */\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n/* stylelint-disable-next-line selector-max-type */\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  text-decoration: none !important;\n  cursor: default !important;\n}"]}

data/app/components/primer/beta/breadcrumbs.pcss

@@ -1,7 +1,5 @@
 .breadcrumb-item {
   display: inline-block;
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: -0.35em;
   list-style: none;
   max-width: 100%;
 
@@ -9,16 +7,12 @@
     display: inline-block;
     height: 0.8em;
     /* stylelint-disable-next-line primer/spacing */
-    margin: 0 0.5em;
+    margin: 0 0.15em 0 0.5em;
     content: '';
     /* stylelint-disable-next-line primer/borders */
     border-right: 0.1em solid var(--borderColor-neutral-emphasis);
     transform: rotate(15deg) translateY(0.0625em);
   }
-
-  &:first-child {
-    margin-left: 0;
-  }
 }
 
 .breadcrumb-item-selected,
@@ -33,4 +27,4 @@
   color: var(--fgColor-default);
   text-decoration: none !important;
   cursor: default !important;
-}
+}

data/app/components/primer/beta/progress_bar.css

@@ -1 +1 @@
-.Progress{background-color:var(--bgColor-neutral-muted);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}
+.Progress{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}

data/app/components/primer/beta/progress_bar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,6CAA8C,CAC9C,wCAAyC,CAJzC,YAAa,CACb,UAAW,CAIX,uBAA8B,CAH9B,eAIF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eACE,uBACF,CAEA,8BACE,8BACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n  display: flex;\n  height: 8px;\n  overflow: hidden;\n  background-color: var(--bgColor-neutral-muted);\n  border-radius: var(--borderRadius-medium);\n  outline: 1px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress--large {\n  height: 10px;\n}\n\n.Progress--small {\n  height: 5px;\n}\n\n.Progress-item {\n  outline: 2px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress-item + .Progress-item {\n  margin-left: var(--base-size-2);\n}\n"]}
+{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,iDAAkD,CAClD,wCAAyC,CAJzC,YAAa,CACb,UAAW,CAIX,sDAAuD,CACvD,mBAAoB,CAJpB,eAKF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eACE,uBACF,CAEA,8BACE,8BACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n  display: flex;\n  height: 8px;\n  overflow: hidden;\n  background-color: var(--progressBar-track-bgColor);\n  border-radius: var(--borderRadius-medium);\n  outline: solid 1px var(--progressBar-track-borderColor);\n  outline-offset: -1px;\n}\n\n.Progress--large {\n  height: 10px;\n}\n\n.Progress--small {\n  height: 5px;\n}\n\n.Progress-item {\n  outline: 2px solid transparent; /* Support Firefox custom colors */\n}\n\n.Progress-item + .Progress-item {\n  margin-left: var(--base-size-2);\n}\n"]}

data/app/components/primer/beta/progress_bar.pcss

@@ -4,9 +4,10 @@
   display: flex;
   height: 8px;
   overflow: hidden;
-  background-color: var(--bgColor-neutral-muted);
+  background-color: var(--progressBar-track-bgColor);
   border-radius: var(--borderRadius-medium);
-  outline: 1px solid transparent; /* Support Firefox custom colors */
+  outline: solid 1px var(--progressBar-track-borderColor);
+  outline-offset: -1px;
 }
 
 .Progress--large {

data/app/components/primer/beta/relative_time.rb

@@ -102,6 +102,7 @@ module Primer
       # @param lang [String] The language to use.
       # @param title [String] Provide a custom title to the element.
       # @param no_title [Boolean] Removes the `title` attribute provided on the element by default.
+      # @param aria_hidden [Boolean] Set if the element is hidden or not.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         datetime:,
@@ -122,6 +123,7 @@ module Primer
         lang: nil,
         title: nil,
         no_title: false,
+        aria_hidden: nil,
         **system_arguments
       )
         @system_arguments = deny_tag_argument(**system_arguments)
@@ -143,6 +145,7 @@ module Primer
         @system_arguments[:lang] = lang if lang.present?
         @system_arguments[:format] = fetch_or_fallback(FORMAT_OPTIONS, format, FORMAT_DEFAULT) if format.present?
         @system_arguments[:"format-style"] = format_style if format_style.present?
+        @system_arguments[:"aria-hidden"] = aria_hidden if aria_hidden.present?
         if datetime.present? && datetime.respond_to?(:iso8601)
           @datetime = datetime
           @system_arguments[:datetime] = datetime.iso8601

data/app/components/primer/open_project/filterable_tree_view/sub_tree.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class FilterableTreeView
+      # A `FilterableTreeView` sub-tree node.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::FilterableTreeView) %> component and
+      # should not be used directly.
+      class SubTree < Primer::Alpha::TreeView::SubTree
+        def with_sub_tree(**system_arguments, &block)
+          super(
+            sub_tree_component_klass: self.class,
+            **system_arguments,
+            select_variant: :multiple,
+            select_strategy: :self,
+            &block
+          )
+        end
+
+        def with_leaf(**system_arguments, &block)
+          super(
+            **system_arguments,
+            select_variant: :multiple,
+            &block
+          )
+        end
+
+        def with_loading_spinner(**system_arguments)
+          raise ArgumentError, "FilteredTreeView does not support asynchronous loading"
+        end
+
+        def with_loading_skeleton(**system_arguments)
+          raise ArgumentError, "FilteredTreeView does not support asynchronous loading"
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+import { SegmentedControlElement } from '../alpha/segmented_control';
+import { TreeViewElement } from '../alpha/tree_view/tree_view';
+import { TreeViewSubTreeNodeElement } from '../alpha/tree_view/tree_view_sub_tree_node_element';
+export type FilterFn = (node: HTMLElement, query: string, filterMode?: string) => Range[] | null;
+export declare class FilterableTreeViewElement extends HTMLElement {
+    #private;
+    filterInput: HTMLInputElement;
+    filterModeControlList: HTMLElement;
+    treeViewList: HTMLElement;
+    noResultsMessage: HTMLElement;
+    includeSubItemsCheckBox: HTMLInputElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleEvent(event: Event): void;
+    get filterModeControl(): SegmentedControlElement | null;
+    get treeView(): TreeViewElement | null;
+    set filterFn(newFn: FilterFn);
+    get filterFn(): FilterFn;
+    defaultFilterFn(node: HTMLElement, query: string, filterMode?: string): Range[] | null;
+    get filterMode(): string | null;
+    get queryString(): string;
+    eachDescendantDepthFirst(node: HTMLElement, level: number, ancestry: TreeViewSubTreeNodeElement[]): Generator<[NodeListOf<HTMLElement>, TreeViewSubTreeNodeElement[]]>;
+    eachShallowestCheckedSubTree(root: TreeViewSubTreeNodeElement): Generator<TreeViewSubTreeNodeElement>;
+}
+declare global {
+    interface Window {
+        FilterableTreeViewElement: typeof FilterableTreeViewElement;
+    }
+}

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

@@ -0,0 +1,28 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::Alpha::Stack.new) do %>
+    <%= render(Primer::Alpha::Stack.new(wrap: :reverse, direction: :horizontal, align: :center)) do %>
+      <%= render(Primer::Alpha::Stack.new(wrap: :wrap, direction: :horizontal, align: :center)) do %>
+        <%= render(Primer::Alpha::StackItem.new) do %>
+          <%= render(@filter_mode_control) %>
+        <% end %>
+        <%= render(Primer::Alpha::StackItem.new) do %>
+          <%= render(@include_sub_items_check_box) do |input| %>
+            <% input.merge_input_arguments!(form: "") %>
+          <% end %>
+        <% end %>
+      <% end %>
+      <%= render(Primer::Alpha::StackItem.new(grow: true)) do %>
+        <%= render(@filter_input) do |input| %>
+          <%# exclude from form submissions %>
+          <% input.merge_input_arguments!(form: "") %>
+        <% end %>
+      <% end %>
+    <% end %>
+    <%= render(Primer::BaseComponent.new(tag: :div, hidden: true, data: { target: "filterable-tree-view.noResultsMessage" })) do %>
+      <%= render(Primer::Alpha::TreeView.new) do |tree| %>
+        <% tree.with_leaf(**@no_results_node_arguments) %>
+      <% end %>
+    <% end %>
+    <%= render(@tree_view) %>
+  <% end %>
+<% end %>