Skip to content

chore: Build Switch for Preview#3842

Merged
alanbsmith merged 20 commits intoWorkday:prerelease/majorfrom
josh-bagwell:chore/build-preview-switch-26-03
Apr 8, 2026
Merged

chore: Build Switch for Preview#3842
alanbsmith merged 20 commits intoWorkday:prerelease/majorfrom
josh-bagwell:chore/build-preview-switch-26-03

Conversation

@josh-bagwell
Copy link
Copy Markdown
Contributor

@josh-bagwell josh-bagwell commented Mar 30, 2026

Summary

Fixes: #3803, #3800 |

Updated visuals with "High Contrast Mode" enabled:
Screenshot 2026-03-30 at 10 36 24 AM
Screenshot 2026-03-30 at 10 36 31 AM
Screenshot 2026-03-30 at 10 36 37 AM
Screenshot 2026-03-30 at 10 36 45 AM

Release Category

Components

Release Note

We've created a new version of the Switch component in Preview.

It has increased accessibility with:

  • Added an icon to show the unchecked and checked state.
  • Has visible borders when "High Contrast Mode" is enabled.

Where Should the Reviewer Start?

/modules/preview-react/switch/lib/Switch.tsx

@josh-bagwell josh-bagwell added enhancement New feature or request 15.x ready for review Code is ready for review labels Mar 30, 2026
@cypress
Copy link
Copy Markdown

cypress bot commented Mar 30, 2026

Workday/canvas-kit    Run #10569

Run Properties:  status check passed Passed #10569  •  git commit cfdd141829 ℹ️: Merge 1b243456f657d015af4efa12a0a99be65e29ffb8 into 81cc7c53405f3ec28f978ae194ea...
Project Workday/canvas-kit
Branch Review chore/build-preview-switch-26-03
Run status status check passed Passed #10569
Run duration 02m 16s
Commit git commit cfdd141829 ℹ️: Merge 1b243456f657d015af4efa12a0a99be65e29ffb8 into 81cc7c53405f3ec28f978ae194ea...
Committer Josh
View all properties for this run ↗︎

Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 15
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 798
View all changes introduced in this branch ↗︎
UI Coverage  19.57%
  Untested elements 1510  
  Tested elements 365  
Accessibility  99.36%
  Failed rules  5 critical   5 serious   0 moderate   2 minor
  Failed elements 67  

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Introduces a new Preview Switch component with updated visuals aimed at improving accessibility (checked/unchecked iconography + better visibility in Windows High Contrast / forced-colors scenarios), and wires it into Storybook + docs + tests.

Changes:

  • Added @workday/canvas-kit-preview-react/switch implementation, exports, and Storybook docs/examples.
  • Added Jest/RTL unit tests and Cypress a11y/component coverage for the Preview switch.
  • Updated v15 upgrade guide content to call out the new Preview Switch.

Reviewed changes

Copilot reviewed 18 out of 18 changed files in this pull request and generated 13 comments.

Show a summary per file
File Description
modules/preview-react/switch/lib/Switch.tsx Adds the Preview Switch implementation (styling, icon states, forced-colors affordances).
modules/preview-react/switch/spec/Switch.spec.tsx Adds React Testing Library unit tests for core behaviors.
cypress/component/SwitchPreview.spec.tsx Adds Cypress component + axe checks for Preview switch stories.
modules/preview-react/switch/stories/Switch.stories.ts New Storybook stories wiring examples into autodocs.
modules/preview-react/switch/stories/Switch.mdx New Storybook MDX documentation page for the Preview switch.
modules/preview-react/switch/stories/examples/*.tsx Adds usage examples (basic, disabled, error/caution, layout, ref forwarding).
modules/preview-react/switch/stories/visualTesting.stories.tsx Adds Chromatic visual regression coverage matrix for states.
modules/preview-react/switch/index.ts Exports the switch module entrypoint.
modules/preview-react/index.ts Re-exports switch from the Preview package barrel.
modules/preview-react/switch/README.md Adds README stub pointing to Storybook docs.
modules/preview-react/switch/spec/tsconfig.json Adds spec tsconfig for the switch module.
modules/docs/mdx/15.0-UPGRADE-GUIDE.mdx Documents the new Preview Switch in the v15 upgrade guide (MDX).
modules/docs/llm/upgrade-guides/15.0-UPGRADE-GUIDE.md Mirrors the upgrade guide change in the LLM-facing markdown.

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

Comment thread modules/preview-react/switch/lib/Switch.tsx
Comment thread modules/preview-react/switch/lib/Switch.tsx
Comment thread modules/preview-react/switch/stories/visualTesting.stories.tsx
Comment thread modules/preview-react/switch/stories/examples/RefForwarding.tsx
Comment thread modules/preview-react/switch/stories/examples/RefForwarding.tsx
Comment thread modules/preview-react/switch/stories/Switch.stories.ts
Comment thread modules/preview-react/switch/stories/Switch.mdx Outdated
Comment thread modules/docs/llm/upgrade-guides/15.0-UPGRADE-GUIDE.md Outdated
Comment thread modules/docs/llm/upgrade-guides/15.0-UPGRADE-GUIDE.md Outdated
Comment thread modules/docs/mdx/15.0-UPGRADE-GUIDE.mdx Outdated
Comment thread modules/preview-react/switch/lib/SwitchCircle.tsx Outdated
Comment thread modules/preview-react/switch/lib/SwitchContainer.tsx Outdated
Comment thread modules/docs/llm/upgrade-guides/15.0-UPGRADE-GUIDE.md Outdated
Comment on lines +22 to +25
- [Structure Changes](#structure-changes)
- [API Differences](#api-differences)
- [Size Mapping](#api-differences)
- [Code Migration](#code-migration)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's related to Avatar, but with that change it's on the same level

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same on line 32

- [Removals](#removals)
- [Avatar (Deprecated)](#avatar-deprecated)
- [Side Panel (Deprecated)](#side-panel-deprecated)
- [Side Panel (Deprecated)](#side-panel-deprecated)
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to this PR but we will need to alphabetically order that inner lists

Comment thread modules/docs/llm/upgrade-guides/15.0-UPGRADE-GUIDE.md Outdated
Comment thread modules/docs/mdx/15.0-UPGRADE-GUIDE.mdx Outdated
Comment thread modules/preview-react/switch/lib/SwitchBackground.tsx Outdated
Comment thread modules/preview-react/switch/lib/SwitchContainer.tsx Outdated
Comment thread modules/preview-react/switch/stories/visualTesting.stories.tsx Outdated
Comment thread modules/preview-react/switch/stories/visualTesting.stories.tsx Outdated
Comment thread modules/preview-react/switch/lib/SwitchIcon.tsx Outdated
@alanbsmith alanbsmith merged commit 724eb3e into Workday:prerelease/major Apr 8, 2026
20 checks passed
@alanbsmith alanbsmith mentioned this pull request Apr 13, 2026
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

15.x automerge enhancement New feature or request ready for review Code is ready for review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants