Migrating from Canvas Kit React Theme Breakpoints

[alanbsmith]

Migrating from Canvas Kit React Theme Breakpoints

Overview

If you've been using Canvas Kit, you're probably familiar with our theme breakpoints that are provided in Emotion's theme object through the CanvasProvider. While we'll continue to support those breakpoints for now, we'll remove their usage internally and eventually remove them entirely.

While it was convenient to have breakpoint values and functions in the theme, they don't really belong there. They will be replaced with our new breakpoint tokens in @workday/canvas-tokens-web. These CSS variables are much more straightforward to use and don't rely on Emotion's runtime.

Migrating From Canvas Kit React Breakpoint Values

Previously, if you were adding responsive styles to a Canvas Kit Card, you would need to do something like this:

import {styled} from '@emotion/react';
import {Card} from '@workday/canvas-kit-react/card';

export const ResponsiveCard = styled(Card)({
  padding: '0.75rem',
}, ({ theme }) => {
    // reduce padding on small screen sizes
    `@media (min-width: ${theme.breakpoints.values.s}`: {
      padding: '0.25rem',
    }
};

With @workday/canvas-tokens-web@^1.3.0, you can use the token values directly, without needing to use Emotion's styled function at all.

We're using Canvas Kit React V10 below to take advantage of new style utilities.

import {Card, CardProps} from '@workday/canvas-kit-react/card';
import {createStencil} from '@workday/canvas-kit-styling';
// Be sure to import CSS variables at the top of your application if they are not already provided for you.
import {system} from '@workday/canvas-tokens-web';

const responsiveCardStyles = createStyles({
  padding: '0.75rem',
  // reduce padding on small sceen sizes
  `@media (min-width: ${system.breakpoints.s})`: {
    padding: '0.25rem',
  },
};

const ResponsiveCard = (props: CardProps) => <Card cs={responsiveCardStyles} {...props} />

The names of the tokens are identical, making it simple to map between them.

Canvas Kit React	Canvas Tokens Web
theme.breakpoints.values.zero	system.breakpoints.zero
theme.breakpoints.values.s	system.breakpoints.s
theme.breakpoints.values.m	system.breakpoints.m
theme.breakpoints.values.l	system.breakpoints.l
theme.breakpoints.values.xl	system.breakpoints.xl

Migrating from Canvas Kit React Breakpoint Functions

Canvas Kit also provides breakpoint functions which made breakpoint media queries a bit easier to write. Below, we've reused the example above with a breakpoint function.

import {styled} from '@emotion/react';
import {Card} from '@workday/canvas-kit-react/card';

const ResponsiveCard = styled(Card)({
  padding: '0.75rem',
}, ({ theme }) => {
    // reduce padding between small and large screen sizes
    [theme.breakpoints.between('s', 'l')]: {
      padding: '0.25rem',
    }
};

The example above can be refactored with our new tokens:

import {Card, CardProps} from '@workday/canvas-kit-react/card';
import {createStencil} from '@workday/canvas-kit-styling';
import {system} from '@workday/canvas-tokens-web';

const responsiveCardStyles = createStyles({
  padding: '0.75rem',
  // reduce padding on small sceen sizes
  `@media (min-width: ${system.breakpoints.s}) and (max-width: ${system.breakpoints.l}))`: {
    padding: '0.25rem',
  },
};

const ResponsiveCard = (props: CardProps) => <Card cs={responsiveCardStyles} {...props} />

Conclusion

We think you'll enjoy using these new breakpoint tokens and find the migration process very straightforward. If you have questions, please reach out to our team. We're happy to help.