Canvas v7 Announcements

Canvas Kit 7.4.0 Release

Canvas Kit 7.4.0 is now available. In this update, we added support to display a section header title in the Menu component. This allows menu items to be grouped logically. These contextual headers in Menus are not limited to icon-only button menus and can also be used for menu targets with a text-based button. In the following example, we show how “Newest on Top” and “Oldest on Top” are related to sorting in the menu and tied to the sorting icon button.

Additionally in Canvas Kit 7.4.0, we added support for opening stories in Tesseract. This change enables the “Open in Tesseract” button in Anthology.

To access these changes, please upgrade to Canvas Kit 7.4.0.

---

September 2022 Design Asset Release

The Design Asset September 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 system icons were released with this update:

• wd-icon-package-arrow-down-icon.svg (packageArrowDownIcon when using our SystemIcon)
• wd-icon-my-referrals-icon.svg (myReferralsIcon)

To upgrade to the latest, bump @workday/canvas-system-icons-web to 3.0.3. This release will not impact users as they are net-new assets with no changes to previously released assets.

For more information on these assets, please reference the Design Asset Repo.

---

Canvas Kit 7.3.1 Release Update

The Canvas Kit 7.3.1 update was released on September 9, 2022.

This release fixes three spacing-related bugs to our Popup component that we introduced in Canvas Kit 7.0.0:

• Focused elements inside Popup.Body were cut off due to the built-in vertical overflow. There was a small portion of the focus ring that went beyond the container.
• The space between Popup.Heading and Popup.Body was 16px instead of 24px as specified in the design spec.
• Popup.Card caused spacing issues when Popup.CloseIcon was used.

Because Modal, Dialog, and Toast are built using Popup, these components are also affected. The changes to each of these components are described below.

• Popup.Body now has 8px of padding. This addresses the issue where focus rings were being clipped within the Body due to its built-in overflow. This padding allows the focus ring on any focusable element contained within the Body to be fully visible. The total space between the edge of the Card and the contents of the Body is still 32px.
• Popup.Heading now has 8px of padding to keep it visually aligned with the updated Popup.Body. It also now has a marginBottom of 8px, bringing the default vertical space between the Heading and the Body to 24px (previously 16px) in order to meet the component spec.
• Popup.Card’s padding has been reduced by 8px from 32px to 24px to compensate for the padding added to Popup.Body and Popup.Heading and to preserve the component’s existing spacing. If you’ve customized the padding for any Popup, Modal, or Dialog subcomponents, you may need to adjust your padding values to get the same results after upgrading.
• Popup.Card’s default component is now Flex (previously Stack) so the spacing prop has been removed. Stack created spacing issues when used with a Popup.CloseIcon which did not behave as a normal Stack item.

Given the changes above, if you’re creating a footer for your Popup, Modal, or Dialog (using an HStack, for example), you’ll need to update it with the following props/styles to align it with the updated Heading and Body: padding="xxs" (8px) and marginTop="xxs" (8px).

For more information on this update, please reference the 7.3.1 release note. To access this change, please upgrade to Canvas Kit 7.3.1..

---

Canvas Kit 7.3.1 Release

The 7.4.0 release has been delayed and bumped down to a patch release (7.3.1) since it will only contain fixes for bugs introduced as part of the Canvas v7 release. The 7.3.1 release will contain the same updates that were originally planned for 7.4.0, but with some minor changes to the approach to ensure minimal impact to product teams using Popup, Modal, Dialog, and Toast. Canvas Kit 7.3.1 will be released shortly after the 7.3.0 release.

Please follow our announcements and support channels for more updates.

---

Canvas Kit 7.3.0 and Figma Library Release

Canvas Kit 7.3.0 will be released on August 31st, 2022, alongside updates to the Canvas Web Figma library. This is a larger update, including updates for developers in Canvas Kit 7.3.0 and Canvas 7.3.0 Figma library updates.

On the Canvas Kit side, this includes:

• Adding a new Expandable Container component to Canvas Kit. The Expandable Container component allows users to expand and collapse content with a single header for a more streamlined viewing experience.
• Enhancing the Toast component as a compound component. This makes it easier for developers to use and customize the Canvas Toast component at the sub-component level. You can find the compound Toast in Canvas Labs package, so teams using the Toast in the Main package won’t be affected by this update.

In Figma, we are updating our Canvas Web library to:

