openproject-primer_view_components 0.41.1 → 0.43.0

data/app/components/primer/open_project/side_panel/section.css.json

@@ -6,7 +6,6 @@
     ".SidePanel-sectionAction",
     ".SidePanel-sectionContent",
     ".SidePanel-sectionDescription",
-    ".SidePanel-sectionContent:not(:last-child)",
-    ".SidePanel-sectionDescription:not(:last-child)"
+    ":is(.SidePanel-sectionContent,.SidePanel-sectionDescription):not(:last-child)"
   ]
 }

data/app/components/primer/open_project/side_panel/section.css.map

@@ -1 +1 @@
-{"version":3,"sources":["section.pcss"],"names":[],"mappings":"AAEA,yBAEE,kBAAmB,CADnB,YAAa,CAEb,WAAY,CACZ,iBACF,CAEA,0BACE,eACF,CAEA,yBAGE,YAAa,CADb,MAAO,CADP,qBAGF,CAEA,wDAEE,YAKF,CAHE,0FACE,kBACF","file":"section.css","sourcesContent":["/* CSS for OpenProject::SidePanel::Section  */\n\n.SidePanel-sectionHeader {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  margin-bottom: 8px;\n}\n\n.SidePanel-sectionCounter {\n  margin-left: 8px;\n}\n\n.SidePanel-sectionAction {\n  justify-content: right;\n  flex: 1;\n  display: flex;\n}\n\n.SidePanel-sectionContent,\n.SidePanel-sectionDescription {\n  margin-top: 0;\n\n  &:not(:last-child) {\n    margin-bottom: 16px;\n  }\n}\n"]}
+{"version":3,"sources":["section.pcss"],"names":[],"mappings":"AAEA,yBAEE,kBAAmB,CADnB,YAAa,CAEb,WAAY,CACZ,iBACF,CAEA,0BACE,eACF,CAEA,yBAGE,YAAa,CADb,MAAO,CADP,qBAGF,CAEA,wDAEE,YAKF,CAHE,8EACE,kBACF","file":"section.css","sourcesContent":["/* CSS for OpenProject::SidePanel::Section  */\n\n.SidePanel-sectionHeader {\n  display: flex;\n  align-items: center;\n  height: 32px;\n  margin-bottom: 8px;\n}\n\n.SidePanel-sectionCounter {\n  margin-left: 8px;\n}\n\n.SidePanel-sectionAction {\n  justify-content: right;\n  flex: 1;\n  display: flex;\n}\n\n.SidePanel-sectionContent,\n.SidePanel-sectionDescription {\n  margin-top: 0;\n\n  &:not(:last-child) {\n    margin-bottom: 16px;\n  }\n}\n"]}

data/app/components/primer/shared_events.d.ts

@@ -1,9 +1,11 @@
 export type ItemActivatedEvent = {
     item: Element;
     checked: boolean;
+    value: string | null;
 };
 declare global {
     interface HTMLElementEventMap {
         itemActivated: CustomEvent<ItemActivatedEvent>;
+        beforeItemActivated: CustomEvent<ItemActivatedEvent>;
     }
 }

data/app/components/primer/shared_events.ts

@@ -1,10 +1,12 @@
 export type ItemActivatedEvent = {
   item: Element
   checked: boolean
+  value: string | null
 }
 
 declare global {
   interface HTMLElementEventMap {
     itemActivated: CustomEvent<ItemActivatedEvent>
+    beforeItemActivated: CustomEvent<ItemActivatedEvent>
   }
 }

data/lib/primer/forms/primer_text_field.js

@@ -19,6 +19,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 var _PrimerTextFieldElement_abortController;
 import '@github/auto-check-element';
 import { controller, target } from '@github/catalyst';
