diff --git a/CHANGELOG.md b/CHANGELOG.md index cb5f9c3350..be96bc4bbf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [v11.1.4](https://github.com/Workday/canvas-kit/releases/tag/v11.1.4) (2024-08-21) + +### Documentation + +- docs: Update CanvasProvider info on install page ([#2878](https://github.com/Workday/canvas-kit/pull/2878)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@alanbsmith](https://github.com/alanbsmith)) + + +## [v10.3.54](https://github.com/Workday/canvas-kit/releases/tag/v10.3.54) (2024-08-21) + +### Documentation + +- docs: Update CanvasProvider info on install page ([#2878](https://github.com/Workday/canvas-kit/pull/2878)) ([@mannycarrera4](https://github.com/mannycarrera4), manuel.carrera, [@alanbsmith](https://github.com/alanbsmith)) ## [v11.1.3](https://github.com/Workday/canvas-kit/releases/tag/v11.1.3) (2024-08-20) ### Components diff --git a/lerna.json b/lerna.json index 7bbbe9ab5f..4e8dd71bd7 100644 --- a/lerna.json +++ b/lerna.json @@ -2,7 +2,7 @@ "packages": [ "modules/**" ], - "version": "11.1.3", + "version": "11.1.4", "npmClient": "yarn", "useWorkspaces": true, "command": { diff --git a/modules/codemod/package.json b/modules/codemod/package.json index 7c67600f6d..03480856f7 100644 --- a/modules/codemod/package.json +++ b/modules/codemod/package.json @@ -2,7 +2,7 @@ "name": "@workday/canvas-kit-codemod", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", - "version": "11.1.3", + "version": "11.1.4", "description": "A collection of codemods for use on Workday Canvas Kit packages.", "main": "dist/es6/index.js", "sideEffects": false, diff --git a/modules/css/package.json b/modules/css/package.json index 60e1ab50d5..33e2a92ead 100644 --- a/modules/css/package.json +++ b/modules/css/package.json @@ -1,6 +1,6 @@ { "name": "@workday/canvas-kit-css", - "version": "11.1.3", + "version": "11.1.4", "description": "The parent module that contains all Workday Canvas Kit CSS components", "author": "Workday, Inc. (https://www.workday.com)", "license": "Apache-2.0", diff --git a/modules/docs/mdx/welcome.stories.mdx b/modules/docs/mdx/welcome.stories.mdx index 91cb117048..baae73ff7b 100644 --- a/modules/docs/mdx/welcome.stories.mdx +++ b/modules/docs/mdx/welcome.stories.mdx @@ -16,20 +16,42 @@ import {version} from '../../../lerna.json'; -After installing Canvas Kit, you need to set up the CanvasProvider at the root of your application. -This can be either in your `index.jsx`,`index.tsx` or `App.jsx` depending on the framework you use. -This ensures proper styling, theming, and focus behavior on our components. +### Canvas Provider + +The `` is required for proper branding support. Furthermore, if you use Emotion for +styling your components, the `` ensures your styles will merge as expected. Note: +Custom use of `` provided by Emotion is not supported. `@workday/canvas-kit-styling` +owns the creating of the cache reference. This ensures both static styling and Emotion’s dynamic +styling solutions work together. In most cases you'll want to wrap your application at the root +level in ``. ```tsx import * as React from 'react'; -// 1. import `CanvasProvider` component -import {CanvasProvider} from '@workday/canvas-kit-react'; -function App() { - // 2. Wrap CanvasProvider at the root of your app +import { + CanvasProvider, + ContentDirection, + PartialEmotionCanvasTheme, + useTheme, +} from '@workday/canvas-kit-react/common'; +// Ensure CSS variables are defined. You Can also do this at the root index.css +import '@workday/canvas-tokens-web/css/base/_variables.css'; +import '@workday/canvas-tokens-web/css/brand/_variables.css'; +import '@workday/canvas-tokens-web/css/system/_variables.css'; + +export const App = () => { + // useTheme is filling in the Canvas theme object if any keys are missing + const canvasTheme: PartialEmotionCanvasTheme = useTheme({ + canvas: { + // Switch to `ContentDirection.RTL` to change direction + direction: ContentDirection.LTR, + }, + }); return ( - - + +
+

Get Started With Canvas Kit

+
); -} +}; ``` diff --git a/modules/docs/mdx/welcomePage.tsx b/modules/docs/mdx/welcomePage.tsx index 5e38c4f024..ddd9efdcd1 100644 --- a/modules/docs/mdx/welcomePage.tsx +++ b/modules/docs/mdx/welcomePage.tsx @@ -14,7 +14,7 @@ import {version} from '../../../lerna.json'; export const WelcomePage = () => { return ( - +