• Add an Expandable Container component and usage guidance for it to the Canvas Design System website so users can expand and collapse content with a single header for a more streamlined experience.
• Add a new Skeleton component to replace the deprecated Skeleton component from the Canvas Production library.
• Add an Avatar component, as well as avatar variations for the Pill and Expandable Container components
• Soft deprecate the data variant for Primary Button by adding deprecation titles to this component. If your team is currently using the data variant, you should switch to a supported component in Canvas Web before future hard deprecation.

This update will not impact existing designs, but teams will need to accept the change or upgrade to start uptaking the new components. To access these changes, please upgrade to Canvas Kit 7.3.0 once it becomes available and accept the changes to the Figma libraries once released.

---

August 2022 Design Asset Release

The Design Asset August 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-applet-workday-byok
• wd-accent-workday-byok

This release will not impact users as they are net-new assets with no changes to previously released assets. For more information or to access these new icons in this update, please reference the Design Asset Repo.

---

Canvas On Deck and Canvas Production Figma Library Deprecation

The Canvas On Deck and Canvas Production libraries will be deprecated on September 14th, 2022. These libraries have not been maintained for some time and the components within those libraries are no longer accurate or supported in code.

These libraries have been moved to an archival project within the Canvas Figma team. This will not immediately impact existing designs. However, users will no longer be able to search for additional components in the On Deck or Production libraries once they are deprecated on September 14th. Components from the On Deck or Production libraries that have already been pulled into a Figma file will still show up as local components for that file, but it is highly recommended for teams to replace those unsupported components with a supported version from the Standard Tooling or Canvas Web libraries.

A Canvas Deprecation Map has been created to help teams transition to using supported libraries along with migration guidance that explains where things may be moving. Additional support will be available on the following Canvas Design Office Hours sessions:

• August 15th, European Office Hours: 10:30 AM to 11:00 AM GMT
• August 15th, US Office Hours: 10:15 AM to 11:00 AM PST
• August 24th, European Office Hours: 10:30 AM to 11:00 AM GMT
• August 24th, US Office Hours: 10:15 AM to 11:00 AM PST

The sessions will cover the supporting documents and best practice when it comes to replacing components in your files with ones that are supported. These sessions will also be recorded.

Check out our FAQs about the deprecation of these libraries here.

To further support the deprecation of the On Deck and Production libraries, 22 new components have been added to the 📚UI Platform Web (Standard Tooling XO). This update will not impact existing designs, but teams will need to accept the change to start uptaking the new components.

Canvas Office Hours are also available should you require time directly with the team for these changes.

---

Canvas Kit 7.2.0 Release

Canvas 7.2.0 is now available. In this update, we added a grid model to the collection system.

This makes it easier to create two-dimensional UI components and support keyboard navigation and accessibility (e.g. a color picker). We also fixed a bug in the navigation of grids where up/down keys were accidentally reversed, and the wrapping navigation now supports non-rectangular grids of items (e.g. a calendar).

Please note that grid in this context references a two-dimensional list/table for developer use, not our grid-based Canvas Layout component.

To access this change, please upgrade to Canvas Kit 7.2.0.

---

July 2022 Figma Release

On July 20th, 2022, our Canvas Web Figma libraries will be updated to include the addition of inverse variants for Radio buttons and Checkboxes (part of Canvas Kit 7.0.7). We also will add an Action Bar variant for our Delete button.

Inverse Radio Button and Checkboxes

Inverse variants will be added to Radio Buttons and Checkboxes to handle use cases on darker backgrounds.

Action Bar Variant for Delete Button

A new Action Bar variant with the Delete Button will be added to help designers create mockups of workflows that can be terminated or exited out of the flow.

These enhancements will not impact existing designs. To uptake these changes, please accept the updates in Figma.

---

Canvas Kit 7.1.0 Release

Canvas 7.1.0 is now available. We enhanced our Tab component to support mobile behavior based on modality. WebView Tabs will now switch from displaying an overflow menu to become scrollable from left to right in order to replicate a mobile experience.

To access this change, please upgrade to Canvas Kit 7.1.0

---

June 2022 Design Asset Release

The Design Asset June 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 asset was released with this update:

• Wd-applet-manager-insights

This release will not impact users as it is a net-new asset with no changes to previously released assets.

For more information on this update, please reference the Design Asset Repo

---

May 2022 Figma Library Bug Fixes

A Canvas Web Figma library update was released May 26th, 2022 with the following bug fixes:

• Updated a missing text variant for Checkboxes with left labels
• Fixed improper alert styling applied to error state Checkboxes with top labels

