Canvas v12 Announcements

Canvas v12.6 Release

Canvas v12.6 is now available in Canvas Kit React and CSS!

Add parts property on createStencil

A parts API has been added to Stencils. A part is similar to the WebComponent spec for ::part() where a semantic component may contain sub-elements needed for proper styling. The component parts API adds a style hook for these style elements.

Illustrations Restyled For Product, New System Icons Released

Today, Canvas is reintroducing Workday’s product illustrations. Now, with new improvements for product usage across web and mobile, product teams can apply these illustrations to their feature designs and development without issue. These illustrations come with a more simplified style, reduction in size, and a new format, WebP, for the product across all platforms, while maintaining the integrity of Workday’s new visual style.

Our hope is that these revised illustrations will be more easily consumable for teams to add to their development. Please continue to deprecate all Fausto illustrations as Workday is required to contractually comply with our 3rd-party illustrator licensing agreement.

All illustrations are now available for use; teams are expected to retrieve the illustration packages and uptake them in development by July 1, 2025 - deadline for 25R2 feature complete.

For support, please post your questions or comments in the #ask-canvas-design-assets channel.

New Updates on Canvas Site

The Canvas site has undergone a refresh to deprecate Fausto imagery. Several pages have been updated to align with the new direction of imagery usage. Although some internal images may temporarily still include Fausto, the Canvas team is actively updating all images. All Fausto images accessible to external users have been removed.

New AI System Icons

With this release also comes two new system icons for Workday Assistant. Both icons highlight AI functionality and are now available in the Canvas Assets Figma library. To use these icons, please upgrade to the latest package @workday/canvas-system-icons-web@3.0.32:

Canvas v12.5 Release

Canvas v12.5 is now available across all Canvas artifacts!

This release includes a new BaseTable component, URL support for the Canvas Graphic component, improved component styling support for high contrast themes, and new motion guidelines! These changes will not impact developers or designers.

New BaseTable Component

A new BaseTable component is now available in Canvas Kit. This component is the new base component for the current Table component in Main and will have the same styling applied to it, but it will not utilize CSS Grid features. Developers should use the BaseTable component if they want a standard HTML Table with no CSS Grid features. If a developer requires more flexibility with their Table, they should opt for the Table in Main over BaseTable.

URL Support for Graphic Component

The Graphic component will now render an image element and adds support for URLs.

Improved Component Styling Support for High Contrast Themes

To fix focus states and container borders on Windows 11 high contrast desktop themes, several components have been updated to use CSS outline. The list of components include: MenuItem, BaseButton, ModalCard, Radio, TextInput, TooltipContainer, Banner, SystemIcon, SidePanel, LoadingDots, LoadingSparkles, StatusIndicator, Skeleton, TabsItem, and InformationHighlight. This update will improve the user experience for high contrast themes without impacting developers or existing designs.

New Motion Guidelines

We’re excited to announce the release of our updated Motion Guidelines! These guidelines provide a foundational framework for incorporating animation effectively and consistently with industry standards. This update was driven by the need for more detailed guidance to empower designers and developers in creating cohesive and user-friendly motion design.

We’re excited to announce the release of our updated Motion Guidelines! These guidelines provide a foundational framework for incorporating animation effectively and consistently with industry standards. This update was driven by the need for more detailed guidance to empower designers and developers in creating cohesive and user-friendly motion design.

Our new approach provides a clear foundation for motion in Canvas, outlining best practices for easing, durations, transitions, and accessibility. We aim to strike a balance between providing a standardized framework and allowing for flexibility and creativity in design. These guidelines offer a common language and a set of simple best practices to ensure that motion enhances the user experience without compromising performance or accessibility.

This update provides product teams with the resources and guidance they need to create more intuitive and engaging experiences. While we encourage teams to leverage these new resources for future development when motion is necessary, there is no immediate expectation for existing components and widgets to be updated or, for new motion design to be added. Our primary goal is to establish a clear and consistent approach to motion design through Canvas, fostering a more cohesive and enjoyable user experience.

February 2025 Design Asset Release

