@workday/canvas-kit-mcp 15.0.0-alpha.0074-next.0 → 15.0.0-alpha.0075-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/lib/theming.md
CHANGED
|
@@ -23,9 +23,12 @@ developer experience, and greater flexibility for theming applications.
|
|
|
23
23
|
> If your application renders within an environment that already imports these CSS variables, \*\*do
|
|
24
24
|
> not re-
|
|
25
25
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
26
|
+
```tsx
|
|
27
|
+
<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
|
|
28
|
+
{' '}
|
|
29
|
+
<App />{' '}
|
|
30
|
+
</CanvasProvider>
|
|
31
|
+
```
|
|
29
32
|
|
|
30
33
|
This would use `chroma.js` to generate a palette based on the `main` color provided.
|
|
31
34
|
|
|
@@ -57,7 +60,7 @@ precedence. Take the following example:
|
|
|
57
60
|
.my-app {
|
|
58
61
|
--cnvs-brand-primary-base: red;
|
|
59
62
|
}
|
|
60
|
-
|
|
63
|
+
```
|
|
61
64
|
|
|
62
65
|
In the case of the `CanvasProvider` prior to v14, all our brand tokens where defined within a class
|
|
63
66
|
and scoped to the `div` that the `CanvasProvider` created. This meant that anything set on `:root`
|
|
@@ -18,65 +18,49 @@ visual reference of what's changed.**
|
|
|
18
18
|
|
|
19
19
|
## Table of Contents
|
|
20
20
|
|
|
21
|
-
- [
|
|
22
|
-
|
|
23
|
-
- [
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
21
|
+
- [LLM Assisted Migration](#llm-assisted-migration)
|
|
22
|
+
- [Codemod](#codemod)
|
|
23
|
+
- [Instructions](#instructions)
|
|
24
|
+
- [Tokens](#tokens)
|
|
25
|
+
- [Caution Naming](#caution-naming)
|
|
26
|
+
- [Theming](#theming)
|
|
27
|
+
- [New Documentation](#new-documentation)
|
|
28
|
+
- [Canvas Provider](#canvas-provider-)
|
|
29
|
+
- [Component Updates](#component-updates)
|
|
30
|
+
- [Avatar (Preview)](#avatar-preview)
|
|
31
|
+
- [Branding Changes](#branding-changes-)
|
|
32
|
+
- [Buttons](#buttons)
|
|
33
|
+
- [Card](#card-)
|
|
34
|
+
- [Count Badge](#count-badge)
|
|
35
|
+
- [Expandable](#expandable)
|
|
36
|
+
- [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
|
|
37
|
+
- [Loading Dots](#loading-dots)
|
|
38
|
+
- [Modals and Dialogs](#modals-and-dialogs)
|
|
39
|
+
- [Pill (Preview)](#pill-preview)
|
|
40
|
+
- [Search Form (Labs)](#search-form-labs-)
|
|
41
|
+
- [Status Indicator (Preview)](#status-indicator-preview-)
|
|
42
|
+
- [Icons](#icons)
|
|
43
|
+
- [Deprecations](#deprecations)
|
|
44
|
+
- [Avatar (Main)](#avatar-in-main)
|
|
45
|
+
- [Combobox (Labs)](#combobox-labs)
|
|
46
|
+
- [Radio (Main)](#radio-main)
|
|
47
|
+
- [Search Form (Labs)](#searchform-labs)
|
|
48
|
+
- [Segmented Control (Main)](#segmented-control-main)
|
|
49
|
+
- [Side Panel (Main)](#side-panel-main)
|
|
27
50
|
- [Tokens](#tokens)
|
|
28
|
-
- [
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
- [
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
- [Removed Box Shadow](#removed-box-shadow)
|
|
42
|
-
- [New Card Variants](#new-card-variants)
|
|
43
|
-
- [Replaced Margins with Gap](#replaced-margins-with-gap)
|
|
44
|
-
- [Count Badge](#count-badge)
|
|
45
|
-
- [Expandable](#expandable)
|
|
46
|
-
- [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
|
|
47
|
-
- [Loading Dots](#loading-dots)
|
|
48
|
-
- [Pill (Preview)](#pill-preview)
|
|
49
|
-
- [Modals and Dialogs](#modals-and-dialogs)
|
|
50
|
-
- [Scoped Theming vs Global Theming](#scoped-theming-vs-global-theming)
|
|
51
|
-
- [Search Form (Labs) 🚨](#search-form-labs-)
|
|
52
|
-
- [Status Indicator (Preview) 🚨](#status-indicator-preview-)
|
|
53
|
-
- [Icons](#icons)
|
|
54
|
-
- [Deprecations](#deprecations)
|
|
55
|
-
- [Avatar in Main](#avatar-in-main)
|
|
56
|
-
- [Combobox (Labs)](#combobox-labs)
|
|
57
|
-
- [Radio (Main)](#radio-main)
|
|
58
|
-
- [SearchForm (Labs)](#searchform-labs)
|
|
59
|
-
- [Segmented Control (Main)](#segmented-control-main)
|
|
60
|
-
- [Side Panel (Main)](#side-panel-main)
|
|
61
|
-
- [Tokens](#tokens-1)
|
|
62
|
-
- [Removals](#removals)
|
|
63
|
-
- [Deprecated Buttons](#deprecated-buttons)
|
|
64
|
-
- [Input Provider](#input-provider)
|
|
65
|
-
- [Menu (Preview)](#menu-preview)
|
|
66
|
-
- [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
|
|
67
|
-
- [Text Area (Preview)](#text-area-preview)
|
|
68
|
-
- [Text Input (Preview)](#text-input-preview)
|
|
69
|
-
- [Troubleshooting](#troubleshooting)
|
|
70
|
-
- [Common Issues](#common-issues)
|
|
71
|
-
- [Glossary](#glossary)
|
|
72
|
-
- [Main](#main)
|
|
73
|
-
- [Preview](#preview)
|
|
74
|
-
- [Labs](#labs)
|
|
75
|
-
- [Codemod Reference](#codemod-reference)
|
|
76
|
-
- [What is a Codemod?](#what-is-a-codemod)
|
|
77
|
-
- [Running a Codemod](#running-a-codemod)
|
|
78
|
-
- [Instructions](#instructions-1)
|
|
79
|
-
- [Codemod Transformations for v14](#codemod-transformations-for-v14)
|
|
51
|
+
- [useIsRTL](#useisrtl)
|
|
52
|
+
- [Removals](#removals)
|
|
53
|
+
- [Deprecated Buttons](#deprecated-buttons)
|
|
54
|
+
- [Input Provider](#input-provider)
|
|
55
|
+
- [Menu (Preview)](#menu-preview)
|
|
56
|
+
- [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
|
|
57
|
+
- [Text Area (Labs)](#text-area)
|
|
58
|
+
- [Text Input (Labs)](#text-input)
|
|
59
|
+
- [Troubleshooting](#troubleshooting)
|
|
60
|
+
- [Glossary](#glossary)
|
|
61
|
+
- [Main](#main)
|
|
62
|
+
- [Preview](#preview)
|
|
63
|
+
- [Labs](#labs)
|
|
80
64
|
|
|
81
65
|
## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
|
|
82
66
|
|
|
@@ -344,7 +328,7 @@ specificity.
|
|
|
344
328
|
|
|
345
329
|
### useIsRTL
|
|
346
330
|
|
|
347
|
-
**PR:** [#
|
|
331
|
+
**PR:** [#3477](https://github.com/Workday/canvas-kit/pull/3477)
|
|
348
332
|
|
|
349
333
|
The `useIsRTL` hook has been deprecated. Please use
|
|
350
334
|
[CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
|
|
@@ -919,7 +903,7 @@ replaced the removed component or utility.
|
|
|
919
903
|
|
|
920
904
|
### Deprecated Buttons
|
|
921
905
|
|
|
922
|
-
**PR:** [#
|
|
906
|
+
**PR:** [#3439](https://github.com/Workday/canvas-kit/pull/3439)
|
|
923
907
|
|
|
924
908
|
Long overdue, but a sign of moving forward, we've removed our `DeprecatedButton`. Our design system
|
|
925
909
|
supported this for quite some time, but with the advancement in theming, our components API and our
|
|
@@ -17,6 +17,9 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
|
|
|
17
17
|
- [Codemod](#codemod)
|
|
18
18
|
- [Instructions](#instructions)
|
|
19
19
|
- [Component Promotions](#component-promotions)
|
|
20
|
+
- [Pill](#pill-)
|
|
21
|
+
- [Segmented Control](#segmented-control-)
|
|
22
|
+
- [Information Highlight](#information-highlight-)
|
|
20
23
|
- [Segmented Control ⚡️](#segmented-control-️)
|
|
21
24
|
- [API Differences](#api-differences)
|
|
22
25
|
- [Structure Changes](#structure-changes)
|
|
@@ -99,6 +102,28 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
99
102
|
|
|
100
103
|
## Component Promotions
|
|
101
104
|
|
|
105
|
+
### Pill ⚡️
|
|
106
|
+
|
|
107
|
+
**PR** [#3634](https://github.com/Workday/canvas-kit/pull/3634)
|
|
108
|
+
|
|
109
|
+
We've promoted `Pill` from [Preview](#preview) to [Main](#main). There are no changes to the
|
|
110
|
+
functionality or styling of the component. The only change required is updating the import
|
|
111
|
+
statement.
|
|
112
|
+
|
|
113
|
+
**Before in v14**
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
import {Pill} from '@workday/canvas-kit-preview-react/pill';
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
**After in v15**
|
|
120
|
+
|
|
121
|
+
```tsx
|
|
122
|
+
import {Pill} from '@workday/canvas-kit-react/pill';
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
> 🤖 The codemod will handle the change of imports as shown above.
|
|
126
|
+
|
|
102
127
|
### Segmented Control ⚡️
|
|
103
128
|
|
|
104
129
|
We've promoted `SegmentedControl` from [Preview](#preview) to [Main](#main). This replaces the deprecated `SegmentedControl` that was previously in Main.
|
|
@@ -301,7 +326,7 @@ things you'll want to keep in mind.
|
|
|
301
326
|
dependencies on your own.
|
|
302
327
|
- We recommend upgrading dependencies before running the codemod.
|
|
303
328
|
- Always review your `package.json` files to make sure your dependency versions look correct.
|
|
304
|
-
- The codemod will not handle every breaking change in
|
|
329
|
+
- The codemod will not handle every breaking change in this upgrade. You will likely need to make some manual
|
|
305
330
|
changes to be compatible. Use our Upgrade Guide as a checklist.
|
|
306
331
|
- Codemods are not bulletproof.
|
|
307
332
|
- Conduct a thorough PR and QA review of all changes to ensure no regressions were introduced.
|
|
@@ -331,7 +356,7 @@ finished.
|
|
|
331
356
|
|
|
332
357
|
```sh
|
|
333
358
|
yarn add @workday/canvas-kit-codemod --dev
|
|
334
|
-
yarn canvas-kit-codemod v${
|
|
359
|
+
yarn canvas-kit-codemod v${canvasKitMajorVersionNumber} [path]
|
|
335
360
|
yarn remove @workday/canvas-kit-codemod
|
|
336
361
|
```
|
|
337
362
|
|
|
@@ -345,6 +370,7 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
345
370
|
The following automated transformations are available for upgrading to v15:
|
|
346
371
|
|
|
347
372
|
- **Promote Information Highlight**: promoteInformationHighlight
|
|
373
|
+
- **Promote Pill**: promotePill
|
|
348
374
|
- **Promote Segmented Control**: promoteSegmentedControl
|
|
349
375
|
|
|
350
376
|
Run the codemod with: `npx @workday/canvas-kit-codemod v15 [path]`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-mcp",
|
|
3
|
-
"version": "15.0.0-alpha.
|
|
3
|
+
"version": "15.0.0-alpha.0075-next.0",
|
|
4
4
|
"description": "MCP package for Canvas Kit",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -53,5 +53,5 @@
|
|
|
53
53
|
"tsx": "^4.7.0",
|
|
54
54
|
"typescript": "5.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "85c5dfa329d29263f96a49be74ef55f551990c7b"
|
|
57
57
|
}
|