openproject-primer_view_components 0.41.0 → 0.42.0

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,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 41
+      MINOR = 42
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

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/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,
+    select_items: select_items
   ),
   select_variant: :single,
   fetch_strategy: :remote,

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 select_items toggle
       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,
+        select_items: true
       )
         render_with_template(locals: {
           subtitle: subtitle,
+          select_items: select_items,
           system_arguments: {
             title: title,
             size: size,
@@ -234,6 +237,14 @@ 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
     end
   end
 end

data/previews/primer/alpha/text_area_preview.rb

@@ -16,6 +16,7 @@ module Primer
       # @param disabled toggle
       # @param invalid toggle
       # @param validation_message text
+      # @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
       def playground(
         name: "my-text-area",
         id: "my-text-area",
@@ -26,7 +27,8 @@ module Primer
         full_width: true,
         disabled: false,
         invalid: false,
-        validation_message: nil
+        validation_message: nil,
+        input_width: nil
       )
         system_arguments = {
           name: name,
@@ -38,7 +40,8 @@ module Primer
           full_width: full_width,
           disabled: disabled,
           invalid: invalid,
-          validation_message: validation_message
+          validation_message: validation_message,
+          input_width: input_width
         }
 
         render(Primer::Alpha::TextArea.new(**system_arguments))

data/previews/primer/forms_preview/custom_width_fields_form.html.erb

@@ -1,5 +1,37 @@
-<!-- Look at the "Assets" tab for the definition of the `CustomWidthFieldsForm` -->
+<%
+  custom_width_form = Class.new(ApplicationForm) do
+    form do |f|
+      f.text_field(
+        name: :ultimate_answer,
+        label: "Ultimate answer",
+        required: true,
+        caption: "The answer to life, the universe, and everything",
+        input_width: :medium
+      )
+
+      f.select_list(
+        name: "cities",
+        label: "Cool cities",
+        caption: "Select your favorite!",
+        include_blank: true,
+        input_width: :small
+      ) do |city_list|
+        city_list.option(label: "Lopez Island", value: "lopez_island")
+        city_list.option(label: "Bellevue", value: "bellevue")
+        city_list.option(label: "Seattle", value: "seattle")
+      end
+
+      f.text_field(
+        name: :lots_of_text,
+        label: "Lots of text",
+        required: true,
+        caption: "What else do you need?",
+        input_width: :small
+      )
+    end
+  end
+%>
 
 <%= primer_form_with(url: "/foo") do |f| %>
-  <%= render(CustomWidthFieldsForm.new(f)) %>
+  <%= render(custom_width_form.new(f)) %>
 <% end %>

data/static/arguments.json

@@ -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/info_arch.json

@@ -989,9 +989,20 @@
         "slots": [
           {
             "name": "description",
-            "description": "Description content that complements the item's label. See `ActionList`'s `description_scheme` argument\nfor layout options.",
+            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
             "parameters": [
-
+              {
+                "name": "legacy_content",
+                "type": "String",
+                "default": "N/A",
+                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
+              },
+              {
+                "name": "test_selector",
+                "type": "String",
+                "default": "N/A",
+                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
+              }
             ]
           },
           {
@@ -5547,9 +5558,20 @@
           },
           {
             "name": "description",
-            "description": "Description content that complements the item's label. See `ActionList`'s `description_scheme` argument\nfor layout options.",
+            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
             "parameters": [
-
+              {
+                "name": "legacy_content",
+                "type": "String",
+                "default": "N/A",
+                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
+              },
+              {
+                "name": "test_selector",
+                "type": "String",
+                "default": "N/A",
+                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
+              }
             ]
           },
           {
@@ -8083,6 +8105,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/list_of_links",
+        "name": "list_of_links",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -14687,9 +14722,20 @@
           },
           {
             "name": "description",
-            "description": "Description content that complements the item's label. See `ActionList`'s `description_scheme` argument\nfor layout options.",
+            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
             "parameters": [
-
+              {
+                "name": "legacy_content",
+                "type": "String",
+                "default": "N/A",
+                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
+              },
+              {
+                "name": "test_selector",
+                "type": "String",
+                "default": "N/A",
+                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
+              }
             ]
           },
           {
@@ -15349,9 +15395,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",
@@ -15403,7 +15449,7 @@
       },
       {
         "name": "threshold",
-        "type": "string",
+        "type": "String",
         "default": "`nil`",
         "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
       },
@@ -15427,13 +15473,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/previews.json

@@ -6624,6 +6624,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/list_of_links",
+        "name": "list_of_links",
+        "snapshot": "interactive",
+        "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.41.0
+  version: 0.42.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-08-06 00:00:00.000000000 Z
+date: 2024-08-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -568,7 +568,6 @@ files:
 - app/forms/check_box_group_form.rb
 - app/forms/check_box_with_nested_form.rb
 - app/forms/composed_form.rb
-- app/forms/custom_width_fields_form.rb
 - app/forms/example_toggle_switch_form.rb
 - app/forms/example_toggle_switch_form/example_field_caption.html.erb
 - app/forms/first_name_form.rb
@@ -856,6 +855,7 @@ files:
 - previews/primer/alpha/select_panel_preview/eventually_local_fetch_initial_failure.html.erb
 - previews/primer/alpha/select_panel_preview/eventually_local_fetch_no_results.html.erb
 - previews/primer/alpha/select_panel_preview/footer_buttons.html.erb
+- previews/primer/alpha/select_panel_preview/list_of_links.html.erb
 - previews/primer/alpha/select_panel_preview/local_fetch.html.erb
 - previews/primer/alpha/select_panel_preview/local_fetch_no_results.html.erb
 - previews/primer/alpha/select_panel_preview/multiselect.html.erb

data/app/forms/custom_width_fields_form.rb

@@ -1,26 +0,0 @@
-# frozen_string_literal: true
-
-# :nodoc:
-class CustomWidthFieldsForm < ApplicationForm
-  form do |f|
-    f.text_field(
-      name: :ultimate_answer,
-      label: "Ultimate answer",
-      required: true,
-      caption: "The answer to life, the universe, and everything",
-      input_width: :medium
-    )
-
-    f.select_list(
-      name: "cities",
-      label: "Cool cities",
-      caption: "Select your favorite!",
-      include_blank: true,
-      input_width: :small
-    ) do |city_list|
-      city_list.option(label: "Lopez Island", value: "lopez_island")
-      city_list.option(label: "Bellevue", value: "bellevue")
-      city_list.option(label: "Seattle", value: "seattle")
-    end
-  end
-end