Workday Canvas Kit

https://github.com/workday/canvas-kit
Admin
Workday Canvas Kit provides a set of components for the Workday Canvas Design System to implement...
Tokens:264,618
Snippets:3,411
Trust Score:8.3
License:Apache-2.0
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Applet Icons

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Install the necessary packages for using Applet Icons.

```sh
npm install @workday/canvas-kit-react @workday/canvas-applet-icons-web
```

--------------------------------

### Install Canvas Kit Docs

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/README.md

Install the canvas-kit-docs package using yarn.

```sh
yarn add @workday/canvas-kit-docs
```

--------------------------------

### Component Import Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/DOCUMENTATION_GUIDELINES.mdx

Example of importing the Tabs component for documentation.

```tsx
import {Tabs} from '@workday/canvas-kit-react/tabs';
```

--------------------------------

### Install Emotion for Global Styles

Source: https://github.com/workday/canvas-kit/blob/master/modules/react-fonts/README.md

If you are not already using emotion, install it as a dependency to manage global styles.

```sh
yarn add emotion
```

--------------------------------

### Viewport-based Media Query Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/common/stories/mdx/Responsive.mdx

A CSS example demonstrating how to apply styles based on viewport width using a media query.

```css
@media screen and (min-width: 800px) {
  .container {
    margin: 1em 2em;
  }
}
```

--------------------------------

### Install Color Picker

Source: https://github.com/workday/canvas-kit/blob/master/modules/preview-react/color-picker/README.md

Install the Color Picker component using npm or yarn.

```sh
preview-react add @workday/canvas-kit-preview-react
```

--------------------------------

### Component API Installation

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/DOCUMENTATION_GUIDELINES.mdx

Command to install the Canvas Kit React package. Use this in the Installation section of component documentation.

```sh
yarn add @workday/canvas-kit-[preview-|labs-]react
```

--------------------------------

### fetch-component-documentation-example

Source: https://github.com/workday/canvas-kit/blob/master/modules/mcp/stories/mdx/MCPDocs.mdx

Fetches documentation and examples for specific components.

```APIDOC
## Tool: fetch-component-documentation-example

### Description
Fetches documentation, sample code, and optional interactive previews for specific components.
```

--------------------------------

### Install icon package

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/icons/icon-migration.md

Install the required version of the system icons package before running the migration.

```sh
yarn add @workday/canvas-system-icons-web@^5
```

--------------------------------

### Install Canvas Tokens Web Package

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Install the new @workday/canvas-tokens-web package using npm.

```bash
npm install @workday/canvas-tokens-web
```

--------------------------------

### Full Page Demo Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/accessibility/PageStructure.mdx

A comprehensive example demonstrating the implementation of accessible page structure, likely including landmark regions and proper heading hierarchy.

```javascript
import React from 'react';
import { Box } from '@workday/canvas-kit-react/layout';
import { Text } from '@workday/canvas-kit-react/text';
import { Button } from '@workday/canvas-kit-react/button';

export const FullPageDemo = () => (
  <Box>
    <Box as="header" padding="s" background="#f0f0f0">
      <Text as="h1">Main Page Title (h1)</Text>
      <Text as="h2">Subtitle (h2)</Text>
    </Box>
    <Box as="nav" padding="s" background="#e0e0e0">
      <Text as="h3">Navigation Menu (h3)</Text>
      <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
      </ul>
    </Box>
    <Box as="main" padding="s">
      <Text as="h2">Section Title (h2)</Text>
      <Text>This is the main content area of the page.</Text>
      <Box margin="s">
        <Text as="h3">Subsection Title (h3)</Text>
        <Text>Details within the subsection.</Text>
        <Button>Action Button</Button>
      </Box>
    </Box>
    <Box as="footer" padding="s" background="#f0f0f0">
      <Text as="h2">Footer Information (h2)</Text>
      <Text>Copyright details and links.</Text>
    </Box>
  </Box>
);
```

--------------------------------

### Install Canvas Kit React Layout

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/layout/README.md

Install the layout module using yarn.

```sh
yarn add @workday/canvas-kit-react/layout
```

--------------------------------

### Install Accent Icons

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Install the necessary packages for using Accent Icons.

```sh
npm install @workday/canvas-kit-react @workday/canvas-accent-icons-web
```

--------------------------------

### Install and Run Codemod Locally

Source: https://github.com/workday/canvas-kit/blob/master/modules/codemod/README.md

Install the codemod package using yarn and then run it directly. This avoids the need for npx.

```sh
> yarn add @workday/canvas-kit-codemod
> canvas-kit-codemod <transform> [path]
```

--------------------------------

### Install Popup Stack

Source: https://github.com/workday/canvas-kit/blob/master/modules/popup-stack/README.md

Install the Canvas Kit Popup Stack module using yarn.

```sh
yarn add @workday/canvas-kit-popup-stack
```

--------------------------------

### Install Canvas Kit Dependencies

Source: https://github.com/workday/canvas-kit/blob/master/README.md

Install the required React and token packages using your preferred package manager.

```sh
yarn add @workday/canvas-kit-react @workday/canvas-tokens-web
```

```sh
npm install @workday/canvas-kit-react @workday/canvas-tokens-web
```

--------------------------------

### Install Canvas Tokens Web

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Install the necessary Canvas Kit tokens package using yarn.

```bash
yarn add @workday/canvas-tokens-web
```

--------------------------------

### Install System Icons Package

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Install the necessary packages for using System Icons in your React project.

```sh
npm install @workday/canvas-kit-react @workday/canvas-system-icons-web
```

--------------------------------

### Basic Media Modal Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/MediaModal.mdx

Demonstrates a basic Media Modal with an image or video. This example utilizes the MediaContainer component for expanded media presentation.

```javascript
import {Meta} from '@storybook/blocks';
import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
import {BasicExample} from './examples/MediaModal';

<Meta title="Examples/Media Modal" />

## Media Modal example

These are modals that have an image or video as the primary content. The example can use a special
`MediaContainer` component that allows for media to take up more space in the Modal.

<ExampleCodeBlock code={BasicExample} />
```

--------------------------------

### Install Canvas Kit v16 Dependencies

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/upgrade-guides/16.0-UPGRADE-GUIDE.md

Install the required versions of tokens and icons, then upgrade the Canvas Kit package.

```sh
# Separate packages required by Canvas Kit v16
yarn add @workday/canvas-tokens-web@4.4.0 @workday/canvas-system-icons-web@5.0.0

# Upgrade Canvas Kit packages (adjust package names to what your app uses)
yarn add @workday/canvas-kit-react@^16
```

--------------------------------

### Install Expressive Icons

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Instructions for installing the necessary packages to use Expressive Icons. This includes the core React package and the expressive icons web package.

```sh
npm install @workday/canvas-kit-react @workday/canvas-expressive-icons-web
```

--------------------------------

### Install and Run Codemod with npx

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/style-props/stylePropsMigrationCodemod.mdx

Use npx to run the codemod without installing it globally. Replace `[path]` with the target directory.

```sh
npx @workday/canvas-kit-codemod v14.1 [path]
```

--------------------------------

### Global Header Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/accessibility/Headers.mdx

A basic example of a global header component, likely for use in internal Workday applications or as a reference for external components.

```javascript
import { GlobalHeader } from '@workday/canvas-kit-react/page-header';

export const Basic = () => (
  <GlobalHeader>
    <GlobalHeader.Start>
      <a href="#">Workday</a>
    </GlobalHeader.Start>
    <GlobalHeader.Nav>
      <GlobalHeader.NavItem href="#">Home</GlobalHeader.NavItem>
      <GlobalHeader.NavItem href="#">About</GlobalHeader.NavItem>
    </GlobalHeader.Nav>
    <GlobalHeader.End>
      <Tooltip title="Notifications">
        <IconButton aria-label="Notifications" icon={NotificationsIcon} variant="transparent" />
      </Tooltip>
      <Tooltip describe as="div" title="Global Navigation">
        <Button variant="transparent" icon={MenuIcon}>Menu</Button>
      </Tooltip>
    </GlobalHeader.End>
  </GlobalHeader>
);
```

--------------------------------

### Document Deprecation in Upgrade Guide

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/MAINTAINING.mdx

Markdown example for documenting a deprecation in the Upgrade Guide, including PR number and migration strategy.

```markdown
## Deprecations

...

### ${Deprecated Name}

**PR:** [#${PR number where the deprecation took
place}](https://github.com/Workday/canvas-kit/pull/${PR number})

We've deprecated ${Deprecated Name} ${Optional: Include package name to disambiguate (e.g., "from
Labs")} ${Provide a migration strategy}
```

--------------------------------

### Basic Pagination Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/pagination/stories/pagination.mdx

Sets up a basic Pagination component with default range and step controls for navigating between pages. Includes Pagination.AdditionalDetails for accessibility.

```jsx
import React from 'react';
import {Pagination} from '@workday/canvas-kit-react/pagination';

export const Basic = () => (
  <Pagination>
    <Pagination.StepToPreviousButton />
    <Pagination.Pages />
    <Pagination.StepToNextButton />
    <Pagination.AdditionalDetails />
  </Pagination>
);
```

