Canvas v6 Announcements

Design Asset April 2022 Release

The Design Asset April 2022 Release is now available for use through the Canvas Assets Figma library for designers and NPM, Artifactory, or SAS (on all environments) for developers.

The following assets were released with this update:

• wd-graphic-order-dot-co-search-provider-logo
• wd-graphic-ghx-search-provider-logo
• wd-graphic-amazon-search-provider-logo
• wd-applet-candidate-engagement
• wd-accent-candidate-engagement
• wd-icon-signout

This release will not impact users as they are all net-new assets with no changes to previously released assets.

A new major version for the icon packages was also released to drastically reduce their bundle size by removing the default export. However, this is a breaking change that will impact very few consumers. Teams that are default importing icons will need to update them to be namespace imports, as in the example below.

// deprecated default import
import systemIcons from ‘@workday/canvas-system-icons-web’
// new namespace import
import * as systemIcons from ‘@workday/canvas-system-icons-web’;

However, this approach is not recommended as it’s not tree-shakeable and will not result in a bundle-size reduction. Instead, teams should only import specific icons or use SAS to fetch icons from the CDN. This change will affect the following packages:

• @workday/canvas-accent-icons-web: ^3.0.0
• @workday/canvas-applet-icons-web: ^2.0.0
• @workday/canvas-graphics-web: ^4.0.0
• @workday/canvas-system-icons-web: ^3.0.0
• @workday/third-party-icons-web: ^1.0.0

March 2022 Canvas Web Figma Library Bug Fixes

We’re starting 2022 off strong with another round of bug fixes! This set of bug fixes will be released on March 17th, 2022.

Text Wrapping and Alignment for Checkbox and Radio Groups

The input labels for Checkbox groups and Radio groups have been encased in a frame with 2px padding added to the top and bottom of the frame. This helps:

• Center align the text when the text fits into a single line
• Align the text to the top of the frame when the text wraps

Existing designs that use Checkbox groups or Radio groups will be updated to ensure that the text wrapping and alignment behavior will align with Canvas Kit. Single Checkboxes and Radio components will not be impacted by this change, but Designers should opt to use Checkbox groups and Radio groups when multiple Checkboxes or Radio components are required. Check out the Canvas Design System site to learn more about best practices for using Checkboxes and Radio components.

Text Label and Input Field Spacing

The spacing between the text labels and input fields for the Input components in Canvas Web library have been updated to use 4px instead of 8px to align with developer components in Canvas Kit. The following components were impacted by this fix:

• Text Input
• Text Area
• Select Drop-down
• Checkbox
• Radio

Existing designs using any of the components listed above will be updated to the correct text label and input field spacing.

Outdated Type Style Fix

The following components were using a deprecated type style and have since been updated to point to the current type tokens:

• Text Input
• Text Area
• Select Drop-down
• Checkbox
• Radio

This bug caused the components to use a 13px font size instead of the correct 12px font size. Existing designs using any of the components listed above will be updated to use the correct font size.

Form Field Label Consolidation

The extra encasing frame for form field labels have been removed to make it easier for Designers to update text labels without going through multiple layers. This change has been applied to the following components:

• Text Input -Text Area
• Select Drop-down
• Checkbox
• Radio
• Switch
• Color Picker

Existing designs using the components listed above will be impacted by this update, but it will not result in any visual changes.

To uptake these bug fixes, please accept the updates in Figma. If you have any questions or concerns, please sign-up for one of our Office Hours, thank you!