Announcements for Canvas updates, bug fixes, and new releases.
Canvas Kit 9.1.0 is now available!
Radio Compound Component The Radio compound component is finally here! Teams using Radio in Main should start switching over to the new Radio compound component in Preview, which will give teams more control over individual sub-components within Radio.
CSS Scroll Attributes for Box, Flex, & Grid New CSS scroll attributes have been added to Box, Flex, and Grid to enable product teams to configure Layout components with CSS.
Status Indicator Deprecation The Status Indicator component in Main has been deprecated. Teams using the Status Indicator in Main should switch over to the updated Status Indicator component in the Preview package, which has been updated to improve globalization and accessibility! The Status Indicator in Main is still available for use, but it will be removed in v11 (April 2024).
This update will not impact developers. To access these changes, please upgrade to Canvas Kit 9.1.0.
Canvas Kit v9 will be released on May 10th, 2023. An upgrade guide will be available once v8 goes live to assist product teams with their migration to the newest version of Canvas Kit.
|Change||Short Description||Developer Impact|
|Canvas Design System Site Versioning||Versioning will be available for documentation on the Canvas Design System site, corresponding to each major Canvas release||None|
|Depth Token Modifications||Depth tokens will be modified to reduce the harshness/contrast of depth against backgrounds||None|
|Table Refactoring||A new Table component will be released in the Preview package with increased flexibility and updated styling||None|
|New Combobox Sub-system||A new Combobox sub-system will be released to help developers build components and features with Combobox like autocomplete and Select||None|
|Layout Component Removal||The Layout component will be removed||Medium|
|Drawer Component Removal||The Drawer component in the Labs package will be removed||Medium|
|Stack Component Removals||The Stack, VStack, HStack components will all be removed||Low|
|Default Button Type Modifications||The default button type for all Canvas buttons will be updated from ||Medium|
|A fix will be implemented to prevent ||Low|
|Canvas Kit’s TS Compiler Target Updates||The TS compiler target will be updated from ES5 to ES2019. This will significantly decrease the Canvas Kit bundle size||None|
|Toast Component Promotion||The Toast component in the Labs package will be promoted to the Main package, replacing the current Toast component in Main||None|
|Enhanced QA & Testing Processes||Additional tests will be added to expand testing across different screen sizes and modality as well as expand visual regression testing||None|
Depth tokens will be updated to retract the changes made in Canvas v7, which introduced darker depth values that resulted in a higher contrast against light colored backgrounds. The depth values will not be reverted to pre-Canvas v7 levels, but they will be modified to reduce the visual impact of depth.
Only the values of Canvas depth tokens will be modified as part of this update. Canvas components will continue to use the default depth level they are currently tagged to for the time being.
This update will be applied automatically once developers upgrade to Canvas Kit v9.
A new styled Table component will be available in the Preview package. This Table component will be a more modernized and flexible version of the current Table component. The Canvas Table will contain the basic features needed for Tables such as:
- Displaying data in a row/column format
- Differentiated row header
- Customizable column width
- Customizable horizontal and vertical borders
This update will not impact developers as it will be released as a net-new Table component. However, it is recommended that teams switch over to this new Table component. It will be up to product teams to add additional functionalities like tooltips, truncated text, etc. and to get them reviewed and approved by accessibility.
A new Combobox sub-system will be created to help developers build components and features using Combobox, like autocomplete and Select. This new Combobox will be released into the Main package. Deprecation warnings will be added to the current Combobox component in Labs, but will not be removed in this release. Other Canvas components that are currently using the Combobox in Labs, like Search Form, will continue to do so in v9.
This update will not impact developers. However, developers should start migrating to the new Combobox component in Main once it is released in v9.
The Layout component will be removed from Canvas Kit to reduce maintenance costs and minimize the confusion around the various types of Layout components. It will no longer be available for use in Canvas v9.
Developers using the Layout component should switch over to the Grid component, which will fulfill the same functionality as Layout. The original Layout examples have been recreated using the Grid component to help developers transition off of the Layout component.
The Drawer component will be removed from Canvas Kit to reduce maintenance costs and minimize the confusion around other similar components, like Side Panel. It will no longer be available for use in Canvas v9.
Developers using the Drawer component should switch over to the Side Panel component in the Preview package, which will fulfill the same functionality as Drawer.
The Stack, HStack and VStack components will be removed from Canvas Kit to reduce maintenance costs and minimize the confusion around the various types of Layout components. These Stack components will no longer be available to use in Canvas Kit v9.
Developers should switch over to using Flex instead, which will have the same functionality as Stack, HStack, and VStack. A codemod will be available to help developers migrate to Flex. However, teams using StackProps for custom components will also need to switch out the spacing prop for the gap prop in code.
The default type attribute for Canvas buttons will be updated from
type="button" to prevent forms from accidentally being submitted when using buttons inside a form
element. This change will be applied to the following Canvas buttons:
- Primary Button
- Secondary Button
- Tertiary Button
- Delete Button
- Toolbar Button
Developers that want to continue to use
type="submit" will need to manually make this adjustment.
useTheme hook will be updated to generate an error when used outside of a hook. This error has
been hidden in the past, which resulted in teams incorrectly using the
Developers using the
useTheme hook in a regular function will need to switch it out with the
useThemedRing hook will be promoted from the Labs package to Main to prevent bi-directional
dependencies between the Main package and other packages like Labs and Preview.
A codemod will be available to help developers handle the migration to the Main package.
useThemeRTL will be deprecated from Canvas Kit as it is no longer necessary with the
introduction of logical CSS properties. This hook will still be available for use in Canvas v9, but
deprecation warnings will appear when it is in use.
Developers should start replacing this hook with logical CSS properties as it will be removed from Canvas Kit in the near future.
The utility functions
getCanvasTheme will be removed in favor of
getTheme, respectively. These functions were only intended for internal use and were
getTheme. They are being removed to get rid of unnecessary
Developers using these functions will need to update the name of the function.
The TypeScript compiler target for Canvas Kit will be updated from ES5 to ES2019. All modern browsers support ES2019, so this update will significantly reduce the Canvas Kit bundle size.
This will not impact designers or developers. However, developers should still confirm that tests are still passing and that their application is still compiling properly.
The Toast compound component in the Labs package will be promoted to the Main package to replace the current Toast component in Main and reduce the number of duplicative components in Canvas Kit.
A codemod will be available to help developers handle the migration to the Main package.
The Canvas QA and testing processes will be enhanced and utilized in the Canvas v9 release. This will include:
- Adding visual test for different container widths to Action Bar and Breadcrumbs
- Adding all Cypress tests to Action Bar
- Adding Cypress tests for different container widths to Breadcrumbs
- Adding Cypress tests for touch modality to Tabs and Modal
- Adding visual tests for mobile screen to Tabs and Modal
- Adding visual tests for the overflow Tabs variant
This update will not impact developers.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.FAQ Section