--------------------------------

### Select with Formik

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/FormsWithFormik.mdx

Example of a Select component integrated with Formik for form handling. Ensure Formik is installed and configured in your project.

```jsx
import {Meta} from '@storybook/blocks';
import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
import {SelectWithFormik} from './examples/SelectWithFormik';

<Meta title="Examples/Forms/Select With Formik" />

# Canvas Kit Examples

## Select Using Formik

<ExampleCodeBlock code={SelectWithFormik} />
```

--------------------------------

### Component Styling with New Tokens

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/tokens/TokenMigrationFinal.mdx

Example of styling a primary button using the new Brand and System tokens from Canvas Kit. Ensure '@workday/canvas-kit-styling' and '@workday/canvas-tokens-web' are installed.

```javascript
import {createStyles} from '@workday/canvas-kit-styling';
import {brand, system} from '@workday/canvas-tokens-web';

const primaryButtonStyles = createStyles({
  padding: `${system.padding.sm} ${system.padding.xl}`,
  backgroundColor: brand.primary600,
  borderColor: brand.common.focus,
  borderRadius: system.shape.sm,
  color: system.color.fg.inverse,
  '&:hover': {
    backgroundColor: brand.primary800,
  },
});
```

--------------------------------

### Responsive Columns Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/Layouts.mdx

Shows how columns adapt to different screen sizes. Use for layouts that need to be responsive.

```jsx
import {Grid} from '@workday/canvas-kit-react/layout';

export const ResponsiveColumns = () => (
  <Grid minWidth={300} gridColumns={12}>
    <Grid gridColumnStart={1} gridColumnEnd={4} />
    <Grid gridColumnStart={4} gridColumnEnd={8} />
    <Grid gridColumnStart={8} gridColumnEnd={12} />
  </Grid>
);
```

--------------------------------

### Component Documentation MDX Structure

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/DOCUMENTATION_GUIDELINES.mdx

Standard structure for component documentation MDX files, including imports, Meta tag, component title, installation, usage examples, and API documentation.

```md
<!--
Import components which will be used to render documentation in the MDX file.
The Specifications import is optional; only include it if the Specifications
section exists (see below)
-->

import {Specifications, SymbolDoc} from '@workday/canvas-kit-docs';

<!--
Import the component so we can pass it into the Storybook Meta tag (see
below).
-->

import {[Component]} from '@workday/canvas-kit-[preview-|labs-]react/[component]';

<!--
MDX file should refer to *.stories.ts/js file with CSF stories
-->

import * as ComponentStories from './Component.stories'

<!--
Use the Storybook Meta tag to designate where to display the component in the
Storybook navigation hierarchy. The title prop specifies where to show the
component in the hierarchy. The component prop is required to get the component
to show up at the end of that path.
-->
<Meta of={ComponentStories} />

# Canvas Kit [Component]

Short description of Component.

## Installation

```sh
yarn add @workday/canvas-kit-[preview-|labs-]react
```

<!--
The Usage section should be a list of examples of how to use the component.
Aside from having a Basic Example, there are no set rules on how many examples
to include for a given component. Try to include enough examples to illustrate
all common use cases and anything which may not be obvious based on the
component API.
-->

## Usage

<!--
Every component should have a basic example as its first example in the Usage
section. Title the section "Basic Example" for consistency.
-->

### Basic Example

Description of the Basic Example.

<!--
Every example should include an ExampleCodeBlock which renders the example
along with its associated code.
-->
<ExampleCodeBlock code={Basic} />

<!--
Feel free to include supplemental or follow-up information about the example
underneath the ExampleCodeBlock (if necessary).
-->

More information about the Basic Example.

### Another Example

Description of Another Example.

<ExampleCodeBlock code={AnotherExample} />

### More Examples...

<!--
The SymbolDoc component will generate the entire Component API section using
the component's JSDocs. This includes descriptions and props tables for the
component, as well as its subcomponents if it's a compound component.
Documentation for the model will also be included if the component has a model.
-->

## Component API

<!--
The fileName prop is used to disambiguate between components which exist in
multiple Canvas Kit packages.
-->
<SymbolDoc name="[Component]" fileName="/[preview-|labs-]react/" />

<!--
The Specifications section is optional. Only include it if the component has
Cypress integration tests (i.e., a spec.ts file in the cypress/integration
folder).
-->

## Specifications

<Specifications file="./cypress/component/[Component].spec.tsx" name="[Component]" />
```

--------------------------------

### Install KBD package

Source: https://github.com/workday/canvas-kit/blob/master/modules/labs-react/kbd/stories/KBD.mdx

Use yarn to add the labs-react package to your project.

```bash
yarn add @workday/canvas-kit-labs-react
```

--------------------------------

### Interactive Grid Item Layout

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/layout/stories/Grid.mdx

Shows how to use Grid.Item for more granular control over cell placement within a Grid container. This example allows manipulation of row and column start positions.

```jsx
<Grid gridTemplateColumns="repeat(3, 1fr)" gridGap={space.s}>
  <Grid.Item gridRowStart={1} gridColumnStart={1}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={1} gridColumnStart={2}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={1} gridColumnStart={3}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={2} gridColumnStart={1}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={2} gridColumnStart={2}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={2} gridColumnStart={3}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={3} gridColumnStart={1}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={3} gridColumnStart={2}>
    <Box background={color.soap500} height="100%" />
  </Grid.Item>
  <Grid.Item gridRowStart={1} gridColumnStart={3} gridRowEnd={4}>
    <Box background={color.peach300} height="100%" />
  </Grid.Item>
</Grid>
```

--------------------------------

### Using System Tokens for Theming

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Demonstrates the preferred way to use system tokens for semantic styling, ensuring better theming support.

```javascript
backgroundColor: system.color.bg.default
```

--------------------------------

### fetch-component-documentation-example

Source: https://github.com/workday/canvas-kit/blob/master/modules/mcp/stories/mdx/MCPDocs.mdx

Opens a Canvas Kit component in Storybook and returns metadata for assistants.

```APIDOC
## fetch-component-documentation-example

### Description
Opens a Canvas Kit component in Storybook and returns metadata for assistants, including a link to the full markdown documentation.

### Parameters
- **story** (string) - Required - Component slug from the tool’s enum (e.g., 'buttons', 'menu', 'pill', 'modal', 'tabs').

### Returns
- Storybook URL for the component’s docs page.
- A resource_link to documentation examples.
- Inline preview metadata for supported clients.
```

--------------------------------

### Install Divider Component

Source: https://github.com/workday/canvas-kit/blob/master/modules/preview-react/divider/stories/Divider.mdx

Install the Divider component using yarn.

```sh
yarn add @workday/canvas-kit-preview-react
```

--------------------------------

### Basic createStyles Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/styling/stories/mdx/CreateStyles.mdx

Demonstrates a simple use case for createStyles to apply background and text color. The generated HTML and CSS are shown for clarity.

```html
<div class="css-m39zwu"></div>
```

```css
.css-m39zwu {
  background: var(--cnvs-sys-color-bg-default);
  color: var(--cnvs-sys-color-fg-inverse);
}
```

--------------------------------

### Install Canvas Kit Fonts

Source: https://github.com/workday/canvas-kit/blob/master/modules/react-fonts/README.md

Install the @workday/canvas-kit-react-fonts module using yarn.

```sh
yarn add @workday/canvas-kit-react-fonts
```

--------------------------------

### Initialize Styling Utilities

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-14.txt

Import the required styling utilities and token system for component styling.

```typescript
import { createStyles, cssVar } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
```

--------------------------------

### fetch-component-documentation-example

Source: https://github.com/workday/canvas-kit/blob/master/modules/mcp/README.md

Renders an interactive Canvas Kit component story inline for the user.

```APIDOC
## fetch-component-documentation-example

### Description
Renders an interactive Canvas Kit component story inline for the user. Returns the Storybook URL, a resource link, and story HTML.

### Parameters
- **story** (string) - Required - An enum of available component slugs (e.g., 'buttons', 'text-input', 'modal').
```

--------------------------------

### Install Loading Sparkles

Source: https://github.com/workday/canvas-kit/blob/master/modules/preview-react/loading-sparkles/stories/LoadingSparkles.mdx

Install the Canvas Kit React package to use the LoadingSparkles component.

```sh
yarn add @workday/canvas-kit-react
```

--------------------------------

### 4 and 2 Column Tiled View Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/Layouts.mdx

Demonstrates a tiled layout with alternating 4 and 2 column configurations. Suitable for asymmetrical content arrangements.

```jsx
import {Grid} from '@workday/canvas-kit-react/layout';

export const Tiled4and2Columns = () => (
  <Grid minWidth={300} gridColumns={12}>
    <Grid gridColumnStart={1} gridColumnEnd={7} />
    <Grid gridColumnStart={7} gridColumnEnd={13} />
    <Grid gridColumnStart={1} gridColumnEnd={5} />
    <Grid gridColumnStart={5} gridColumnEnd={9} />
  </Grid>
);
```

