Canvas v10 Announcements

Canvas AI Elements Release

New AI elements are now available through Canvas! These elements are meant to be used for AI features and products

Sparkle Icon

A new wd-icon-sparkle.svg icon (sparkleIcon when using SystemIcon) has been released. Upgrade to @workday/canvas-system-icons-web to 3.0.19) to access the new sparkle icon.

This sparkle icon is also available for designers through the Canvas Assets Figma library.

Dragon Fruit Color

A new AI purple color, Dragon Fruit, has been added to the Canvas Tokens repository. Dragon Fruit is available as a base color token with six shade levels. To keep this color separate from the existing Canvas color palette, Dragon Fruit will use a slightly different naming convention (ex: extended-palette-dragon-fruit-100) compared to the existing Canvas base colors. Upgrade to @workday/canvas-tokens-web@1.1.0 to access the new Dragon Fruit color.

The new Dragon Fruit color is also available through the Canvas Tokens v2 Figma library for designers to utilize.

Loading Sparkle

A new Loading Sparkle component is now available in the Preview package of the Canvas Kit 10.3.0 release. This component is meant to indicate that content is currently being loaded or processed, similar to Loading Dots.

This component is also available in the Canvas Web v10 Figma library.

Canvas Kit 10.1.0 Release

Canvas Kit 10.1.0 is now available.

This Canvas Kit release contains the following updates:

• Icon support for Delete buttons, which is already available on the Canvas Web v10 Figma library
• A new Stencil utility to apply component styles

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

Canvas Mobile Q3 Release

Canvas Mobile’s Q3 release will be available on November 8th, 2023. This release includes 6 new components with new and updated usage guidance.

New Mobile Components

The following new components will be available in the Canvas Mobile Figma library:

• Card: A flexible content container related to a single topic.
• Search Input: An input for queries that pulls matching and related results.
• Prompt Input: An input that triggers the searching/finding of instances within a prompt.
• Banner: An indicator showing an important brief and concise message in context that requires user interaction.
• Time Picker: An input for entering time.
• Hyperlink (iOS only): A button for external redirection outside of the app.

All of these components will be available for iOS and Android, with the exception of Hyperlink, which will only be available in iOS as part of this release. While Hyperlink is a component, it is represented as a text style in Figma. To use Hyperlink, select one of the following text styles and apply Blueberry 400 to it:

• Subtext L Link - Regular
• Body S Link - Regular
• Body M Link - Regular
• Body L Link - Regular

This update will not impact designers or developers as they are all net-new components.

New and Updated Documentation

Documentation will be available for all the new components released as part of this update. Additionally, the following updates will also be made to mobile documentation on the Canvas Design System site:

• New Prompt pattern documentation
• New Read Only UI pattern documentation
• Updated Status Indicator component documentation to include the recent design changes made in previous releases (switch to sentence casing, increasing height)

This update will not impact designers or developers as it is specific to Canvas documentation.

Canvas v10 Release

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

The v10 release will focus on revamping Canvas tokens and components to support a Canvas theme, starting with Buttons! This Canvas theme will serve as the foundation for future theming work, which could include brand specific and user selected themes, like dark mode.

Release Overview

The table below contains a high-level overview of the updates that will be rolled out as part of the v10 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 v10 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

New Token Structure and Naming Convention

Canvas tokens will be restructured in Canvas v10 to:

• Enable scalable visual changes at the core token level that flows across all Canvas components
• Increase cohesion across Canvas components by standardizing token usage with semantic tokens
• Empower product teams to build custom components using semantic tokens that can evolve with Canvas tokens

There are three level of Canvas tokens, which includes:

• Base Tokens: tokens that represent hard coded values like a hex code or rem value. These tokens are maintained by the Canvas Design System team and should rarely be used by product teams.
• System Tokens: tokens that are intended to be used by product teams. They are semantic, meaning that they are named according to how they should be used. These tokens are the most similar to what is available in Canvas today (ex: type, depth).
• Brand Tokens: tokens that are used to set key brand colors and can be used by tenants to theme certain components to reflect their brand color.

With the current token structure, changing the hex value of Cinnamon 500 will result in a change to all components using Cinnamon 500, regardless of the context in which it is being used. This new three layer token structure along with the shift to a more semantic naming format allows the Canvas Design System to maintain and modify base tokens without impacting the intended use cases of system or brand tokens. As a result, teams using system tokens and brand tokens based on their intended use cases will be able to uptake those changes without the need for modifying their components.

Note: Color system tokens are still in development and will not be ready for the Canvas v10 release, but all other system tokens (ex: depth, space) will be available at the start of v10.

This new token set will also use rem as a unit of measurement instead of pixels to standardize Canvas tokens and improve the scalability of tokens across various screen sizes. All tokens will use rem as a unit of measurement, except for color tokens which will continue to utilize hex codes.

To support the new token structure, a new naming convention will also be implemented to help teams easily distinguish between different token levels.

This new token structure and naming convention will not result in breaking changes in code since the current set of tokens are not being modified or deprecated as part of v10. Instead, a new Canvas Tokens repo will be created to store the new set of tokens, which will also be ported into Canvas Kit React. The current token set will not be deprecated until Canvas fully migrates over to the new token structure and naming convention. However, developers will be able to use the new token set as part of v10.

For designers, the current Canvas Tokens Figma library will be renamed to “Canvas Tokens v1” and a new Canvas Tokens v2 Figma library will be created to store the new set of tokens and give designers more control with their token upgrades. Designers staying on Canvas v9 or older will still have access to the same token set and subsequent Figma styles. In order to use the new token set, designers upgrading to Canvas v10 will need to:

• Perform a library swap to the new Canvas v10 Figma library
• Turn on the new Canvas Tokens v2 Figma library
• And turn the old Canvas Tokens v1 library off

Please note that this work is ongoing and will span across multiple Canvas releases. However, the new token set is subject to change as they are rolled out across all Canvas components.

New Space and Shape Figma Variables

New Figma variables will be released with v10 for Canvas space and shape tokens. These Figma variables will contain the pre-set values of all Canvas space and shape tokens to help designers quickly switch between different space and shape tokens without needing to reference documentation or memorize the token values. Variables are only visible when using the associated design property. As such, space variables are only visible within the Auto Layout window while shape variables can only be utilized as corner radiuses in Figma.

To learn more about variables, view Figma’s tutorial on intro to variables.

This update is Figma specific and will not impact developers.

New Opacity System Token

A new opacity token will now be introduced with the new token structure. The opacity disabled token will be the only opacity system token introduced in v10. It is set to 40% opacity to be used with disabled states, which does not have to meet contrast requirements to be accessible.

This token will be available in code for developers with the new token set.

However, opacity tokens will not be available as a Figma as opacity is currently not supported in Figma as a style or variant.

New Styling Strategy for Buttons

A new styling strategy will start rolling out in Canvas v10 in parallel with the token and theming work, starting with Canvas buttons. Canvas will begin shifting towards static styling with the use of CSS variables as opposed to dynamic styling via Emotion to improve performance and reduce the need for full page style recalculations.

As part of this work, Canvas buttons styles will be refactored to use the new cs styling function. The style refactoring will allow Primary, Secondary, Tertiary, and Delete buttons to use the new tokens in the form of CSS variables through the CanvasProvider.

While Canvas will be moving away from styling with Emotion, Canvas users will still be able to use Emotion. This update will not impact developers. More information about the new styling strategy can be found in this GitHub discussion.

This is a code specific update and will not impact designers.

Token Rollout to Canvas Buttons

Canvas’s Primary, Secondary, Tertiary, and Delete buttons will be updated to use the new system and brand level tokens. Elements that are meant to be brandable, like the text color of Primary buttons, will be tied to a brand token. However, certain elements will be tied to base level tokens for the time being as new system tokens are created throughout the roll out process.

This update will not be a breaking change for developers, but developers will be able to see the new system and brand tokens being used to create Canvas buttons.

This will also not be a breaking change for designers as the Canvas buttons in the Canvas Web v10 Figma library will be linked to the new system and brand tokens automatically. Since Canvas components have always been structured to reference tokens, the new token set will also be rolled out across all Canvas components in the Canvas Web v10 Figma library. Please note that this will temporarily create a discrepancy between what is available in code as Canvas components must be refactored in code before they can uptake the new token set.

Tertiary Inverse Button Styling Standardization

The inverse variant of Tertiary buttons will be updated to align with the styling of the inverse variants of the Primary and Secondary buttons using the new token set.

By connecting the inverse variant of Tertiary buttons to the same set of tokens used by Primary and Secondary buttons, the background color for the hover state of the inverse Tertiary buttons will be updated from French Vanilla 100 to Soap 300.

The new background color will be applied automatically once designers upgrade to Canvas v10 and will not result in any breaking changes. This update will also be reflected in code, but no action will be required from developers to uptake this change.

Button Focus Ring Update

We found that focus rings were not consistent across all buttons. We’ve updated the focus ring on the inverse variant of PrimaryButton to display a consistent focus ring across PrimaryButton and SecondaryButton. The changes to PrimaryButton will need to be taken note of due to small visual changes with the inverse variant.

Also, colors will no longer support the focusRing option.

import {focusRing} from '@workday/canvas-kit-react/common';
 
// v9
<PrimaryButton
  colors={{
    // other colors
    focus: {
      // other colors
     focusRing: focusRing(/* options */)
    }
  }}
/>
 
