openproject-primer_view_components 0.35.1 → 0.36.0

data/app/components/primer/alpha/underline_panels.rb

@@ -18,7 +18,7 @@ module Primer
         Primer::Alpha::Navigation::Tab.new(
           selected: selected,
           with_panel: true,
-          list: false,
+          list: true,
           icon_classes: "UnderlineNav-octicon",
           panel_id: "panel-#{id}",
           **system_arguments
@@ -43,16 +43,24 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(label:, align: ALIGN_DEFAULT, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
         @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
-        @wrapper_arguments = deny_tag_argument(**wrapper_arguments)
-        @wrapper_arguments[:tag] = :div
+        @wrapper_arguments = wrapper_arguments
 
         @system_arguments = deny_tag_argument(**system_arguments)
-        @system_arguments[:tag] = :"tab-container"
+        @system_arguments[:tag] = :div
         @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
-        @system_arguments[:"aria-label"] = label
 
         @body_arguments = deny_tag_argument(**body_arguments)
-        @body_arguments[:tag] = :div
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
       end
     end
   end

data/app/components/primer/focus_group.js

@@ -11,7 +11,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
 import '@oddbird/popover-polyfill';
-const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="option"]'];
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
 const getMnemonicFor = (item) => item.textContent?.trim()[0].toLowerCase();
 const printable = /^\S$/;

data/app/components/primer/focus_group.ts

@@ -1,6 +1,6 @@
 import '@oddbird/popover-polyfill'
 
-const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]', '[role="option"]']
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ')
 
 const getMnemonicFor = (item: Element) => item.textContent?.trim()[0].toLowerCase()

data/app/components/primer/primer.pcss

@@ -12,7 +12,6 @@
 @import "./alpha/button_marketing.pcss";
 @import "./alpha/toggle_switch.pcss";
 @import "./alpha/underline_nav.pcss";
-@import "./alpha/underline_panels.pcss";
 @import "./alpha/segmented_control.pcss";
 @import "./alpha/menu.pcss";
 

data/lib/primer/classify/utilities.rb

@@ -18,18 +18,18 @@ module Primer
 
       # Replacements for some classnames that end up being a different argument key
       REPLACEMENT_KEYS = {
-        "^f" => "font_size",
-        "^anim" => "animation",
-        "^v-align" => "vertical_align",
-        "^d" => "display",
-        "^wb" => "word_break",
-        "^v" => "visibility",
-        "^width" => "w",
-        "^height" => "h",
-        "^color-bg" => "bg",
-        "^color-border" => "border_color",
-        "^color-fg" => "color",
-        "^rounded" => "border_radius"
+        Regexp.new("^f") => "font_size",
+        Regexp.new("^anim") => "animation",
+        Regexp.new("^v-align") => "vertical_align",
+        Regexp.new("^d") => "display",
+        Regexp.new("^wb") => "word_break",
+        Regexp.new("^v") => "visibility",
+        Regexp.new("^width") => "w",
+        Regexp.new("^height") => "h",
+        Regexp.new("^color-bg") => "bg",
+        Regexp.new("^color-border") => "border_color",
+        Regexp.new("^color-fg") => "color",
+        Regexp.new("^rounded") => "border_radius"
       }.freeze
 
       SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
@@ -190,7 +190,7 @@ module Primer
 
         def infer_selector_key(selector)
           REPLACEMENT_KEYS.each do |k, v|
-            return v.to_sym if selector.match?(Regexp.new(k))
+            return v.to_sym if selector.match?(k)
           end
           selector.split("-").first.to_sym
         end

data/lib/primer/view_components/version.rb

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

data/previews/primer/alpha/action_list_preview.rb

@@ -519,6 +519,25 @@ module Primer
           end
         end
       end
+
+      # @label Listbox
+      def listbox(
+        role: "listbox",
+        aria_selection_variant: :selected,
+        scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
+        show_dividers: false
+      )
+        render(Primer::Alpha::ActionList.new(
+                 role: role,
+                 scheme: scheme,
+                 show_dividers: show_dividers
+               )) do |component|
+          component.with_heading(title: "Action List")
+          component.with_item(label: "Item one", href: "/", active: true)
+          component.with_item(label: "Item two", href: "/") 
+          component.with_item(label: "Item three", href: "/")
+        end
+      end
     end
   end
 end

data/static/arguments.json

@@ -104,6 +104,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "aria_selection_variant",
+        "type": "Symbol",
+        "default": "`:checked`",
+        "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+      },
       {
         "name": "form_arguments",
         "type": "Hash",
@@ -383,6 +389,12 @@
         "default": "`{}`",
         "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. 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."
       },
