Merge pull request #61 from opf/bump/primer-upstream

Bump/primer upstream

.changeset/bright-glasses-taste.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Prevent other Overlays closing when Escape is pressed while Tooltips are open

.changeset/early-hornets-bake.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Primer::Alpha::ActionList now uses popover

.changeset/heavy-wasps-agree.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Add group support to ActionMenu

.changeset/lovely-suits-drop.md

@@ -0,0 +1,11 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Updates 'inactive' state for buttons based on feedback from the a11y team:
+- inactive buttons need to meet the color contrast ratio minimum
+- inactive buttons shouldn't have aria-disabled since they can still accept interactions such as:
+  - hover/focus to show a tooltip
+  - click/activate to show a dialog with more detailed info on why it's inactive
+
+<!-- Changed components: Button -->

.changeset/new-lamps-poke.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Fix: Allow month attribute for Primer::Beta::RelativeTime

.changeset/rotten-trees-occur.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Fix an issue where multiple groups could not be paginated within the same NavList

.changeset/seven-students-chew.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Prevent Blankslates from having a zero width inside flex containers

.changeset/strange-rings-confess.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+[ActionMenu] Don't allow previously hidden items to be checkable; add JavaScript API

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/changed-files@v40.1.1
+      uses: tj-actions/changed-files@v40.2.0
       with:
         files: |
           docs/**/*.md
@@ -39,7 +39,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/changed-files@v40.1.1
+      uses: tj-actions/changed-files@v40.2.0
       with:
         files: |
           app/**/*.rb
@@ -62,7 +62,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@v40.1.1
+      uses: tj-actions/changed-files@v40.2.0
       with:
         files: |
           app/components/**/*.erb
@@ -82,7 +82,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@v40.1.1
+      uses: tj-actions/changed-files@v40.2.0
       with:
         files: |
           app/components/**/*.ts
@@ -103,7 +103,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/changed-files@v40.1.1
+      uses: tj-actions/changed-files@v40.2.0
       with:
         files: |
           app/components/**/*.pcss

.stylelintrc.json

@@ -3,6 +3,8 @@
   "plugins": ["@primer/stylelint-config/plugins/no-deprecated-colors"],
   "ignoreFiles": ["app/**/*.css", "**/*.js", "**/*.ts"],
   "rules": {
+    "media-feature-range-notation": null,
+    "import-notation": null,
     "custom-property-pattern": null,
     "selector-class-pattern": null,
     "keyframes-name-pattern": null,

app/components/primer/alpha/action_list.pcss

@@ -14,7 +14,7 @@
   list-style: none;
 }
 
