Skip to content

FE-684: Add checkbox to DS#8912

Merged
alex-e-leon merged 7 commits into
mainfrom
FE-684-add-checkbox-to-ds
Jun 29, 2026
Merged

FE-684: Add checkbox to DS#8912
alex-e-leon merged 7 commits into
mainfrom
FE-684-add-checkbox-to-ds

Conversation

@alex-e-leon

@alex-e-leon alex-e-leon commented Jun 29, 2026

Copy link
Copy Markdown
Contributor

🌟 What is the purpose of this PR?

Updates the checkbox component in the DS with a new implementation
Also removed a few unused dependencies in ds-components

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

  • does not modify any publishable blocks or libraries, or modifications do not need publishing

📜 Does this require a change to the docs?

The changes in this PR:

  • are internal and do not require a docs change

@vercel

vercel Bot commented Jun 29, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hash Ready Ready Preview, Comment Jun 29, 2026 3:58pm
hashdotdesign-tokens Ready Ready Preview, Comment Jun 29, 2026 3:58pm
petrinaut Ready Ready Preview, Comment Jun 29, 2026 3:58pm

@cursor

cursor Bot commented Jun 29, 2026

Copy link
Copy Markdown

PR Summary

Medium Risk
Breaking public Checkbox API and export surface in a publishable library will require downstream migrations; scope is mostly UI with one in-repo consumer already updated.

Overview
Replaces the design-system Checkbox with a new implementation aligned to other form inputs: controlled value / onChange (boolean) instead of checked / onCheckedChange, indeterminate as its own prop, and shared field wiring (size, tone, invalid, testId, htmlForId, refs, focus/blur). Styling moves into a Panda checkbox.recipe with sizes, neutral/brand/success tones, label placement/alignment, and updated visuals. CheckboxProps is no longer exported from the package entry (along with trimming some other prop type exports in main.ts).

Ladle stories are reworked under Components/Checkbox to showcase the new variants. Petrinaut is updated to the new API for the “default starting place” control. @hashintel/ds-components drops unused canvas, motion, and bumpp dependencies; the changeset records a minor release with a breaking Checkbox API.

Reviewed by Cursor Bugbot for commit 44264a4. Bugbot is set up for automated code reviews on this repo. Configure here.

@github-actions github-actions Bot added area/deps Relates to third-party dependencies (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team area/apps > hash.design Affects the `hash.design` design site (app) labels Jun 29, 2026
Comment thread libs/@hashintel/ds-components/src/components/Checkbox/checkbox.recipe.ts Outdated

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 030e760. Configure here.

Comment thread libs/@hashintel/ds-components/src/components/Checkbox/checkbox.tsx

@kube kube left a comment

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.

LGTM.
Only checked in Petrinaut though.
Don't know how this indeterminate issue Cursor bot was talking about actually is. :)

@alex-e-leon alex-e-leon added this pull request to the merge queue Jun 29, 2026
@alex-e-leon

Copy link
Copy Markdown
Contributor Author

LGTM.
Only checked in Petrinaut though.
Don't know how this indeterminate issue Cursor bot was talking about actually is. :)

In my experience indeterminate is never really used so it's kind of moot - but with this api you just need to remember to manually set indeterminate false if the user makes a selection. I've gone with this api, since it matches the w3c api better where you can have indeterminate + checked or unchecked

Merged via the queue into main with commit 4681616 Jun 29, 2026
47 checks passed
@alex-e-leon alex-e-leon deleted the FE-684-add-checkbox-to-ds branch June 29, 2026 16:42
This was referenced Jun 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/apps > hash.design Affects the `hash.design` design site (app) area/deps Relates to third-party dependencies (area) area/infra Relates to version control, CI, CD or IaC (area) area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team

Development

Successfully merging this pull request may close these issues.

2 participants