Package Exports

@workday/canvas-kit-labs-react-core

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@workday/canvas-kit-labs-react-core) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Canvas Kit Labs React Core

This component is work in progress and currently in pre-release.

Includes:

Type
Margin & Padding Spacing
Providers
Theming

Type

This new type hierarchy is in the process of being introduced into our products. It relies on larger font sizes/weights to increase legibility and promote reducing density in UI design. Other than the visual size and weight changes across every level of hierarchy, there are a few naming changes: type.dataViz1 and type.dataViz2 have been renamed to type.brand1 and type.brand2, respectively.

Usage

The usage is the same as the current hierarchy, you just need a different import.

import {type} from '@workday/canvas-kit-labs-react-core';

const MyLabel = styled('label')({
  ...type.body,
  ...type.variant.label,
});

Breaking Change

When the breaking change is made, anyone using the current type guide will need to update the references for dataViz1 and dataViz2.

Margin & Padding Spacing

Spacing functions provide margin and padding spacing. These are available with the space function. The space function utilizes the following props:

Margin Props

m margin
mt margin-top
mr margin-right
mb margin-bottom
ml margin-left
mx margin-left & margin-right
my margin-top & margin-bottom

Padding Props

p padding
pt padding-top
pr padding-right
pb padding-bottom
pl padding-left
px padding-left & padding-right
py padding-top & padding-bottom

Usage

import {spacing, spacingNumbers} from '@workday/canvas-kit-react-core';
import {space} from '@workday/canvas-kit-labs-react-core';

spacing.s; // 16px
spacingNumbers.s; // 16

...

const Box = styled('div')(space)

<Box p={spacing.xl} pb={64} m={40} mx={10}>
  ...
</Box>

/*
  margin-top: 40px;
  margin-right: 10px;
  margin-bottom: 40px;
  margin-left: 10px;
  padding-top: 40px;
  padding-right: 40px;
  padding-bottom: 64px;
  padding-left: 40px;
*/

Providers

Providers are higher order (wrapping) components used to provide global configuration to Canvas components.

Canvas Provider

This provider includes all of the Canvas Providers below. This is the way most consumers should use the provider. This provider is required for our theming capabilities, so you can find more information in the theming documentation.

We strongly encourage you to use this in your application to wrap all Canvas components.

import * as React from 'react';
import {CanvasProvider} from '@workday/canvas-kit-react';

<CanvasProvider>{/* All your components containing any Canvas components */}</CanvasProvider>;

Storybook Decorator

We provide a storybook decorator to wrap your stories in a CanvasProvider (including InputProvider) automatically.

Add this decorator to your /.storybook/config.js configuration file to apply to all stories:

import {CanvasProviderDecorator} from '../utils/storybook';

addDecorator(CanvasProviderDecorator);

Or, add it to stories individually:

import {CanvasProviderDecorator} from '../../../../utils/storybook';

storiesOf('My Story', module)
  .addDecorator(CanvasProviderDecorator)
  .add('All', () => <YourJSX />);

Input Provider

See the @workday/canvas-kit-react-core docs

Theming

Theming documentation has its own README. You can find it here

Bidirectionality

Bidirectionality is provided by Theming. You can find Theming documentation here