For Developers
Canvas Kit v8 Upgrade Guide
This guide contains an overview of the changes in Canvas Kit v8. Please reach out if you have any questions.
Codemod
Please use our codemod package to automatically update your code to work with most of the breaking changes in v8.
> npx @workday/canvas-kit-codemod v8 [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 v8 [path]> yarn remove @workday/canvas-kit-codemod
The codemod only works on
.js
,.jsx
,.ts
, and.tsx
files. 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.
The codemod will handle most but not all of the breaking changes in v8. Breaking changes handled by the codemod are marked with 🤖 in the Upgrade Guide.
Please verify all changes made by the codemod. 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.
General Updates
IE11 No Longer Supported
Starting with v8, Canvas Kit will no longer support IE11.
We've removed all IE11-specific code including polyfills. Applications built using Canvas Kit v8 and above will no longer run in IE11 and will fail to bootstrap with an error and/or a white screen.
Do not upgrade to v8 if your application needs to support IE11.
React 18 Upgrade
We've upgraded Canvas Kit to React 18. This change will not impact users who are already on v7 and are looking to upgrade to v8 as v8 will support the same React versions as v7 (React 16.14 and 17.X) while still giving them the ability to upgrade to React 18 as needed. Although we didn't use any new features from React 18 in v8, future updates to Canvas Kit may require upgrading to React 18 to support them.
React 18 introduces several new features, but the most impactful change is the new
concurrent render API.
The new createRoot
method replaces render
and gives you access to the improvements in React 18
including the concurrent features. Without it, React behaves as it did in previous versions.
See our React 18 discussion for more information.
Removal of Default Exports
We've removed all remaining default exports from our packages to maintain consistency with our newer (and recently updated) components and systems which favor named exports. The following components have been updated to provide named exports instead of default exports (in cases where the component provided both default and named exports, the default export has been removed).
Main (canvas-kit-react)
- AccentIcon
- AppletIcon
- Avatar
- Breadcrumbs (formerly in Preview)
- Canvas
- Checkbox
- CountBadge
- FormField
- Graphic
- Icon
- LoadingDots
- Radio
- SegmentedControl
- Select
- SidePanel
- StatusIndicator
- Switch
- Svg
- SystemIcon
- SystemIconCircle
- Table
- TextArea
- TextInput
- Toast
- Tooltip
Labs (canvas-kit-labs-react)
- Combobox
- Drawer
Preview (canvas-kit-preview-react)
- ColorPicker
- Menu
- Select
- SidePanel
Fonts (canvas-kit-react-fonts)
- fonts
🤖 The codemod will rewrite your default imports to named imports.
Reorganized Style Props
We've reorganized some style props and refactored the implementation, but the functionality remains
the same. This improves the style prop documentation and allows us to extend style props further in
the future. We've moved the background
and backgroundImage
style props from the color
style
prop function to a new background
style prop function.
These functions are only intended to be used by Canvas Kit internally. However, if you're importing
the color
style prop function to apply these two style props, you'll need to update your import
statements to import the background
style prop function as well.
We recommend using
Box
and style props directly instead of these style prop functions to reduce the cost of upgrading in the future.
// v7import {color} from '@workday/canvas-kit-react/layout';const Example = styled('div')({boxSizing: 'border-box',},color);// v8import {background, color} from '@workday/canvas-kit-react/layout';const Example = styled('div')({boxSizing: 'border-box',},background,color);
Responsive Styles
We've added a set of responsive utilities to facilitate container-based and viewport-based responsive styling:
- useResponsiveContainerStyles: A hook that allows developers to create container-based responsive styles using style objects.
import {Flex, Box} from '@workday/canvas-kit-react/layout';import {useResizeObserver, useResponsiveContainerStyles} from '@workday/canvas-kit-react/common';const ref = React.useRef(null);const [width, setWidth] = React.useState(0);useResizeObserver({ref: ref,onResize: data => {setWidth(data.width || 0);},});const containerResponsiveStyles = useResponsiveContainerStyles({flex: {flexDirection: 'column',padding: 'm',depth: 1,borderRadius: 'l',zero: {backgroundColor: 'Red',},s: {backgroundColor: 'Orange',},m: {backgroundColor: 'Yellow',},l: {backgroundColor: 'Green',},xl: {backgroundColor: 'Blue',},},box: {padding: 's',},},width);return (<Box ref={ref}><Flex {...containerResponsiveStyles.flex}><Box {...containerResponsiveStyles.box}>Hello World</Box></Flex></Box>);
Testing
We've added a new @workday/canvas-kit-react/testing
slash import to house our testing utilities
and components. You may find them useful for testing the different visual states of your components.
View the Testing documentation for more information. The example below
creates a visual states table of our DeleteButton
. Each row renders a different size of
DeleteButton
with each column representing different combinations of the disabled
, hover
, and
active
states.
import {ComponentStatesTable,StaticStates,permutateProps,} from '@workday/canvas-kit-react/testing';import {PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';import {DeleteButton} from '@workday/canvas-kit-react/button';// Creates a columns for different states of a buttonexport const stateTableColumnProps = [{label: 'Default ', props: {className: '', disabled: false}},{label: 'Default Disabled', props: {className: '', disabled: true}},{label: 'Hover ', props: {className: 'hover', disabled: false}},{label: 'Hover Disabled', props: {className: 'hover', disabled: true}},{label: 'Focus ', props: {className: 'focus', disabled: false}},{label: 'Focus Hover ', props: {className: 'focus hover', disabled: false}},{label: 'Active ', props: {className: 'active', disabled: false}},{label: 'Active Hover ', props: {className: 'active hover', disabled: false}},];export const Basic = (props: {theme?: PartialEmotionCanvasTheme}) => (<StaticStates theme={props.theme}><ComponentStatesTablerowProps={permutateProps({// creates rows with values that get passed to the buttonsize: [{value: 'small', label: 'Small'},{value: 'medium', label: 'Medium'},{value: 'large', label: 'Large'},],})}columnProps={stateTableColumnProps}>{props => <DeleteButton {...props}>Test</DeleteButton>}</ComponentStatesTable></StaticStates>);
For users who are currently using our testing utilities and components, the following code-moddable changes have been made:
ComponentStatesTable
,permutateProps
,StaticStates
andpropTypes
have been moved to@workday/canvas-kit-react/testing
.StaticStates
andconvertToStaticStates
have been moved from@workday/canvas-kit-react/common
to@workday/canvas-kit-react/testing
🤖 The codemod will handle all of the changes above for you automatically.
Utility Deprecations
The following utility functions are being deprecated and will be removed in a later version of Canvas Kit.
- Types:
Model
ToModelConfig
- Functions:
createEventMap
useEventMap
All these utility types and functions have been replaced by createModelHook
. Typescript 4.1
introduced
Template Literal Types,
so event maps are no longer needed. createModelHook
infers all types based on the input of the
function.
New Components
Grid
We've introduced a new Grid
component to the Main package. Grid
is a
low-level layout component that provides a common, ergonomic API for building two-dimensional
layouts (rows and columns) with
CSS Grid.
Text
We've introduced a group of Text components to the Main package: Text
,
LabelText
, Title
,
Heading
, BodyText
, and
Subtext
. Together they provide a common, ergonomic API for rendering
text with built-in support for our Canvas type tokens.
// v7<h2 css={{...type.levels.title.medium}}>Medium Title Text</h2><p css={{...type.levels.body.medium}}>Medium body text</p><p css={{...type.levels.subtext.small}}>Small subtext text</p>// v8<Title as="h2" size="medium">Medium Title Text</Title><BodyText size="medium">Medium body text</BodyText><Subtext size="small">Small subtext text</Subtext>
Segmented Control (Preview)
We've added a new version of
SegmentedControl
which has been redesigned as a
compound component to the Preview
package. SegmentedControl
represents a linear group of multiple buttons allowing the selection of
a specific value and is best used for switching between different views of the same content.
The SegmentedControl
in Preview has the following major differences compared to the
SegmentedControl
in Main:
- Visually redesigned to better align with the Canvas Design System
- Uses title casing (e.g., "In Progress") instead of full caps ("IN PROGRESS")
- Supports a text-only variation
- Includes built-in support for tooltips to improve accessibility of the icon-only variation
// SegmentedControl (Main)import {SegmentedControl} from '@workday/canvas-kit-react/segmented-control';import {listViewIcon, deviceTabletIcon} from '@workday/canvas-system-icons-web';<SegmentedControl value={value} onChange={handleToggle}><SegmentedControl.Button icon={listViewIcon} value="list-view" aria-label="List View" /><SegmentedControl.Button icon={deviceTabletIcon} value="device-view" aria-label="Device View" /></SegmentedControl>;// SegmentedControl (Preview)import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';import {listViewIcon, deviceTabletIcon} from '@workday/canvas-system-icons-web';<SegmentedControl><SegmentedControl.List aria-label="View type"><SegmentedControl.Itemdata-id="list-view"icon={listViewIcon}tooltipProps={{title: 'List view'}}/><SegmentedControl.Itemdata-id="device-view"icon={deviceTabletIcon}tooltipProps={{title: 'Device view'}}/></SegmentedControl.List></SegmentedControl>;
You may still use SegmentedControl
in the Main package, but note that it will be replaced by
SegmentedControl
in the Preview package in the future.
Status Indicator (Preview)
We've added a new version of
StatusIndicator
which has been redesigned as a
compound component to the Preview
package. StatusIndicator
is best used for helping the user quickly identify the status of a task,
action, or page element.
// StatusIndicator (Main)import {StatusIndicator} from '@workday/canvas-kit-react/status-indicator';import {uploadCloudIcon} from '@workday/canvas-system-icons-web';<StatusIndicatoremphasis={StatusIndicator.Emphasis.Low}label="Published"type={StatusIndicator.Type.Green}icon={uploadCloudIcon}/>;// StatusIndicator (Preview)import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';import {uploadCloudIcon} from '@workday/canvas-system-icons-web';<StatusIndicator emphasis="low" variant="green"><StatusIndicator.Label>Published</StatusIndicator.Label><StatusIndicator.Icon icon={uploadCloudIcon} /></StatusIndicator>;
You may still use StatusIndicator
in the Main package, but note that it will be replaced by
StatusIndicator
in the Preview package in the future.
Component Deprecations
Deprecation Types
Soft Deprecation
A soft-deprecated component is still available with its full functionality, but it will have been renamed with a prefix to indicate its soft-deprecated status. It will also include a console warning announcing its deprecation. This warning will only be triggered on the component's initial render.
Soft-deprecated types and utilities will also have been renamed but generally will not trigger a console warning.
Hard Deprecation
A hard-deprecated component or package is no longer available. 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.
Drawer
We've soft-deprecated Drawer
and renamed the following items:
Drawer
toDeprecatedDrawer
DrawerProps
toDeprecatedDrawerProps
DrawerHeader
toDeprecatedDrawerHeader
DrawerHeaderProps
toDeprecatedDrawerHeaderProps
// v7import {Drawer, DrawerHeader} from '@workday/canvas-kit-labs-react/drawer';<Drawerheader={<DrawerHeadercloseIconAriaLabel="Close"onClose={() => console.log('onClose callback')}title="Deprecated Drawer Header"/>}/>;// v8import {DeprecatedDrawer, DeprecatedDrawerHeader} from '@workday/canvas-kit-labs-react/drawer';<DeprecatedDrawerheader={<DeprecatedDrawerHeadercloseIconAriaLabel="Close"onClose={() => console.log('onClose callback')}title="Deprecated Drawer Header"/>}/>;
🤖 The codemod will rename Drawer
, DrawerProps
, DrawerHeader
and DrawerHeaderProps
to their
deprecated names.
You may continue to use this component, but please note that we plan to hard-deprecate it in v9. Consider using the Side Panel in the Preview package instead.
Menu (Preview)
We've soft-deprecated the Menu
in Preview and renamed the following items:
Menu
toDeprecatedMenu
MenuProps
toDeprecatedMenuProps
MenuState
toDeprecatedMenuState
MenuItem
toDeprecatedMenuItem
MenuItemProps
toDeprecatedMenuItemProps
// v7import {Menu, MenuItem, MenuProps, MenuItemProps} from '@workday/canvas-kit-preview-react/menu';interface AnotherMenuProps extends MenuProps {specialProp?: boolean;}type CustomMenuItemProps = MenuItemProps;const CustomMenu = () => {return (<Menu><MenuItem>First Item</MenuItem></Menu>);};// v8import {DeprecatedMenu,DeprecatedMenuItem,DeprecatedMenuProps,DeprecatedMenuItemProps,} from '@workday/canvas-kit-preview-react/menu';interface AnotherMenuProps extends DeprecatedMenuProps {specialProp?: boolean;}type CustomMenuItemProps = DeprecatedMenuItemProps;const CustomMenu = () => {return (<DeprecatedMenu><DeprecatedMenuItem>First Item</DeprecatedMenuItem></DeprecatedMenu>);};
🤖 The codemod will rename Menu
, MenuProps
, MenuState
, MenuItem
and MenuItemProps
to their
deprecated names.
You may continue to use this component, but please note that we plan to hard-deprecate it in v9. Consider using the Menu in the Main package instead.
Layout and Column
We've soft-deprecated Layout
and Column
and renamed the following items:
Layout
toDeprecatedLayout
LayoutProps
toDeprecatedLayoutProps
Column
toDeprecatedColumn
ColumnProps
toDeprecatedColumnProps
// v7import {Layout, Column} from '@workday/canvas-kit-react/layout';<Layout gutter={0}><Layout.Column spacing={0}><Card /></Layout.Column></Layout>;// v8import {DeprecatedLayout, DeprecatedColumn} from '@workday/canvas-kit-react/layout';<DeprecatedLayout gutter={0}><DeprecatedLayout.Column spacing={0}><Card /></DeprecatedLayout.Column></DeprecatedLayout>;
🤖 The codemod will rename Layout
, LayoutProps
, Column
and ColumnProps
to their deprecated
names.
You may continue to use these components, but please note that we plan to hard-deprecate them in v9. Consider using the newly-released Grid component instead.
Component Updates
Action Bar
ActionBar.List
with overflow behavior now requires to pass a overflow button component as a value
of overflowButton
prop, the same way we did for Tabs
and Breadcrumbs
components. In Canvas Kit
v7 the component for overflow button was placed directly inside ActionBar.List
without passing any
prop. We found limitation of this approach because it was not possible to modify an overflow button
or pass any prop into it. To remove this limitation, ActionBar.OverflowButton
inside
ActionBar.List
is replaced with an overflowButton
prop.
// v7, an overflow button is inside ActionBar.List<ActionBar.List position="relative">{/* items */}</ActionBar.List>// inside ActionBar.List<Stack>{items}<ActionBar.OverflowButton /> // OverflowButton is a hard-coded component</Stack>// v8, an overflow button should be passed as a prop<ActionBar.Listposition="relative"overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}>{/* items */}</ActionBar.List>// inside ActionBar.List<Stack>{items}{overflowButton} // overflowButton prop is a passed component</Stack>
Box
Box
now supports the following props to set font and text styles: fontFamily
, fontSize
,
fontStyle
, fontWeight
, lineHeight
, letterSpacing
, textAlign
, textDecoration
,
textTransform
, textShadow
, whiteSpace
, and wordBreak
.
// v7const StyledBox = styled(Box)({fontFamily: 'monospace',fontSize: type.properties.fontSizes[16],fontWeight: type.properties.fontWeights.medium})<StyledBox />// v8<Box fontFamily="monospace" fontSize={16} fontWeight="medium" />
Breadcrumbs
Breadcrumbs
has been promoted to the Main package. It now uses the list system from our
Collection API which provides new
overflow behavior based on container width.
The following code-moddable changes have been made to the Breadcrumbs
API (see below for
additional changes requiring manual work):
Breadcrumbs
has been promoted from Preview (@workday/canvas-kit-preview-react
) to Main (@workday/canvas-kit-react
).Breadcrumbs.Nav
has been replaced withBreadcrumbs
. Anyaria-label
previously applied toBreadcrumbs.Nav
should now be applied toBreadcrumbs
.Breadcrumbs.CollapsibleList
has been renamed toBreadcrumbs.List
.Breadcrumbs.ListItem
has been renamed toBreadcrumbs.Item
.
🤖 The codemod will handle all of the changes above for you automatically.
// v7<Breadcrumbs.Nav aria-label="Breadcrumbs"><Breadcrumbs.List><Breadcrumbs.ListItem><Breadcrumbs.Link href="/">Home</Breadcrumbs.Link></Breadcrumbs.ListItem><Breadcrumbs.ListItem><Breadcrumbs.Link href="/menus">Menus</Breadcrumbs.Link></Breadcrumbs.ListItem><Breadcrumbs.CurrentItem>Dinner</Breadcrumbs.CurrentItem></Breadcrumbs.List></Breadcrumbs.Nav>// v8<Breadcrumbs aria-label="Breadcrumbs"><Breadcrumbs.List><Breadcrumbs.Item><Breadcrumbs.Link href="/">Home</Breadcrumbs.Link></Breadcrumbs.Item><Breadcrumbs.Item><Breadcrumbs.Link href="/menus">Menus</Breadcrumbs.Link></Breadcrumbs.Item><Breadcrumbs.CurrentItem>Dinner</Breadcrumbs.CurrentItem></Breadcrumbs.List></Breadcrumbs>
Additionally, there are a handful of changes to the Breadcrumbs
API which will require manual
updates on your part:
- Changes to Redirects
- Updated Overflow Behavior
We've outlined these changes in more detail below.
Changes to Redirects
We've removed onAction
from Breadcrumbs.Item
and Breadcrumbs.Link
. Breadcrumbs.Link
now
defaults to redirecting with an href
, which means the page will hard-redirect when the link is
clicked.
If you're in a single-page application (SPA) environment, you may want to use the internal SPA
router instead. You can override the hard-redirect with a custom onClick
handler that blocks the
default behavior of the event and passes the link path along to your SPA router. Most of our
consumers use react-router-dom
for managing SPA routing; here are examples of how to use onClick
with v5 and v6 of react-router-dom
.
// React Router DOM v5 APIimport {useHistory} from 'react-router-dom';import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';...const history = useHistory();const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, link?: string) => {event.preventDefault();// if no link is provided, default to the current pathhistory.push(link || window.location.pathname);}return (<Breadcrumbs.Link href="/account" onClick={handleClick}>Account</Breadcrumbs.Link>);// React Router DOM v6 APIimport {useNavigate} from 'react-router-dom';import {Breadcrumbs} from '@workday/canvas-kit-react/breadcrumbs';...const navigate = useNavigate();const handleClick = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>, link?: string) => {event.preventDefault();// if no link is provided, default to the current pathnavigate(link || window.location.pathname);}return (<Breadcrumbs.Link href="/account" onClick={handleClick}>Account</Breadcrumbs.Link>);
Updated Overflow Behavior
We've removed the component-specific overflow functionality from Breadcrumbs
now that it uses the
overflow behavior provided by the Collection API. In order to enable the new overflow behavior,
you'll need to use the dynamic API by passing an array of items to Breadcrumbs
(rather than
passing the items as statically defined children
via JSX). The items can be passed to
Breadcrumbs
via its items
prop or via an items
key within a provided model
.
Here's an example of how to convert a v7 instance of overflow Breadcrumbs
using the static API to
the v8 equivalent using the dynamic API with the items
prop.
// v7import {Breadcrumbs} from '@workday/canvas-kit-preview-react/breadcrumbs';export const OldCollapsibleList = () => {return (<Breadcrumbs.Nav aria-label="Breadcrumbs"><Breadcrumbs.CollapsibleList buttonAriaLabel="More links" maxWidth={300}><Breadcrumbs.ListItem><Breadcrumbs.Link href="/">Home</Breadcrumbs.Link></Breadcrumbs.ListItem><Breadcrumbs.ListItem><Breadcrumbs.Link href="/menus">Menus</Breadcrumbs.Link></Breadcrumbs.ListItem><Breadcrumbs.ListItem><Breadcrumbs.Link href="/lunch">Lunch</Breadcrumbs.Link></Breadcrumbs.ListItem><Breadcrumbs.ListItem><Breadcrumbs.Link href="/small-plates-and-appetizers">Small Plates & Appetizers</Breadcrumbs.Link></Breadcrumbs.ListItem><Breadcrumbs.CurrentItem>Focaccia Genovese</Breadcrumbs.CurrentItem></Breadcrumbs.CollapsibleList></Breadcrumbs.Nav>);};// v8const NewOverflowList = () => {const [items] = React.useState([{id: '1', text: 'Home', link: '/'},{id: '2', text: 'Menus', link: '/menus'},{id: '3', text: 'Lunch', link: '/lunch'},{id: '4', text: 'Small Plates & Appetizers', link: '/small-plates-and-appetizers'},{id: '5', text: 'Focaccia Genovese'},]);return (<Breadcrumbs items={items} aria-label="Breadcrumbs"><Breadcrumbs.List overflowButton={<Breadcrumbs.OverflowButton aria-label="More links" />}>{item =>item.link ? (<Breadcrumbs.Item><Breadcrumbs.Link href={item.link}>{item.text}</Breadcrumbs.Link></Breadcrumbs.Item>) : (<Breadcrumbs.CurrentItem>{item.text}</Breadcrumbs.CurrentItem>)}</Breadcrumbs.List><Breadcrumbs.Menu.Popper><Breadcrumbs.Menu.Card><Breadcrumbs.Menu.List>{(item: Breadcrumb) => <Breadcrumbs.Menu.Item>{item.text}</Breadcrumbs.Menu.Item>}</Breadcrumbs.Menu.List></Breadcrumbs.Menu.Card></Breadcrumbs.Menu.Popper></Breadcrumbs>);};
Component States Table
We've promoted ComponentStatesTable
from Labs (@workday/canvas-kit-labs/common
) to Main
(@workday/canvas-kit-react/testing
).
🤖 The codemod will handle this change for you automatically.
Menu (Main)
We've updated the depth value of Menu.Card
from 1
to 3
. This is a visually breaking change.
Modal
We've updated the Modal
component to include new touch and responsive behaviors. The responsive
Modal
will be displayed when users are browsing on screen sizes between 320px
and 768px
and
will have the following visual differences compared to the standard Modal
:
- Padding between the edge of
Modal.Card
and its contents reduced to16px
(standard:32px
) - Border radius of
Modal.Card
increased to24px
(standard:8px
) - Vertical space between
Modal.Heading
andModal.Body
reduced to16px
(standard:24px
) Modal
animates from thebottom center
and is aligned near the bottom of the viewport
Additionally, users interacting with Modal
on touch will not be able to exit out of the modal by
tapping on the overlay.
Popups
We've updated all popup CloseIcon
and CloseButton
to default to type=button
. We did this so
these close buttons did not submit when a form element is present. Without this change, you have to
manually add type="button"
to these components if you wrap popup contents in a form
element.
While this is a very unlikely that a CloseButton
was intentionally used as an implicit submit
button, it is still a breaking change. This change effects the following components:
Popup.CloseIcon
Dialog.CloseIcon
Modal.CloseIcon
Popup.CloseButton
Dialog.CloseButton
Modal.CloseButton
Loading Animation
LoadingAnimation
is being renamed to LoadingDots
and is moving from of
@workday/canvas-kit-react/loading-animation
to @workday/canvas-kit-react/loading-dots
. The
component has not been modified and you may continue to use this component exactly as you did in v7.
The CSS package has been similarly updated for consistency, but is still in maintenance mode.
🤖 The codemod will handle all these changes automatically:
- Rename import sources
@workday/canvas-kit-react/loading-animation
becomes@workday/canvas-kit-react/loading-dots
- Rename import specifiers and identifiers
LoadingAnimation
becomesLoadingDots
- Rename JSX identifiers
<LoadingAnimation />
becomes<LoadingDots />
// v7import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';const MyComponent = (props: MyComponentProps) => {return <LoadingAnimation />;};const StyledLoadingAnimation = styled(LoadingAnimation)({});// v8import {LoadingDots} from '@workday/canvas-kit-react/loading-dots';const MyComponent = (props: MyComponentProps) => {return <LoadingDots />;};const StyledLoadingAnimation = styled(LoadingDots)({});
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section