Announcements

Announcements for Canvas updates, bug fixes, and new releases.

Canvas Kit v7 Release

Canvas Kit v7 will be released on May 18th, 2022. 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 users 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 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
ChangeShort DescriptionDeveloper Impact
Emotion 11, React 17, Typescript 4.1 UpgradeUpgrading to Emotion 11 and React 17 as part of v7High
Depth Token UpgradesAll depth tokens will include a second shadow along with minor changes to the opacity and length/size of the shadowLow
Icon Button Deprecation & ConsolidationIcon Buttons will be deprecated and replaced with icon only Primary, Secondary, and Tertiary button variantsHigh
Page Header, Main Header, and Cookie Banner Hard DeprecationSoft deprecation of Page Header, Main Header, and Cookie Banner from v6 will be hard deprecated in v7, with no further access in Canvas KitHigh
Built-in Tooltip for Side PanelThe Side Panel component will now have a tooltip component built directly into it for accessibilityMedium
Built-in Overflow Behavior for Action BarThe Action Bar component will have overflow behavior built into itMedium
New Multidimensional and Hierarchical CollectionNew Menu component will be added to main package along with Multidimensional and Hierarchical CollectionMedium
New Pills ComponentA new Pills component will be released in v7 that can be used to display short labelsNone
New External Hyperlink ComponentA 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 domainNone
Max Width Increase for Status IndicatorMax width for the Status Indicator component will be increased to 200px from the original 150px to avoid truncated textNone
Compound Component ConversionBanner 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
WebView TabsTabs will be enhanced to support mobile behavior based on modality as a minor release (after May 18th, 2022)None
Component PromotionBox, Flex, and Stack will become part of the Main package in v7None

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.

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 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.

All other changes will be reflected automatically once users 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 The mapping of Icon Buttons to icon only Secondary and Tertiary button variants. Circle Icon Buttons will map to Tertiary icon only variants, Circle-Filled Icon Buttons will map to Secondary icon only variants, Inverse Icon Buttons will map to Tertiary Inverse icon only variants, and Inverse-Filled Icon Buttons will map to Secondary Inverse icon only variants. Plain, Square, and Square-Filled Icon Buttons will no longer be supported.

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

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 Toggle prop will need to implement a workaround, but more information will be provided in our v7 usage guide to help developers create togglable icon only buttons
  • The dataLabel prop will need to manually add a styled span to their code to replicate the data Primary and Primary Inverse button variants

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.

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.

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.

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.

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.

No action will be required for developers to uptake this change in v7, but documentation will be available on the Canvas Design System site to help teams utilize Pills.

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.

No action will be required for 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.

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)

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.

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

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

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section