Canvas v9 Announcements

September 2023 Design Asset Release

The September 2023 Design Asset Release is now available for use through the Canvas Assets Figma library for designers and npm, Artifactory, or SAS (in all environments) for developers.

The following assets were updated as part of this release:

• Third Party Icons (upgrade @workday/third-party-icons-web to 1.0.9)
  • wd-icon-twitter-x.svg (twitterXIcon when using SystemIcon) is now available for use
  • wd-icon-glassdoor-2.svg (glassdoor2Icon when using SystemIcon) is now available for use

These third party icons will be released as net new icons. The existing twitterIcon and glassdoorIcon icons will continue to exist, but teams may begin utilizing the updated version of those icons with this release.

This release will not impact developers, and designers can upgrade to the latest version of the Canvas Asset Figma library without any impact to their existing designs.

For more information or to access these new icons in this update, please reference the Design Asset repo.

July 2023 Design Asset Release

The July 2023 Design Asset Release is now available for use through the Canvas Assets Figma library.

This month’s design asset release will be Figma specific to catch up on icon updates from previous releases, which includes:

• An updated workdayCircleIcon third party icon with the correct dub and sunrise element

Please accept these changes in Figma to get access to the updated icons.

For more information, please reference the Design Asset repo.

Canvas Kit 9.1.0 Release

Canvas Kit 9.1.0 is now available!

Radio Compound Component The Radio compound component is finally here! Teams using Radio in Main should start switching over to the new Radio compound component in Preview, which will give teams more control over individual sub-components within Radio.

CSS Scroll Attributes for Box, Flex, & Grid New CSS scroll attributes have been added to Box, Flex, and Grid to enable product teams to configure Layout components with CSS.

Status Indicator Deprecation The Status Indicator component in Main has been deprecated. Teams using the Status Indicator in Main should switch over to the updated Status Indicator component in the Preview package, which has been updated to improve globalization and accessibility! The Status Indicator in Main is still available for use, but it will be removed in v11 (April 2024).

This update will not impact developers. To access these changes, please upgrade to Canvas Kit 9.1.0.

June 2023 Design Asset Release

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

This release contains the following updates:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.16)

  • A new wd-icon-messaging.svg icon (messagingIcon when using SystemIcon)
  • A new wd-icon-lightbulb.svg icon (lightbulbIcon)
  • A fix to the wd-icon-exclamation-triangle.svg icon (exclamationTriangleIcon) to remove a small white outline that appears around the inner triangle when the icon is being filled

• Third Party Icons (upgrade @workday/third-party-icons-web to 1.0.8)

  • A new wd-icon-android.svg icon (androidIcon when using SystemIcon)
  • A new wd-icon-apple.svg icon (appleIcon)
  • A new wd-icon-react.svg icon (reactIcon)

The Canvas Assets Figma library has been updated to include this update. This release will not impact developers and designers can upgrade to the latest version of the Canvas Asset Figma library without any impact to their existing designs.

For more information or to access these new icons in this update, please reference the Design Asset repo.

Canvas v9 Release

Canvas v9 will be released on May 10th, 2023 with updates to Canvas Kit and the Canvas Figma libraries. An upgrade guide will be available once v9 goes live to assist product teams with upgrading to the newest version of Canvas.

Release Overview

The table below contains a high-level overview of the updates that will be rolled out as part of the v9 release. The impact for designers and developers are defined as follows:

• None: inapplicable to the role or no actions are required for users to adopt the change; Updates will be applied automatically once users upgrade to Canvas Kit v9 and/or switch to the new v9 Canvas Web Figma library
• Low: minor changes are required for users to adopt the change
• Medium: a moderate amount of changes are required for users to adopt the change, such as switching out UI elements
• High: a large amount of changes are required for users to adopt the change, requiring product teams to make major design or development decisions