Now available - the February Design Asset Release. In this release you’ll have access to a new third-party icon, WhatsApp. Designers may access it in the Canvas Assets Figma library. Developers can access it via npm, Artifactory, or SAS (in all environments).

Please upgrade to the latest version of the Canvas Asset Figma Library; there will be no impact to existing designs or development with this release.

New Third-Party System Icon

To use the WhatsApp icon, please upgrade to the latest package: @workday/third-party-icons-web@1.1.5.

Canvas v12.4 Release

Canvas v12.4 is now available in Canvas Kit React and CSS!

This release includes a new description Tooltip variant and several utility deprecations.

New description Tooltip Variant

A new description Tooltip variant is now available. This new variant will replace describe, which has also been deprecated. This update increases the accessibility of Tooltip as description will enable VoiceOver to describe the element, regardless of whether the tooltip is open or not. This update will not impact developers, but teams using describe should swap over to using the new description Tooltip variant.

hideMouseFocus and mouseFocusBehavior Deprecation

The hideMouseFocus and mouseFocusBehavior utility functions will be deprecated now that IE11 is no longer being supported. hideMouseFocus and mouseFocusBehavior will still be available for use during this time but will be removed at a later date. This update will not impact developers, but teams should switch over to using focus-visible to apply the correct focus styles to elements.

Canvas v12.3 Release

Canvas v12.3 is now available in Canvas Kit React, Canvas Kit CSS, and the Canvas Web v12 Figma library!

This release includes a new Information Highlight component. Also Primary Button has been updated to use our new brand action tokens.

New Information Highlight Component

A new Information Highlight component is now available in design and code. This component can be used to draw the user’s attention to important information on the page.

This update will not impact designers or developers as this is a net-new component.

New Brand Action Tokens & Updated Primary Buttons

New brand action tokens are now available for use. These new brand tokens will utilize a secondary Action tenant branding color instead of the standard tenant branding color. Primary Buttons have been updated to use the new brand action tokens, but all other components will continue to use the standard brand tokens for the time being.

These changes will not impact designers or developers, but Primary Buttons will begin adopting the secondary Action tenant branding color selection automatically.

New Workday Dub & Logo Assets

New Dub and logo assets reflecting Workday’s new brand identity are now available across all Canvas artifacts! This update includes four new variations of dubs and logos assets and three updated icons.

New Dubs & Logos

These new assets are now all available in the Canvas Assets Figma Library, Canvas Kit React v11.2.0, Canvas Kit React v12.2.0, and a series of new public URLs.

Teams pulling Workday’s Dubs and logos from Canvas Kit React should upgrade to v11.2.0 and v12.2.0, where the updated Dubs and logos are available within the Preview package. The old Dubs and logos are still available, but they will be removed as part of v13 (April 23rd, 2025) and the new Dubs and logos will be promoted to Main.

Redirects will be applied to the design.workday.com reference URLs on April 23rd, 2025 to automatically direct users to the new public URLs listed above, but these redirects will only last until October 29th, 2025. Product teams utilizing reference URLs from design.workday.com (ex: Dub blue) should migrate over to the new public reference URLs.

Updated Icons

Icons containing the Workday dub have also been updated and are now available in @workday/canvas-accent-icons-web@3.0.15 and @workday/third-party-icons-web@1.1.4 across all environments:

• wd-workday-assistant (workdayAssistantIcon)
• wd-workday (workdayIcon)
• wd-workday-circle (workdayCircleIcon)

January 2025 Design Asset Release

This month we are releasing one asset in our January Canvas Design Asset release. Available now for designers, who can access the new asset through the Canvas Assets Figma library, and developers, who can access it on npm, Artifactory, or SAS (in all environments). In this release, one new accent icon is available for use in your development; there are now impacts to designers or developers. Designers, please upgrade to the latest version of the Canvas Asset Figma library to access the latest release.

New Accent Icon for Onboarding

To use this icon in your design and development, please upgrade to the latest package: @workday/canvas-accent-icons-web@3.0.15.

December 2024 Design Asset Release

The December Design Asset Release is out now! Designers can access these new assets through the Canvas Assets Figma library, and developers can access them on npm, Artifactory, or SAS (in all environments). In our December release, four new system icons and seven updated system icons with added background layers are available.

