For Developers
Using Canvas
Welcome to Workday Canvas! If you’re just starting out developing with Canvas, follow the guide below to get up and running.
The primary way you will interact with Canvas will be with our Canvas Kit React library. Canvas Kit provides a set of components and primitives that can be used to implement user experiences consistent with the rest of Workday. As of v11, our library relies on the usage of our Tokens package for styling.
Canvas Kit
We support installation for existing projects and bootstrapping in a new project.
Installation
For an existing project, add the Canvas Kit React dependency with your preferred package manager.
With Yarn:
> yarn add @workday/canvas-kit-react
With npm:
> npm install --save @workday/canvas-kit-react
Canvas Tokens
This package provides Canvas design tokens for web applications. As of v11 our components rely on our Tokens Package. You must install and import the variables to ensure our components are styled correctly.
> yarn add @workday/canvas-tokens-web
Import the variables at the top level of your application to prevent duplicate imports and avoid unintentional overwrites. Import them in a native CSS file or in a JavaScript / TypeScript file as shown below.
/* index.css */@import '@workday/canvas-tokens-web/css/base/_variables.css';@import '@workday/canvas-tokens-web/css/system/_variables.css';@import '@workday/canvas-tokens-web/css/brand/_variables.css';
// index.tsimport '@workday/canvas-tokens-web/css/base/_variables.css';import '@workday/canvas-tokens-web/css/system/_variables.css';import '@workday/canvas-tokens-web/css/brand/_variables.css';
For more information, view our Canvas Tokens docs.
Bootstrapping
Canvas Kit is built with React and Create React App is recommended for bootstrapping a new React project.
Usage
Now you're ready to import our components.
import React from 'react';import {PrimaryButton} from '@workday/canvas-kit-react/button';import {Flex} from '@workday/canvas-kit-react/layout';import {plusIcon,relatedActionsVerticalIcon,caretDownIcon,} from '@workday/canvas-system-icons-web';import {createStyles} from '@workday/canvas-kit-styling';import {system} from '@workday/canvas-tokens-web';const parentContainerStyles = createStyles({gap: system.space.x4,padding: system.space.x4,});export default () => (<Flex cs={parentContainerStyles}><PrimaryButton>Primary</PrimaryButton><PrimaryButton icon={plusIcon} iconPosition="start">Primary</PrimaryButton><PrimaryButton icon={caretDownIcon} iconPosition="end">Primary</PrimaryButton><PrimaryButton icon={relatedActionsVerticalIcon} /></Flex>);
For more information on how to use Canvas Kit components, check out their documentation in the Components section.
Resources
For more documentation, helpful links and other developer resources, check out the Resources page.
Reporting a Bug
If you spot a bug, inconsistency, or typo, please open a bug issue. Better yet, submit a pull request to addresses it.
Feature Requests
If you have an idea, we would love to hear about it. The best way to suggest a feature is to open a feature issue. The Canvas Kit core team will take a look and discuss it with you.
Questions
If you have a question, we are here to help! Start a new discussion to be connected to one of our team members.
Contributing
Want to contribute to Canvas Kit? Please read our contributing guidelines to find out more and how to get started.
Versioning
Canvas Kit follows semantic versioning and is enforced automatically by conventional commits (see "Commit Message Format").
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for.
FAQ Section