Skip to content

Support :single as select_variant for TreeView - #3712

Closed
HDinger wants to merge 2 commits into
primer:mainfrom
opf:feature/single-select-variant-for-tree-view
Closed

Support :single as select_variant for TreeView#3712
HDinger wants to merge 2 commits into
primer:mainfrom
opf:feature/single-select-variant-for-tree-view

Conversation

@HDinger

@HDinger HDinger commented Oct 1, 2025

Copy link
Copy Markdown
Contributor

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

Sep-30-2025 12-45-55

Integration

It should not, as it only adding an option

List the issues that this change affects.

Closes #3701

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?

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

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

@HDinger
HDinger requested review from a team as code owners October 1, 2025 11:56
@changeset-bot

changeset-bot Bot commented Oct 1, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 3efdf34

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
HDinger force-pushed the feature/single-select-variant-for-tree-view branch from 2830c52 to 08f3379 Compare October 1, 2025 11:57
@siddharthkp
siddharthkp requested review from jonrohan and removed request for siddharthkp October 6, 2025 11:09
Comment thread .idea/inspectionProfiles/Project_Default.xml Outdated
Comment thread app/components/primer/alpha/tree_view/tree_view.ts Outdated
Comment thread app/components/primer/alpha/tree_view/tree_view.ts Outdated
this.checkAtPath(path)
}

toggleCheckedAtPath(path: string[]) {

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this method work as expected in single-select mode?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this method is not used at all any more (?), so I will delete it..

@HDinger
HDinger force-pushed the feature/single-select-variant-for-tree-view branch from 08f3379 to 3efdf34 Compare October 13, 2025 12:48
@HDinger

HDinger commented Oct 13, 2025

Copy link
Copy Markdown
Contributor Author

Thanks for the feedback @camertron Very much appreciated 🙇 👍

@HDinger
HDinger requested a review from camertron October 13, 2025 12:49
@github-actions

Copy link
Copy Markdown
Contributor

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.

@github-actions github-actions Bot added the Stale Automatically marked as stale. label Dec 12, 2025
@github-actions github-actions Bot closed this Dec 19, 2025
@lindenthal

Copy link
Copy Markdown

Can we please keep this PR open? We would really appreciate a review to get this upstream.
Many thanks
Niels

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Stale Automatically marked as stale.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Support :single as select_variant for TreeView

3 participants