--------------------------------

### Basic Action Bar Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/action-bar/stories/ActionBar.mdx

Demonstrates a basic ActionBar with a primary action and secondary actions.

```jsx
import {ActionBar} from '@workday/canvas-kit-react/action-bar';

<ActionBar>
  <ActionBar.List>
    <ActionBar.Item>
      Primary Action
    </ActionBar.Item>
    <ActionBar.Item>
      Secondary Action 1
    </ActionBar.Item>
    <ActionBar.Item>
      Secondary Action 2
    </ActionBar.Item>
  </ActionBar.List>
</ActionBar>
```

--------------------------------

### Install AI Ingress Button

Source: https://github.com/workday/canvas-kit/blob/master/modules/labs-react/ai-ingress-button/stories/AIIngressButton.mdx

Install the AI Ingress Button component using yarn.

```sh
yarn add @workday/canvas-kit-labs-react
```

--------------------------------

### Custom Column Width Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/Layouts.mdx

Shows how to define custom widths for columns. Apply this when specific column sizing is required.

```jsx
import {Grid} from '@workday/canvas-kit-react/layout';

export const CustomColumnWidth = () => (
  <Grid minWidth={300} gridColumns={12} gridColumnStart={1} gridColumnEnd={4}>
    <Grid gridColumnStart={1} gridColumnEnd={4} />
  </Grid>
);
```

--------------------------------

### Card Component Migration Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Demonstrates a complete migration of a Card component's styles from old tokens to new system tokens, including spacing, colors, shape, depth, and typography.

```javascript
import { colors, space, borderRadius, type, depth } from '@workday/canvas-kit-react/tokens';
import { createStyles } from '@workday/canvas-kit-styling';

const cardStyles = createStyles({
  padding: space.l,
  backgroundColor: colors.frenchVanilla100,
  borderColor: colors.soap500,
  borderRadius: borderRadius.m,
  color: colors.blackPepper300,
  depth: 1,
  ...type.levels.body.medium,
});

const headerStyles = createStyles({
  color: colors.blackPepper500,
  marginBottom: space.s,
  ...type.levels.heading.small,
});

const errorTextStyles = createStyles({
  color: colors.cinnamon500,
  ...type.levels.subtext.large,
});
```

```javascript
import { createStyles, px2rem } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';

const cardStyles = createStyles({
  padding: system.space.x8,
  backgroundColor: system.color.bg.default,
  border: `solid ${px2rem(1)}`,
  borderColor: system.color.border.container,
  borderRadius: system.shape.x1,
  color: system.color.text.default,
  boxShadow: system.depth[1],
  ...system.type.body.medium,
});

const headerStyles = createStyles({
  color: system.color.text.default,
  marginBottom: system.space.x4,
  ...system.type.heading.small,
});

const errorTextStyles = createStyles({
  color: system.color.text.critical.default,
  ...system.type.subtext.large,
});
```

--------------------------------

### 3 and 2 Column Tiled View Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/Layouts.mdx

Illustrates a tiled layout with alternating 3 and 2 column configurations. Useful for varied content presentation.

```jsx
import {Grid} from '@workday/canvas-kit-react/layout';

export const Tiled2and3Columns = () => (
  <Grid minWidth={300} gridColumns={12}>
    <Grid gridColumnStart={1} gridColumnEnd={7} />
    <Grid gridColumnStart={7} gridColumnEnd={13} />
    <Grid gridColumnStart={1} gridColumnEnd={5} />
    <Grid gridColumnStart={5} gridColumnEnd={9} />
    <Grid gridColumnStart={9} gridColumnEnd={13} />
  </Grid>
);
```

--------------------------------

### Form Input Migration: After (New Tokens)

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/tokens/TokenMigrationFinal.mdx

Demonstrates migrating form input styles to the new system tokens, including focus, error, and disabled states.

```javascript
import {createStyles, px2rem} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const inputStyles = createStyles({
  padding: `${system.padding.sm} ${system.padding.md}`,
  backgroundColor: system.color.surface.default,
  borderColor: system.color.border.default,
  borderRadius: px2rem(2),
  color: system.color.fg.default,
  '&:focus': {
    borderColor: system.color.border.primary.default,
    backgroundColor: system.color.surface.default,
  },
  '&.error': {
    borderColor: system.color.border.critical.default,
    backgroundColor: system.color.surface.critical.default,
  },
  '&:disabled': {
    backgroundColor: system.color.surface.raised,
    color: system.color.fg.disabled,
  },
});
```