Change	Short Description	Designer Impact	Developer Impact
Canvas Web Figma Library Versioning	Versioning will be available for the Canvas Web Figma library. A new Canvas Web Figma library will be created for each major Canvas release	Low	None
Canvas Design System Site Versioning	Versioning will be available for documentation on the Canvas Design System site, corresponding to each major Canvas release	None	None
Depth Token Modifications	Depth tokens will be modified to reduce the harshness/contrast of depth against backgrounds	Low	None
Table Refactoring	A new Table component will be released in the Preview package with increased flexibility and updated styling	None	None
New Combobox Sub-system	A new Combobox sub-system will be released to help developers build components and features with Combobox like autocomplete and select	None	None
Modal Figma Updates	The Modal component will be updated in Figma to include an overlay and align with the expected behavior in Canvas Kit	Medium	None
New Figma Dialog Component	A new Dialog component will be added to Canvas Web	None	None
Segmented Control Figma Updates	The Segmented Control component in the Canvas Web Figma library will be updated to reflect the version available in the Preview package	Medium	None
Status Indicator Figma Updates	The Status Indicator component in the Canvas Web Figma library will be updated to reflect the version available in the Preview package	Low	None
Switch Refactoring and Consolidation Figma Updates	The Switch component will be refactored and consolidated into a single Switch component with variants	Medium	None
Radio Variant Figma Consolidation	The Radio component will be updated in the Canvas Web Figma library to consolidate the number of variants available	None	None
Checkbox Variant Figma Consolidation	The Checkbox component will be updated in the Canvas Web Figma library to consolidate the number of variants available	None	None
Delete Button Figma Updates	Updated to be structurally consistent to other Buttons (Primary, Secondary, and Tertiary)	None	None
Layout Component Removal	The Layout component will be removed	None	Medium
Drawer Component Removal	The Drawer component in the Labs package will be removed	None	Medium
Stack Component Removals	The Stack, VStack, HStack components will all be removed	None	Low
Default Button Type Modifications	The default button type for all Canvas buttons will be updated from submit to button	None	Medium
useTheme Updates	A fix will be implemented to prevent useTheme hook from generating an error when the styled function is used without a predefined theme	None	Low
useThemedRing Promotion	The useThemedRing hook will be promoted to the Main package	None	None
useThemeRTL Deprecation	The useThemeRTL hook will be deprecated in Canvas v9, but will still be available for use	None	None
useCanvasTheme and getCanvasTheme Removal	useCanvasTheme and getCanvasTheme will removed in favor of useTheme and getTheme, respectively	None	Low
Canvas Kit’s TS Compiler Target Updates	The TS compiler target will be updated from ES5 to ES2019. This will significantly decrease the Canvas Kit bundle size	None	None
Toast Component Promotion	The Toast component in the Labs package will be promoted to the Main package, replacing the current Toast component in Main	None	None
Enhanced QA & Testing Processes	Additional tests will be added to expand testing across different screen sizes and modality as well as expand visual regression testing	None	None

Canvas Web Figma Library Versioning

Versioning will be available in the Canvas Web Figma Library! This will give anyone using Figma the ability to stay on an older version, or upgrade to the latest version of the Canvas Web Library. Most importantly, this will enable product teams to design, develop, and build using the same version of Canvas. This Canvas Web v9 Figma library versioning update will include:

• Automated version upgrade process in Figma
• Improved find and search capabilities in Figma
• Updated file structure for component organization
• Prototype interaction support for all applicable Figma components
• Canvas documentation direct in Figma through Gist plug-in

The current Canvas Web Library will be renamed to “Canvas Web v8” to indicate the version of Canvas Kit that it reflects. A new version of the Canvas Web Figma library will be released called “Canvas Web v9” to reflect the latest offers in Canvas Kit v9. No action is required for teams using Canvas Kit v8. Teams that are upgrading to Canvas Kit v9 should also upgrade their design files to use the Canvas Web v9 Figma library using the new Figma upgrade process.

Upgrading to a new version (Canvas Web v9) will introduce breaking changes to affected components in your files that are mentioned below The Canvas Design team will be available to support and advise on how to accept these breaking changes. There will also be documentation available on release day to help with this as well as a demo of these new features post release.

