feat: Update input components to use new v4 tokens by mannycarrera4 · Pull Request #3719 · Workday/canvas-kit

mannycarrera4 · 2026-01-26T23:37:02Z

Summary

Fixes: #3590

Update Inputs to use v4 tokens: TextInput, FormField, Radio (Preview), TextArea, Checkbox

Release Category

Components

Release Note

Update our inputs to use new tokens.

Checklist

MDX documentation adheres to Canvas Kit's Documentation Guidelines
Label ready for review has been added to PR

For the Reviewer

PR title is short and descriptive
PR summary describes the change (Fixes/Resolves linked correctly)
PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

Areas for Feedback? (optional)

Code
Documentation
Testing
Codemods

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

cypress · 2026-01-26T23:50:08Z

Workday/canvas-kit Run #10278

Run Properties: Passed #10278 • 01d6dcd91c ℹ️: Merge 41c6635f806104cecd91d13204a7675e022f79d5 into 5891e1cba68c0f164ce6e05925f0...

Project	`Workday/canvas-kit`
Branch Review	`mc-refactor-inputs-v4`
Run status	`Passed #10278`
Run duration	`02m 15s`
Commit	`01d6dcd91c ℹ️: Merge 41c6635f806104cecd91d13204a7675e022f79d5 into 5891e1cba68c0f164ce6e05925f0...`
Committer	`Manuel Carrera`
View all properties for this run ↗︎

Test results
Failures	`0`
Flaky	`0`
Pending	`15`
Skipped	`0`
Passing	`802`
View all changes introduced in this branch ↗︎

UI Coverage `19.5%`
Untested elements	`1517`
Tested elements	`365`

Accessibility `99.41%`
Failed rules	`5 critical` `5 serious` `0 moderate` `2 minor`
Failed elements	`72`

Copilot

Pull request overview

This PR updates input components to use v4 tokens from @workday/canvas-tokens-web, upgrading from version 4.0.2 to 4.0.4. The changes implement a forward-compatibility strategy using cssVar with fallbacks to v3 tokens, allowing components to work with both token versions during the transition period.

Changes:

Upgraded @workday/canvas-tokens-web from 4.0.2 to 4.0.4 across all package.json files
Updated input components (TextInput, TextArea, Checkbox, Radio, FormField) to use new v4 token names with v3 fallbacks
Modified disabled state styling to use opacity-based approach instead of specific color changes
Added width constraints and positioning improvements to form field components

Reviewed changes

Copilot reviewed 34 out of 35 changed files in this pull request and generated 16 comments.

Show a summary per file