+const SCREENREADER_TEXT_CLASSNAME = 'spinner-screenreader-text';
 let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -83,10 +84,12 @@ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
     }
     showLeadingSpinner() {
         this.leadingSpinner?.removeAttribute('hidden');
+        this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.removeAttribute('hidden');
         this.leadingVisual?.setAttribute('hidden', '');
     }
     hideLeadingSpinner() {
         this.leadingSpinner?.setAttribute('hidden', '');
+        this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.setAttribute('hidden', '');
         this.leadingVisual?.removeAttribute('hidden');
     }
 };

data/lib/primer/forms/primer_text_field.ts

@@ -10,6 +10,8 @@ declare global {
     'auto-check-error': AutoCheckErrorEvent
   }
 }
+
+const SCREENREADER_TEXT_CLASSNAME = 'spinner-screenreader-text'
 @controller
 export class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
@@ -97,11 +99,13 @@ export class PrimerTextFieldElement extends HTMLElement {
 
   showLeadingSpinner(): void {
     this.leadingSpinner?.removeAttribute('hidden')
+    this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.removeAttribute('hidden')
     this.leadingVisual?.setAttribute('hidden', '')
   }
 
   hideLeadingSpinner(): void {
     this.leadingSpinner?.setAttribute('hidden', '')
+    this.leadingSpinner?.querySelector(SCREENREADER_TEXT_CLASSNAME)?.setAttribute('hidden', '')
     this.leadingVisual?.removeAttribute('hidden')
   }
 }

data/lib/primer/view_components/linters/details_menu_migration.rb

@@ -14,6 +14,13 @@ module ERBLint
             " https://primer.style/design/components/action-menu/rails/alpha"
           DETAILS_MENU_RUBY_PATTERN = /tag:?\s+:"details-menu"/.freeze
 
+          # Allow custom pattern matching for ERB nodes
+          class ConfigSchema < LinterConfig
+            property :custom_erb_pattern, accepts: array_of?(Regexp),
+              default: -> { [] }
+          end
+          self.config_schema = ConfigSchema
+
           def run(processed_source)
             # HTML tags
             tags(processed_source).each do |tag|
@@ -25,9 +32,31 @@ module ERBLint
             # ERB nodes
             erb_nodes(processed_source).each do |node|
               code = extract_ruby_from_erb_node(node)
-              generate_node_offense(self.class, processed_source, node, MIGRATE_FROM_DETAILS_MENU) if code.match?(DETAILS_MENU_RUBY_PATTERN)
+
+              if contains_offense?(code)
+                generate_node_offense(self.class, processed_source, node, MIGRATE_FROM_DETAILS_MENU)
+              end
             end
           end
+
+          def contains_offense?(code)
+            return true if code.match?(DETAILS_MENU_RUBY_PATTERN)
+            return code.match?(custom_erb_pattern) if custom_erb_pattern
+            false
+          end
+
+          def custom_erb_pattern
+            unless defined?(@custom_erb_pattern)
+              @custom_erb_pattern =
+                if @config.custom_erb_pattern.empty?
+                  nil
+                else
+                  Regexp.new(@config.custom_erb_pattern.join("|"), true)
+                end
+            end
+
+            @custom_erb_pattern
+          end
         end
       end
     end

data/lib/primer/view_components/linters/tooltipped_migration.rb

@@ -10,7 +10,7 @@ module ERBLint
           include LinterRegistry
           include Helpers::RuleHelpers
 
-          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. There are major accessibility concerns with using this tooltip so please take action. See https://primer.style/guides/rails/migration-guides/primer-css-tooltipped."
+          MIGRATE_TO_NEWER_TOOLTIP = ".tooltipped has been deprecated. Due to major accessibility concerns with using this tooltip, please migrate to a Primer Tooltip component or rework the design to eliminate the tooltip. See https://primer.style/guides/rails/migration-guides/primer-css-tooltipped."
           TOOLTIPPED_RUBY_PATTERN = /classes:.*tooltipped|class:.*tooltipped/.freeze
 
           def run(processed_source)

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/action_list_preview.rb

@@ -380,7 +380,7 @@ module Primer
                  aria: { label: "List heading" }
                )) do |component|
           component.with_item(label: "Default item", href: "/") do |item|
