[CLOV-1225]Rebase BpkCheckbox With Ark-ui by IrinaWei · Pull Request #4271 · Skyscanner/backpack

IrinaWei · 2026-03-11T04:59:22Z

https://skyscanner.atlassian.net/browse/CLOV-1055?selectedIssue=CLOV-1328

What

Introduces BpkCheckboxV2, a composable checkbox component built on Ark UI, co-located in the existing bpk-component-checkbox package alongside V1.

The V2 component exposes a namespace of slot sub-components (Root, Control, Indicator, Label, Description, HiddenInput), allowing consumers to compose any label layout without extra props.

Why

V1's monolithic API makes it difficult to support flexible label layouts (e.g. title + subtitle, inline links). The composable slot model gives consumers full control over content structure while keeping state management encapsulated in Root.

Changes

New component — BpkCheckboxV2

BpkCheckboxRoot — Ark Checkbox.Root wrapper; owns checked state, exposes checked, defaultChecked, onCheckedChange, disabled, invalid props
BpkCheckboxControl — visual 20×20 checkbox box with BEM styling
BpkCheckboxIndicator — intentionally renders null; checkmark and indeterminate dash are handled entirely via CSS on Control
BpkCheckboxLabel — primary label text; clicking it toggles the checkbox via Ark
BpkCheckboxDescription — secondary/subtitle text slot
BpkCheckboxHiddenInput — visually hidden <input type="checkbox"> for form submission and accessibility

State styling

All states (checked, indeterminate, disabled, invalid, focus-visible) use Ark UI data-* attributes as CSS selectors — no JS-driven class toggling
Focus indicator uses @include utils.bpk-focus-indicator gated on [data-focus-visible]

Theming

checkboxSelectedColorThemeAttributes — theme the fill/border colour independently
checkboxBorderRadiusThemeAttributes — theme the border-radius independently
Both exported separately so consumers can apply either one via BpkThemeProvider without requiring both

Package exports (bpk-component-checkbox/index.ts)

BpkCheckboxV2 (namespace object)
checkboxSelectedColorThemeAttributes, checkboxBorderRadiusThemeAttributes
TypeScript types: BpkCheckedState, BpkCheckboxRootProps, BpkCheckboxControlProps, BpkCheckboxLabelProps, BpkCheckboxDescriptionProps

Stories

SimpleLabel, TitleAndSubtitle, InlineLinkInLabel, DefaultChecked, Disabled, Indeterminate, Invalid, Themed
VisualTest and VisualTestWithZoom for Percy

Notes

V1 (BpkCheckbox) is unchanged; V2 is additive and lives alongside it until V1 is deprecated
indeterminate in V2 is a genuine CheckedState value (via Ark), not a visual-only override as in V1 — this is a behavioural difference consumers should be aware of when migrating
Theming key names differ from V1: checkboxSelectedColor (V2) replaces checkboxCheckedColor (V1)

Remember to include the following changes:

Copilot

Pull request overview

This PR introduces a new Ark UI–backed, slot-based BpkCheckboxV2 implementation alongside the existing checkbox, with theming hooks and Storybook examples to support the rebase.

Changes:

Added BpkCheckboxV2 slot components (Root, Control, Label, Description, etc.) plus styles, docs, tests, and snapshots.
Added per-dimension theme attributes for V2 (selected color + border radius) and wired exports from bpk-component-checkbox.
Added Storybook examples for Checkbox V2, ESLint allowlisting for Ark UI checkbox parts, and TypeScript typings for bpk-theming.

Reviewed changes

Copilot reviewed 18 out of 19 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/bpk-theming/index.d.ts	Adds TS typings for `BpkThemeProvider`.
packages/bpk-component-checkbox/src/BpkCheckboxV2/themeAttributes.ts	Introduces V2 theme attribute arrays for theming dimensions.
packages/bpk-component-checkbox/src/BpkCheckboxV2/accessibility-test.tsx	Adds jest-axe accessibility coverage for V2 compositions/states.
packages/bpk-component-checkbox/src/BpkCheckboxV2/snapshots/BpkCheckbox-test.tsx.snap	Stores new V2 render snapshots.
packages/bpk-component-checkbox/src/BpkCheckboxV2/README.md	Documents V2 usage, states, theming, and slot API.
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxRoot.tsx	Implements Ark `Checkbox.Root` wrapper + Backpack data attribute.
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxLabel.tsx	Implements Ark `Checkbox.Label` wrapper with Backpack styling.
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxIndicator.tsx	Provides Indicator slot (currently renders nothing; CSS-driven).
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxHiddenInput.tsx	Wraps Ark `Checkbox.HiddenInput` for native form participation.
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxDescription.tsx	Adds a description slot styled as secondary text.
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxControl.tsx	Implements Ark `Checkbox.Control` wrapper with Backpack styling.
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.tsx	Exposes the V2 namespace object of slot components.
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.module.scss	Adds V2 styling, state selectors, and themeable properties.
packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox-test.tsx	Adds unit + interaction tests for V2 slots/root behavior.
packages/bpk-component-checkbox/index.ts	Exports `BpkCheckboxV2` and new V2 themeAttributes alongside existing exports.
examples/bpk-component-checkbox-v2/stories.tsx	Adds Storybook stories for V2 compositions and visual tests.
examples/bpk-component-checkbox-v2/examples.tsx	Provides Storybook example compositions including themed variants.
.eslintrc	Allows `className` on Ark UI checkbox parts used by wrappers.
.claude/skills/backpack-ark-ui-component/SKILL.md	Adds internal guidance for building Ark UI–backed Backpack V2 components.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-11T05:04:38Z

