Skip to content

DataTable: add selection checkboxes to collapsible groups - #8640

Open
rickyzhangca wants to merge 3 commits into
mainfrom
agents/datatable-collapsible-group-checkboxes
Open

rickyzhangca wants to merge 3 commits into
mainfrom
agents/datatable-collapsible-group-checkboxes

Conversation

@rickyzhangca

Copy link
Copy Markdown
Contributor

Adds selection checkboxes to collapsible groups when rowSelection is enabled. Each checkbox selects the group's selectable rows on the current page, including collapsed members, and reflects mixed or disabled states.

Context: row selection handoff.

Before After
Group disclosure occupies the checkbox column; the group has no selection checkbox. Group and row checkboxes align, and member labels align with the group label.

Same data and viewport; before uses the current main implementation.

Changelog

  • Add controlled selection, selectionDisabled, and onToggleSelect props to Table.Group.
  • Align checkboxes and group/member labels, tighten disclosure spacing, and restore normal row height while keeping the 24px disclosure target.
  • Update the existing collapsible story; no additional story.

Rollout strategy

  • No changes needed in github/github-ui

Testing & Reviewing

  • 92 component tests passed, including selection scope, disabled/mixed states, controlled updates, and LTR/RTL alignment at all three densities.
  • Keyboard/focus and axe browser test passed; TypeScript, ESLint, and formatting checks passed.
  • Linux visual snapshots will be updated by the repository's update snapshots workflow.
  • Manual screen-reader verification remains pending.

@changeset-bot

changeset-bot Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: b9081ba

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

This PR includes changesets to release 1 package
Name Type
@primer/react 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

@rickyzhangca rickyzhangca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Oct 29, 2026
@github-actions github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Oct 29, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

@primer

primer Bot commented Oct 29, 2026

Copy link
Copy Markdown
Contributor

🤖 Lint issues have been automatically fixed and committed to this PR.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🟡 Changes recommended

Two tests target a primer/css checkbox in unchanged stories that still render strapi, causing both clicks to time out and preventing the tests from completing.

2 open issues
What changed in this PR

Adds group-level selection to Primer React’s collapsible DataTable groups, allowing users to select current-page members even while a group is collapsed.

Changes:

  • Adds group checkboxes with mixed and disabled states, plus controlled selection props for Table.Group.
  • Aligns group and row controls and updates the existing collapsible-groups story.
  • Adds selection coverage and updates accessibility guidance, API documentation, and release notes.
File Description
packages/​react/​src/​DataTable/​useTable.ts Computes group selection state and toggles selectable members.
packages/​react/​src/​DataTable/​TableGroup.tsx Adds controlled group checkboxes and header structure.
packages/​react/​src/​DataTable/​Table.module.css Aligns controls and labels and adjusts disclosure spacing.
packages/​react/​src/​DataTable/​DataTable.tsx Connects group checkboxes to selection actions.
packages/​react/​src/​DataTable/​DataTable.features.stories.tsx Updates the collapsible-groups example.
packages/​react/​src/​DataTable/​DataTable.docs.json Documents group selection props and behavior.
packages/​react/​src/​DataTable/​DataTable.accessibility.md Describes checkbox scope, states, and keyboard order.
packages/​react/​src/​DataTable/​__tests__/​DataTableGroupSelection.test.tsx Covers selection scope, disabled groups, and controlled updates.
packages/​react/​src/​DataTable/​__tests__/​DataTableExpansion.test.tsx Updates alignment checks across directions and densities.
e2e/​components/​DataTable.test.ts Updates group-selection interactions and checkbox locators.
.changeset/​tidy-groups-select.md Records the feature as a minor release.

Review effort: Balanced

Comment thread e2e/components/DataTable.test.ts Outdated
Comment thread e2e/components/DataTable.test.ts Outdated
@rickyzhangca rickyzhangca added update snapshots 🤖 Command that updates VRT snapshots on the pull request and removed update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Oct 29, 2026
@github-actions
github-actions Bot temporarily deployed to storybook-preview-8640 October 29, 2026 22:03 Inactive
@primer-integration

primer-integration Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Waiting  Changes   Waiting
Passed  CI   Passed
Waiting  VRT   Waiting
Waiting  Projects   Waiting

@rickyzhangca
rickyzhangca marked this pull request as ready for review October 29, 2026 22:46
@rickyzhangca
rickyzhangca requested a review from a team as a code owner October 29, 2026 22:46

This branch was successfully deployed

2 active deployments
storybook-preview-8640 — b9081ba7 Deployed Oct 29, 2026 by github-actions[bot]
github-pages — b9081ba7 Deployed Oct 29, 2026 by primer[bot] via deploy-preview #33979
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants