feat(bpk-component-checkbox-v2): Add composable checkbox using Ark UI#4222
Open
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 1 commit intobpk-layout-PoCfrom
Open
feat(bpk-component-checkbox-v2): Add composable checkbox using Ark UI#4222Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 1 commit intobpk-layout-PoCfrom
Gert-Jan Vercauteren (gert-janvercauteren) wants to merge 1 commit intobpk-layout-PoCfrom
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Introduces a new composable bpk-component-checkbox-v2 built on Ark UI, including core subcomponents, styles, Storybook examples, and automated tests.
Changes:
- Added
BpkCheckboxRoot/Control/Label/Content/HiddenInput/Group components and SCSS styling - Added unit + accessibility tests and Storybook examples for the new checkbox
- Updated repo dependencies and ESLint config to support Ark UI checkbox parts
Reviewed changes
Copilot reviewed 16 out of 17 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/package.json | Adds Ark UI (and Chakra) dependencies needed by the new checkbox implementation |
| packages/bpk-component-checkbox-v2/src/common-types.ts | Defines shared CheckedState type |
| packages/bpk-component-checkbox-v2/src/accessibility-test.tsx | Adds jest-axe accessibility tests for checkbox states |
| packages/bpk-component-checkbox-v2/src/snapshots/BpkCheckbox-test.tsx.snap | Adds snapshots for checkbox rendering variants |
| packages/bpk-component-checkbox-v2/src/BpkCheckboxRoot.tsx | Implements Root wrapper over Checkbox.Root with Backpack classes/data-attrs |
| packages/bpk-component-checkbox-v2/src/BpkCheckboxLabel.tsx | Implements Label with attempt to avoid toggling when clicking links |
| packages/bpk-component-checkbox-v2/src/BpkCheckboxHiddenInput.tsx | Wraps Ark UI HiddenInput for form submission |
| packages/bpk-component-checkbox-v2/src/BpkCheckboxGroup.tsx | Adds group wrapper over Checkbox.Group |
| packages/bpk-component-checkbox-v2/src/BpkCheckboxControl.tsx | Implements control + indicators (check and indeterminate) |
| packages/bpk-component-checkbox-v2/src/BpkCheckboxContent.tsx | Adds content slot wrapper |
| packages/bpk-component-checkbox-v2/src/BpkCheckbox.module.scss | Adds component styling and state/variant handling |
| packages/bpk-component-checkbox-v2/src/BpkCheckbox-test.tsx | Adds unit tests for rendering and behaviors |
| packages/bpk-component-checkbox-v2/index.ts | Exposes the composed API surface and types |
| examples/bpk-component-checkbox-v2/stories.tsx | Registers Storybook stories |
| examples/bpk-component-checkbox-v2/examples.tsx | Adds interactive examples demonstrating variants and group usage |
| .eslintrc | Allows styling props on Ark UI checkbox parts |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+38
to
+43
| const handleClick = (e: MouseEvent) => { | ||
| // Allow links inside the label to be clicked without toggling the checkbox | ||
| if ((e.target as HTMLElement).closest('a')) { | ||
| e.stopPropagation(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
Stopping propagation on the label’s click handler typically does not prevent the native <label> activation behavior (toggling the associated checkbox) when clicking inside it. If the goal is “links inside the label should not toggle the checkbox”, consider restructuring so the link isn’t inside the clickable label/root (e.g., render links outside the label/root and associate descriptive text via aria-describedby), or use an approach that cancels label activation in a way that still allows navigation.
| } | ||
|
|
||
| // --- Disabled + On Dark --- | ||
| &--disabled#{&}--white { |
There was a problem hiding this comment.
This selector works but is harder to read/maintain due to interpolation. Consider simplifying it to the more idiomatic &--disabled&--white (same specificity/meaning) to improve readability.
Suggested change
| &--disabled#{&}--white { | |
| &--disabled&--white { |
New Backpack 2.0 checkbox component wrapping Ark UI headless primitives. Uses namespace/static property API (BpkCheckbox.Root, .Control, .Label, etc.) with BpkVStack layout primitives in Storybook examples. Includes: - BpkCheckboxRoot with forwardRef, all checkbox states - BpkCheckboxControl encapsulating Ark UI indicators + SVG icons - BpkCheckboxLabel with link stopPropagation - BpkCheckboxContent for rich label layouts - BpkCheckboxGroup for multi-checkbox groups - BpkCheckboxHiddenInput for form submission - SCSS with Ark data-attribute selectors and Backpack tokens - Full test suite (22 tests) + jest-axe accessibility tests - 9 Storybook stories using BpkVStack/BpkSpacing layout primitives - ESLint allowlist for Checkbox.* Ark UI primitives Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Gert-Jan Vercauteren (gert-janvercauteren)
force-pushed
the
bpk-component-checkbox-v2
branch
from
173ecdb to
edd56f2
Compare
Gert-Jan Vercauteren (gert-janvercauteren)
changed the base branch from
main
to
bpk-layout-PoC
Gert-Jan Vercauteren (gert-janvercauteren)
force-pushed
the
bpk-layout-PoC
branch
from
b60fda2 to
76e4b20
Compare
Gert-Jan Vercauteren (gert-janvercauteren)
added
minor
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
bpk-component-checkbox-v2) built on top of Ark UIBpkCheckboxRoot,BpkCheckboxControl,BpkCheckboxLabel,BpkCheckboxContent,BpkCheckboxHiddenInput, andBpkCheckboxGroupsubcomponentsTest plan
🤖 Generated with Claude Code