Users will now be able to access the missing text variant for left label Checkboxes and see the top label Checkboxes with the correct error styling. This update will not impact existing designs.

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!

---

Canvas Kit v7 and Figma Library Release

Canvas Kit v7 will be released on May 18th, 2022, alongside updates to the Canvas Web and Canvas Token Figma libraries to reflect the v7 changes. V7 is one of our larger releases – jam packed with new accessibility features, components, and more! An upgrade guide will be available once v7 goes live to assist product teams with their migration to the newest Canvas Kit version.

Release Overview

The table below contains a high-level overview of the updates that will be rolled out as part of the v7 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 accept the changes in Figma and/or upgrade to Canvas Kit v7
• 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
Emotion 11, React 17, Typescript 4.1 Upgrade	Upgrading to Emotion 11 and React 17 as part of v7	None	High
Depth Token Upgrades	All depth tokens will include a second shadow along with minor changes to the opacity and length/size of the shadow	Low	Low
Icon Button Deprecation & Consolidation	Icon Buttons will be deprecated and replaced with icon only Primary, Secondary, and Tertiary button variants	High	High
Page Header, Main Header, and Cookie Banner Hard Deprecation	Soft deprecation of Page Header, Main Header, and Cookie Banner from v6 will be hard deprecated in v7, with no further access in Canvas Kit	High	High
Built-in Tooltip for Side Panel	The Side Panel component will now have a tooltip component built directly into it for accessibility	None	Medium
Built-in Overflow Behavior for Action Bar	The Action Bar component will have overflow behavior built into it	Medium	Medium
New Multidimensional and Hierarchical Collection	New Menu component will be added to main package along with Multidimensional and Hierarchical Collection	None	Medium
New Pills Component	A new Pills component will be released in v7 that can be used to display short labels	None	None
New External Hyperlink Component	A new External Hyperlink component will be available in v7 and should be used for navigational links that bring users outside of the current application or domain	None	None
New Layout Styles	New layout styles will be available for use in Figma to replicate grids	None	None
Max Width Increase for Status Indicator	Max width for the Status Indicator component will be increased to 200px from the original 150px to avoid truncated text	None	None
Compound Component Conversion	Banner will be converted to a compound component. Radio, Checkbox, and Toast will be converted into compound components as a minor release (after May 18th, 2022).	None	None
WebView Tabs	Tabs will be enhanced to support mobile behavior based on modality as a minor release (after May 18th, 2022)	None	None
Component Promotion	Box, Flex, and Stack will become part of the Main package in v7	None	None

Emotion 11, React 17, and Typescript 4.1 Upgrade

We will be upgrading to Emotion 11 and React 17 as part of the v7 release. This will allow teams to upgrade to newer versions of Emotion and React without the need to maintain older versions in order to use Canvas Kit.

This upgrade will not impact other Canvas sub-products like the Figma libraries or the Design Asset repo.

As part of this upgrade, Canvas Kit will remove the jsx pragma and the use of CSS props. However, consumers can continue to use CSS props.

To use v7, teams will need to be using:

• React 16.14 OR React 17.X for backwards compatibility on JSX transform if they are using Babel or Typescript to compile code
• Emotion 11
• Typescript 4.1 or higher, if applicable
• Babel 7.9 or higher, if applicable
• An Enzyme adapter for React 17, if applicable

Please note that teams may also need to update any side effect dependencies or linting packages with this update.

View our React 17 and Emotion 11 Github discussions to learn more about any gotchas or tips and tricks with these upgrades. And of course, feel free to contribute to the discussion with any questions or learnings of your own!

Depth Token Updates

Our Depth tokens will be getting a major update in v7 to enhance the look and feel of Canvas components.

All depth tokens will be updated to include a second shadow along with some minor changes to the opacity and length/size of the shadow. Depth -1 will be deprecated and two new depth values, Depth 5 and Depth 6, will be introduced in v7. As part of the depth updates, the following components will repoint to the new depth tokens:

• Select Menu, Menu, Breadcrumbs Dropdown Menu: Depth 2 → Depth 3
• Color Picker Palette, Toast, Popup, Dialog: Depth 2 → Depth 5
• Card: Depth 2 → Depth 1
• Side Panel (alternate variant without overlay): Depth 3 → Depth 5
• Side Panel (alternate variant with overlay): Depth 3 → Depth 6
• Modal: Depth 2 → Depth 6
• Combobox: Depth 1 → Depth 3