This update is specific to the Canvas Figma libraries and will not impact developers. However, developers should keep their designers updated on their upgrade timeline for Canvas v9 to ensure design and development are using the same version of Canvas.

Depth Token Modifications

Depth tokens will be updated to retract the changes made in Canvas v7, which introduced darker depth values that resulted in a higher contrast against light colored backgrounds. The depth values will not be reverted to pre-Canvas v7 levels, but they will be modified to reduce the visual impact of depth.

Only the values of Canvas depth tokens will be modified as part of this update. Canvas components will continue to use the default depth level they are currently tagged to for the time being.

The depth changes will be applied automatically once designers update to the new Canvas Tokens Figma Library. Changes made to customize the depth level of a component will still persist, but the value of that depth level will be updated to reflect the v9 changes. Designers should review active design files and modify the depth levels their designs are using accordingly. Designers using depth tokens for components or designs created outside of Canvas should also accept the changes in the Canvas Tokens Figma library.

This update will be applied automatically once developers upgrade to Canvas Kit v9.

Table Refactoring

A new styled Table component will be available in the Preview package. This Table component will be a more modernized and flexible version of the current Table component. The Canvas Table will contain the basic features needed for Tables such as:

• Displaying data in a row/column format
• Differentiated row header
• Customizable column width
• Customizable horizontal and vertical borders

For more complex use cases with the need for built-in features and functionality, please refer to Tables 2.0

This update will not impact developers as it will be released as a net-new Table component. However, it is recommended that teams switch over to this new Table component. It will be up to product teams to add additional functionalities like tooltips, truncated text, etc. and to get them reviewed and approved by accessibility.

It will also not impact designers since Table will be introduced as a new component in the Canvas Web v9 Figma library.

New Combobox System

A new Combobox sub-system will be created to help developers build components and features using Combobox, like autocomplete and Select. This new Combobox will be released into the Main package. Deprecation warnings will be added to the current Combobox component in Labs, but will not be removed in this release. Other Canvas components that are currently using the Combobox in Labs, like Search Form, will continue to do so in v9.

This update will not impact developers. However, developers should start migrating to the new Combobox component in Main once it is released in v9.

This update is specific to Canvas Kit and will not impact existing designs.

Modal Figma Updates

To align with Canvas Kit, the following updates will be made to the Modal component in Figma as part of the v9 release: The medium sized Modal variant will be removed as developers do not have pre-set sizes for Modal in Canvas Kit and are able to adjust the size of the Modal manually With the removal of the medium sized Modal, the small Modal variant will be renamed to “Web” to keep it distinct from the responsive Modal variant that is only displayed on smaller screen sizes An overlay will be added to the web Modal variant, which is always present when using the Modal in Canvas Kit

Once designers migrate to the new Canvas Web v9 Figma library, they will need to: Switch out the medium Modal variant with the newly renamed web Modal variant to maintain the connection to a supported version of the Modal component in the Canvas Web v9 Figma library The Modal Component will need to be resized so that the overlay covers the entire viewport, keeping the Modal align center, center on screen. Switch out all instances of Modal that do not need an overlay with the new Dialog component, which does not include an overlay and will allow users to interact with the rest of the page

This update is specific to the Canvas Web v9 Figma library and will not impact developers.

New Figma Dialog Component

A new Dialog component will be added to the Canvas Web Figma library. This component is visually similar to Modal, but will not contain an overlay and will allow users to interact with the rest of the page.

This update is specific to the Canvas Web Figma library and will not impact developers. The Dialog component is already available in Canvas Kit for developers to use.

It will also not impact designers as it will be a net new component in the Canvas Web Figma library.

Segmented Control Figma Updates

The Segmented Control component currently available in the Canvas Web Figma library will be replaced with the redesigned Segmented Control component released in Canvas v8, which includes support for both text and icons. Both Segmented Control components will still be available for use in Canvas Kit. View the Canvas v8 announcement for more information on the redesigned Segmented Control component.