Designers will need to upgrade to the latest version of the Canvas Asset Figma library to begin using the newest additions; no impact to existing designs. Developers will not be impacted by this release.

New & Updated System Icons

To apply these icons to your design and development, please upgrade to @workday/canvas-system-icons-web@3.0.31.

Canvas Mobile 2024 Q3 Release

The Canvas Mobile Q3 release has dropped and is now available. This release includes long-awaited components and updated design guidance for QuickTips, Top App Bar, Page Header, Currency Input, and more. Check out what’s available now in Canvas for Mobile!

Release Overview

View the highlights in the table below; this is what’s accessible in the Q3 release. There is no retroactive impact for developers and designers. And, if you have questions or need support visit #mobile-canvas-components channel.

New Mobile Components

The following components are available now in the Canvas Mobile Figma Libraries.

• TourTips: Popups that succinctly educate users about functionality; currently available in Canvas Mobile Beta Figma Library.
• Errors: Configurable full page and bottom sheet screens for displaying system errors. Coming soon - new illustrations from visual refresh in the component in code and documentation.
• Phone Number Input: Insert phone numbers and country codes; pre-formatted for your convenience.
• Currency Input: Insert and format data referencing money. Select currency type.
• Page Header: Provide additional signposting to indicate where users are located in a page.
• Top App Bar: Display titles and actions at the top of pages alongside a subtitle.
• Expandable: Display subtitles and badges in this collapsible container used to display and hide content.
• Status Indicators: Tag auto-generated content with the new AI state for Status Indicators.

New User Guidance

Check out new and updated documentation for Expandable and Top App Bar. As best practice, designers are encouraged to apply the guidance when using these components for optimal design development and user experiences.

Canvas Kit 12.1.0 Release

Canvas 12.1.0 is now available with several enhancements to the Collection system and Loading Dots! These updates are not breaking changes and will not impact developers.

Removal Support for the Collection System

The collection system now supports the removal of items from a list, which will flow down to MuiltiSelect and enable users to remove items from the selected pill list using the “Delete” key.

Vertical Overflow Support for the Collection System

Vertical overflow support has been added to the Collection system, building upon the current horizontal overflow support capabilities. With this enhancement, the *Width events and state will be deprecated and users should opt to use the *Size methods instead.

Loading Dots Enhancements

The following enhancements have been made to Loading Dots:

• New loadingDotColor prop that enables developers to change the color of the loading dots and can be overridden with a stencil. A new custom color example has been added to Storybook to demonstrate the use of this prop.
• New animationDurationMs prop that enables developers to adjust the animation duration of loading dots. A new custom animation example has been added to Storybook to demonstrate the use of this prop.
• New Storybook custom shape example that leverages the cs prop to change the shape in which the loading dots are placed in as well as the new loadingDotColor prop to change the loading dot colors to make it more suitable for dark backgrounds or images.

October 2024 Design Asset Release

The October Design Asset Release is now available. Designers can access these new assets through the Canvas Assets Figma library, and developers can access them on npm, Artifactory, or SAS (in all environments). This release includes one new system icon and two updated system icons which were modified to include background layers.

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

New & Updated System Icons

We released one new system icon, filterxIcon icon and two updated system icons with background layers. To use these icons, please upgrade to @workday/canvas-system-icons-web@3.0.30.

New Workday Illustrations

Workday Forever Forward outlook is leading Workday’s product to soar to new heights. As a result, Workday will receive a refreshed UI with new product illustrations replacing the existing Fausto illustrations. This means we’ll part ways with our 3rd-party supplier of Workday product design illustrations and move the shop in-house to contractually comply with our licensing agreement.

All new illustrations will be available beginning October 30, 2024. They will be accessible in SAS and Artifactory until January 24, 2025 prior to the start of the customer 25R1 preview window. All teams are expected to test and uptake these new illustrations before January 24, 2025.

Teams can now preview the latest illustrations and required actions of product teams to ingest illustrations into development. We expect all product teams to retrieve the illustration packages and update them in development prior to 25R1.