--------------------------------

### Configuration Component Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/COMPOUND_COMPONENTS.mdx

Illustrates a configuration component for Tabs, where items are passed as a prop.

```tsx
<Tabs
  items={[
    {title: 'First Tab', content: 'First Tab Contents'},
    {title: 'Second Tab', content: 'Second Tab Contents'},
  ]}
/>
```

--------------------------------

### Install Roboto dependencies

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/FONTS.mdx

Install the specific React fonts package for applications not using the Sana Canvas theme.

```sh
yarn add @workday/canvas-kit-react-fonts
```

--------------------------------

### get-canvas-kit-upgrade-guides

Source: https://github.com/workday/canvas-kit/blob/master/modules/mcp/README.md

Returns Canvas Kit upgrade guide documentation (v9 through v14) as resource links.

```APIDOC
## get-canvas-kit-upgrade-guides

### Description
Returns Canvas Kit upgrade guide documentation (v9 through v14) as resource links.
```

--------------------------------

### Install Sana Sans dependencies

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/FONTS.mdx

Install the core Canvas Kit React package to access the fonts module.

```sh
yarn add @workday/canvas-kit-react
```

--------------------------------

### Card Codemod Non-Handling Examples

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/5.0-UPGRADE-GUIDE.mdx

Examples of Card usage that are NOT handled by the codemod, such as spread props or re-exported components.

```tsx
// NOT handled by the codemod

// Spread props
import {Card} from '@workday-canvas-kit-card'

const props = {
  header: 'Card Title'
}
<Card {...props}>Card Body</Card>

// Re-exporting
import {Card} from './Card' // where `Card` is a re-exported Canvas Kit `Card`
```

--------------------------------

### Horizontal Label Position (Start)

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/form-field/stories/FormField.mdx

Configure the label to appear at the start of the container by setting the `orientation` prop to `horizontalStart`.

```jsx
import {FormField} from '@workday/canvas-kit-react';

<FormField orientation="horizontalStart">
  <FormField.Label>Label</FormField.Label>
  <FormField.Input />
</FormField>
```

--------------------------------

### Cypress Command Chain Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/TESTING.mdx

Demonstrates Cypress's command chaining for interacting with DOM elements and asserting their state. Commands are enqueued and executed sequentially by the Cypress runtime.

```typescript
cy.get('body').contains('button', 'Delete Item').click();

cy.get('[data-testid="MyResult"]').should('contain', 'Success!');
```

--------------------------------

### Basic CanvasProvider Setup

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/welcome.mdx

Wrap your application root with CanvasProvider to ensure proper style merging, especially when using Emotion. Ensure CSS variables are imported.

```tsx
import * as React from 'react';

import {CanvasProvider} from '@workday/canvas-kit-react/common';
// Ensure CSS variables are defined. You Can also do this at the root index.css
import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
import '@workday/canvas-tokens-web/css/component/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';

export const App = () => {
  return (
    <CanvasProvider>
      <main>
        <p>Get Started With Canvas Kit</p>
      </main>
    </CanvasProvider>
  );
};

```

--------------------------------

### Migrate Space Tokens

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/tokens/TokenMigrationMappingSystem.mdx

Example demonstrating the migration of space tokens from older versions to v4 system tokens for padding and margin properties.

```javascript
// Old
import {space} from '@workday/canvas-kit-react/tokens';
const styles = createStyles({
  padding: space.l,
  margin: space.m,
});

// New
import {system} from '@workday/canvas-tokens-web';
const styles = createStyles({
  padding: system.padding.xxl,
  margin: system.gap.lg,
});
```

--------------------------------

### v7 Modal Hook Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx

Example of the useMyModalModel hook in v7, showcasing the refactored createModelHook for simplified type management.

```ts
import {
  useCloseOnEscape,
  useEventMap,
  useFocusTrap,
  useInitialFocus,
  usePopupModel,
  useReturnFocus,
} from '@workday/canvas-kit-react';

const useMyModalModel = createModelHook({
  defaultConfig: {
    ...usePopupModel.defaultConfig,
    showOverlay: true,
  },
  requiredConfig: usePopupModel.requiredConfig,
  contextOverride: usePopupModel.Context, // needed to make sure this model uses the same context as the popup model, otherwise it will create a new one
})(config => {
  // `mergeConfig` takes care of the manual merging we were doing earlier
  const model = usePopupModel(
    usePopupModel.mergeConfig(config, {
      // hook up to a redux store
      onShow() {
        dispatch(setIsModalOpen(true));
      },
      onHide() {
        dispatch(setIsModalOpen(false));
      },
    })
  );

  useInitialFocus(model);
  useReturnFocus(model);
  useFocusTrap(model);
  useCloseOnEscape(model);

  const state = {
    ...model.state,
    showOverlay,
  };

  return {...model, state};
});

```