Teams using Depth -1 will need to manually update impacted components in Figma and code to one of the supported Depth tokens, ideally in alignment with Canvas recommendations. More information about the usage guidance for Depth tokens can be found on our Depth documentation.

Components will automatically be updated to the new depth values in Figma once users accept the Figma changes, but any changes made to the depth tokens of a component will continue to persist. For example, the Card component is currently using a Depth 2 default value. If the depth value on a card was modified to point to Depth 3 instead, the Card will continue to point to the Depth 3 token instead of the new default depth token value (Depth 1) for that card instance, but it will adopt the v7 changes to that specific depth token of Depth 3.

All other changes will be reflected automatically once users accept the changes in Figma and/or upgrade to Canvas Kit v7.

Icon Button Deprecation and Consolidation

Icon Buttons will be deprecated and replaced with icon only Primary, Secondary, and Tertiary button variants to consolidate the number of Canvas button variants.

Icon Button Mapping

As part of this consolidation, the following changes will be made:

• Icon Buttons will no longer be supported as a standalone component. Instead, they will be replaced with icon only Primary, Secondary, and Tertiary button variants
• The Icon Button Toggle state and Toggled prop will not be supported in the new icon only button variants. However, it will still be available for the Toolbar Icon Button
• The Icon Buttons used in Action Bar, Side Panel, Color Picker, Search Form, Breadcrumbs, Pagination, Modal, and Toast will all be updated to point to the new icon only button variants
• Segmented Control will be converted into a compound component
• The dataLabel prop will be removed and the data Primary and Primary Inverse button variants will no longer be supported
• The medium sized Icon Buttons with a 24x icon that are being mapped to the new medium sized icon only Primary, Secondary, and Tertiary button variants will have a smaller 20px icon

Designers using Canvas Icon Buttons should transition to using the new icon only Primary, Secondary, and Tertiary button variants for any current and future designs to ensure a smooth design-to-development hand off. Prexisting changes, such as icon or color customizations, made to components with Icon Buttons (Action Bar, Side Panel, Color Picker, etc.) will not persist and transfer over to the new icon only button variants. Additionally, components using configured states (active, hover, disabled, etc.) will be reverted to the default state. Designers will need to manually update the component states and the new icon only button variant in those components to their desired configurations.

A code mod will be provided to automatically update existing Icon Buttons in product to their new icon only Secondary and Tertiary button variants.

Teams using:

• Plain, Square, or Square-Filled Icon Buttons should either transition to the new icon only Primary, Secondary, and Tertiary button variants, the Toolbar Icon Button, or the Segmented Control component
• The Toggled Icon Button state should opt to use the icon only Primary button variant instead to represent toggle on and the icon only Tertiary button variant for toggle off in Figma. Since the Toggle prop will no longer be available for developers to use, togglable icon only buttons will require additional development work to implement. More information will be provided in our v7 usage guide to help developers implement togglable icon only buttons with using a new low level BaseButton component
• The dataLabel prop or the data Primary and Primary Inverse button variants in the Canvas Web Figma library will need to manually add a styled span to their code and use the icon left Primary and Primary Inverse button variants in Canvas Web to replicate the data Primary and Primary Inverse button variants

Page Header, Main Header, and Cookie Banner Hard Deprecation

In v6, we soft deprecated Page Header, Main Header (also known as Global Header), and Cookie Banner by adding deprecation notices across all Canvas sub-products. These components will be hard deprecated in v7, meaning users will no longer have access to them in Canvas Kit.

This hard deprecation will not impact existing designs, but they will no longer show up on the Figma assets panel. However, newer versions of the Page Header and Main Header and are now available in the UI Platform Web (Standard Tooling XO) Figma library for designers to use. The Main Header has also been added to the Application Chrome repo for internal Workday teams to use.

Examples have also been created for all three components in Storybook to help developers create their own Page Header, Main Header, and Cookie Banner using existing Canvas Kit components. To continue using any of the previously mentioned components, developers should leverage the Storybook examples to implement them in code.

Built-in Tooltip for Side Panel

The Side Panel component will now have a tooltip component built directly into it to help bake in accessibility into everything that we do.

As part of this release, the Side Panel component will now be available in the Canvas Web Figma library for designers to use. A Side Panel variant with the built-in tooltip will also be available to help designers indicate the presence of the tooltip text in their designs.

Teams that have already manually implemented a tooltip for their Side Panel components will need to remove it and utilize the built-in tooltip to uptake this change.

Built-in Overflow Behavior for Action Bar

