Skip to content

Releases: Workday/canvas-kit

v5.0.3

09 Jul 20:48
@anicholls anicholls
v5.0.3
ac96aa4
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.3

2021-07-09

Components

  • docs: Convert Buttons category stories to use mdx (#1127) @anicholls
  • docs: Add MDX docs and examples for Input components (#1128) @jamesfan
  • fix(tooltip): Fix overflow ellipsis detection (#1132) @NicholasBoll
  • fix(modal): Fix focus trap when Modal contains an iframe (#1135)

Docs

  • docs: Fix codemod link in v5 migration guide @anicholls

Infrastructure

Assets 2
Loading

v4.8.1

09 Jul 20:48
@anicholls anicholls
v4.8.1
9e2db42
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.8.1

2021-07-09

Components

Assets 2
Loading

v5.0.2

22 Jun 22:47
@alanbsmith alanbsmith
v5.0.2
1333a48
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.2

2021-06-22

Components

Assets 2
Loading

v5.0.1

16 Jun 17:56
@anicholls anicholls
v5.0.1
3d174db
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.1

2021-06-16

Docs

Infrastructure

Assets 2
Loading

v4.8.0

16 Jun 21:22
@alanbsmith alanbsmith
v4.8.0
950ccc9
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.8.0

2021-06-16

Components

  • feat(checkbox): Add aria-checked for accessibility and testability (#1045) @svagi
  • feat(comboxbox): Add default maxHeight to autocomplete container (#1079) @sraj
  • fix(combobox): Fix Combobox RTL issue (#1064) @alanbsmith
  • fix(popup): Allow popups to be owners of each other (#1054) @csongnguyen
  • fix(popup): Allow tooltips to close alongside modals on click outside (#1074) @csongnguyen
  • fix(tabs): Fix aria-selected for unselected tabs (#1033) @angadkaflay
  • fix(tooltip): Allow aria-label pass-through in muted tooltips (#1037) @NicholasBoll

Docs

Infrastructure

Assets 2
Loading

v5.0.0

10 Jun 22:17
@anicholls anicholls
v5.0.0
fa0f4d9
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.0

What’s New in Canvas Kit v5?

Canvas Kit v5 is the first major release this year. A big focus for this release was improving usability and developer experience. The foundation of these improvements is the shift to compound components. Compound components are a better way to build Workday UIs in a composable and flexible way. We’ve also moved to slash imports to make Canvas Kit dependency management easier for teams.

Another big change made is to the way we release our packages. We are adding clarity around labs and have introduced preview into our pipeline. There are a number of changes to individual components. Some of the bigger changes in v5 are to layout and type components. In this release type and layout components evolved to increase usability and bring better alignment across our design system artifacts.

Read on for more information about these improvements and other big changes in Canvas Kit v5. And as always, thank you to our contributors!!!

Contents

Compound Components

This is the start of a fundamental shift for our library. For the past year, we’ve wondered: How can we make Canvas Kit forward-thinking? How can we build Canvas Kit in a way that empowers teams to move forward and evolve their UI while still keeping their core Canvas DNA?

We also spent a lot of time thinking about our consumers and how they use Canvas Kit. Our components work really well for teams who need exactly what we provide, but if they deviate from the default use case, they are left to create hacky patches or forced to build their own component from scratch. On top of frustrating developers, those solutions also create duplicated effort and less coherence across Workday.

That’s counterproductive to our mission and below our standards. The three highest friction points were:

  • Teams need access to lower-level components, either for styling, accessibility, or testing
  • Teams need more control over component behavior
  • Teams need the ability to extend Canvas Kit components without rebuilding them from scratch

Solving those problems is the heart of v5.

We decided to go all-in on composition and expose lower-level components and utilities to help you get more value and flexibility out of Canvas Kit. We spent months experimenting with patterns and refined the concept to what we know today as compound components.

The compound component pattern composes higher-level components from smaller, subcomponents. The parent component (container) exposes its subcomponents which allows you retain access to all the semantic child elements.

Compound components that contain state or behavior will also provide a shared model to subcomponents. A container component takes props for either the model or configuration for the model. Below is an example of a single-panel Tab component which uses the model to control its behavior.

import * as React from ‘react’;
import Tabs, {useTabsModel} from '@workday/canvas-kit-react/tabs';

const TabsExample = () => {
  const tabsModel = useTabsModel();

  const contents = {
    first: <div>Contents of First Tab</div>,
    second: <div>Contents of Second Tab</div>,
    third: <div>Contents of Third Tab</div>,
  };

  return (
   <Tabs model={model}>
      <Tabs.List>
        <Tabs.Item name="first" aria-controls="mytab-panel">
          First Tab
        </Tabs.Item>
        <Tabs.Item name="second" aria-controls="mytab-panel">
          Second Tab
        </Tabs.Item>
      </Tabs.List>
      <Tabs.Panel hidden={undefined} id="mytab-panel">
        {contents[model.state.activeTab]}
      </Tabs.Panel>
    </Tabs>
  );
}

But not all compound components have state or behavior. They can exist as styled elements that expose their child elements directly. Card is a good example:

import Card from '@workday/canvas-kit-react/card';

<Card>
  <Card.Heading>Title</Card.Heading>
  <Card.Body>Card contents</Card.Body>
</Card>

The following components have been upgraded to Compound Components as part of v5:

  • Card
  • Modal
  • Popup
  • Tabs

These components also use our createComponent utility which is described in the following section. We will continue to update the remainder of applicable components to use the compound component pattern.

createComponent

We’ve been thinking a lot about creating common interfaces across our components and ensuring their APIs are consistent. We want all element components (components that render semantic elements) to have certain shared attributes baked into their APIs. Specifically, we want every element component to have:

  • access to all semantic element props
  • consistent, type-safe, ref forwarding
  • consistent, type-safe, element casting with the as prop
  • consistent prop merging when mixing in element props

To accomplish this, we added createComponent for our internal use, but we’re also exporting it so you can benefit as well! This transition is a work-in-progress. The following components have been converted to use createComponent:

  • Box
  • Button
  • IconButton
  • Card
  • Checkbox
  • ColorInput
  • ColorPreview
  • Flex
  • Modal
  • Popup
  • Radio
  • Select
  • Stack / HStack / VStack
  • Switch
  • Tabs
  • TextInput
  • TextArea

We will continue updating our other components to use createComponent to provide a consistent, predictable API across our entire library.

Layout Components

Three new components have been added in v5 to make laying out UIs using Canvas tokens much easier!

  • Box is a primitive component that provides a common, ergonomic API around Canvas design tokens. It is highly flexible, and its primary purpose is to build other components.
<Box as="a" href="https://workday.github.io/canvas-kit" margin=”s” paddingX=”m” background=”blueberry100”>
  Canvas Kit Storybook
</Box>
  • Flex (built on Box) is a low-level layout component that provides a common, ergonomic API for building one-dimensional layouts with CSS Flexbox.
<Flex flexDirection="column" padding="xxxs">
    <Flex
      flex={1}
      padding="xs"
      marginX="xxxs"
      justifyContent="center"
    >
	My Content
    </Flex>
</Flex>
  • Stack, HStack, and VStack (built on Flex) are higher-level layout components that provide an ergonomic API for building one-dimensional layouts with consistent spacing between elements. They're built on top of Flex and Box and have access to all FlexProps and BoxProps. Stack can align items in either a horizontal or vertical orientation. HStack and VStack will only align items in a horizontal or vertical orientation, respectively.
<HStack shouldWrapChildren spacing="s" backgroundColor="soap100" padding="s">
  <Card heading="Diavola" body="sauce, smoked mozzarella, pepperoni, basil, chili flake" />
  <Card
    heading="Four Cheese"
    body="mozzarella, gorgonzola, smoked mozzarella, parmesan, garlic oil "
  />
  <Card
    heading="Veggie"
    body="sauce, mozzarella, artichokes, roasted red peppers, broccolini"
  />
</HStack>

New and Improved Type System

In the past, there has been a lot of confusion around which Canvas Kit type hierarchy to use. The “legacy” hierarchy provided in our main package mimicked the type styles used in UI-Platform. As we iterated towards this new system, we offered a “beta” hierarchy in Canvas Kit Labs. The “beta” hierarchy grew in usage to the point where the majority of product teams were using that. Since then, there has been confusion as to why the “legacy” hierarchy is still around and why the “beta” hierarchy is still in Labs. Well as of today, there is a single flexible, unified approach to type in Canvas Kit. This is an evolution of the “beta” hierarchy and is now in the @workday/canvas-kit-react/tokens package.

The following map indicates how the old type hierarchies map to the new one.

image

Note: this new type system is intended to improve the overall legibility of our products. As you uptake the new hierarchy, rather than just doing a direct mapping, consider your use case. For example, if you were using Body 1 (14px) from the legacy system, don’t automatically use Subtext Large (14px). Consider something semantically equivalent (e.g. Body Small (16px) or Body Medium (18px)).

Popup Changes

In v4, Popups were already broken down into small parts of functionality which allows developers to create custom popup UIs. The Popup component in v4 was really more of a “Popup Card” with an animation applied to it and it was up to developers to handle Popup visibility, positioning (most likely using our Popper component), and behaviors. Popup is now fully a compound component with a model, subcomponents, and behaviors. The pieces that developers needed to connect are now cohesively subcomponents of the Popup. Here’s a simple example of the new Popup compound component API:

import React from 'react';
 
import {DeleteButton} from '@w...
Read more
Assets 2
Loading

v5.0.0-rc.0

08 Jun 03:59
@alanbsmith alanbsmith
v5.0.0-rc.0
03bf989
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.0-rc.0 Pre-release
Pre-release

2021-06-07

Components

Documentation

Infrastructure

Assets 2
Loading

v5.0.0-beta.2

26 Apr 19:01
@anicholls anicholls
v5.0.0-beta.2
d56ea74
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.0-beta.2 Pre-release
Pre-release

2021-04-26

You can find the breaking changes coming in v5 and the codemod provided to make upgrading easier in our v5 Migration Guide.

Components

Infrastructure

Assets 2
Loading

v5.0.0-beta.1

12 Apr 23:24
@anicholls anicholls
v5.0.0-beta.1
7a98928
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v5.0.0-beta.1 Pre-release
Pre-release

2021-04-12

You can find the breaking changes coming in v5 and the codemod provided to make upgrading easier right here.

Components

Codemods

Infrastructure

Docs

Testing

CI

  • ci: Fix error in prerelease logic in publish-canary script @anicholls
  • ci: Update setup-node action and remove custom matcher (#994) @NicholasBoll
  • ci: Fix canary dist-tag for prerelease canaries in slack message (#1003) @anicholls
Assets 2
Loading

v4.7.0

12 Apr 22:26
@alanbsmith alanbsmith
v4.7.0
1df93c9
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.
Compare
Choose a tag to compare
v4.7.0

2021-04-12

Components

  • fix(select): Fix undesired scrolling when activating the menu (#1016) @jamesfan

Infrastructure

CSS

Assets 2
Loading