Canvas v11 Announcements

September 2024 Design Asset Release

The September Design Asset Release is now available for use in the Canvas Assets Figma library for designers, and for developers on npm, Artifactory, or SAS (in all environments). This release includes one new system icon, and five updated system icons. The updated icons were modified to include a background layer.

The Canvas Assets Figma library has been updated to include these updates. Designers are encouraged to upgrade Canvas Asset Figma library to the latest version as there will be no impact to their existing designs. There are no visual changes for the updated system icons. However, developers should note the SVG code will be different. If you see your DOM snapshot tests fail because of an extra background layer added to the SVG, you can safely accept these changes.

Preview	File Name	Icon Name	Status
	wd-icon-progress-circle	patternIcon	Updated
	wd-icon-pattern	peopleRecruitingIcon	Updated
	wd-icon-people-recruiting	progressCircleIcon	Updated
	wd-icon-puzzle	puzzleIcon	New
	wd-icon-task-job	taskJobIcon	Updated
	wd-icon-user	userIcon	Updated

Canvas Mobile 2024 Q2 Release

Our Canvas Mobile Q2 release is now available. This quarterly release delivers new updates and highly anticipated beta components. Keep a look out for updated design guidance next month for Top App Bar and Full Page Loading Errors.

Release Overview

The table outlines what you’ll have access to in this release. There is no impact for developers and designers.

Change	Short Description	Designer Impact	Developer Impact
New Mobile Components In Beta	Phone Number Input, Currency Input, Page Header, have been added to the Canvas Mobile Beta Figma library along with a new and improved Top App Bar build.	Medium	None
Enhancements	Updates to Expandable and and Top Sheet are now available in production.	Medium	None

New Mobile Components In Beta

The following components are available now in the Canvas Mobile Figma Beta Library

• Phone Number Input: Insert phone numbers and country codes; pre-formatted for your convenience.
• Currency Input: Insert and format data referencing money.
• Page Header: Provide signaling or flagging to indicate where users are located within a page.
• Top App Bar: Rebuilt for improved usability and further controls of all buttons; subtitle support for persisting Hub or Applet names.

New Mobile Component Enhancements In Production

Below are the new enhancements you can expect for the following components, which are now available in the Canvas Mobile Figma Library:

• Expandable: Updated warning and error states that align with banner; subtitle and badge support.
• Top Sheet: Includes rebuilt Top App Bar.

August 2024 Design Asset Release

The August Design Asset Release is now available for use in the Canvas Assets Figma library for designers, and for developers on npm, Artifactory, or SAS (in all environments). This release includes one updated and three new system icons as well as a fix to several applet icons.

The Canvas Assets Figma library has been updated to include these new additions. Developers will not be impacted by this release. Designers are encouraged to upgrade Canvas Asset Figma library to the latest version as there will be no impact to their existing designs.

New & Updated System Icons

We released three new system icons and updated the onboarding-home icon to match their product rebrand. To use these icons please upgrade to @workday/canvas-system-icons-web@3.0.28.

Preview	File Name	Icon Name	Status
	wd-icon-people-recruiting	peopleRecruitingIcon	New
	wd-icon-info-sparkle	infoSparkleIcon	New
	wd-icon-laurel-wreath	laurelWreathIcon	New
	wd-icon-onboarding-home	onboardingHomeIcon	Updated

Fixed Applet Icons

Several of our applet icons were not applying colors correctly due to missing CSS class names on their path elements. We updated these icons, and they now apply colors correctly. This is not a visual breaking change, but it could cause diffs for SVG elements and cause some tests to fail. If you see class names added to the applet icons in the table below in your tests after upgrading, you can safely accept those changes. To uptake these fixes, please upgrade to @workday/canvas-applet-icons-web@2.0.15.

Preview	File Name	Icon Name
	wd-applet-candidate-engagement.svg	candidateEngagementIcon
	wd-applet-career-hub.svg	careerHubIcon
	wd-applet-extend.svg	extendIcon
	wd-applet-flow-writer.svg	flowWriterIcon
	wd-applet-guided-requisition.svg	guidedRequisitionIcon
	wd-applet-journey.svg	journeyIcon
	wd-applet-manager-insights.svg	managerInsightsIcon
	wd-applet-people-workspace.svg	peopleWorkspaceIcon
	wd-applet-planning.svg	planningIcon
	wd-applet-remove-par inventory.svg	removeParInventoryIcon
	wd-applet-user-cart hub.svg	userCartHubIcon
	wd-applet-workday-byok.svg	workdayByokIcon
	wd-applet-job-req workspace.svg	jobReqWorkspaceIcon

Canvas 11.1.0 Release

The Canvas 11.1.0 release is now available in Canvas Kit React and the Canvas Web v11 Figma library.

New Divider Component

A new Divider component has been added to Canvas Kit Preview React. This component can be used as a generic horizontal rule to divide page-level information or as a decorative element to visually separate and organize content. The Divider component is now available in @workday/canvas-kit-preview-react@11.1.0.

This cannot be represented in Figma as a standalone component, but designers can utilize the horizontal divider available in the Canvas Tokens v2 Figma library. Please note that only the horizontal version is currently available in code.

Modal & Dialog Breakpoint Adjustments

The prop names used in Modal and Dialog have been updated to match the name of Canvas breakpoint token. The following changes were made:

• Prop names updated from “Large Screen” to “Large” and “Small Screen” to “Small”
• The Small prop variations now use auto layout instead of frames, fixing previous resizing issues
• Both breakpoint tokens now use min and max-width This will enable Modal and Dialog to better support responsive breakpoint stylings and align more closely with code. There will be no impact to existing designs. This update is specific to Figma and will not impact developers.

Fix for Persistent Button Color in Modal

When using the Modal component in the Canvas Web v11 Figma library, switching from Primary to Delete Button types will result in the original button color persisting and over to the new button type. A bug fix has been applied to remove the persistent color issue. The correct color styles will now be applied when swapping between various button types.

This bug fix will not impact existing designs that have been overridden to fix the issue. Developers will also not be impacted as this bug fix is specific to Canvas Figma libraries.

July 2024 Design Asset Release

The July Design Asset Release is now available for use in the Canvas Assets Figma library for designers, and for developers on npm, Artifactory, or SAS (in all environments). This release includes one new system icon.

The Canvas Assets Figma library has been updated to include these new additions. Developers will not be impacted by this release. Designers are encouraged to upgrade Canvas Asset Figma library to the latest version as there will be no impact to their existing designs.

New System Icon

We released a new referenceLineIcon for chart visualizations.

Preview	File Name	Icon Name	Status
	wd-icon-reference-line.svg	referenceLineIcon	New

June 2024 Design Asset Release

The June Design Asset Release is now available for use in the Canvas Assets Figma library for designers, and for developers on npm, Artifactory, or SAS (in all environments). This release includes twelve new system icons and one new accent icon. We also fixed several accent icons which were not properly applying colors for theming.

The Canvas Assets Figma library has been updated to include these new additions. Developers will not be impacted by this release. Designers are encouraged to upgrade Canvas Asset Figma library to the latest version as there will be minimal impact to their existing designs.

New System Icons

We released four new AI system icons and eight other system icons, which are listed in the tables below. To use these new icons, please upgrade to @workday/canvas-system-icons-web@3.0.26.

AI System Icons

We added these AI system icons to support AI-related actions.

Preview	File Name	Icon Name	Status
	wd-icon-sparkle-single-small.svg	sparkleSingleSmallIcon	New
	wd-icon-search-sparkle.svg	searchSparkleIcon	New
	wd-icon-document-sparkle.svg	documentSparkleIcon	New
	wd-icon-edit-sparkle.svg	editSparkleIcon	New

Other System Icons

We added these system icons to support other generic actions.

Preview	File Name	Icon Name	Status
	wd-icon-filter-exclamation.svg	filterExclamationIcon	New
	wd-icon-moon.svg	moonIcon	New
	wd-icon-no-connection-cloud.svg	noConnectionCloudIcon	New
	wd-icon-thumbs-down-filled.svg	thumbsDownFilledIcon	New
	wd-icon-thumbs-down-outlined.svg	thumbsDownOutlinedIcon	New
	wd-icon-thumbs-up-filled.svg	thumbsUpFilledIcon	New
	wd-icon-thumbs-up-outlined.svg	thumbsUpOutlinedIcon	New
	wd-icon-upload.svg	uploadIcon	New

Accent Icons

We added one new sparkle accent icon and fixed accent icons that were not properly applying colors for theming. To use this new icon and the corrected icons, please upgrade to @workday/canvas-accent-icons-web@3.0.14.

New AI Sparkle Accent Icon

We released a new accent sparkle icon for AI-related tasks.

Preview	File Name	Icon Name	Status
	wd-accent-sparkle.svg	sparkleIcon	New

Fixed Accent Icons

Several of our accent icons were not applying colors correctly due to missing CSS class names on their path elements. We updated these icons, and they now apply colors correctly. This is not a visual breaking change, but it could cause diffs for SVG elements and cause some tests to fail. If you see class names added to the accent icons listed below in your tests after upgrading, you can safely accept those changes.

Preview	File Name	Icon Name	Status
	wd-accent-wd-accent-candidate-engagement.svg	candidateEngagementIcon	Fixed
	wd-accent-wd-accent-education-finance.svg	educationFinanceIcon	Fixed
	wd-accent-wd-accent-help.svg	helpIcon	Fixed
	wd-accent-wd-accent-minus-circle.svg	minusCircleIcon	Fixed
	wd-accent-wd-accent-mountain-flag.svg	mountainFlagIcon	Fixed
	wd-accent-wd-accent-notification.svg	notificationIcon	Fixed
	wd-accent-wd-accent-plus-circle.svg	plusCircleIcon	Fixed
	wd-accent-wd-accent-scroll-shield.svg	scrollShieldIcon	Fixed
	wd-accent-wd-accent-skills.svg	skillsIcon	Fixed
	wd-accent-wd-accent-video-playlist.svg	videoPlaylistIcon	Fixed
	wd-accent-wd-accent-workday-byok.svg	workdayByokIcon	Fixed

Canvas Mobile 2024 Q1 Release

Our Canvas Mobile Q1 release brings a big punch! Available May 17, 2024, this release offers exciting new components, highly anticipated enhancements, and updated documentation. There is minimum to no impact for designers and developers.

Release Overview

View the table below which highlights the updates that will be rolled out as part of the 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.
• 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
New Mobile Components In Production	Top Sheet, Switch, Badges, Snackbar have been added to the production Figma library, Canvas Mobile.	None	None
Action Bar Enhancements	Enhancements to the menu in Action Bar are now available.	None	None
New and Updated Documentation	New and updated design guidelines and developer documentation is available for several components - see full list below with direct links to the documentation.	None	None

New Mobile Components In Production

The following components are available now in the Canvas Mobile Figma Library:

• Top Sheet: Keeps scoped tasks stemming from the Top App Bar contextually relevant to a parent screen.
• Switch: Toggles a function on or off via a selection control.
• Badges: Indicates items associated with a parent element.
• Snackbar: Informs users about a process that an app has performed or will perform via a popup

Action Bar Enhancements

Action Bar will now include the Canvas approved Menu instead of native iOS and Android menus.

New and Updated Documentation

For guidelines on how to use these components, go to the documentation:

• Bottom Nav Bar
• Top App Bar
• Top Sheet
• Badges
• Switch
• Snackbar

Design usage guidance coming soon! Dev documentation is now available for the following components:

• Carousel

Canvas v11 Release

Canvas v11 will be released on May 22nd, 2024 with updates to Canvas Kit and the Canvas Figma libraries. An upgrade guide will be available once v11 goes live to assist product teams with upgrading to the newest version of Canvas.

The v11 release will include the introduction of color system tokens, the return of CSS, and newly refactored components!

Release Overview

The table below contains a high-level overview of the updates that will be rolled out as part of the v11 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 v11 and/or switch to the new v11 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
New Color System Tokens	A new set of semantic color system tokens will be released.	None	None
Updated Depth and Opacity Tokens	Depth and opacity tokens will be updated to use the new color system tokens.	None	None
New Breakpoint Tokens	New breakpoint tokens will be provided to help teams apply responsive styles.	None	None
The Return of Canvas Kit CSS	Canvas Kit CSS is making a comeback! As components are restyled in Canvas Kit React, they will be made available in Canvas Kit CSS.	None	High
Table (Preview) Refactor & Promotion	The Table component in Preview will be refactored to use the new cs prop and CSS variables and promoted, replacing the Table in the Main package.	None	High
Icon Components Refactor	The Svg, System Icon, System Icon Circle, Accent Icon, Applet Icon, and Graphic icon components will all be refactored to use the new cs prop and CSS variables.	None	Medium
Form Field (Preview) Refactor	Form Field (Preview) will be refactored to use the new cs prop and CSS variables, making it available for use with the current input components in Main.	None	Low
Text Components Refactor	Text components will be refactored to use the new cs prop and CSS variables.	None	Low
Status Indicator (Preview) Refactor & Model Removal	The Status Indicator component in Preview will be refactored to use the new cs prop and CSS variables with some minor visual changes. Models used in Status Indicator will also be removed.	None	Low
Button Token Updates	Canvas Primary, Secondary, Tertiary, and Delete buttons will be updated to use the new color system tokens. Fixes will also be applied that will result in minor visual changes.	None	Low
Checkbox Refactor	Checkbox will be refactored to use the new cs prop and CSS variables with some minor visual changes.	None	Low
Radio (Preview) Refactor	The Radio component in Preview will be refactored to use the new cs prop and CSS variables with some minor visual changes.	None	Low
Switch Refactor	Switch will be refactored to use the new cs prop and CSS variables with some minor visual changes.	None	Low
Card Refactor	Card will be refactored to use the new cs prop and CSS variables.	None	None
Select Refactor	Select will be refactored to use the new cs prop and CSS variables.	None	None
Count Badge Refactor	Count Badge will be refactored to use the new cs prop and CSS variables.	None	None
Component Deprecations	Text Input (Preview), Text Area (Preview), Form Field (Main), and Label Text (Main) will all be deprecated in v11.	None	None

New Color System Tokens

Following the release of the restructured Canvas tokens in v10, a new set of color system tokens will be added to the Canvas Tokens Web package. Like the other sets of system tokens released in v10, color system tokens will be semantic to help teams understand how to use and apply these tokens to their product.

Color system tokens will live alongside brand tokens, but with the following distinctions: Brand tokens should only be used when tenant branding is possible / allowed. The color that brand tokens display will be dependent on the tenant configuration. System tokens should be used in cases where tenant branding is not possible / allowed. This prevents tenant configuration from altering the color used in a component. System tokens are designed to make theming (non-tenant branding) easier in the future. We advise using System tokens over Base tokens whenever possible.

Since they are a net-new add, color system tokens will not impact developers or designers. However, teams will begin seeing color system tokens rolled out to Canvas components.

Updated Depth and Opacity Tokens

Depth and opacity system tokens will be updated to use the new color system tokens. Tying color system tokens to depth and opacity tokens will make it easier to roll out color changes to color-dependent Canvas tokens. This update will not impact the actual color rendered for depth and opacity as the color system tokens utilized for this change references the original base color tokens that were being used.

As a result, this will not impact developers or designers.

New Breakpoint System Tokens

New breakpoint system tokens will be available with v11! These tokens will allow developers and designers to have a single source of truth for breakpoints. They’ll also make it easier for teams to apply responsive styles to components, opening the door for more responsive style customizations.

Breakpoint variables can be set to auto-layout frames in Figma. Designers can set min and max widths of artboards to Canvas breakpoint variables to create responsive designs. The new responsive grid style will also behave more closely to the Canvas Grid component and css grids.

This is a net-new feature so it will not impact developers or designers. However, it is recommended for developers to begin migrating over to use these new breakpoint system tokens instead of the breakpoints in the Emotion theme object from CanvasProvider. More information will be available in the v11 upgrade guide to help developers adopt breakpoint tokens.

The Return of Canvas Kit CSS

Over the past few years, Canvas Kit React has seen major improvements while Canvas Kit CSS development was paused and set into maintenance mode. This was primarily due to the cost of maintaining two implementations of Canvas and trying to keep them in sync. But with the v11 release, Canvas Kit CSS is officially making a comeback and taking center stage!

As Canvas Kit React components are being refactored to use the new styling utilities and CSS tokens, Canvas Kit CSS will also begin building off Canvas Kit React. This allows both Canvas Kit CSS and React to be updated in sync, reducing maintenance costs and improving support for teams running on CSS.

Since v5, Canvas Kit CSS has been in maintenance mode and has not been updated. Teams upgrading to the Canvas Kit CSS v11 should expect major breaking changes that help bring CSS components into alignment with what’s available in Canvas Kit React. Not all components available in previous versions of Canvas Kit CSS will be available for v11. Components will be added to Canvas Kit CSS as they are being refactored in Canvas Kit React. However, consumers can expect new Labs and Preview packages that will align with Canvas Kit React’s offerings.

This update is developer specific and will not impact designers.

Table (Preview) Refactor & Promotion

The compound Table component in Preview will be updated to use Canvas Tokens and the new styling utilities. The component will also be modified to support the cs prop. Since the outdated Table component in Main was deprecated in v10, the updated Table component in Preview will also be promoted to replace the one in Main.

Developers will need to update their usage of Table to reflect the new API. More guidance will be provided in the v11 upgrade guides to help developers uptake this change.

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

Icon Components Refactor

All icons components will be refactored to use the new Canvas tokens and styling utilities. These refactored icon components will now support the cs prop, styles prop will be removed. The following icon components will be updated as part of this work: Svg, System Icon, System Icon Circle, Accent Icon, Applet Icon, and Graphic.

There are no changes to the behavior or functionality of Svg or System Icon Circle. However, the following changes will be made to the remaining icon components:

• System Icon: SystemIconStyles prop will be deprecated and merged with SystemIconProps in a future version. accentHover, backgroundHover, fillHover, fill, and systemIconStyles will be deprecated.
• Accent Icon: AccentIconStyles prop will be deprecated and will be merged with AccentIconProps in a future version. accentIconStyles will also be deprecated.
• Applet Icon: AppletIconStyles prop will be deprecated and merged with AppletIconProps in a future version. appletIconStyles will also be deprecated.
• Graphic: GraphicStyles prop will be deprecated and merged with GraphicProps in a future version. width and height props will also be deprecated.

A codemod will be available to help developers uptake these changes and more guidance will be provided in the v11 upgrade guide.

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

Form Field Refactor

The Form Field component in Preview will be refactored to use the new Canvas CSS tokens, styling utilities, and the cs prop. These changes will allow Form Field in Preview to work with the current input components in Main while providing more flexibility.

As part of this refactoring work:

• The orientation prop will default to vertical and is no longer required
• FormField.Input will then be compatible with any of our inputs in Main
• The prop hasError will be renamed to error to accept the values: "error" | "alert" | undefined to provide support for the Text Input and Text Area component in Main. A codemod will be available to rename this prop.

Developers using the Form Field in Main should switch over to using the updated Form Field in Preview. Please note that the Form Field component in Preview does not support the useFieldSet prop that the Form Field in Main does. In order to achieve the same behavior, set the as prop on the Form Field element to fieldset and the as prop of FormField.Label to legend.

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

Text Components Refactor

Text components will be refactored to use the new styling utilities and tokens. The Text component will longer extend the Box component. However, it will still support Emotion styled and style props. The following text components have not been impacted since they extend the Text component: Title, Heading, Body Text and Subtext. However, the Label Text component has been deprecated.

Developers using Label Text should refer to the Component Deprecations section to learn more about this upcoming change.

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

Status Indicator Refactor & Model Removal

The Status Indicator component will be refactored to use the new Canvas CSS tokens and styling utilities. Status Indicator will now support the cs prop, but the API will remain unchanged, preserving its behavior and functionality.

However, small visual changes will be made as a result of refactoring Status Indicator to use the new color system tokens. These visual changes will align more closely with what’s available in Figma.

As part of the refactoring work, the following models will be removed in favor of stencil:

• useStatusIndicatorModel
• useStatusIndicator
• statusIndicatorColor
• useStatusIndicatorIcon

Developers may need to update their visual tests as a result of these changes. An upgrade guide will be provided for v11 to help developers uptake these changes.

This update will not impact designers

Button Token Updates

With the introduction of system color tokens in v11, Canvas buttons will be updated to utilize system color tokens where applicable. Small bug fixes will also be made to ensure alignment between design and code, which will result in small visual changes.

Developers may need to update their visual tests as a result of these changes. An upgrade guide will be provided for v11 to help developers uptake these changes.

This update will not impact designers.

Checkbox Refactor

The Checkbox component will be refactored to use the new Canvas CSS tokens and styling utilities. Checkbox will now support the cs prop, but the API will remain unchanged, preserving its behavior and functionality.

However, small visual changes will be made as a result of refactoring Checkbox to use the new color system tokens. These visual changes will align more closely with what’s available in Figma.

Developers may need to update their visual tests as a result of these changes. An upgrade guide will be provided for v11 to help developers uptake these changes.

This update will not impact designers.

Radio (Preview) Refactor

The Radio component in Preview will be refactored to use the new Canvas CSS tokens and styling utilities. Radio will now support the cs prop, but the API will remain unchanged, preserving its behavior and functionality.

However, small visual changes will be made as a result of refactoring Radio to use the new color system tokens. These visual changes will align more closely with what’s available in Figma. Additionally, a new inverse focus ring variant has been added to Figma to align with what’s available in code

Developers may need to update their visual tests as a result of these changes. An upgrade guide will be provided for v11 to help developers uptake these changes.

This update will not impact designers.

Switch Refactor

The Switch component will be refactored to use the new Canvas CSS tokens and styling utilities. Switch will now support the cs prop, but the API will remain unchanged, preserving its behavior and functionality.

However, small visual changes will be made as a result of refactoring Switch to use the new color system tokens. These visual changes will align more closely with what’s available in Figma.

Developers may need to update their visual tests as a result of these changes. An upgrade guide will be provided for v11 to help developers uptake these changes.

This update will not impact designers.

Card Refactor

The Card component will be refactored to use the new Canvas CSS tokens and styling utilities. Card will now support the cs prop, but the API will remain unchanged, preserving its behavior and functionality.

This update will not impact developers or designers.

Select Refactor

The Select component will be refactored to use the new Canvas CSS tokens and styling utilities. The component will support the cs prop, but otherwise the API will remain unchanged. It will behave identically as it did in previous versions.

This update will not impact developers or designers.

Count Badge Refactor

The Count Badge component will be refactored to use the new Canvas CSS tokens and styling utilities. The component will support the cs prop, but otherwise the API will remain unchanged. It will behave identically as it did in previous versions.

This update will not impact developers or designers.

Component Deprecations

The following components will be deprecated as part of the v11 release:

• Text Input from Preview
• Text Area from Preview
• Form Field from Main
• LabelText from Main

These components will still be available for use in Canvas v11, but deprecation warnings will appear in the code editor when they are in use.

Developers using the deprecated Text Input (Preview), Text Area (Preview), and FormField (Main) components should replace them with the updated Form Field component in Preview, which can now perform the same functionalities as these deprecated components. Teams using LabelText should switch to use the parent Text component or FormField.Label from the Preview package (if using in the context of a form element), which serves the same functionality as LabelText.

This update will not impact designers.

April 2024 Design Asset Release

The April 2024 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 includes new system icons and bug fixes.

The following new and updated assets are now available:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.22)
  • A new wd-icon-translated-actuals.svg icon (translatedActualsIcon when using SystemIcon)
  • An updated wd-icon-instance.svg icon (instanceIcon when using SystemIcon) with 2px stroke for consistency
  • An updated wd-icon-box-text-search.svg icon (boxTextSearchIcon when using SystemIcon) to make the magnifying glass more distinct
  • An updated wd-icon-chevron-hierarchy-closed.svg icon (chevronHierarchyClosedIcon when using SystemIcon) to unfill the circle elenent

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 with minimal impact to their existing designs.

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

April 2024 Figma Library Bug Fixes

The Canvas Web v10 Figma library was updated on April 10th, 2024 with the following bug fixes:

• Extra borders accidentally added to Tooltip and Dialog in v10 have been removed
• The frame for Toast has been updated to clip content in order to correctly display drop shadow and prevent the corner edges of the frame from showing

This bug fix will not impact existing designs and will not be rolled out to previous versions of the Canvas Web Figma library. To uptake these bug fixes, please accept the updates in your Figma files.

March 2024 Design Asset Release

The March Design Assets release is now available

This release contains a fix to the responsive behavior of Empty States in the Canvas Assets Figma library. The fix ensures that the aspect ratios of Empty States will be maintained if they are resized. Designs using Empty States that were resized using Figma’s scale tool will not be impacted by this update. However, Empty States resized through the shift and drag method may be altered with this bug fix.

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

February 2024 Design Asset Release

The February 2024 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 includes new system icons, bug fixes, and an icon removal.

The following new assets are now available:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.21)
  • A new wd-icon-chevron-hierarchy-closed.svg icon (chevronHierarchyClosedIcon when using SystemIcon)
  • A new wd-icon-chevron-hierarchy-open.svg icon (chevronHierarchyOpenIcon when using SystemIcon)
  • A new wd-icon-hierarchy-child.svg icon (hierarchyChildIcon when using SystemIcon)
  • A new wd-icon-hierarchy-diagonal-parent-child.svg icon (hierarchyDiagonalParentChildIcon when using SystemIcon)
  • A new wd-icon-hierarchy-diagonal-parent-child-child.svg icon (hierarchyDiagonalParentChildChildIcon when using SystemIcon)
  • A new wd-icon-hierarchy-diagonal-parent.svg icon (hierarchyDiagonalParentIcon when using SystemIcon)
  • A new wd-icon-fan-chart.svg icon (fanChartIcon when using SystemIcon)

The following icon will be removed:

• setting Applet icon in the Canvas Assets Figma library. This icon was accidentally released in Figma, but has not been available in code.

The following bug fixes were applied part of this release:

• System Icons (upgrade @workday/canvas-system-icons-web to 3.0.20)
  • Fixed alignment and added in accent and background layers for wd-icon-hierarchy.svg (hierarchyIcon when using SystemIcon)
  • Fixed alignment and added in accent and background layers for wd-icon-hierarchy-full.svg (hierarchyFullIcon when using SystemIcon)
  • Added accent and background layers to wd-icon-hierarchy-parent-child.svg (hierarchyParentChildIcon when using SystemIcon)
  • Added accent and background layers to wd-icon-hierarchy-parent.svg (hierarchyParentIcon when using SystemIcon)
  • Added accent and background layers to wd-icon-hierarchy-right-full.svg (hierarchyRightFullIcon when using SystemIcon)
• Improved responsive behavior for all Applet icons in the Canvas Assets Figma library to ensure that their aspect ratios are maintained when being resized. Designs using icons that were resized using Figma’s scale tool will not be impacted by this update. However, icons resized through the shift and drag method may be altered with this bug fix.

This release will not impact developers, and designers can upgrade to the latest version of the Canvas Asset Figma library with minimal impacts to their existing designs. For more information or to access these new icons in this update, please reference the Design Asset repo.

Canvas Mobile Q4 Release

The Canvas Mobile Q4 release will be available on February 14th, 2024. This release includes new components and enhancements as well as documentation and site updates.

Change	Short Description	Designer Impact	Developer Impact
New Components	New components being added to the Canvas Mobile Figma beta library include: Top App Bar, Top Sheet, Carousel.	None	None
Component Enhancements	Enhancements to existing components being added into the Canvas Mobile library include: filter capabilities for Pills, selection states for Menu, dividers for Expandable, and a reorganized text hierarchy.	None	None
Updated Documentation	Updated documentation will be released for List Item.	None	None
Taxonomy Changes	A number of mobile patterns are being reclassified as components: Read Only, Prompt, BP Conclusion, Progressive Grid.	None	None

New Mobile Components

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

• Top App Bar: An app bar that orients titles, global navigation, and local page actions as well as additional functionalities such as search, banners, and selection mode at the top of full screen views.
• Top Sheet: A popup emerging from the Top App Bar that contains a scoped task related to the parent screen.
• Carousel: A layout that enables horizontal navigation to view overflowing content placed inside the component.

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

• Hyperlink (Android): A button for external redirection outside of the app.

These updates will not impact designers or developers, as they are net-new components.

Mobile Component Enhancements

The following component enhancements will be available in the Canvas Mobile Figma library:

• Selection States for Menu Added selection states to provide users with improved signposting within menus.
• Filter Pills Added filtering functionality to Pills.
• Expandable Divider property added in.
• Text Separated into levels of hierarchy.

These updates will not impact designers or developers, as they are net new variations to existing components or changes in underlying organization.

Updated Documentation

Documentation will be available for all the new components and enhancements released into the Canvas Mobile Figma Library as part of this update. Components released into the Canvas Mobile Figma beta Library will not be accompanied with documentation until the Q1 release. Please check refer to Figma specs or reach out to the designer with questions in the meantime.

Outside of the updates above, mobile documentation on the Canvas Design System site has been updated for List Item. This update will not impact designers or developers, as it is specific to Canvas documentation.

Taxonomy Changes

Read Only, Prompt, BP Conclusion, Progressive Grid have been reclassified in their taxonomy from patterns to components. This update will not impact designers or developers, as it is specific to Canvas documentation.

Canvas AI Elements Release

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

Coming soon…

Previous Releases

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