File	Description
yarn.lock	Updated canvas-tokens-web dependency lockfile entry to version 4.0.4
.yarnrc	CRITICAL: Disabled frozen lockfile requirement
package.json	Updated canvas-tokens-web to 4.0.4 in root package
modules/styling/package.json	Updated canvas-tokens-web dependency to 4.0.4
modules/styling-transform/package.json	Updated canvas-tokens-web dependency to 4.0.4
modules/react/package.json	Updated canvas-tokens-web dependency to 4.0.4
modules/preview-react/package.json	Updated canvas-tokens-web dependency to 4.0.4
modules/labs-react/package.json	Updated canvas-tokens-web dependency to 4.0.4
modules/docs/package.json	Updated canvas-tokens-web dependency to 4.0.4
utils/storybook/CanvasProviderDecorator.tsx	Added global padding to all Storybook stories
modules/react/text-input/stories/examples/Disabled.tsx	Changed default value in example to show disabled state better
modules/react/text-input/stories/TextInput.mdx	Removed unused InformationHighlight import
modules/react/text-input/lib/TextInput.tsx	Updated to v4 tokens with fallbacks; changed disabled state to opacity-only; removed minWidth
modules/react/text-input/lib/InputGroup.tsx	Updated size tokens with v4/v3 fallbacks
modules/react/text-area/stories/TextArea.mdx	Removed unused InformationHighlight import
modules/react/text-area/lib/TextArea.tsx	Updated minHeight token with v4/v3 fallback; removed minWidth
modules/react/form-field/lib/formFieldStencil.ts	Added width variable and default 280px width; updated spacing tokens
modules/react/form-field/lib/FormFieldLabel.tsx	Updated tokens with fallbacks; removed minWidth
modules/react/form-field/lib/FormFieldHint.tsx	Updated tokens with v4/v3 fallbacks
modules/react/form-field/lib/FormFieldGroupList.tsx	Updated tokens with v4/v3 fallbacks for error states
modules/react/form-field/lib/FormFieldGroupLabel.tsx	Updated tokens with fallbacks; removed minWidth
modules/react/form-field/lib/FormFieldField.tsx	Updated gap token; added width: 100%
modules/react/form-field/lib/FormFieldContainer.tsx	Updated gap token; added width: 100%
modules/react/common/lib/forwardFitTokens.ts	Removed shape tokens (xs, sm, md); added color and size mappings for forward compatibility
modules/react/checkbox/lib/CheckboxRipple.tsx	Updated to use v4 size and shape tokens; added parts for data-part selector
modules/react/checkbox/lib/CheckboxInput.tsx	Comprehensive update to use data-part selectors and v4 tokens with fallbacks
modules/react/checkbox/lib/CheckboxContainer.tsx	Updated size tokens; added position: relative to inner div
modules/react/checkbox/lib/CheckboxCheck.tsx	Added variant support to indeterminate box; updated to pass variant to CheckBackground
modules/react/checkbox/lib/CheckBackground.tsx	Added variant modifier and parts for data-part selector; updated tokens
modules/react/button/lib/ToolbarIconButton.tsx	Changed from forwardFitTokens.system.shape.xs to system.shape.x1
modules/react/button/lib/ToolbarDropdownButton.tsx	Changed from forwardFitTokens.system.shape.xs to system.shape.x1
modules/preview-react/radio/lib/StyledRadioButton.tsx	CRITICAL BUG: Uses undefined checkPart parameter; updated tokens and disabled state handling
modules/preview-react/radio/lib/RadioText.tsx	Simplified variant handling; updated color tokens
modules/preview-react/radio/lib/RadioLabel.tsx	Updated size and gap tokens with fallbacks
modules/preview-react/radio/lib/RadioGroup.tsx	Updated tokens for error states with v4/v3 fallbacks

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

RayRedGoose · 2026-02-11T20:13:01Z

    },
    '&:has(:disabled, .disabled)': {
      [caretPart]: {
+        // TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token


Suggested change

// TODO (forwardfit token): Revisit token, using v4 token and fallback to v3 token

RayRedGoose

almost here, but if visual changes are okay it looks good to go

Co-authored-by: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com>

…ra4/canvas-kit into mc-refactor-inputs-v4

Co-authored-by: Raisa Primerova <48605821+RayRedGoose@users.noreply.github.com>

feat: Update input components to use new v4 tokens

9751c4c

manuel.carrera added 18 commits January 27, 2026 07:09

fix: More input clean up for tokens

9ba506f

fix: Update token version

a437207

fix: Forward fit text input and text area

c26b491

fix: Forwardfit formfield stencil

4bf30a4

fix: Update formfiel

6b65278

fix: Clean up checkbox

c13a685

fix: Update checkbox ripple

f0b8554

fix: Update check background

9a4ef6f

fix: Clean up background and ripple

655ea54

fix: Update background

056d949

fix: Update value for checkbox non inverse

1aeede8

fix: Update checkbox input

8b487be

fix: Remove unused vars

ea29934

fix: Update radio

d33e301

fix: Working through radio

186666d

fix: Update radio input

a18379b

fix: Update selector

4fd8591

fix: Update checkbox

bd77e5b

mannycarrera4 marked this pull request as ready for review January 29, 2026 19:52

RayRedGoose requested a review from Copilot January 29, 2026 20:16

Copilot started reviewing on behalf of RayRedGoose January 29, 2026 20:16 View session

Copilot AI reviewed Jan 29, 2026

View reviewed changes

mannycarrera4 added this to Canvas Kit Jan 29, 2026

mannycarrera4 moved this to 🏗 In progress in Canvas Kit Jan 29, 2026

manuel.carrera added 4 commits January 30, 2026 09:05

fix: Work on switch

e30ed8c

fix: Update switch

3c8321e

test: Disable scrollable body for test

ac7b520

fix: Update select

599a6ef