Miss any of our Open RFC calls?Watch the recordings here! »

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

4.2.0 • Public • Published

Canvas Kit Labs React Core

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

Includes:

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

Install

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

DownloadsWeekly Downloads

568

Version

4.2.0

License

Apache-2.0

Unpacked Size

41.4 kB

Total Files

39

Last publish

Collaborators

  • avatar
  • avatar