+      {
+        "name": "overlay_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying [Overlay](/components/alpha/overlay)"
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -435,6 +447,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "aria_selection_variant",
+        "type": "Symbol",
+        "default": "`:checked`",
+        "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+      },
       {
         "name": "form_arguments",
         "type": "Hash",
@@ -2462,6 +2480,18 @@
         "default": "N/A",
         "description": "One of `:left` or `:right`. - Defaults to left"
       },
+      {
+        "name": "body_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "[System arguments](/system-arguments) for the body wrapper."
+      },
+      {
+        "name": "wrapper_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/constants.json

@@ -19,6 +19,11 @@
   "Primer::Alpha::ActionBar::Item": {
   },
   "Primer::Alpha::ActionList": {
+    "ARIA_SELECTION_VARIANT_OPTIONS": [
+      "selected",
+      "checked"
+    ],
+    "DEFAULT_ARIA_SELECTION_VARIANT": "checked",
     "DEFAULT_MENU_ITEM_ROLE": "menuitem",
     "DEFAULT_ROLE": "list",
     "DEFAULT_SCHEME": "full",
@@ -27,6 +32,7 @@
     "FormWrapper": "Primer::Alpha::ActionList::FormWrapper",
     "Heading": "Primer::Alpha::ActionList::Heading",
     "Item": "Primer::Alpha::ActionList::Item",
+    "LIST_BOX_ITEM_ROLE": "option",
     "MENU_ROLE": "menu",
     "SCHEME_MAPPINGS": {
       "full": null,

data/static/info_arch.json

@@ -246,6 +246,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "aria_selection_variant",
+        "type": "Symbol",
+        "default": "`:checked`",
+        "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+      },
       {
         "name": "form_arguments",
         "type": "Hash",
@@ -386,6 +392,13 @@
 
         ]
       },
+      {
+        "name": "aria_selection_variant",
+        "description": "Returns the value of attribute aria_selection_variant.",
+        "parameters": [
+
+        ]
+      },
       {
         "name": "build_item",
         "description": "Builds a new item but does not add it to the list. Use this method\ninstead of the `#with_item` slot if you need to render an item outside\nthe context of a list, eg. if rendering additional items to append to\nan existing list, perhaps via a separate HTTP request.",
@@ -798,6 +811,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/listbox",
+        "name": "listbox",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -1271,6 +1297,12 @@
         "default": "`{}`",
         "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. 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."
       },
+      {
+        "name": "overlay_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}"
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -1968,6 +2000,12 @@
             "default": "`:none`",
             "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
           },
+          {
+            "name": "aria_selection_variant",
+            "type": "Symbol",
+            "default": "`:checked`",
+            "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+          },
           {
             "name": "form_arguments",
             "type": "Hash",
@@ -7628,6 +7666,18 @@
         "default": "N/A",
         "description": "One of `:left` or `:right`. - Defaults to left"
       },
+      {
+        "name": "body_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "{{link_to_system_arguments_docs}} for the body wrapper."
+      },
+      {
+        "name": "wrapper_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "{{link_to_system_arguments_docs}} for the `TabContainer` wrapper."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/previews.json

@@ -428,6 +428,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/alpha/action_list/listbox",
+        "name": "listbox",
+        "snapshot": "false",
+        "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.35.1
+  version: 0.36.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-06-24 00:00:00.000000000 Z
+date: 2024-07-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -45,14 +45,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 19.12.0
+        version: 19.15.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 19.12.0
+        version: 19.15.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -293,11 +293,7 @@ files:
 - app/components/primer/alpha/underline_nav.html.erb
 - app/components/primer/alpha/underline_nav.pcss
 - app/components/primer/alpha/underline_nav.rb
-- app/components/primer/alpha/underline_panels.css
-- app/components/primer/alpha/underline_panels.css.json
-- app/components/primer/alpha/underline_panels.css.map
 - app/components/primer/alpha/underline_panels.html.erb
-- app/components/primer/alpha/underline_panels.pcss
 - app/components/primer/alpha/underline_panels.rb
 - app/components/primer/alpha/x_banner.d.ts
 - app/components/primer/alpha/x_banner.js

data/app/components/primer/alpha/underline_panels.css

@@ -1 +0,0 @@
-tab-container.UnderlineNav{box-shadow:none;flex-direction:column}

data/app/components/primer/alpha/underline_panels.css.json

@@ -1,6 +0,0 @@
-{
-  "name": "alpha/underline_panels",
-  "selectors": [
-    "tab-container.UnderlineNav"
-  ]
-}

data/app/components/primer/alpha/underline_panels.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["underline_panels.pcss"],"names":[],"mappings":"AAAA,2BACE,eAAgB,CAChB,qBACF","file":"underline_panels.css","sourcesContent":["tab-container.UnderlineNav {\n  box-shadow: none;\n  flex-direction: column;\n}\n"]}

data/app/components/primer/alpha/underline_panels.pcss

@@ -1,4 +0,0 @@
-tab-container.UnderlineNav {
-  box-shadow: none;
-  flex-direction: column;
-}