-            item.with_description.with_content("This is a description")
+            item.with_description(test_selector: "some-selector").with_content("This is a description")
           end
         end
       end

data/previews/primer/alpha/select_panel_preview/list_of_links.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Panel" } %>
+  <% panel.with_item(label: "GitHub", href: "https://github.com") %>
+  <% panel.with_item(label: "Microsoft", href: "https://microsoft.com") %>
+  <% panel.with_item(label: "Primer", href: "https://primer.style") %>
+  <% panel.with_item(label: "Catalyst", href: "https://catalyst.rocks") %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/no_values.html.erb

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/playground.html.erb

@@ -8,7 +8,8 @@
   src: select_panel_items_path(
     select_variant: :single,
     show_results: !simulate_no_results,
-    fail: simulate_failure
+    fail: simulate_failure,
+    selected_items: selected_items
   ),
   select_variant: :single,
   fetch_strategy: :remote,

data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb

@@ -2,7 +2,10 @@
 
 <%= render(Primer::Alpha::SelectPanel.new(
   data: { interaction_subject: subject_id },
-  src: select_panel_items_path,
+  src: select_panel_items_path(
+    select_variant: :multiple,
+    selected_items: selected_items,
+  ),
   select_variant: :multiple,
   fetch_strategy: :remote,
   open_on_load: open_on_load

data/previews/primer/alpha/select_panel_preview/single_select.html.erb

@@ -7,10 +7,10 @@
   open_on_load: open_on_load
 )) do |panel| %>
   <% panel.with_show_button { "Choose item" } %>
-  <% panel.with_item(label: "Item 1", item_id: :item1) %>
-  <% panel.with_item(label: "Item 2", item_id: :item2) %>
-  <% panel.with_item(label: "Item 3", item_id: :item3) %>
-  <% panel.with_item(label: "Item 4", item_id: :item4) %>
+  <% panel.with_item(label: "Item 1", item_id: :item1, content_arguments: { data: { value: 1 } }) %>
+  <% panel.with_item(label: "Item 2", item_id: :item2, content_arguments: { data: { value: 2 } }) %>
+  <% panel.with_item(label: "Item 3", item_id: :item3, content_arguments: { data: { value: 3 } }) %>
+  <% panel.with_item(label: "Item 4", item_id: :item4, content_arguments: { data: { value: 4 } }) %>
   <% panel.with_item(label: "Disabled", disabled: true, item_id: :disabled) %>
   <% panel.with_footer(show_divider: true) do %>
     I'm a footer!

data/previews/primer/alpha/select_panel_preview.rb

@@ -18,6 +18,7 @@ module Primer
       # @param open_on_load toggle
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param selected_items text
       def playground(
         title: "Sci-fi equipment",
         subtitle: "Various tools from your favorite shows",
@@ -31,10 +32,12 @@ module Primer
         show_filter: true,
         open_on_load: false,
         anchor_align: :start,
-        anchor_side: :outside_bottom
+        anchor_side: :outside_bottom,
+        selected_items: "Phaser"
       )
         render_with_template(locals: {
           subtitle: subtitle,
+          selected_items: selected_items,
           system_arguments: {
             title: title,
             size: size,
@@ -62,8 +65,6 @@ module Primer
         })
       end
 
-      # @!group Fetch strategies
-
       # @label Local fetch
       #
       # @snapshot interactive
@@ -84,8 +85,9 @@ module Primer
       #
       # @snapshot interactive
       # @param open_on_load toggle
-      def remote_fetch(open_on_load: false)
-        render_with_template(locals: { open_on_load: open_on_load })
+      # @param selected_items text
+      def remote_fetch(open_on_load: false, selected_items: "Phaser")
+        render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items })
       end
 
       # @label Local fetch (no results)
@@ -112,8 +114,6 @@ module Primer
         render_with_template(locals: { open_on_load: open_on_load })
       end
 
-      # @!endgroup
-
       # @label Single select
       #
       # @snapshot interactive