--------------------------------

### Basic System Icon Implementation

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/icon/stories/Assets.mdx

Demonstrates the basic usage of the System Icon component. Ensure you have installed the required packages.

```jsx
<ExampleCodeBlock code={SystemBasic} />
```

--------------------------------

### v6 Modal Hook Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/7.0-UPGRADE-GUIDE.mdx

Example of the useMyModalModel hook in v6, demonstrating manual state and event map creation.

```tsx
import {
  BasePopupModelConfig,
  createEventMap,
  Model,
  popupEventMap,
  PopupEvents,
  PopupModelConfig,
  PopupState,
  ToModelConfig,
  useCloseOnEscape,
  useEventMap,
  useFocusTrap,
  useInitialFocus,
  usePopupModel,
  useReturnFocus,
} from '@workday/canvas-kit-react';

type MyModalState = PopupState & {
  showOverlay: boolean;
};

type MyModalEvents = PopupEvents;

const myModalEventMap = createEventMap<MyModalEvents>()({
  guards: {
    ...popupEventMap.guards,
  },
  callbacks: {
    ...popupEventMap.callbacks,
  },
});

type MyBaseModalConfig = BasePopupModelConfig & {
  showOverlay?: boolean;
};

type MyModalModel = Model<MyModalState, MyModalEvents>;

type MyConfig = MyBaseConfig &
  Partial<ToModelConfig<MyModalState, MyModalEvents, typeof myModalEventMap>>;

export const useMyModalModel = (config: MyConfig = {}): MyModalModel => {
  const [showOverlay] = React.useState(config.showOverlay ?? true);

  const model = usePopupModel({
    ...config,
    // hook up to a redux store
    onShow(...params) {
      dispatch(setIsModalOpen(true));
      config?.onShow?.(...params);
    },
    onHide(...params) {
      dispatch(setIsModalOpen(false));
      config?.onShow?.(...params);
    },
  });

  useInitialFocus(model);
  useReturnFocus(model);
  useFocusTrap(model);
  useCloseOnEscape(model);

  const state = {
    ...model.state,
    showOverlay,
  };

  const events = useEventMap(myEventMap, state, config, {
    ...model.events,
  });

  return {state, events};
};

```

--------------------------------

### Basic ListBox Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/collection/stories/mdx/Collection.mdx

Demonstrates the basic usage of ListBox with static items registered using useListItemRegister.

```jsx
<ExampleCodeBlock code={Basic} />
```

--------------------------------

### Test MCP Server Locally

Source: https://github.com/workday/canvas-kit/blob/master/modules/mcp/README.md

Commands to switch Node versions, build the project, and launch the MCP inspector with the local CLI.

```bash
nvm use 22
yarn build
npx @modelcontextprotocol/inspector node dist/cli.js
```

--------------------------------

### Roving Tabindex Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/collection/stories/mdx/Collection.mdx

Demonstrates using `useListRovingFocus` for accessible item focusing within a list. This example uses the `ListBox` component.

```jsx
import { ListBox } from '@workday/canvas-kit-react/collection';

const RovingFocus = () => (
  <ListBox>
    <ListBox.Item elemPropsHook={useListRovingFocus}>Item 1</ListBox.Item>
    <ListBox.Item elemPropsHook={useListRovingFocus}>Item 2</ListBox.Item>
    <ListBox.Item elemPropsHook={useListRovingFocus}>Item 3</ListBox.Item>
  </ListBox>
);
```

--------------------------------

### Static Compiler Transformation Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-style-props-migration.txt

Demonstrates the transformation of createStyles calls from dynamic runtime definitions to pre-computed static objects.

```ts
// before
const myVars = createVars('textColor', 'backgroundColor');

const myStyles = createStyles({
  fontSize: 12,
  color: cssVar(myVars.textColor),
  backgroundColor: cssVar(myVars.backgroundColor),
});

// after
const myVars = createVars('textColor', 'backgroundColor');

const myStyles = createStyles({
  name: 'a8g234',
  styles:
    'font-size: 12px; color: var(--css-my-vars-textColor); backgroundColor: var(--css-my-vars-backgroundColor);',
});
```

--------------------------------

### Basic Testing Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/testing/stories/Testing.mdx

