cunningham/openspec/changes/archive/2026-01-26-field-variant-classic/tasks.md

1. Foundation

• 1.1 Create FieldVariant type in packages/react/src/components/Forms/types.ts
• 1.2 Add design tokens for classic variant in LabelledBox/tokens.ts

2. LabelledBox Core

• 2.1 Add variant prop to LabelledBox component interface
• 2.2 Update LabelledBox render logic to handle variant="classic" (ignore labelAsPlaceholder)
• 2.3 Add .labelled-box--classic CSS styles in LabelledBox/_index.scss
• 2.4 Add unit tests for LabelledBox with both variants

3. Input Component

• 3.1 Add variant prop to Input component
• 3.2 Pass variant to LabelledBox
• 3.3 Handle placeholder prop based on variant (pass to native input only if classic)
• 3.4 Add unit tests for Input with classic variant
• 3.5 Add Storybook story for Input classic variant

4. TextArea Component

• 4.1 Add variant prop to TextArea component
• 4.2 Pass variant to LabelledBox
• 4.3 Handle placeholder prop based on variant
• 4.4 Add unit tests for TextArea with classic variant
• 4.5 Add Storybook story for TextArea classic variant

5. Select Component

• 5.1 Add variant and placeholder props to Select component interface
• 5.2 Pass variant to LabelledBox in SelectMonoAux and multi equivalents
• 5.3 Add styled placeholder rendering for classic variant when no selection
• 5.4 Add CSS for .c__select__placeholder (muted gray style)
• 5.5 Add unit tests for Select mono with classic variant
• 5.6 Add unit tests for Select multi with classic variant
• 5.7 Add Storybook stories for Select classic variant

6. DatePicker Components

• 6.1 Add variant and placeholder props to DatePicker component
• 6.2 Pass variant to underlying field components
• 6.3 Handle placeholder in classic variant
• 6.4 Add unit tests for DatePicker with classic variant
• 6.5 Repeat for DateRangePicker
• 6.6 Add Storybook stories for DatePicker/DateRangePicker classic variant

7. Documentation & Finalization

• 7.1 Update existing component documentation with variant prop
• 7.2 Run full test suite to ensure no regressions
• 7.3 Visual review of all components in both variants in Storybook