feat(ui): migrate Checkbox component to React Aria

Migrates the Checkbox component from Base UI Components to React Aria Components.

Breaking changes:
- Props renamed to React Aria conventions (checked → isSelected, disabled → isDisabled, etc.)
- Label prop removed - use children instead
- CSS class bui-CheckboxLabel removed
- Data attribute changed from data-checked to data-selected
- Use without label is no longer supported

Migration example:
Before: <Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />
After: <Checkbox isSelected={agreed} onChange={setAgreed}>Accept terms</Checkbox>

Changes include:
- Updated TypeScript types and component implementation
- Migrated CSS to use React Aria data attributes ([data-selected], [data-disabled], etc.)
- Updated Storybook stories and documentation
- Fixed CSS structure to properly separate label wrapper and checkbox indicator styles
- Updated component definitions and API reports
- Created changeset with migration guide

Signed-off-by: Johan Persson <johanopersson@gmail.com>
This commit is contained in:
Johan Persson
2025-10-23 16:34:51 +02:00
parent 7cbfbe9b33
commit 5c614fff85
10 changed files with 160 additions and 142 deletions
@@ -92,7 +92,7 @@ export function BuiThemePreview({ mode, styleObject }: IsolatedPreviewProps) {
{ value: 'option3', label: 'Option 3' },
]}
/>
<Checkbox label="Checkbox Option" />
<Checkbox>Checkbox Option</Checkbox>
<RadioGroup label="Radio Group" orientation="horizontal">
<Radio value="option-1">Option 1</Radio>
<Radio value="option-2">Option 2</Radio>