Support :single as select_variant for TreeView

[HDinger]

What are you trying to accomplish?

Allow select_variant: :single for Primer::Alpha::TreeView. The goal is to allow the TreeView to behave like a single-select component — meaning only one item can be selected at a time. This is particularly useful in scenarios where the user should choose one item out of many in a hierachy (similar to a radio button group).

Screenshots

Integration

It should not, as it only adding an option

List the issues that this change affects.

Closes #3701

Risk Assessment

• [x] 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?

I based my current draft on the implementation on how SelectPanel handles single-selection. Specifically:

• I used an arrow indicator (like in SelectPanel) to show which item is selected.
• The visibility of the arrow is toggled based on the aria-checked attribute.
  • This keeps the implementation consistent with how select_variant: :multiple works.
  • It also reduces code complexity by reusing existing accessibility states and styling logic.

One difference from the SelectPanel is the position of the checkmark. In the TreeView, the checkmark is shown at the end of the line rather than the beginning. This was necessary because placing the checkmark at the start of the line led to large visual gaps — especially since most items do not show a checkmark at all. The current placement helps maintain a more consistent and compact layout.

Anything you want to highlight for special attention from reviewers?

Currently, it is impossible to deselect an item once a selection was made. I copied that behaviour from the SelectPanel as well, but that is up for discussion.

Accessibility

Since the selection is made via the aria-checked, the current selection is accessible for screen reader users

The TreeView can be used via KeyBoard:

• Arrows toggle/collapse the hierarchy
• Enter/Space select an item

Merge checklist

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

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 3efdf3488b06b2ebd0a05c6605dcdab5fa4a1837

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

This PR includes changesets to release 1 package

Name	Type
@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

[HDinger]

Thanks for the feedback @camertron Very much appreciated 🙇 👍

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.