This update will not impact developers as both versions of Segmented Control are currently available in Canvas Kit today and there will not be any changes made to either component in v9. However, it is recommended for teams to switch over to the redesigned Segmented Control component both in the Preview package of Canvas Kit and the new Canvas Web v9 Figma library once it becomes available as the outdated Segmented Control component will be deprecated and removed at a later date.

The contents of Segmented Control in Figma will not persist when designers swap to the Canvas Web v9 Figma Library. It will default to the text only, horizontal variant with four segments. Designers should reconfigure any overrides and variants to match previous designs if they choose to upgrade to v9.

Status Indicator Figma Updates

The Status Indicator component currently available in the Canvas Web Figma library will be replaced with the redesigned Status Indicator component released in Canvas v8, which includes globalization and accessibility enhancements. Both Status Indicator components will still be available for use in Canvas Kit. View the Canvas v8 announcement for more information on the redesigned Status Indicator component.

This update will not impact developers as both versions of Status Indicator are currently available in Canvas Kit today and there will not be any changes made to either component in v9. However, it is recommended for teams to switch over to the redesigned Status Indicator component both in the Preview package of Canvas Kit and the new Canvas Web v9 Figma library once it becomes available as the outdated Status Indicator component will be deprecated and removed at a later date.

Swapping to the Canvas Web v9 Figma library will automatically swap existing Status Indicators in a design file with the new Status Indicator containing the updated visual style. This will not override pre-set color, icons, or text. If a design file is using the old Status Indicators with an icon, designers may need to perform an additional instance swap within their file to ensure pre-set customizations persist.

Switch Refactoring and Consolidation Figma Updates

The Switch component will be consolidated into a single component with variants (no label, top label, left label) to standardize the way Canvas components are built across the Canvas Figma libraries.

The Switch will default to the No Label variant available when designers perform a library swap over to the new Canvas Web v9 Figma library. Designers should reconfigure the variant to match previous designs if they choose to upgrade to v9.

This update is specific to the Canvas Web v9 Figma library and will not impact developers.

Radio Variant Consolidation

The Radio component in Figma will be refactored to reduce a large number of redundant variants and improve memory usage. There will be no change to existing functionality, but this update will minimize future bugs and instances of breaking changes going forward.

Swapping to the Canvas Web v9 Figma library will automatically swap to the updated Radio Buttons with boolean and text props. Designers may need to perform an additional instance swap within their file to preserve pre-set customizations.

This update is specific to the Canvas Web v9 Figma library and will not impact developers.

Checkbox Variant Consolidation

The Checkbox component in Figma will be refactored to reduce a large number of redundant variants and improve memory usage. There will be no change to existing functionality, but this update will minimize future bugs and instances of breaking changes going forward.

Swapping to the Canvas Web v9 Figma library will automatically swap to the updated Checkboxes with boolean and text props. Designers may need to perform an additional instance swap within their file to preserve pre-set customizations.

This update is specific to the Canvas Web v9 Figma library and will not impact developers.

Delete Button Figma Updates

The Delete Button in the Canvas Web Figma library will be updated to standardize the component structure across all Canvas buttons. This will allow the size, text, and state of the button to persist when swapping between all Canvas button types. The following updates will be made: Properties will be reordered and standardized New icon and state variants will be added to align with other button types

This will not impact existing designs.

This update is specific to the Canvas Web Figma library and will not impact developers.

Layout Component Removal

The Layout component will be removed from Canvas Kit to reduce maintenance costs and minimize the confusion around the various types of Layout components. It will no longer be available for use in Canvas v9.

Developers using the Layout component should switch over to the Grid component, which will fulfill the same functionality as Layout. The original Layout examples have been recreated using the Grid component to help developers transition off of the Layout component.

This update is specific to Canvas Kit and will not impact existing designs. Designers can continue to use the Layout Grid component in the Canvas Web Figma library, which corresponds to the Grid component in Canvas Kit.

Drawer Component Removal

The Drawer component will be removed from Canvas Kit to reduce maintenance costs and minimize the confusion around other similar components, like Side Panel. It will no longer be available for use in Canvas v9.