packages/bpk-component-checkbox/src/BpkCheckboxV2/README.md

+
+<BpkCheckbox.Root
+  checked={checked}
+  onCheckedChange={({ checked: next }) => setChecked(next)}


The README’s controlled usage example uses the wrong onCheckedChange signature. BpkCheckbox.Root calls onCheckedChange?.(details.checked), so consumers receive a CheckedState value (boolean | 'indeterminate'), not an object with a checked property. Update the example to use a single argument (and handle 'indeterminate' if relevant).

Suggested change

onCheckedChange={({ checked: next }) => setChecked(next)}

onCheckedChange={(next) => setChecked(next === 'indeterminate' ? false : next)}

Copilot · 2026-03-11T05:04:39Z

packages/bpk-component-checkbox/src/BpkCheckboxV2/README.md

+| `Indicator` | `null` | ✓ | Checkmark/dash rendered via CSS — no children needed |
+| `Label` | `<span>` | ✓ | Primary label text; clicking toggles the checkbox |
+| `Description` | `<span>` | — | Secondary/subtitle text below the label |
+| `HiddenInput` | `<input type="hidden">` | ✓ | Native input for form submission |


The Slots table says HiddenInput renders as <input type="hidden">, but the implementation uses Ark’s Checkbox.HiddenInput which renders a visually-hidden native <input type="checkbox"> (and snapshots show type="checkbox"). Please correct the rendered element description to avoid misleading consumers.

Suggested change

| `HiddenInput` | `<input type="hidden">` | ✓ | Native input for form submission |

| `HiddenInput` | `<input type="checkbox">` | ✓ | Visually hidden native checkbox input for form submission |

Copilot · 2026-03-11T05:04:39Z

packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.module.scss