Demonstrates visual testing of a DeleteButton component in various states using StaticStates and ComponentStatesTable.

```jsx
import {Meta} from '@storybook/blocks';
import {ExampleCodeBlock, Specifications} from '@workday/canvas-kit-docs';
import {Basic} from './examples/Basic';
import * as TestingStories from './Testing.stories';

<Meta of={TestingStories} />

# Testing

A package that provides components and utilities for testing

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

`StaticStates` in conjunction with `ComponentStatesTable` allows consumers to visually test their
components in different states. Below is an example of how we're using these to create a visual
table of a `DeleteButton` component with different prop values and visual states.

`StaticStates` serves similarly as a context provider where is wraps children in a `CanvasProvider`
exposing a `theme` prop.

`ComponentStatesTable` allows consumers to built up a visual table based on row and column props.

<ExampleCodeBlock code={Basic} />
```

--------------------------------

### Compound Component Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/react/_examples/stories/mdx/CompoundComponent.mdx

This code block shows a practical example of a compound component. It utilizes the Template from './examples/compoundComponent/CustomCard' to illustrate the concept.

```javascript
import {Meta} from '@storybook/blocks';
import { ExampleCodeBlock } from '@workday/canvas-kit-docs';

import { Template } from './examples/compoundComponent/CustomCard';

<Meta title="Examples/Compound Component" />

# Canvas Kit Examples

## Compound Component

Component component utilites are a great way to wrap and extend exisitng Canvas Kit Components. This
can dramatically simplify state handling and gives you easy access to things like ref forwarding.

For more complex examples,
[see the creating-compound-components guide](https://workday.github.io/canvas-kit/?path=/docs/guides-creating-compound-components--docs).

<ExampleCodeBlock code={Template} />
```

--------------------------------

### Avatar Component Usage Examples

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/upgrade-guides/15.0-UPGRADE-GUIDE.md

Examples demonstrating new features like initials display, decorative mode, and compound component usage.

```tsx
// With initials (no image)
<Avatar name="John Doe" variant="blue" />

// Custom initials
<Avatar name="John Smith Doe" preferredInitials="JD" />

// Decorative (next to text name)
<Avatar name="John Doe" url="..." isDecorative />

// Using compound components for custom layouts
<BaseAvatar variant="teal" size="large">
  <BaseAvatar.Image src="..." alt="John Doe" />
  <BaseAvatar.Name name="John Doe" />
</BaseAvatar>
```

--------------------------------

### Form Input Migration Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/llm/llm-token-migration-13.2.txt

Shows the migration of a form input's styles from old tokens to new system tokens, focusing on padding, background, border, and border-radius.

```javascript
import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';

const inputStyles = createStyles({
  padding: `${space.xs} ${space.s}`,
  backgroundColor: colors.frenchVanilla100,
  borderColor: colors.soap400,
  borderRadius: borderRadius.s,
  color: colors.blackPepper400,
  '&:focus': {

```

--------------------------------

### Other Style Props Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/docs/mdx/style-props/STYLE_PROPS.mdx

Adjusts miscellaneous styles of components using other style props. This example is part of the deprecated style props feature.

```tsx
<ExampleCodeBlock code={Other} />
```

--------------------------------

### Basic Loading Sparkles Example

Source: https://github.com/workday/canvas-kit/blob/master/modules/preview-react/loading-sparkles/stories/LoadingSparkles.mdx

Demonstrates the basic usage of LoadingSparkles with ARIA live region integration for screen readers. Simulates a loading state using setTimeout.

```jsx
import React from 'react';
import { LoadingSparkles } from '@workday/canvas-kit-preview-react/loading-sparkles';
import { AccessibleHide } from '@workday/canvas-kit-react/common';

const Basic = () => {
  const [isLoading, setIsLoading] = React.useState(false);

  const handleGenerateQuote = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  };

  return (
    <div>
      <button onClick={handleGenerateQuote} disabled={isLoading}>
        Generate Quote
      </button>
      {isLoading && (
        <div role="status" aria-live="polite">
          <LoadingSparkles aria-label="Generating quote" />
          <AccessibleHide>
            Quote generation complete.
          </AccessibleHide>
        </div>
      )}
      {/* Generated text would go here, outside the live region */}
    </div>
  );
};

export default Basic;

```

--------------------------------

### Install Canvas Kit Styling

Source: https://github.com/workday/canvas-kit/blob/master/modules/styling/stories/mdx/Overview.mdx

Add the core styling package to your project dependencies.

```sh
yarn add @workday/canvas-kit-styling
```
Tokens:
Raw