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
andPopup.Body
was 16px instead of 24px as specified in the design spec. Popup.Card
caused spacing issues whenPopup.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 has8px
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 still32px
.Popup.Heading
now has8px
of padding to keep it visually aligned with the updatedPopup.Body
. It also now has amarginBottom
of8px
, bringing the default vertical space between the Heading and the Body to24px
(previously16px
) in order to meet the component spec.Popup.Card
’s padding has been reduced by8px
from32px
to24px
to compensate for the padding added toPopup.Body
andPopup.Heading
and to preserve the component's existing spacing. If you've customized the padding for anyPopup, Modal
, orDialog
subcomponents, you may need to adjust your padding values to get the same results after upgrading.Popup.Card
's default component is nowFlex
(previouslyStack
) so thespacing
prop has been removed.Stack
created spacing issues when used with aPopup.CloseIcon
which did not behave as a normalStack
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.
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
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.
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.
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.
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