Canvas v7 Announcements

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

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.

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

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 Release

Canvas Kit 7.3.0 will be released on August 31st, 2022.

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.

To access these changes, please upgrade to Canvas Kit 7.3.0 once it becomes available.

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.

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

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

Change	Short Description	Developer Impact
Emotion 11, React 17, Typescript 4.1 Upgrade	Upgrading to Emotion 11 and React 17 as part of v7	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
Icon Button Deprecation & Consolidation	Icon Buttons will be deprecated and replaced with icon only Primary, Secondary, and Tertiary button variants	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
Built-in Tooltip for Side Panel	The Side Panel component will now have a tooltip component built directly into it for accessibility	Medium
Built-in Overflow Behavior for Action Bar	The Action Bar component will have overflow behavior built into it	Medium
New Multidimensional and Hierarchical Collection	New Menu component will be added to main package along with Multidimensional and Hierarchical Collection	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
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
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
Component Promotion	Box, Flex, and Stack will become part of the Main package in v7	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.

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

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

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.

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.

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.