DOCSEARCHbyAlgolia
Submit Docs

Workday Canvas Kit

repository·master·Indexed 43 days ago

https://github.com/workday/canvas-kit

A set of components and design tokens used to implement user experiences consistent with the Workday Canvas Design System. Includes tools for migration via canvas-kit-codemod, a popup lifecycle management module (@workday/canvas-kit-popup-stack), documentation components (@workday/canvas-kit-docs), and an MCP server (Canvas Kit MCP) for AI-powered IDE integration.

Tokens
319.6K
Snippets
699
Records
1.4K
Agent score
56%

What's inside Canvas Kit

  2. Overview of Canvas Kit Skills

    master

    Canvas Kit Skills are a set of agent-focused capabilities designed for Canvas Kit consumers (applications depending on @workday/canvas-kit-react). These skills enable AI agents to write, style, and review UI that adheres to the Workday design system correctly.

    Target Environment

    These skills are written for the current generation:

    • Canvas Kit: v16
    • @workday/canvas-tokens-web: 4.4 (Sana Canvas theme)

    Important Scope Notes

    • Not for Maintainers: These skills are for using the library, not for working on the canvas-kit repository's internal source code.
    • Static Design Principles: The sana-canvas-kit-design-principles skill uses a static snapshot of design documentation and does not perform live lookups.
    • Exclusions: These skills do not cover content/UI text style (grammar, terminology) or standalone theming (Sana theme setup is handled within the version and tokens skills).

  3. Overview of Canvas Kit Color Picker

    master

    The Canvas Kit Color Picker module provides two primary components for handling color selection and visualization:

    1. Color Input: A component used to allow users to select or enter a color value.
    2. Color Preview: A component used to display a visual representation of a color.

    For detailed API specifications, prop definitions, and interactive examples, refer to the official Storybook documentation.

  4. Overview of Canvas Kit Preview CSS

    master
    Canvas Kit Preview CSS is a bundle package that contains all modules of the Canvas Kit Preview CSS. The contents of this package are auto-generated from the Canvas Kit Preview React source code, ensuring that the CSS styles are synchronized with the React component implementations.

  5. Overview of Canvas Kit Styling

    master

    The Canvas Kit Styling package provides the necessary tools to create CSS styling within the Canvas Kit ecosystem. It operates using two distinct modes:

    1. Runtime for development: Provides tools and logic used during the development phase.
    2. Static parsing for build time: A process that parses styling definitions during the build stage to generate optimized CSS.

    For detailed architectural reasoning and styling guides, refer to the official documentation at https://workday.github.io/canvas-kit/?path=/docs/styling-guides-why-canvas-styling--docs.

  7. Use the Canvas Kit React Action Bar

    master

    The ActionBar component is used to display primary and secondary actions associated with a specific page or task. It provides a standardized way to group action buttons, typically positioned at the bottom or top of a view.

    For detailed API specifications, prop definitions, and interactive usage examples, refer to the official Storybook documentation.

  8. Use the Canvas Kit Select component

    master

    The Select component allows users to choose one option from a list of items or type a matching option. It supports various configurations including:

    • Hoisted Model: For specific layout requirements.
    • Label Position: Horizontal or vertical placement.
    • Validation States: Required and Disabled states.
    • Item Customization: Disabled Items, With Icons, and Grouped Items.
    • Layout Adjustments: Grow (to fill space) and Menu Height control.

  9. Use Canvas Kit React Breadcrumbs

    master

    The Breadcrumbs component is a compound component designed to help users maintain awareness of their location while navigating through hierarchical structures like pages, folders, or files.

    Because it follows the compound component pattern, you should look for a set of related sub-components that work together to build the breadcrumb structure. For specific implementation details, prop definitions, and interactive examples, refer to the official Storybook documentation.

  12. What is a compound component?

    master

    A compound component is a design pattern where a high-level component is composed of smaller, specialized subcomponents. This pattern allows you to retain access to the semantic elements and markup structure of the component, providing more flexibility than a 'configuration component' (which relies on a single large configuration object or many props).

    Comparison

    Configuration Component (Rigid): Controlled via a single interface. Harder to customize markup or add attributes without bloating the API.

    <Tabs
  items={[
    {title: 'First Tab', content: 'First Tab Contents'},
    {title: 'Second Tab', content: 'Second Tab Contents'},
  ]}
/>

    Compound Component (Flexible): Assembled using subcomponents. Allows direct access to underlying elements for styling and attribute manipulation.

    <Tabs>
  <Tabs.List>
    <Tabs.Item>First Tab</Tabs.Item>
    <Tabs.Item>Second Tab</Tabs.Item>
  </Tabs.List>
  <Tabs.Panel>First Tab Contents</Tabs.Panel>
  <Tabs.Panel>Second Tab Contents</Tabs.Panel>
</Tabs>