Canvas v9 Upgrade Guide
Upgrade Overview
The table below contains a high-level overview of the updates that rolled out as part of the v9 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 v9 and/or switch to the new v9 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
| Change | Short Description | Designer Impact | Developer Impact |
|---|---|---|---|
| Canvas Web Figma Library Versioning | Versioning will be available for the Canvas Web Figma library. A new Canvas Web Figma library will be created for each major Canvas release | Low | None |
| Canvas Design System Site Versioning | Versioning will be available for documentation on the Canvas Design System site, corresponding to each major Canvas release | None | None |
| Depth Token Modifications | Depth tokens will be modified to reduce the harshness/contrast of depth against backgrounds | Low | None |
| Table Refactoring | A new Table component will be released in the Preview package with increased flexibility and updated styling | None | 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 | None |
| Modal Figma Updates | The Modal component will be updated in Figma to include an overlay and align with the expected behavior in Canvas Kit | Medium | None |
| New Figma Dialog Component | A new Dialog component will be added to Canvas Web | None | None |
| Segmented Control Figma Updates | The Segmented Control component in the Canvas Web Figma library will be updated to reflect the version available in the Preview package | Medium | None |
| Status Indicator Figma Updates | The Status Indicator component in the Canvas Web Figma library will be updated to reflect the version available in the Preview package | Low | None |
| Switch Refactoring and Consolidation Figma Updates | The Switch component will be refactored and consolidated into a single Switch component with variants | Medium | None |
| Radio Variant Figma Consolidation | The Radio component will be updated in the Canvas Web Figma library to consolidate the number of variants available | None | None |
| Checkbox Variant Figma Consolidation | The Checkbox component will be updated in the Canvas Web Figma library to consolidate the number of variants available | None | None |
| Delete Button Figma Updates | Updated to be structurally consistent to other Buttons (Primary, Secondary, and Tertiary) | None | None |
| Layout Component Removal | The Layout component will be removed | None | Medium |
| Drawer Component Removal | The Drawer component in the Labs package will be removed | None | Medium |
| Stack Component Removals | The Stack, VStack, HStack components will all be removed | None | Low |
| Default Button Type Modifications | The default button type for all Canvas buttons will be updated from submit to button | None | Medium |
useTheme Updates | A fix will be implemented to prevent useTheme hook from generating an error when the styled function is used without a predefined theme | None | Low |
useThemedRing Promotion | The useThemedRing hook will be promoted to the Main package | None | None |
useThemeRTL Deprecation | The useThemeRTL hook will be deprecated in Canvas v9, but will still be available for use | None | None |
useCanvasTheme and getCanvasTheme Removal | useCanvasTheme and getCanvasTheme will removed in favor of useTheme and getTheme, respectively | None | 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 | 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 | 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 | None |
For a deeper look into the v9 upgrade, check out the guides on the For Developers or For Designers tabs.
This guide contains an overview of the changes in Canvas Kit v9. Please reach out if you have any questions.
- Codemod
- New Components
- Updated Terms
- Removals
- Deprecations
- Token Updates
- Component Updates
- Utility Updates
- Glossary
Codemod
We’ve provided a codemod to automatically update your code to work with most of the breaking changes in v9. Breaking changes handled by the codemod are marked with 🤖 in the Upgrade Guide.
A codemod is a script that makes programmatic transformations on your codebase by traversing the AST, identifying patterns, and making prescribed changes. This greatly decreases opportunities for error and reduces the number of manual updates, which allows you to focus on changes that need your attention. We highly recommend you use the codemod for these reasons.
If you’re new to running codemods or if it’s been a minute since you’ve used one, there are a few things you’ll want to keep in mind.
- Our codemods are meant to be run sequentially. For example, if you’re using v7 of Canvas Kit, you’ll need to run the v8 codemod before you run v9.
- The codemod will update your code to be compatible with the specified version, but it will not
remove outdated dependencies or upgrade dependencies to the latest version. You’ll need to upgrade
dependencies on your own.
- We recommend upgrading dependencies before running the codemod.
- Always review your
package.jsonfiles to make sure your dependency versions look correct.
- The codemod will not handle every breaking change in v9. You will likely need to make some manual changes to be compatible. Use our Upgrade Guide as a checklist.
- Codemods are not bulletproof.
- Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
- As a safety precaution, we recommend committing the changes from the codemod as a single isolated commit (separate from other changes) so you can roll back more easily if necessary.
We’re here to help! Automatic changes to your codebase can feel scary. You can always reach out to our team. We’d be very happy to walk you through the process to set you up for success.
Instructions
The easiest way to run our codemod is to use npx.
> npx @workday/canvas-kit-codemod v9 [path]Be sure to provide specific directories that need to be updated via the [path] argument. This
decreases the amount of AST the codemod needs to traverse and reduces the chances of the script
having an error. For example, if your source code lives in src/, use src/ as your [path]. Or,
if you have a monorepo with three packages using Canvas Kit, provide those specific packages as your
[path].
Alternatively, if you’re unable to run the codemod successfully using npx, you can install the
codemod package as a dev dependency, run it with yarn, and then remove the package after you’re
finished.
> yarn add @workday/canvas-kit-codemod --dev
> yarn canvas-kit-codemod v9 [path]
> yarn remove @workday/canvas-kit-codemodThe codemod only works on
.js,.jsx,.ts, and.tsxfiles. You’ll need to manually edit other file types (.json,.mdx,.md, etc.). You may need to run your linter after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match your project conventions.
New Components
Table
We’ve introduced a new Table
compound component to the Preview
package. Table is a compound component that is used to present information in a two-dimensional
table comprised of rows and
columns of cells containing data.
import {Table} from '@workday/canvas-kit-preview-react/table';
export default function App() {
return (
<Table>
<Table.Caption>Table Caption</Table.Caption>
<Table.Head>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Header>Table Header</Table.Header>
</Table.Row>
</Table.Head>
<Table.Body>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Header>Table Header</Table.Header>
</Table.Row>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
</Table.Body>
<Table.Footer>
<Table.Row>
<Table.Header>Table Header</Table.Header>
<Table.Cell>Table Data Cell</Table.Cell>
</Table.Row>
</Table.Footer>
</Table>
);
}Updated Terms
We have updated two terms that were used in previous versions of Canvas Kit to better reflect their meaning and intentions.
-
“Soft-Deprecation” is now “Deprecate/Deprecation”
- Deprecate/Deprecation: We add the @deprecated tag
from JSDoc to code that we plan to deprecate in the near future. Although you can still consume
this code, we want consumers to move to a utility or component that is more stable.
- Previously, we also added “Deprecated” to a component name. For example, from
ComponentNametoDeprecatedComponenntName. As of 9.0, we longer do this.
- Previously, we also added “Deprecated” to a component name. For example, from
- Deprecate/Deprecation: We add the @deprecated tag
from JSDoc to code that we plan to deprecate in the near future. Although you can still consume
this code, we want consumers to move to a utility or component that is more stable.
-
“Hard-Deprecation” is now “Remove/Removal”
- Remove/Removals: Removals are deletions from our codebase and you can no longer consume this component. We’ve either promoted or replaced a component or utility. You will need to follow the method prescribed in our upgrade guide to update your application. Please reach out to our team directly if you need additional help.
Removals
Removals are deletions from our codebase and you can no longer consume this component. We’ve either promoted or replaced a component or utility.
Drawer
PR: #1970
We’ve removed the Drawer component (for reference, see the
Drawer from v8). Please
use the SidePanel in Preview instead.
Note: The
SidePanelin Main will eventually be replaced with theSidePanelin Preview. We recommend you use theSidePanelin Preview until then.
Layout and Column
PR: #2018
We’ve removed the Layout and Column components (for reference, see
Column and Layout
from v8). Please use Grid instead. While Grid is not a 1:1
replacement for Layout and Column, it can be used to generate the same types of layouts and
offers a more robust and flexible layout solution.
Please refer to our Layout examples for examples of how to implement common
layouts using Grid.
composeModelHooks
PR: #2180
We’re removing this hook. It is a duplicate of componseHooks that was never used by anything. This
should have no impact on your code. We couldn’t find any references to this function in any code
bases we have access to.
Stack, HStack and VStack
PR: #2012
We’ve removed the Stack, HStack, and VStack components (for reference, see
Stack
from v8). Please use Flex instead. Flex supports the same consistent
spacing between its elements via the gap prop (analogous to the spacing prop from Stack).
// v8
<Stack spacing="s">
...
</Stack>
// v9
<Flex gap="s">
...
</Flex>The orientation of VStack elements can be replicated with Flex using flexDirection.
// v8
<VStack>
...
</VStack>
// v9
<Flex flexDirection="column">
...
</Flex>The StackProps, HStackProps, VStackProps, and StackStyleProps types have been removed as
well. All references to these types in your custom components will need to be replaced with
FlexProps.
🤖 The codemod will handle all of the changes above for you automatically.
Note: If you were consuming
StackPropspreviously for a custom component, be sure to change all references to the oldspacingprop fromStackPropsto thegapprop fromFlexProps.
focusRing
PR: #2034
We’ve removed memoization from focusRing. The memoize argument passed to focusRing is no
longer valid, and we’ve removed memoizedFocusRing. We were unable to find any examples of
memoize or memoizedFocusRing in use by our consumers.
useCanvasTheme and getCanvasTheme
PR: #2120
We’ve removed useCanvasTheme and getCanvasTheme. Please use useTheme and getTheme instead.
Deprecations
We add the @deprecated from JSDoc to code that we plan to deprecate in the near future. Al though you can still consume this code, we want consumers to move to a utility or component that is more stable.
useThemeRTL
PR: #2119
We’ve deprecated useThemeRTL from Labs. Although you may still use this utility, we
recommend using
CSS logical properties
instead.
composeHooks
The composeHooks types are now accurate. Before the types were incorrectly merged to equal {}.
This also affects components created using createContainer or createSubcomponent. The
elemProps type interface will now reflect all the incoming props from the hook properly. If you
get an error when passing elemProps from a hook using composeHooks, you may get a Typescript
error. Sometimes returning a generic object widens types and style or JSX attributes are more
strict. This can cause problems with JSX attributes like position which expects values like
'relative' | 'absolute' and doesn’t accept a string.
For example:
return {
position: 'relative',
}; // { 'position': string }TypeScript doesn’t know that this object interface cannot be mutated, so it will widen the
position type to a string which is now allowed when you pass the prop list to a JSX element.
You’ll have to add an as const to either the property or the whole object to force Typescript to
narrow the type.
return {
position: 'relative' as const, // forces the type to be `'relative'` instead of `string`
} as const; // OR add `as const` here to narrow the whole object.as const instructs Typescript the type is readonly. Typescript knows readonly values or objects
cannot be changed and will therefore narrow the type for you.
Token Updates
Depth
PR: #2091
In v7, we released an update to our depth tokens that was too bold and harsh for web applications.
We’ve modified the depth token styles to be more subtle and improve visual design. This change
affects all components which use depth tokens including Card, Toast, Dialog, Popup, Modal,
and Menu. We have not changed which depth values each component references (i.e., Card remains
at depth[1]).
Component Updates
Button
PR: #1978
We’ve changed the default type attribute for all buttons to type="button". Previously, the
type attribute was not being set which resulted in the buttons
defaulting to type="submit".
This affects all buttons which extend BaseButton:
PrimaryButtonSecondaryButtonTertiaryButtonDeleteButtonToolbarDropdownButtonandToolbarIconButtonPillandPill.IconButtonSegmentedControl.Button(Main)SegmentedControl.Item(Preview)Pagination.PageButton
Any buttons which extend any of the above are affected as well.
This resolves an issue where clicking certain
buttons within a form element would unexpectedly submit the form. Additionally, the default action
of many form controls such as input and textarea is to click the first submit button; this led
to issues if the first submit button in the form was not intended to be a submit button (a common
mistake when buttons default to type="submit").
This is a breaking change if you expected a button to submit by default, though we do not anticipate
this to be the case for most developers. If you do intend for a button to act as a submit button
within a form, add type="submit" to the button.
Toast
PR: #2044
We’ve promoted Toast from Labs to Main. It replaces the Toast that was
previously in Main (for reference, see
Toast in
Main from v8).
Toast is a compound component
which provides a flexible API and access to its internals via its subcomponents. It supports a new
mode prop which applies the proper accessibility features to the component based on the desired
mode: status, alert, or dialog.
// v8
<Toast actionText="View more details" onActionClick={handleActionClick} onClose={handleClose}>
Your workbook was successfully processed.
</Toast>
// v9
<Toast mode="dialog">
<Toast.Icon icon={checkIcon} color={colors.greenApple400} />
<Toast.Body>
<Toast.Message>Your workbook was successfully processed.</Toast.Message>
<Toast.Link onClick={handleActionClick}>View more details</Toast.Link>
</Toast.Body>
<Toast.CloseIcon aria-label="Close" onClick={handleClose} />
</Toast>🤖 The codemod will rewrite your usages of the previous Toast in Main to use the compound
component API of the new Toast in Main. mode will be set to dialog if the Toast
previously used actionText or onActionClick. The codemod will also update imports from the
Labs Toast to instead import from Main.
Note: You will manually need to set
modetoalertif yourToastconveys urgent and important information such as an error.
Collection
Navigation was updated to use numerical indexes instead of string identifiers. The
model.state.cursorId is left unchanged. The change is to support virtual lists where navigation
knows where it needs to go, but the identifier may not be loaded yet. The mechanism for navigating
is private and should not breaking anything. If you created a custom navigation manager, the
signature has been changed.
The useListModel modelHook no longers sets the initial cursorId to the first item if no
initialCursorId config option is set. This functionality has been moved to the
useListItemRovingFocus elemProps hook. If you use useListItemRovingFocus, the behavior is
unchanged. If you need the first item to be set as the cursorId and you do not use
useListItemRovingFocus, you will have to add this functionality back to your collection logic.
The logic to set the cursorId to the first item should go into an item elemProps hook that
contains the following:
React.useEffect(() => {
if (!model.state.cursorId && model.state.items.length) {
model.events.goTo({id: model.state.items[0].id});
}
}, [model.state.cursorId, model.state.items, model.events]);Utility Updates
useTheme and getTheme
PR: #2120
We’ve added error handling to useTheme if it’s been used outside a functional component. We’ve
also added getTheme to provide access to a theme from styled or class components instead of
useTheme.
useThemedRing
PR: #2119
We’ve promoted useThemedRing from Labs to Main. useThemedRing allows you to
theme focus rings.
🤖 The codemod will update the import for this utility.
Glossary
Main
Our Main package of Canvas Kit tokens, components, and utilities at @workday/canvas-kit-react has
undergone a full design and a11y review and is approved for use in product.
Breaking changes to code in Main will only occur during major version updates and will always be communicated in advance and accompanied by migration strategies.
Preview
Our Preview package of Canvas Kit tokens, components, and utilities at
@workday/canvas-kit-preview-react has undergone a full design and a11y review and is approved for
use in product, but may not be up to the high code standards upheld in the Main package.
Preview is analagous to code in beta.
Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without triggering a major version update, though such changes will be communicated in advance and accompanied by migration strategies.
Generally speaking, our goal is to eventually promote code from Preview to Main. Occasionally, a component with the same name will exist in both Main and Preview (for example, see Segmented Control in Preview and Main). In these cases, Preview serves as a staging ground for an improved version of the component with a different API. The component in Main will eventually be replaced with the one in Preview.
Labs
Our Labs package of Canvas Kit tokens, components, and utilities at @workday/canvas-kit-labs-react
has not undergone a full design and a11y review. Labs serves as an incubator space for new and
experimental code and is analagous to code in alpha.
Breaking changes can be deployed to Labs at any time without triggering a major version update and may not be subject to the same rigor in communcation and migration strategies reserved for breaking changes in Preview and Main.
- Introduction to Versioning
- Getting Started
- Changes in Canvas Web v9
- New Components
- Component Updates
- What to Expect Next
Introduction to Versioning
Canvas versioning improves communication between design and development teams during collaboration and handover, allowing all parties to work in sync. The process enables Figma users to upgrade their Figma files to a newer version of the Canvas Web Figma library when they need it through an automated process that only takes a few minutes to complete.
Previously updates were made directly to a single Canvas Web Figma library. This meant that teams using the Canvas Figma libraries were always designing with the latest version of Canvas, regardless of the version developers were building with. This method resulted in confusion during the handover process as designs didn’t always match what was technically feasible at that time.
Library versioning empowers teams to control when and how they upgrade to the next version of the Canvas Web Figma library. It enables the entire team to work together using the same major versions of the Canvas Design System. Upgrading to a new library version is quick and easy, but there are things to consider before doing so.
Getting Started
Resources are available to help teams upgrade their files to a new version of the Canvas Web Figma library. This upgrade guide will help designers:
- Decide when to upgrade.
- Understand how to prepare files for an upgrade.
- Perform the upgrade.
- Understand component changes in v9.
Deciding When to Upgrade
It’s important to upgrade as a team so designs handed over can match what’s technically feasible with each version of Canvas. We recommend chatting with your wider team to understand what version they are currently building with, and when they plan to upgrade to the next version of Canvas. For some teams this could take a few days, for others it could be weeks. Setting an upgrade date will keep the team on the same page.
Preparation for the Upgrade
There are things that can be done before upgrading to v9 that will streamline the process and save time. Updating the covers of your files will help identify what files are planned to upgrade to v9. This has the added benefit of helping your team differentiate what you plan to maintain going forward and what you might archive within your team’s workspaces to improve findability.
To reduce the time spent addressing breaking changes it’s recommended that the duplicate or saved version of your files are consolidated to just the key screens that are frequently used to design with. These key screens can then be updated to handle breaking changes allowing you to continue to flesh out any future designs whilst cutting back on clutter. All previous designs can be archived should you need to reference these in the future.
Making the Upgrade
Upgrading to a new version of Canvas web is quick, it takes about 5 minutes. The process utilizes Figma’s Swap Library feature and is automated for the most part, but there are some checks you should run to make sure the update was successful.
- Locate the file you want to upgrade.
- Create a duplicate of the file or save a version of it.
- Open the file you wish to upgrade.
- Go to the assets panel.
- Open your team library (book icon).
- Select the current Canvas library used in the file.
- Select the ‘Swap Library’ button.
- Choose the latest library to swap to.
- Click the ‘Swap Library’ Button again.
- Wait for a confirmation from Figma.
All Canvas components used in your file have now been swapped to the latest Canvas Web Library. You should now review the file and make any appropriate changes to affected components based on the changelog above, we recommend that you only update key screens in this file and delete any redundant and interstitial screens to cut down on your upgrade time.
Lastly the new library should be set to persist in your team’s files, to do this your team’s admin will need to complete the following steps.
- Click on your Team in Figma.
- Go to the Settings tab.
- Select ‘Enable Libraries for all team files’.
- Turn off the old library.
- Activate the new library.
Changes in Canvas Web v9
Breaking changes are commonplace in major version releases. This means something has changed visually and/or technically. Breaking changes need to be considered during an upgrade and sometimes action is required to consume them successfully. Below is a list of components affected in this release that require action to consume them appropriately within your files.
New Components
Table
A new Table component will be available, to match the new Table component offered in Canvas Kit Preview package. The new Table component is a nested component consisting of a Table, Column, and Rows, from which designers can create tables. The new component takes advantage of Autolayout properties and nested components in order to make table design quicker and more streamlined.
For more complex use cases with the need for built-in features and functionality, please refer to Tables 2.0 (Storybook and Generated UI Figma component).
Component Updates
Segmented Control
The updates to the Segmented Control component is a visual and technical breaking change as it has been redesigned to incorporate additional variants to handle text, which was introduced in code with the Canvas v8 release. Custom overrides made to this component will revert back to a default state. Please customize this component when upgrading to v9 to address this breaking change.
The components footprint is also slightly larger and may require additional spacing to match Canvas spacing guidelines to address the vertical rhythm of this component with other elements in your designs.
To upgrade Segmented Control in v9:
- Perform a library swap from the current Canvas Web v8 Figma library to the new Canvas Web v9 Figma library.
- Restore any previous overrides to icons or states.
- Account for vertical alignment using the Canvas Space Tokens.
Status Indicator
The Status Indicator component in Canvas Web v9 is a visual and technical breaking change. The text size has been increased and set to sentence case for improved accessibility and localization capabilities. As a result, the component’s height has increased slightly. Spacing may need to be updated to match Canvas spacing guidelines to address the vertical rhythm of this component with other elements in your designs.
Custom overrides made to this component will persist once users swap over to the new Canvas Web v9 Figma library. However, designers will also need to perform an additional instance swap afterwards to ensure pre-set customizations persist if the Status Indicator icon variant is being used.
To upgrade Status Indicator in v9:
- Perform a library swap from the current Canvas Web v8 Figma library to the new Canvas Web v9 Figma library.
- Select a Status Indicator with the layer name ❌ Status Indicator ❌.
- Use the ‘Select All with same Instance’ action in Figma to select all deprecated instances on the page.
- Manually swap to ‘Status Indicator’ using the ‘Swap Instance’ dropdown in the right panel.
- There should be no breaking changes.
Modal
The Modal component in Canvas Web v9 is a visual breaking change. It has been updated to include a modal overlay and the medium size variant has been removed as developers don’t have pre-set sizes. Modals’ height and width can be adjusted manually to fit most use cases by expanding the body of the Modal using Figma’s Autolayout settings.
All custom overrides and content will persist. However migrating to this version of Modal will require you to adjust the size of the overlay to cover the entire viewport, keeping the Modal component centered on screen. Instances that don’t require this overlay should be swapped to the new Dialog component.
To upgrade Modal in v9:
- Perform a library swap from the current Canvas Web v8 Figma library to the new Canvas Web v9 Figma library.
- Remove custom overlay if already applied.
- Expand the Modal component to fill the entire screen with the Modal Overlay.
Switch
The Switch component updates are a technical breaking change. Switch was built as multiple components, which have been consolidated into a single component with variants to match the standard of other components in the Canvas Web Figma Library. As a result the Switch component will revert to its default No Label state and will require designers to reconfiguration it in their files to match previous designs when upgrading to v9.
To upgrade switch in v9:
- Perform a library swap from the current Canvas Web v8 Figma library to the new Canvas Web v9 Figma library.
- Restore any previous overrides to text or states.
Radio
The Radio component in Canvas v9 has been refactored with Boolean properties to reduce a large number of redundant variants and to minimize future bugs from large variant sets. Library swapping from v8 to v9 will not have any breaking changes.
Custom overrides made to this component will persist once users swap over to the new Canvas Web v9 Figma library. However, designers will also need to perform an additional instance swap afterwards to ensure pre-set customizations persist if the Text=“False” variant is being used.
To upgrade Radio in v9:
- Perform a library swap from the current Canvas Web v8 Figma library to the new Canvas Web v9 Figma library.
- Select a Radio with the layer name ❌ Radio/Single ❌.
- Use the ‘Select All with same Instance’ action in Figma to select all deprecated instances on the page.
- Manually swap to ‘Radio/Single’’ using the ‘Swap Instance’ dropdown in the right panel.
- There should be no breaking changes.
Checkbox
The Checkbox component in Canvas Web v9 has been refactored to reduce a large number of redundant variants and associated minimize bugs, no changes have been made to the existing functionality of the Checkbox component.
Custom overrides made to this component will persist once users swap over to the new Canvas Web v9 Figma library. However, designers will also need to perform an additional instance swap afterwards to ensure pre-set customizations persist if the Text=“False” variant is being used.
To upgrade Checkbox in v9:
- Perform a library swap from the current Canvas Web v8 Figma library to the new Canvas Web v9 Figma library.
- Select a Checkbox with the layer name ❌ Checkbox/Single ❌.
- Use the ‘Select All with same Instance’ action in Figma to select all deprecated instances on the page.
- Manually swap to ‘Checkbox/Single’ using the ‘Swap Instance’ dropdown in the right panel.
- Turn the boolean prop labeled ’👀 Text’ to OFF to hide input text.
- There should be no breaking changes.
Depth
Depth tokens have been modified to reduce the starkness of depth against light backgrounds. The changes to depth will be applied automatically once you upgrade to the Canvas Web v9 Library.
Designers should review active design files and modify the depth levels their designs are using accordingly. Designers using depth tokens for components or designs created outside of Canvas should also accept the changes in the Canvas Tokens Figma library.
Delete Button
The Delete Button component has been upgraded to include extra-small variants to align with other existing button variants. No action is required to consume the updated delete buttons on Canvas Web v9
What to Expect Next
The latest version of Canvas will receive minor updates and bug-fixes to improve the version you’re building with. These won’t cause breaking changes so please continue to accept these updates as they will not change the version of Canvas you’re building with.
When a new version of Canvas becomes available in the future you can follow the same steps you took here to upgrade to the latest version of Canvas Web.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.