Bump/primer upstream 0.46.0

.changeset/cyan-readers-prove.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Enable use_experimental_non_local_form for all SelectPanels

.changeset/fruity-rooms-travel.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Updates SelectPanel anchor to allow IconButtons

.changeset/tiny-frogs-pretend.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Remove left/right bg color borders from Avatar Stack

.github/workflows/test.yml

@@ -25,6 +25,7 @@ env:
 jobs:
   accessibility:
     name: Accessibility
+    timeout-minutes: 10
     runs-on:
       labels:
         - runs-on
@@ -34,12 +35,12 @@ jobs:
       - uses: actions/checkout@v5
       - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: '3.4'
+          ruby-version: "3.4"
           bundler-cache: true
       - uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'npm'
+          cache: "npm"
           cache-dependency-path: |
             package-lock.json
             demo/package-lock.json
@@ -50,24 +51,12 @@ jobs:
       - name: Test
         run: bundle exec rake test:accessibility
   components:
-    name: Components
-    runs-on:
-      labels:
-        - runs-on
-        - runner=16cpu-linux-x64
-        - run-id=${{ github.run_id }}
+    name: Components (${{ matrix.label }})
+    runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
-        include:
-          - rails_version: '7.2.2.1'
-            ruby_version: '3.2'
-          - rails_version: '7.2.2.1'
-            ruby_version: '3.3'
-          - rails_version: 'main'
-            ruby_version: '3.3'
-          - rails_version: 'main'
-            ruby_version: '3.4'
+        include: ${{ fromJson(vars.TEST_MATRIX) }}
     steps:
       - uses: actions/checkout@v5
       - uses: ruby/setup-ruby@v1
@@ -78,7 +67,7 @@ jobs:
       - uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'npm'
+          cache: "npm"
       - name: Build
         run: |
           npm ci
@@ -96,24 +85,12 @@ jobs:
           RUBY_VERSION: ${{ matrix.ruby_version }}
           RAILS_VERSION: ${{ matrix.rails_version }}
   lib:
-    name: Lib
-    runs-on:
-      labels:
-        - runs-on
-        - runner=16cpu-linux-x64
-        - run-id=${{ github.run_id }}
+    name: Lib (${{ matrix.label }})
+    runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
-        include:
-          - rails_version: '7.2.2.1'
-            ruby_version: '3.2'
-          - rails_version: '7.2.2.1'
-            ruby_version: '3.3'
-          - rails_version: 'main'
-            ruby_version: '3.3'
-          - rails_version: 'main'
-            ruby_version: '3.4'
+        include: ${{ fromJson(vars.TEST_MATRIX) }}
     steps:
       - uses: actions/checkout@v5
       - uses: ruby/setup-ruby@v1
@@ -124,7 +101,7 @@ jobs:
       - uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'npm'
+          cache: "npm"
       - name: Build
         run: |
           npm ci
@@ -142,20 +119,12 @@ jobs:
           RUBY_VERSION: ${{ matrix.ruby_version }}
           RAILS_VERSION: ${{ matrix.rails_version }}
   performance:
-    name: Performance
+    name: Performance (${{ matrix.label }})
     runs-on: ubuntu-latest
     strategy:
       fail-fast: false
       matrix:
-        include:
-          - rails_version: '7.2.2.1'
-            ruby_version: '3.2'
-          - rails_version: '7.2.2.1'
-            ruby_version: '3.3'
-          - rails_version: 'main'
-            ruby_version: '3.3'
-          - rails_version: 'main'
-            ruby_version: '3.4'
+        include: ${{ fromJson(vars.TEST_MATRIX) }}
     steps:
       - uses: actions/checkout@v5
       - uses: ruby/setup-ruby@v1
@@ -183,12 +152,12 @@ jobs:
       - uses: actions/checkout@v5
       - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: '3.2'
+          ruby-version: "3.2"
           bundler-cache: true
       - uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'npm'
+          cache: "npm"
           cache-dependency-path: |
             package-lock.json
             demo/package-lock.json
@@ -206,12 +175,12 @@ jobs:
       - uses: actions/checkout@v5
       - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: '3.2'
+          ruby-version: "3.2"
           bundler-cache: true
       - uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'npm'