The Action Bar component will have overflow behavior built into it. With the Icon Button consolidation, the Icon Button in Action Bar will also be replaced with a new icon only Secondary button variant. When clicked, that icon only Secondary button variant will open up an overflow drop-down menu.

As part of this enhancement, Action Bar will also be converted into a component with variants in the Canvas Web library, making it available in the Figma assets panel for designers to directly search for and pull from. Existing designs will not be impacted by this change. However, designers should manually update active designs to use the new Action Bar component in order to ensure a smooth developer handoff and consistency between design and code.

Teams that have manually implemented overflow behavior into Action Bar will need to remove it and utilize the new built-in overflow behavior to uptake this change. No changes are required to uptake this change if overflow behavior has not been manually implemented for Action Bar in code.

New Multidimensional and Hierarchical Collection

A new multidimensional and hierarchical collection will be rolled out in v7, along with a new Menu component in the Main package. No other components will be impacted by the new multidimensional and hierarchical collection.

This will not result in any visual changes and will not impact existing designs.

As part of this change, a new Menu component will be introduced in the Main package. Teams using the Menu in the Preview package should start migrating over to the Menu component in Main as the Preview Menu will be deprecated in the next few major releases.

New Pills Component

A new Pills component will be released in v7 that can be used to display short labels and can be non-interactive, removable, or additive with the option to display an avatar.

Pills will be available on Canvas Web once v7 is released and documentation will also be available to help teams utilize Pills. This net new component will not impact existing designs and there is no action required from developers to uptake this change in v7

New External Hyperlink Component

A new External Hyperlink component will also be available in v7 and should be used for navigational links that bring users outside of the current application or domain. This component is similar to our existing Hyperlink component, but will include the extLink System Icon on the right-hand size to indicate that the link is outside of the current application or domain.

In Figma, ExternalHyperlink components are represented as text styling. To replicate this component, designers will need to:

• Highlight the ExternalHyperlink text and select one of the link text-style (ex: Body S link - (500) Regular, Body M link - (500) Regular). Please note that the ExternalHyperlink text is not recommended for titles, headings, or small and medium subtexts
• Highlight the ExternalHyperlink text again and select the Blueberry 400 color
• Add the extLink icon to the right of the text. The icon scale will vary based on the text size. View the specs to learn more about icon sizing.

This net new component will not impact existing designs and there is no action required from developers to uptake this change in v7.

New Layout Styles

Designers will now have access to new layout styles on Figma to replicate grids in product designs. To access the layout styles, designers should:

• Turn on the Canvas Web library
• Create a new frame or select an existing frame
• Open the Layout Grid panel in Figma
• Open up the styles and select one of the layout styles (Small, Medium, Large, and Extra-Large) under “Canvas Web”

This update will not impact existing designs and there is no action required from developers to uptake this change in v7.

Max Width Increase for Status Indicator

The max width for the Status Indicator component will be increased to 200px from the original 150px to help teams minimize the need to truncate text. While it is recommended for the Status Indicator text to be short and concise, a new prop called maxWidth will be introduced to allow max width to be configurable. A Storybook example will also be provided to help teams implement tooltips for Status Indicators with truncated text.

This change will not impact existing designs. However, Figma does not support max width capabilities so designers will need to keep the max width constraint in mind when using the Status Indicator component in their designs.

No action will be required for developers to uptake this change in v7.

Compound Component Conversion

Several components will be converted into a compound component, making it easier for developers to use and customize them at the sub-component level. The following components will be promoted to a compound component in v7:

• Banner
• Radio (delayed release, will be available in a minor v7 release after May 18th, 2022)
• Checkbox (delayed release, will be available in a minor v7 release after May 18th, 2022)
• Toast (delayed release, will be available in a minor v7 release after May 18th, 2022)

This will not result in any visual changes and will not impact existing designs.

No action will be required for developers to uptake this change in v7.

WebView Tabs

Tabs will be enhanced to support mobile behavior based on modality. WebView Tabs will switch from displaying an overflow menu to become scrollable from left to right in order to replicate a mobile experience. This feature has been delayed and will be available in a minor v7 release after May 18th, 2022.

This will not result in any visual changes and will not impact existing designs.

No action will be required for developers to uptake this change in v7.

Component Promotion

The following component will be promoted to the Main package as part of the v7 release:

• Box
• Flex
• Stack

This will not result in any visual changes and will not impact existing designs.

No action will be required for developers to uptake this change in v7.