+
+  // Invalid / error state — border turns red
+  &[data-invalid] {
+    border-color: tokens.$bpk-status-danger-spot-day;


For the invalid/error state, the border colour token differs from the established checkbox invalid styling in bpk-mixins (bpk-checkbox--invalid uses tokens.$bpk-text-error-day). To keep invalid styling consistent across form controls (and with Checkbox v1), consider switching this to tokens.$bpk-text-error-day (or reusing the same mixin/token choice).

Suggested change

border-color: tokens.$bpk-status-danger-spot-day;

border-color: tokens.$bpk-text-error-day;

They are the same color but the first one might be more suitable from the perspective of naming?

Copilot · 2026-03-11T05:04:39Z

packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox-test.tsx

+
+import BpkCheckbox from './BpkCheckbox';
+
+const SimpleCheckbox = ({ ...props }: Record<string, unknown> = {}) => (


SimpleCheckbox collects props as Record<string, unknown> and then spreads them into BpkCheckbox.Root. With strict TypeScript settings, Record<string, unknown> is not assignable to BpkCheckboxRootProps (values are unknown), which can break npm run typecheck. Prefer typing this as Partial<BpkCheckboxRootProps> (or React.ComponentProps<typeof BpkCheckbox.Root>) so the spread is type-safe.

Suggested change

import BpkCheckbox from './BpkCheckbox';

const SimpleCheckbox = ({ ...props }: Record<string, unknown> = {}) => (

import type React from 'react';

import BpkCheckbox from './BpkCheckbox';

const SimpleCheckbox = (

props: Partial<React.ComponentProps<typeof BpkCheckbox.Root>> = {},

) => (

skyscanner-backpack-bot · 2026-03-11T05:06:42Z

Visit https://backpack.github.io/storybook-prs/4271 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-11T06:28:11Z

Visit https://backpack.github.io/storybook-prs/4271 to see this build running in a browser.

IrinaWei · 2026-03-11T06:32:33Z

packages/bpk-theming/index.d.ts

+
+declare const BpkThemeProvider: (props: BpkThemeProviderProps) => JSX.Element;
+
+export default BpkThemeProvider;


bpk-theming is a plain JS package with no TypeScript source. index.d.ts is a hand-written type declaration file so TypeScript consumers can type-check imports from it. Without it, TypeScript would error with "Could not find a declaration file". We can remove it when BpkThemeProvider transferred to TS

skyscanner-backpack-bot · 2026-03-11T06:37:36Z

Visit https://backpack.github.io/storybook-prs/4271 to see this build running in a browser.

IrinaWei · 2026-03-11T06:45:51Z

packages/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.module.scss

+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border: tokens.$bpk-one-pixel-rem * 3 solid tokens.$bpk-text-secondary-day;


why not using bpk-border-size-xl: bpk-border-size-xl is 3px and would break the style in zoom visual test

skyscanner-backpack-bot · 2026-03-11T07:53:35Z

Visit https://backpack.github.io/storybook-prs/4271 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-11T08:50:06Z

Visit https://backpack.github.io/storybook-prs/4271 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-11T08:52:00Z

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against 3c8d762

skyscanner-backpack-bot · 2026-03-11T09:15:03Z

Visit https://backpack.github.io/storybook-prs/4271 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-13T04:05:21Z

Visit https://backpack.github.io/storybook-prs/4271 to see this build running in a browser.

skyscanner-backpack-bot · 2026-03-13T06:16:01Z

Visit https://backpack.github.io/storybook-prs/4271 to see this build running in a browser.

IrinaWei added 5 commits March 6, 2026 16:12

add bpk-checkbox-v2

a9882f8

change file path

2cfc8a7

fix style issue

abb17f5

support theming

877a9c8

change uncheck color

32e9e17

Copilot AI review requested due to automatic review settings March 11, 2026 04:59

IrinaWei added the minor Non breaking change label Mar 11, 2026

Copilot started reviewing on behalf of IrinaWei March 11, 2026 04:59 View session

Copilot AI reviewed Mar 11, 2026

View reviewed changes

fix type and readme

f590898

fix checkbox type

b300993

IrinaWei commented Mar 11, 2026

View reviewed changes

fix typeerror

3d6a72b

IrinaWei added 2 commits March 11, 2026 15:58

Merge branch 'main' into bpk-checkbox-v2

43920f2

change typecheck

c4467f5

delete unused prop

3c8d762

Gert-Jan Vercauteren (gert-janvercauteren) changed the title ~~[CLOV-1225]Rebase BpkCheckbox With Ari-ui~~ [CLOV-1225]Rebase BpkCheckbox With Ark-ui Mar 13, 2026

Ezreal Yang (Supremeyh) mentioned this pull request Mar 13, 2026

[CLOV-1326] [BpkSegmentedControl] Rebase BpkSegmentedControl With Ark-UI #4257

Open

12 tasks

add composed example

d12bb35

Gert-Jan Vercauteren (gert-janvercauteren) mentioned this pull request Mar 13, 2026

[CLOV-1225][maintenance] add ark ui to implement checkbox #4130

Closed

12 tasks

refine storybook

d60ef41

Merge branch 'main' into bpk-checkbox-v2

71262c9

	onCheckedChange={({ checked: next }) => setChecked(next)}
	onCheckedChange={(next) => setChecked(next === 'indeterminate' ? false : next)}

	\| `HiddenInput` \| `<input type="hidden">` \| ✓ \| Native input for form submission \|
	\| `HiddenInput` \| `<input type="checkbox">` \| ✓ \| Visually hidden native checkbox input for form submission \|

	border-color: tokens.$bpk-status-danger-spot-day;
	border-color: tokens.$bpk-text-error-day;


		import BpkCheckbox from './BpkCheckbox';

		const SimpleCheckbox = ({ ...props }: Record<string, unknown> = {}) => (


		declare const BpkThemeProvider: (props: BpkThemeProviderProps) => JSX.Element;

		export default BpkThemeProvider;

Conversation

IrinaWei commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

Changes

Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

IrinaWei Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 11, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 11, 2026

Uh oh!

IrinaWei Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 11, 2026

Uh oh!

IrinaWei Mar 11, 2026

Choose a reason for hiding this comment

Uh oh!

skyscanner-backpack-bot bot commented Mar 11, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 11, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Browser support

Uh oh!

skyscanner-backpack-bot bot commented Mar 11, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 13, 2026

Uh oh!

skyscanner-backpack-bot bot commented Mar 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

IrinaWei commented Mar 11, 2026 •

edited

Loading

skyscanner-backpack-bot bot commented Mar 11, 2026 •

edited

Loading