// v10
<PrimaryButton
  colors={{
    // other colors
    focus: {
      // other colors
    }
  }}
  css={{
    ':focus-visible': focusRing(/* options */)
  }}
/>;

Removal of 13px Figma Font Styles

Previously deprecated 13px type styles will be removed in the Canvas Tokens v2 Figma library. These font sizes were deprecated in Canvas v5 and while they’ll still be available for designers through the Canvas Tokens V1 library, they will not be supported in the Canvas Tokens v2 Figma library.

When designers swap over to the Canvas Tokens v2 Figma library, type styles using 13px font size will no longer be available for use in the Figma styles menu. However, all other type styles will still be supported in the new Canvas Tokens v2 Figma library. Designs using the deprecated 13px text styles will persist after the library swap, but it is recommended for designers to switch over to using a supported text style to align with other Workday products.

This update is Figma specific and will not impact developers.

Tooltip Font Style Update

Tooltip will be updated in Figma to use the Subtext M - (400) Regular text style instead of the deprecated 13px text styles to align with what is available in code. The current 13px text styles have been deprecated since v5 and will be fully removed in v10. This update will not increase the line height of tooltip, but it will decrease the width of tooltip as the font size will decrease to 0.75 rem (the equivalent of 12px). The top and bottom padding will also increase from 0.375 to .5 rems (the equivalent of moving from 6 to 8px) in order to maintain the current height of the tooltip component.

This update is Figma specific and will not impact developers. However, it will result in a visual change for designers, but the update will be applied automatically once designers upgrade to v10.

Space and Depth Rem Conversion

The current space and depth tokens in Canvas Kit will be updated to use rem instead of pixels in order to maintain consistency across all Canvas tokens and align with the new unit of measurement that will be utilized by the new token set. spaceNumbers will continue to be based in pixels, but will be deprecated in v10 as part of the transition over to rem based tokens.

This update to rem will impact developers using string literals. Additional resources will be provided to help developers switch over to rem.

Please see the discussion on px to rem migration.

This is a code specific update and will not impact designers.

Deprecation of spaceNumbers

spaceNumbers will be deprecated in v10 as part of the move towards rem based tokens. Teams using spaceNumbers can continue to do so in v10, but deprecation warnings will appear when it is in use.

Please see the discussion on px to rem migration.

It is recommended for developers to switch over to using CSS calc() instead as spaceNumbers will eventually be removed.

This is a code specific update and will not impact designers.

Select Compound Component Conversion

The Select component in Main will be replaced with a Select compound component as part of an effort to standardize component APIs and give developers more flexibility with customizing Canvas components.

This new Select component will be visually similar to the Select in Preview, but with the following design changes:

• The focus ring, error ring, and warning ring will no longer wrap around the menu for Select. Instead, rings will only wrap around the Select input to better align borders across different web browsers.
• The spacing between the menu and its target element will increase from 0px to 4px in order to prevent the menu from overlapping with the focus, error, and warning rings. This change is being made to the Popup component directly, which will flow into Menu and Select as well.
• The maximum height of the menu has been increased from 200px to 300px to accommodate 7 single-line items (the minimum number of items we recommend including in a Select) without triggering overflow. The maximum height may be overriden.

Developers using the current Select component in Main will have to change the API to match the new compound component’s API. It is also recommended for developers using the Select component in Preview to switch over to the compound component version of Select, which will give them more flexibility and control over Select.

The compound component conversion is a code specific change, but the visual changes will be applied to the Select component in the Canvas Web v11 Figma library. The Select component in Figma is reflective of the Select component in Preview, which is still available for use in v10. No changes will be made to the Select component in Figma for the time being to minimize the number of breaking changes for designers in this release.

Deprecation of Select in Preview

The Select component in Preview will be deprecated in Canvas Kit with the introduction of the new Select compound component in Main. Select in Preview will still be available for use in Canvas v10, but deprecation warnings will appear when it is in use.

Developers should start replacing all instances of Select in Preview with the new Select compound component in Main, which will be available as part of the v10 release.

This is a code specific update and will not impact designers.

Deprecation of InputIconContainer

InputIconContainer will be deprecated in Canvas Kit. It will still be available for use in Canvas v10, but deprecation warnings will appear when it is in use.

Developers using InputIconContainer should switch over to using InputGroup, which has an added bidirectionality feature and can support icons at the start of an input.

This is a code specific update and will not impact designers.

Deprecation of Table in Main

The Table component in Main will be deprecated in Canvas Kit. It will still be available for use in Canvas v10, but deprecation warnings will appear when it is in use.

Developers using the Table component in the Main package should switch over to using the new Table in Preview, which has been updated to be more flexible with a more modern design.

This is a code specific update and will not impact designers.

Previous Releases

• Canvas v9 Announcements
• Canvas v8 Announcements
• Canvas v7 Announcements
• Canvas v6 Announcements