Developers using the Drawer component should switch over to the Side Panel component in the Preview package, which will fulfill the same functionality as Drawer.

This update is specific to Canvas Kit and will not impact existing designs.

Stack Component Removals

The Stack, HStack and VStack components will be removed from Canvas Kit to reduce maintenance costs and minimize the confusion around the various types of Layout components. These Stack components will no longer be available to use in Canvas Kit v9.

Developers should switch over to using Flex instead, which will have the same functionality as Stack, HStack, and VStack. A codemod will be available to help developers migrate to Flex. However, teams using StackProps for custom components will also need to switch out the spacing prop for the gap prop in code.

This update is specific to Canvas Kit and will not impact existing designs.

Default Button Type Modifications

The default type attribute for Canvas buttons will be updated from type="submit" to type="button" to prevent forms from accidentally being submitted when using buttons inside a form element. This change will be applied to the following Canvas buttons:

• Primary Button
• Secondary Button
• Tertiary Button
• Delete Button
• Toolbar Button

Developers that want to continue to use type="submit" will need to manually make this adjustment.

This update is specific to Canvas Kit and will not impact existing designs.

useTheme Updates

The useTheme hook will be updated to generate an error when used outside of a hook. This error has been hidden in the past, which resulted in teams incorrectly using the useTheme hook.

Developers using the useTheme hook in a regular function will need to switch it out with the getTheme instead.

This update is specific to Canvas Kit and will not impact existing designs.

useThemedRing Promotion

The useThemedRing hook will be promoted from the Labs package to Main to prevent bi-directional dependencies between the Main package and other packages like Labs and Preview.

A codemod will be available to help developers handle the migration to the Main package.

This update is specific to Canvas Kit and will not impact existing designs.

useThemeRTL Deprecation

The useThemeRTL will be deprecated from Canvas Kit as it is no longer necessary with the introduction of logical CSS properties. This hook will still be available for use in Canvas v9, but deprecation warnings will appear when it is in use.

Developers should start replacing this hook with logical CSS properties as it will be removed from Canvas Kit in the near future.

This update is specific to Canvas Kit and will not impact existing designs.

useCanvasTheme and getCanvasTheme Removal

The utility functions useCanvasTheme and getCanvasTheme will be removed in favor of useTheme and getTheme, respectively. These functions were only intended for internal use and were predecessors of useTheme and getTheme. They are being removed to get rid of unnecessary duplicates.

Developers using these functions will need to update the name of the function.

This update is specific to Canvas Kit and will not impact existing designs.

Canvas Kit’s TypeScript Compiler Target Updates

The TypeScript compiler target for Canvas Kit will be updated from ES5 to ES2019. All modern browsers support ES2019, so this update will significantly reduce the Canvas Kit bundle size.

This will not impact designers or developers. However, developers should still confirm that tests are still passing and that their application is still compiling properly.

This update is specific to Canvas Kit and will not impact existing designs.

Toast Component Promotion

The Toast compound component in the Labs package will be promoted to the Main package to replace the current Toast component in Main and reduce the number of duplicative components in Canvas Kit.

A codemod will be available to help developers handle the migration to the Main package.

This update is specific to Canvas Kit and will not impact existing designs.

Enhanced QA & Testing Processes

The Canvas QA and testing processes will be enhanced and utilized in the Canvas v9 release. This will include:

• Adding visual test for different container widths to Action Bar and Breadcrumbs
• Adding all Cypress tests to Action Bar
• Adding Cypress tests for different container widths to Breadcrumbs
• Adding Cypress tests for touch modality to Tabs and Modal
• Adding visual tests for mobile screen to Tabs and Modal
• Adding visual tests for the overflow Tabs variant

In addition to enhancing code testing, the design QA process will also be revamped to include directly testing major design changes and regressions with Workday product teams. The updated QA process will be applied to the depth token updates prior to pushing out the change in this release. This will be followed by enhanced codemod testing with additional Workday product teams.

This update will not impact designers or developers.