Workday Canvas Kit

This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with Workday's design principles.

Workday Canvas Kit is released under the Apache-2.0 license

Getting started

React

Installation

To get started using Canvas kit React first add or install the module to your existing React project

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

or

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

Note: If your application does not already provide Roboto as a font, you can install @workday/canvas-kit-react-fonts. The example below shows how to inject the fonts, but you can omit this if you're already loading fonts.

Usage

To ensure fonts are loaded correctly, update your root index.js file.

import {createRoot} from 'react-dom/client';
import {injectGlobal} from '@emotion/css';
import {fonts} from '@workday/canvas-kit-react-fonts';
import {system} from '@workday/canvas-tokens-web';
import {cssVar} from '@workday/canvas-kit-styling';

import '@workday/canvas-tokens-web/css/base/_variables.css';
import '@workday/canvas-tokens-web/css/brand/_variables.css';
import '@workday/canvas-tokens-web/css/system/_variables.css';

import {App} from './App';

injectGlobal({
  ...fonts,
  'html, body': {
    fontFamily: cssVar(system.fontFamily.default),
    margin: 0,
    minHeight: '100vh',
  },
  '#root, #root < div': {
    minHeight: '100vh',
    ...system.type.body.small,
  },
});

const container = document.getElementById('root')!;
const root = createRoot(container);
root.render(<App />);

The in your App.js you can set a global theme.

import {
  CanvasProvider,
  ContentDirection,
  PartialEmotionCanvasTheme,
  useTheme,
} from '@workday/canvas-kit-react/common';

export const App = () => {
  // useTheme is filling in the Canvas theme object if any keys are missing
  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
    canvas: {
      // Switch to `ContentDirection.RTL` to change direction
      direction: ContentDirection.LTR,
    },
  });

  return (
    <CanvasProvider theme={canvasTheme}>
      <>
        <main>
          <p>Get Started With Canvas Kit</p>
        </main>
      </>
    </CanvasProvider>
  );
};

Reporting a Bug

If you spot a bug, inconsistency, or typo, please open a bug issue. Better yet, submit a pull request to address 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.

Contributing

Want to contribute to Canvas Kit React? Please read our contributing guidelines to find out more and how to get started.

Maintaining

If you're a Canvas Kit maintainer, please read our maintaining docs to learn more about our processes.

Open Development

All work on the Canvas Kit happens directly on GitHub. Both core team members and external contributors can send pull requests which go through the same review process. Any and all issues are public and available for discussion.

Versioning

Canvas Kit follows semantic versioning and is enforced automatically by conventional commits (see "Commit Message Format").

Each module is independently versioned using Lerna.

Version Support

At any given time, we support three major versions of Canvas Kit: previous, current, and next. Each of these has different levels of support.

The previous major version is stable for production and will receive patch updates as needed, but there will be no new features added. Patch releases are automatically deployed upon merge by GitHub Actions.

The current major version is also stable and receives new features and patch updates. Patch releases are automatically deployed upon merge by GitHub Actions, and minor releases are manually deployed at the end of each sprint.

The next major version is typically an unstable environment and has major breaking changes. You are welcome to pull this version down for local development and experimentation, but we generally recommend against using it in production until the first stable version has been released.

Developer Documentation

License

The Workday Canvas Kits are licensed under the Apache 2.0 License.

Supported Browsers

Microsoft Edge: last 2 versions
Mozilla Firefox: last 2 versions
Google Chrome: last 2 versions
Apple Safari: last 2 versions
Opera: last 2 versions

Thank you

Visual Testing by ChromaticQA

Builds by Github Actions

License

Workday/canvas-kit

About

Topics

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases 672

Uh oh!

Contributors 122

Uh oh!

Languages