@@ -234,6 +234,22 @@ module Primer
       def multiselect_form(open_on_load: false, route_format: :html)
         render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
       end
+
+      # @label List of links
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def list_of_links(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label No values
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def no_values(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
     end
   end
 end

data/static/arguments.json

@@ -2388,7 +2388,7 @@
         "name": "select_variant",
         "type": "Symbol",
         "default": "`:single`",
-        "description": "One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
+        "description": "One of `:multiple`, `:none`, or `:single`."
       },
       {
         "name": "fetch_strategy",
@@ -4336,9 +4336,9 @@
       },
       {
         "name": "prefix",
-        "type": "sring",
+        "type": "String",
         "default": "`nil`",
-        "description": "What to prefix the relative ime display with."
+        "description": "What to prefix the relative time display with."
       },
       {
         "name": "second",
@@ -4390,7 +4390,7 @@
       },
       {
         "name": "threshold",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
       },
@@ -4414,13 +4414,13 @@
       },
       {
         "name": "lang",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "The language to use."
       },
       {
         "name": "title",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "Provide a custom title to the element."
       },

data/static/classes.json

@@ -266,6 +266,9 @@
   "FormControl-checkbox-wrap": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-error": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-horizontalGroup": [
     "Primer::Alpha::TextField"
   ],
@@ -281,12 +284,27 @@
   "FormControl-input": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-input-trailingAction--divider": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-input-wrap": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-inset": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-label": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-large": [
+    "Primer::Alpha::TextField"
+  ],
+  "FormControl-medium": [
+    "Primer::Alpha::TextField"
+  ],
+  "FormControl-monospace": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-radio-group-wrap": [
     "Primer::Alpha::TextField"
   ],
@@ -299,15 +317,24 @@
   "FormControl-select-wrap": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-small": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-spacingWrapper": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-success": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-textarea": [
     "Primer::Alpha::TextField"
   ],
   "FormControl-toggleSwitchInput": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-warning": [
+    "Primer::Alpha::TextField"
+  ],
   "InputGroup": [
     "Primer::OpenProject::InputGroup"
   ],
@@ -365,6 +392,12 @@
   "Layout-divider": [
     "Primer::Alpha::Layout"
   ],
+  "Layout-divider--flowRow-hidden": [
+    "Primer::Alpha::Layout"
+  ],
+  "Layout-divider--flowRow-shallow": [
+    "Primer::Alpha::Layout"
+  ],
   "Layout-main": [
     "Primer::Alpha::Layout"
   ],
@@ -465,9 +498,6 @@
   "Popover-message": [
     "Primer::Beta::Popover"
   ],
-  "Popover-message--bottom": [
-    "Primer::Beta::Popover"
-  ],
   "Popover-message--bottom-left": [
     "Primer::Beta::Popover"
   ],
@@ -477,27 +507,9 @@
   "Popover-message--large": [
     "Primer::Beta::Popover"
   ],
-  "Popover-message--left": [
-    "Primer::Beta::Popover"
-  ],
-  "Popover-message--left-bottom": [
-    "Primer::Beta::Popover"
-  ],
-  "Popover-message--left-top": [
-    "Primer::Beta::Popover"
-  ],
   "Popover-message--no-caret": [
     "Primer::Beta::Popover"
   ],
-  "Popover-message--right": [
-    "Primer::Beta::Popover"
-  ],
-  "Popover-message--right-bottom": [
-    "Primer::Beta::Popover"
-  ],
-  "Popover-message--right-top": [
-    "Primer::Beta::Popover"
-  ],
   "Popover-message--top-left": [
     "Primer::Beta::Popover"
   ],
@@ -675,6 +687,12 @@
   "Truncate": [
     "Primer::Beta::Truncate"
   ],
+  "Truncate-text--expandable": [
+    "Primer::Beta::Truncate"
+  ],
+  "Truncate-text--primary": [
+    "Primer::Beta::Truncate"
+  ],
   "UnderlineNav": [
     "Primer::Alpha::UnderlineNav"
   ],