Support dynamic labels for multiple variant SelectPanel

[myabc]

Note

This PR was-recreated for the OPF fork from primer#3825

What are you trying to accomplish?

Screenshots

Integration

List the issues that this change affects.

Closes primer#3824

Relates to https://community.openproject.org/wp/SDS-685

Risk Assessment

• Low risk the change is small, highly observable, and easily rolled back.
• Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
• High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Anything you want to highlight for special attention from reviewers?

Accessibility

• Fixes axe scan violation - This change fixes an existing axe scan violation.
• No new axe scan violation - This change does not introduce any new axe scan violations.
• New axe violation - This change introduces a new axe scan violation. Please describe why the violation cannot be resolved below.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Lookbook)
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

[changeset-bot]

🦋 Changeset detected

Latest commit: bc5fd8d

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@openproject/primer-view-components	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Uh oh! @myabc, at least one image you shared is missing helpful alt text. Check your pull request body to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 9

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[Copilot]

Pull request overview

Extends SelectPanel's dynamic invoker label feature to support the multiple select variant by joining the labels of all selected items, and updates the existing Lookbook previews and system tests to exercise both variants.

Changes:

• In select_panel_element.ts, #setDynamicLabel branches on selectVariant, concatenating selected item labels (comma-separated) for the multi-select case, and it is now invoked from #handleItemActivated so the label reflects every selection change.
• The with_dynamic_label and with_dynamic_label_and_aria_prefix previews accept a select_variant param so both single and multiple variants can be demonstrated.
• New system tests cover the single/multiple variants for both previews, and a minor changeset documents the new capability.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
app/components/primer/alpha/select_panel_element.ts	Compute dynamic label across all selected items for the multi-select variant and refresh it on each activation.
previews/primer/alpha/select_panel_preview.rb	Add select_variant param to the two dynamic-label preview methods.
previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb	Use the new select_variant local instead of hardcoding :single.
previews/primer/alpha/select_panel_preview/with_dynamic_label_and_aria_prefix.html.erb	Same parameterization for the aria-prefix preview.
test/system/alpha/select_panel_test.rb	Add system tests for single and multi-select dynamic labels, including the aria-label prefix variant.
.changeset/afraid-monkeys-unite.md	Minor changeset describing the new multi-select dynamic-label support.

[github-actions]

⚠️ Visual or ARIA snapshot differences found

Our visual and ARIA snapshot tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review differences