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;
*/