-.ActionListWrap--inset {
+.ActionListWrap--inset, .ActionListWrap--inset[popover] {
   padding: var(--base-size-8);
 }
 
@@ -438,6 +438,7 @@
 
       @media screen and (prefers-reduced-motion: no-preference) {
         animation: checkmarkIn 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+
         @keyframes checkmarkIn {
           from {
             clip-path: inset(16px 0 0 0);
@@ -481,6 +482,7 @@
 
       @media screen and (prefers-reduced-motion: no-preference) {
         animation: checkmarkOut 200ms cubic-bezier(0.11, 0, 0.5, 0) forwards;
+
         @keyframes checkmarkOut {
           from {
             clip-path: inset(0 0 0 0);

app/components/primer/alpha/action_list.rb

@@ -52,9 +52,10 @@ def custom_element_name
 
       # Heading text rendered above the list of items.
       #
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Heading) %>.
-      renders_one :heading, lambda { |**system_arguments|
-        Heading.new(**system_arguments)
+      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Alpha::ActionList::Heading) %>.
+      # @param system_arguments [Hash] The arguments accepted by `component_klass`.
+      renders_one :heading, lambda { |component_klass: Primer::Alpha::ActionList::Heading, **system_arguments|
+        component_klass.new(**system_arguments)
       }
 
       # @!parse
@@ -229,7 +230,7 @@ def allows_selection?
       end
 
       def acts_as_menu?
-        @system_arguments[:role] == :menu
+        @system_arguments[:role] == :menu || @system_arguments[:role] == :group
       end
 
       def required_form_arguments_given?

app/components/primer/alpha/action_list/item.rb

@@ -128,7 +128,7 @@ class Item < Primer::Component
         # @private
         renders_one :private_content
 
-        attr_reader :id, :list, :href, :active, :disabled, :parent
+        attr_reader :id, :item_id, :list, :href, :active, :disabled, :parent
 
         # Whether or not this item is active.
         #
@@ -143,6 +143,7 @@ class Item < Primer::Component
         # @param list [Primer::Alpha::ActionList] The list that contains this item. Used internally.
         # @param parent [Primer::Alpha::ActionList::Item] This item's parent item. `nil` if this item is at the root. Used internally.
         # @param label [String] Item label. If no label is provided, content is used.
+        # @param item_id [String] An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript.
         # @param label_classes [String] CSS classes that will be added to the label.
         # @param label_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the label.
         # @param content_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the item's anchor or button tag.
@@ -161,6 +162,7 @@ class Item < Primer::Component
         def initialize(
           list:,
           label: nil,
+          item_id: nil,
           label_classes: nil,
           label_arguments: {},
           content_arguments: {},
@@ -181,6 +183,7 @@ def initialize(
           @list = list
           @parent = parent
           @label = label
+          @item_id = item_id
           @href = href || content_arguments[:href]
           @truncate_label = truncate_label
           @disabled = disabled
@@ -206,6 +209,15 @@ def initialize(
           @system_arguments[:data] ||= {}
           @system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
 
+          @system_arguments[:data] = merge_data(
+            @system_arguments, {
+              data: {
+                targets: "#{list_class.custom_element_name}.items",
+                **(@item_id ? { item_id: @item_id } : {})
+              }
+            }
+          )
+
           @label_arguments = {
             **label_arguments,
             classes: class_names(

app/components/primer/alpha/action_menu.rb

@@ -128,6 +128,39 @@ module Alpha
     #
     #   Additional information around the keyboard functionality and implementation can be found on the
     #   [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).
+    #
+    # ### JavaScript API
+    #
+    # `ActionList`s render an `<action-list>` custom element that exposes behavior to the client. For all these methods,
+    # `itemId` refers to the value of the `item_id:` argument (see below) that is used to populate the `data-item-id` HTML
+    # attribute.
+    #
+    # #### Query methods
+    #
+    # * `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.
+    # * `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.
+    # * `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.
+    # * `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.
+    #
+    # #### State methods
+    #
+    # * `showItem(item: Element)`: Shows the item, i.e. makes it visible.
+    # * `hideItem(item: Element)`: Hides the item, i.e. makes it invisible.
+    # * `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.
+    # * `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.
+    # * `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.
+    # * `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.
+    #
+    # #### Events
+    #
+    # The `<action-menu>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.
+    #
+    # ```typescript
+    # document.querySelector("action-menu").addEventListener("itemActivated", (event: ItemActivatedEvent) => {
+    #   event.item  // Element: the <li> item that was activated
+    #   event.checked  // boolean: whether or not the result of the activation checked the item
+    # })
+    # ```
     class ActionMenu < Primer::Component
       status :alpha
 
@@ -175,7 +208,7 @@ def initialize(
 
         @system_arguments[:preload] = true if @src.present? && preload?
 
-        select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
+        @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT)
 
         @system_arguments[:tag] = :"action-menu"
         @system_arguments[:"data-select-variant"] = select_variant
@@ -243,6 +276,10 @@ def with_avatar_item(**system_arguments, &block)
         @list.with_avatar_item(**system_arguments, &block)
       end
 
+      def with_group(**system_arguments, &block)
+        @list.with_group(**system_arguments, &block)
+      end
+
       private
 
       def before_render