We’re thrilled about what’s on the horizon for Workday! For immediae help, post your questions or comments in the canvas-design-assets Slack channel where the Canvas team will offer support as you replace Fausto illustrations with the newly released illustrations.

Canvas v12 Release

Canvas v12 will be released on October 16th, 2024 with updates to Canvas Kit and the Canvas Figma libraries. An upgrade guide will be available once v12 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 v12 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 v12 and/or switch to the new v12 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

Avatar Refactor

Avatar will be refactored to use the new Canvas CSS tokens and styling utilities. This update will allow Avatar to support the cs prop.

As part of this refactoring work:

• Avatar.Size will be deprecated and removed in a future major release. The size prop still accepts Avatar.Size in addition to the following values: “extralExtraLarge”, “extralLarge”, “large”, “medium”, “small” and “extraSmall”.
• Avatar.Variant will be deprecated and removed in a future major release. The variant prop still accepts Avatar.Variant in addition to the following values: “light” and “dark”.
• The as prop will now accept any element, not just div.

If the Avatar.Size and Avatar.Variant type are being used, a warning message will appear in the console with a suggestion to swap them out with the new string literals that have been added to the size and variant props. These changes aim to align more closely with existing types and remove the usage of enums types.

Developers using the Avatar.Size and Avatar.Variant type should swap over to using the new string literals

This update will not impact designers.

Webpack, Storybook, Typescript and Cypress Upgrades

Infrastructure updates to improve the security of the Canvas package will be made to several Canvas Kit dependencies in v12. The following dependencies will be updated to the versions indicated:

• Webpack v5
• Storybook v7
• Typescript v4.9
• Cypress v13

With this update, the current “Canvas” and “Docs” tabs for each component in Storybook will be combined into a single “Docs” folder and page that contains the component examples and docs. Examples will not be removed as part of this work, but will be reorganized into this new folder structure.

Teams may encounter some formatting issues with running Canvas codemods as a result of these infrastructure updates. Developers should run a formatter to address the format issues.

This update is developer specific and will not impact designers.

Text Area Refactor & Enum Clean-Up

Text Area will be refactored to use the new Canvas CSS tokens and styling utilities. This update will allow Text Input to support the cs prop. In an effort to move away from enums, TextAreaResizeDirection will also be updated to no longer be an enum.

This update should not impact developers unless TextAreaResizeDirection is being used as a type. Teams using TextAreaResizeDirection as a type should create a new ValueOf type similar to the example below.

// v11
interface MyProps {
  resize?: TextAreaResizeDirection;
}
 
// 12
type ValueOf<T> = T[keyof T];
interface MyProps {
  resize?: ValueOf<typeof TextAreaResizeDirection>;
}

This update will not impact designers.

FormField (Preview) Forms Framework Enhancements & Promotion

The FormField component in the Preview package will be promoted to the Main package, replacing the current FormField component in Main.

With this promotion, the following enhancements will also be made to FormField:

• The orientation prop on the FormField component will be updated to accept the following values: “vertical”, “horizontalStart”, and “horizontalEnd”. “Horizontal” will still be accepted as a value in v12, but it will be deprecated and slated for removal in a future major release. These changes are intended to provide more flexibility with label alignments on FormField elements.
• A new FormFieldGroup component will be available to help associate grouped checkboxes and radio buttons with one another. These changes are intended to provide better guided components when building accessible forms.
• A new FormField.Field sub-component will also be added to FormField to ensure proper label alignment regardless of the value of the orientation prop on FormField. With this update, the FormFieldContainer will be deprecated in favor of FormField.Field.
• All Canvas components using Form Field will now support start / end (left / right) label alignment.

New documentation examples have been added to showcase how to change the display of the label.

For developers:

• Instances where the orientation prop of the FormField component is set to “horizontal” will automatically default to “horizontalStart” via a codemod. A console warning message will also appear with a message to change the prop value to either “horizontalStart” or “horizontalEnd”.
• Teams using inputs like RadioGroup or a group of checkboxes should swap over to use the new FormFieldGroup component, which will remove the need for using the as prop on FormField.
• Teams using FormFieldContainer should swap over to the new FormField.Field sub-component, which will ensure proper accessibility support for grouped inputs and correct label alignment regardless of orientation.

This update is developer specific and will not impact designers.

InputIconContainer Removal

The InputIconContainer component will be removed from Main. InputIconContainer was deprecated in an earlier major release due to its inability to handle bidirectionality support or icons at the start of an input.

Developers using InputIconContainer should opt to use InputGroup from Main instead, which will handle the same functionality as InputIconContainer but with additional bidirectionality support.

This update is developer specific and will not impact designers.

Removal of Forced Compatibility Mode

Forced compatibility mode for style merging will be removed. This change will address the style merge issues associated with having forced compatibility mode.

There is no expected impact for developers at this time, but Canvas will monitor the potential impact of this change as teams start to uptake v12.

This update is developer specific and will not impact designers.

New Multi-Select Component

A new Multi-Select component will be available with the v12 release. The Multi-Select component is similar to the existing Select component, but it allows users to choose multiple options from a list of menu items.

Since this is a net-new component, no action will be required to uptake this change for developers or designers.

Menu Hierarchy Support and Selected State Enhancement

The Menu component in Main will be updated to:

• Support a hierarchical relationship between menu items.
• Display a checkmark icon for selected menu items to improve accessibility by increasing the visual distinction between a selected and non-selected state.

A new boolean prop will be introduced to control when an item is selectable (checkmark icon will be visible) or non-selectable (checkmark icon will not be visible). The boolean should be set to false when clicking on a menu item will trigger an action instead of selecting the menu item. This prop will be set to false for a regular Menu.Item, but will be set to true for Combobox, Multi-Select, and Select as the menu items in these components are always meant to be selectable. These enhancements will be available for all menus, including those implemented in the Select and Multi-Select components.

The checkmark icon will be visible if selection is enabled and may cause some visual tests to fail. However, these enhancements will not be a breaking change for developers.

The updated selected state design will be applied to the Select and Multi-Select components automatically once designers swap over to the new Canvas Web v12 Figma library. The standalone Menu component will be updated to include the selectable boolean property, which will be set to off by default to prevent breaking changes. Hierarchy support for Menu will be added as a new variant that designers can choose to utilize as needed.

Forms Framework Code Example

Forms Framework provides guard rails to enable product teams to standardize and build consistent forms across Workday’s UI. In order to ensure parity with the properties that Forms Framework provides, a new example will be released to help developers match the look and feel of the Forms Framework using Canvas input components. This will allow bespoke teams to achieve the Forms Framework designs through the use of custom styling.

This impact will not impact developers or designers.

Popup, Dialog, Modal, Toast, and Text Input Refactor

The Popup, Dialog, Modal, Toast, and Text Input will be refactored to use the new Canvas CSS tokens and styling utilities that take advantage of Canvas’ new tokens. These support the cs prop, but the API will remain unchanged, preserving its behavior and functionality.

This update will not impact developers or designers.

Select Prop Clean Up

As Canvas transitions over to the new CSS tokens to provide better theming capabilities and a more standardizing method for styling, Canvas will be moving away from components extending Themeable. Themeable has been removed from SelectProps. Product teams looking to theme Select should move over to using the CanvasProvider to do so.

const theme: PartialEmotionCanvasTheme = {
  canvas: {
    palette: {
      common: {
        focusOutline: 'pink',
      },
      primary: {
        main: 'green',
        light: 'lightgreen',
      },
    },
  },
};
 
//...
 
<CanvasProvider theme={theme}>
  <Flex cs={parentContainerStyles}>
    <Select items={options}>
      <FormField>
        <FormField.Label>Contact</FormField.Label>
        <FormField.Input as={Select.Input} onChange={handleChange} />
        <Select.Popper>
          <Select.Card>
            <Select.List>
              {item => {
                return <Select.Item>{item}</Select.Item>;
              }}
            </Select.List>
          </Select.Card>
        </Select.Popper>
      </FormField>
    </Select>
    Selected Value: {value}
  </Flex>
</CanvasProvider>;