search

Workday / canvas-kit

Development kits to implement UI following the Workday Canvas Design System (https://canvas.workday.com/). See our Component Storybook -
https://workday.github.io/canvas-kit/
Apache License 2.0
297 stars 219 forks source link

UI Components not displaying correctly #2768

Open supervishman opened 3 months ago

supervishman commented 3 months ago

🐛 Bug Report

The UI components, such as PrimaryButton are being rendered without any styles/formatting.

To Reproduce

I created a basic react app (using create-react-app) and installed canvas kit library using the following code

npm install --save @workday/canvas-kit-react

followed by importing the PrimaryButton with import { PrimaryButton } from "@workday/canvas-kit-react"; and finally using that in the App component <PrimaryButton>Button Label</PrimaryButton>

Expected Behavior

A button should have been displayed with an appropriate padding, blue background etc as shown here in the guide

Actual Results

A simple plain text is rendered instead

Browser (if applicable)

This happens in all Chrome-based browsers

Link to repl or repo (highly encouraged)

https://replit.com/@supervishman/WorkdayTest

Error Output

image

mannycarrera4 commented 3 months ago

Hey @supervishman in v11, you must install @workday/canvas-tokens-web in order to get the right styling. For more info, look at our docs!