feat: Implement Sana Canvas Text Input, Text Area, Form Field, and Color Picker#3992
feat: Implement Sana Canvas Text Input, Text Area, Form Field, and Color Picker#3992jamesfan wants to merge 22 commits into
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughTextInput, FormFieldGroupList, and ColorSwatch now use corner-shape stencil styling and updated status-state backgrounds. Sana Canvas story, example, and visual-testing coverage were added across input components, and the v16 upgrade guide now includes component notes. ChangesSana Canvas input styling and docs
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Workday/canvas-kit
 |
||||||||||||||||||||||||||||||||||||||||
| Project |
Workday/canvas-kit
|
| Branch Review |
feat/2026-06-15-sc-text-input-area-ff-cp
|
| Run status |
|
| Run duration | 02m 22s |
| Commit |
|
| Committer | James Fan |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
 |
0
|
 |
0
|
 |
17
|
 |
0
|
 |
809
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
19.6%
|
|
|---|---|
|
|
1532
|
|
|
371
|
Accessibility
99.41%
|
|
|---|---|
|
|
5 critical
5 serious
0 moderate
2 minor
|
|
|
72
|
jamesfan
force-pushed
the
feat/2026-06-15-sc-text-input-area-ff-cp
branch
from
d51ca0b to
b3f1b31
Compare
… feat/2026-06-15-sc-text-input-area-ff-cp
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx`:
- Around line 120-124: Remove the duplicated grouped-input padding guidance in
the upgrade guide so the migration note only appears once. In the MDX section
covering grouped inputs, consolidate the two bullets into a single statement
that keeps the new 8px block and 4px inline values along with the “previously”
values, and delete the redundant duplicate wording.
In
`@modules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx`:
- Around line 28-60: The top-level fragment returned by the theme .map() in
ColorPicker.stories.tsx is missing a React key, which causes the warning. Update
the mapped wrapper around StaticStates and ComponentStatesTable from the
shorthand fragment to React.Fragment with an explicit key derived from the theme
value (including the undefined case), so each rendered block is uniquely
identified.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 4f4b261d-e71f-4184-b9d8-d0694ed47df6
📒 Files selected for processing (5)
modules/docs/mdx/16.0-UPGRADE-GUIDE.mdxmodules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsxmodules/react/color-picker/lib/parts/ColorSwatch.tsxmodules/react/form-field/lib/FormFieldGroupList.tsxmodules/react/text-input/lib/TextInput.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- modules/react/form-field/lib/FormFieldGroupList.tsx
| textInputStencil({ | ||
| width: typeof width === 'number' ? px2rem(width) : width, | ||
| grow: grow === true ? 'true' : grow === false ? 'false' : undefined, | ||
| error, | ||
| }) |
There was a problem hiding this comment.
This fix addresses a TypeScript issue which appeared after introducing extends cornerShapeStencil:
Explanation of the fix from Cursor:
And why the error only happened after introducing extends cornerShapeStencil:
There was a problem hiding this comment.
connected to #3896, I'll talk to Alan about that the next week
| textInputStencil({ | ||
| width: typeof width === 'number' ? px2rem(width) : width, | ||
| grow: grow === true ? 'true' : grow === false ? 'false' : undefined, | ||
| error, | ||
| }) |
There was a problem hiding this comment.
we need to fix that issue finally :D I'll talk to Alan about that when he is back
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@modules/react/color-picker/stories/color-preview/ColorPreview.stories.ts`:
- Around line 33-35: The SanaCanvas story is using the wrong renderer, so it
does not exercise the Sana Canvas variant. Update the SanaCanvas export in
ColorPreview.stories.ts to point to the correct story render function/component
instead of RefForwardingExample, and verify the story name remains aligned with
the intended Sana Canvas preview.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: afa65cb7-5443-4f64-a9a3-601e7958b6db
📒 Files selected for processing (23)
.storybook/routes.jsmodules/docs/mdx/16.0-UPGRADE-GUIDE.mdxmodules/preview-react/color-picker/stories/examples/InputInteraction.tsxmodules/preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsxmodules/react/color-picker/stories/color-input/ColorInput.mdxmodules/react/color-picker/stories/color-input/ColorInput.stories.tsmodules/react/color-picker/stories/color-input/examples/SanaCanvas.tsxmodules/react/color-picker/stories/color-preview/ColorPreview.mdxmodules/react/color-picker/stories/color-preview/ColorPreview.stories.tsmodules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsxmodules/react/color-picker/stories/visualTesting.stories.tsxmodules/react/form-field/stories/FormField.mdxmodules/react/form-field/stories/FormField.stories.tsmodules/react/form-field/stories/examples/SanaCanvas.tsxmodules/react/form-field/stories/visualTesting.stories.tsxmodules/react/text-area/stories/TextArea.mdxmodules/react/text-area/stories/TextArea.stories.tsmodules/react/text-area/stories/examples/SanaCanvas.tsxmodules/react/text-area/stories/visualTesting.stories.tsxmodules/react/text-input/stories/TextInput.mdxmodules/react/text-input/stories/TextInput.stories.tsmodules/react/text-input/stories/examples/SanaCanvas.tsxmodules/react/text-input/stories/visualTesting.stories.tsx
✅ Files skipped from review due to trivial changes (3)
- modules/react/color-picker/stories/color-preview/examples/SanaCanvas.tsx
- modules/preview-react/color-picker/stories/examples/InputInteraction.tsx
- modules/react/color-picker/stories/visualTesting.stories.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- modules/docs/mdx/16.0-UPGRADE-GUIDE.mdx
| This example applies `data-theme="sana-canvas"` to the wrapping | ||
| [Form Field](/components/inputs/form-field/). | ||
|
|
||
| <ExampleCodeBlock code={SanaCanvas} /> |
| }; | ||
| return ( | ||
| <div className="App"> | ||
| <div className="App" data-theme="sana-canvas"> |
There was a problem hiding this comment.
Do we need data-theme="sana-canvas" here?
There was a problem hiding this comment.
Turns out we don't.
The InputInteraction example is referenced in preview-react/color-picker/stories/visual-testing/ColorPicker.stories.tsx, but it's excluded from the chromatic: {disable: false} block. I'll remove it.
| '/help/upgrade-guides/canvas-v16-upgrade-guide/': 'guides-upgrade-guides-v16-0-overview--docs', | ||
| '/help/upgrade-guides/canvas-v16-upgrade-guide/#tab=visual-changes': | ||
| 'guides-upgrade-guides-v16-0-visual-changes--docs', |
| width: system.legacy.size.xxs, | ||
| height: system.legacy.size.xxs, | ||
| borderRadius: system.legacy.shape.sm, | ||
| backgroundColor: color, |
There was a problem hiding this comment.
Medium: ColorSwatch does not preserve color meaning in Windows High Contrast / forced-colors mode. Since the swatch’s semantic value is its actual color, backgroundColor: color will likely be remapped by forced-colors, causing swatches to appear identical. Consider forcedColorAdjust: 'none' for the swatch color surface, plus a real border/outline fallback for white/selected states since box-shadow is forced to none.
| width: 'fit-content', | ||
| }, | ||
| modifiers: { | ||
| error: { |
There was a problem hiding this comment.
Medium: Error/caution visual affordances rely heavily on boxShadow, which is removed in forced-colors mode. For TextInput, TextArea inherits this behavior; for grouped fields, the group ring is entirely shadow-based. Add @media (forced-colors: active) fallbacks using real border/outline and system colors so Windows High Contrast users can still perceive invalid/caution states.
| [cornerShapeStencil.vars.shape]: system.legacy.shape.sm, | ||
| width: system.legacy.size.xxs, | ||
| height: system.legacy.size.xxs, | ||
| borderRadius: system.legacy.shape.sm, |
There was a problem hiding this comment.
The upgrade guide says Color Picker’s Sana Canvas swatch shape is now 6px, but the implementation uses system.legacy.shape.sm, which resolves to 4px in the installed tokens I checked.
Can we double check this?
There was a problem hiding this comment.
there is 2 theme and 2 different values: standard is 4px, but if sana turn on it's 6px
There was a problem hiding this comment.
it will be updated with new tokens alpha
3 participants
Summary
Fixes: #3983
Release Category
Components
Checklist
ready for reviewhas been added to PRFor the Reviewer
Summary by CodeRabbit
Summary by CodeRabbit