+          cache: "npm"
           cache-dependency-path: |
             package-lock.json
             demo/package-lock.json
@@ -235,12 +204,12 @@ jobs:
           fetch-depth: 0
       - uses: ruby/setup-ruby@v1
         with:
-          ruby-version: '3.2'
+          ruby-version: "3.2"
           bundler-cache: true
       - uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'npm'
+          cache: "npm"
           cache-dependency-path: |
             package-lock.json
             demo/package-lock.json
@@ -281,7 +250,7 @@ jobs:
           commit_message: Generating component snapshots
           file_pattern: .playwright/screenshots/**/*.png .playwright/screenshots/**/*.yml
           push_options: --force-with-lease
-      - name: 'Changes detected'
+      - name: "Changes detected"
         if: steps.auto-commit.outputs.changes_detected == 'true'
         uses: phulsechinmay/rewritable-pr-comment@v0.3.0
         with:
@@ -292,7 +261,7 @@ jobs:
 
             [Review differences](https://github.com/opf/primer_view_components/pull/${{ github.event.number }}/files?file-filters%5B%5D=.png&file-filters%5B%5D=.yml&show-viewed-files=false)
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          COMMENT_IDENTIFIER: 'visual-comparison-diff'
+          COMMENT_IDENTIFIER: "visual-comparison-diff"
       - uses: actions/upload-artifact@v4
         with:
           name: playwright-report
@@ -303,28 +272,24 @@ jobs:
         run: exit 1
   selectors:
     name: CSS coverage
-    runs-on:
-      labels:
-        - runs-on
-        - runner=16cpu-linux-x64
-        - run-id=${{ github.run_id }}
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v5
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
-          ruby-version: '3.2'
+          ruby-version: "3.2"
           bundler-cache: true
       - name: Setup Node
         uses: actions/setup-node@v5
         with:
           node-version: 20
-          cache: 'npm'
+          cache: "npm"
       - name: NPM Build
         run: npm ci
         env:
           # Disable CSS minification for tests
-          CI: 'false'
+          CI: "false"
       - name: Test CSS
         run: bundle exec rake test:component_css

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/aria-snapshot--after-interaction.yml

@@ -0,0 +1,11 @@
+- button "Menu" [expanded]
+- dialog "Menu":
+  - heading "Menu" [level=1]
+  - button "Close"
+  - text: Filter
+  - searchbox "Filter"
+  - listbox "Menu options":
+    - option "Item 1"
+    - option "Item 2"
+    - option "Item 3"
+  - text: 3 results tab for results

.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/select_panel/select_panel_with_icon_button/aria-snapshot.yml

@@ -0,0 +1 @@
+- button "Menu"

Gemfile

@@ -9,9 +9,12 @@ gem "rack-cors"
 gem "rake", "~> 13.3"
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
-
-# rubocop:disable Bundler/DuplicatedGem
-if rails_version == "main"
+if rails_version == "latest"
+  gem "actionview"
+  gem "activemodel"
+  gem "activesupport"
+  gem "railties"
+elsif rails_version == "main"
   git "https://github.com/rails/rails", ref: "main" do
     gem "actionview"
     gem "activemodel"
@@ -25,7 +28,6 @@ else
   gem "activesupport", rails_version
   gem "railties", rails_version
 end
-# rubocop:enable Bundler/DuplicatedGem
 
 # Use Puma as the app server
 gem "puma", "~> 7.0.4"

Gemfile.lock

@@ -4,7 +4,7 @@ PATH
     openproject-primer_view_components (0.75.2)
       actionview (>= 7.2.0)
       activesupport (>= 7.2.0)
-      openproject-octicons (>= 19.29.0)
+      openproject-octicons (>= 19.30.1)
       view_component (>= 3.1, < 5.0)
 
 GEM
@@ -154,7 +154,7 @@ GEM
       racc (~> 1.4)
     nokogiri (1.18.9-x86_64-linux-gnu)
       racc (~> 1.4)
-    openproject-octicons (19.29.0)
+    openproject-octicons (19.30.1)
     parallel (1.27.0)
     parser (3.3.9.0)
       ast (~> 2.4.1)

app/components/primer/alpha/select_panel.rb

@@ -354,8 +354,7 @@ def with_avatar_item(**system_arguments)
       # @param dynamic_aria_label_prefix [String] If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button.
       # @param body_id [String] The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a "-body" suffix.
       # @param list_arguments [Hash] Arguments to pass to the underlying <%= link_to_component(Primer::Alpha::ActionList) %> component. Only has an effect for the local fetch strategy.
-      # @param form_arguments [Hash] Form arguments. Supported for `local`, and experimentally supported for `remote` and `eventually_local` strategies by enabling the `use_experimental_non_local_form` flag.
-      # @param use_experimental_non_local_form [Boolean] A feature flag used to slowly roll out moving the input field (generated from form arguments) to the top of the SelectPanel HTML thus allowing remote fetching to have default form values. At this time, support is only available for the :single select variant. See: https://github.com/github/primer/issues/4923.
+      # @param form_arguments [Hash] Form arguments. Supported for all fetch strategies.
       # @param show_filter [Boolean] Whether or not to show the filter input.
       # @param open_on_load [Boolean] Open the panel when the page loads.
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
@@ -377,7 +376,6 @@ def initialize(
         dynamic_label_prefix: nil,
         dynamic_aria_label_prefix: nil,
         body_id: nil,
-        use_experimental_non_local_form: false,
         list_arguments: {},
         form_arguments: {},
         show_filter: true,
@@ -411,13 +409,11 @@ def initialize(
         @loading_label = loading_label
         @loading_description_id = nil
 
-        if use_experimental_non_local_form
-          @form_builder = form_arguments[:builder]
-          @value = form_arguments[:value]
-          @input_name = form_arguments[:name]
-        end
+        @form_builder = form_arguments[:builder]
+        @value = form_arguments[:value]
+        @input_name = form_arguments[:name]
 
-        @list_form_arguments = use_experimental_non_local_form ? {} : form_arguments
+        @list_form_arguments = {}
 
         if loading_description.present?
           @loading_description_id = "#{@panel_id}-loading-description"
@@ -509,16 +505,21 @@ def initialize(
 
       # Adds a show button (i.e. a button) that will open the panel when clicked.
       #
+      # @param icon [String] Name of <%= link_to_octicons %> to use instead of text. If an [icon](https://primer.style/octicons/usage-guidelines/) is provided, a <%= link_to_component(Primer::Beta::IconButton) %> will be rendered. Otherwise a <%= link_to_component(Primer::Beta::Button) %> will be rendered.
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %>.
-      renders_one :show_button, lambda { |**system_arguments|
+      renders_one :show_button, lambda { |icon: nil, **system_arguments|
         system_arguments[:id] = "#{@panel_id}-button"
 
         system_arguments[:aria] = merge_aria(
           system_arguments,
           { aria: { controls: "#{@panel_id}-dialog", "haspopup": "dialog", "expanded": "false" } }
         )
 
-        Primer::Beta::Button.new(**system_arguments)
+        if icon.present?
+          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+        else
+          Primer::Beta::Button.new(**system_arguments)
+        end
       }
 
       # Customizable content for the error message that appears when items are fetched for the first time. This message

app/components/primer/beta/avatar_stack.pcss

@@ -37,8 +37,6 @@
     /* stylelint-disable-next-line primer/spacing */
     margin-right: -11px;
     background-color: var(--bgColor-default);
-    /* stylelint-disable-next-line primer/colors */
-    border-right: var(--borderWidth-thin) solid var(--bgColor-default);
     border-radius: var(--borderRadius-small);
     transition: margin 0.1s ease-in-out;
 
@@ -48,7 +46,6 @@
 
     &:last-child {
       z-index: 1;
-      border-right: 0;
     }
 
     /* stylelint-disable-next-line selector-max-type */
@@ -117,10 +114,6 @@
       margin-right: 0;
       margin-left: var(--base-size-4);
     }
-
-    & .avatar:not(:last-child) {
-      border-left: 0;
-    }
   }
 
   & .avatar.avatar-more {
@@ -140,8 +133,5 @@
     margin-right: 0;
     /* stylelint-disable-next-line primer/spacing */
     margin-left: -11px;
-    border-right: 0;
-    /* stylelint-disable-next-line primer/colors */
-    border-left: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 }