coder

mirror of https://github.com/coder/coder.git synced 2026-06-02 20:48:20 +00:00

Files

T

christin 6c8209bdf1 fix(site): update bulk action checkbox style for workspace and task lists (#21535 )

## Summary

Updates the bulk action checkbox style in workspace and task lists to
use the new Shadcn Checkbox component that aligns with the Coder design
system (as specified in
[Figma](https://www.figma.com/design/WfqIgsTFN2BscBSSyXWF8/Coder-kit?node-id=489-4187&t=KRtpi391rVPHRXJI-1)).

## Changes

- **WorkspacesTable.tsx**: Replace MUI Checkbox with Shadcn Checkbox
component
- **TasksTable.tsx**: Replace MUI Checkbox with Shadcn Checkbox
component
- **WorkspacesPageView.stories.tsx**: Add `WithCheckedWorkspaces` story
to showcase the new design

## Key Improvements

The new checkbox design features:
- ✨ Consistent 20px × 20px sizing (vs. old larger MUI checkbox)
- 🎨 Clean inverted color scheme (light background unchecked, dark when
checked)
- ✅ Proper indeterminate state support for "select all" functionality
- 🎯 Smooth hover and focus states with proper ring indicators
- 📐 Better alignment with Coder design language from Figma

## API Changes

Updated from MUI Checkbox API to Radix UI Checkbox API:
- `onChange={(e) => ...}` → `onCheckedChange={(checked) => ...}`
- Removed MUI-specific `size` props (`xsmall`, `small`) 
- Updated `checked` prop to support boolean | "indeterminate"

## Testing

### Storybook

The checkbox changes can be reviewed in Storybook:

1. **Checkbox Component** - `components/Checkbox` - Base component
examples
2. **Workspaces Page** - `pages/WorkspacesPage/WithCheckedWorkspaces` -
Shows workspace list with selections
3. **Tasks Page** - `pages/TasksPage/BatchActionsSomeSelected` - Shows
task list with selections

### Feature Flag Requirement

**Note**: The bulk action checkboxes require the
`workspace_batch_actions` or `task_batch_actions` feature flags to be
enabled (Premium feature). To test in a live environment, you'll need a
valid license that includes these features.

## Screenshots

Before: Old MUI checkbox with prominent blue styling and larger size
After: New Shadcn checkbox with refined design matching Coder's design
system

_(Screenshots can be viewed in Storybook at the URLs above)_

Closes #21444

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Sonnet 4.5 <noreply@anthropic.com>
Co-authored-by: Jake Howell <jake@hwll.me>
Co-authored-by: Jaayden Halko <jaayden@coder.com>