@workday/canvas-kit-docs 14.1.5 → 14.1.7
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/es6/lib/docs.js
CHANGED
|
@@ -391523,6 +391523,32 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
391523
391523
|
}
|
|
391524
391524
|
],
|
|
391525
391525
|
"tags": {}
|
|
391526
|
+
},
|
|
391527
|
+
{
|
|
391528
|
+
"kind": "property",
|
|
391529
|
+
"name": "className",
|
|
391530
|
+
"required": false,
|
|
391531
|
+
"type": {
|
|
391532
|
+
"kind": "union",
|
|
391533
|
+
"value": [
|
|
391534
|
+
{
|
|
391535
|
+
"kind": "primitive",
|
|
391536
|
+
"value": "string"
|
|
391537
|
+
},
|
|
391538
|
+
{
|
|
391539
|
+
"kind": "primitive",
|
|
391540
|
+
"value": "undefined"
|
|
391541
|
+
}
|
|
391542
|
+
]
|
|
391543
|
+
},
|
|
391544
|
+
"description": "",
|
|
391545
|
+
"declarations": [
|
|
391546
|
+
{
|
|
391547
|
+
"name": "className",
|
|
391548
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/testing/lib/StaticStates.tsx"
|
|
391549
|
+
}
|
|
391550
|
+
],
|
|
391551
|
+
"tags": {}
|
|
391526
391552
|
}
|
|
391527
391553
|
]
|
|
391528
391554
|
}
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "14.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "14.1.
|
|
23
|
-
"@workday/canvas-kit-react": "14.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^14.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "14.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "14.1.7",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "14.1.7",
|
|
23
|
+
"@workday/canvas-kit-react": "14.1.7",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^14.1.7",
|
|
25
|
+
"@workday/canvas-kit-styling": "14.1.7",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.36",
|
|
27
27
|
"@workday/canvas-tokens-web": "3.1.2"
|
|
28
28
|
},
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "14.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "14.1.
|
|
23
|
-
"@workday/canvas-kit-react": "14.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^14.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "14.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "14.1.7",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "14.1.7",
|
|
23
|
+
"@workday/canvas-kit-react": "14.1.7",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^14.1.7",
|
|
25
|
+
"@workday/canvas-kit-styling": "14.1.7",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.36",
|
|
27
27
|
"@workday/canvas-tokens-web": "3.1.2"
|
|
28
28
|
},
|
|
@@ -38,6 +38,7 @@ visual reference of what's changed.**
|
|
|
38
38
|
- [Expandable](#expandable)
|
|
39
39
|
- [Hyperlink and External Hyperlink](#hyperlink-and-external-hyperlink)
|
|
40
40
|
- [Loading Dots](#loading-dots)
|
|
41
|
+
- [Modals and Dialogs](#modals-and-dialogs)
|
|
41
42
|
- [Pill (Preview)](#pill-preview)
|
|
42
43
|
- [Search Form (Labs)](#search-form-labs-)
|
|
43
44
|
- [Status Indicator (Preview)](#status-indicator-preview-)
|
|
@@ -650,6 +651,36 @@ instead.
|
|
|
650
651
|
</Pill>
|
|
651
652
|
```
|
|
652
653
|
|
|
654
|
+
### Modals and Dialogs
|
|
655
|
+
|
|
656
|
+
Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We attached those theme styles to that class name. This allowed the theme to be available in our Popups. But it also created a cascade barrier that blocked the global theme from being applied to our Popup components.
|
|
657
|
+
Because we now use global CSS variables, we no longer need this class name to provide the global theme to Popups. But we have to remove this generated class name to allow the global theme to be applied to Popups.
|
|
658
|
+
|
|
659
|
+
|
|
660
|
+
> **Important:** Passing a `theme` to the `CanvasProvider` **will not** theme components in Modals
|
|
661
|
+
> and Dialogs. You can either pass a `className` or define CSS variables at the root.
|
|
662
|
+
|
|
663
|
+
**Before in v13**
|
|
664
|
+
|
|
665
|
+
```tsx
|
|
666
|
+
// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables deinfed at the root.
|
|
667
|
+
<CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
|
|
668
|
+
<Modal>//... rest of modal code</Modal>
|
|
669
|
+
</CanvasProvider>
|
|
670
|
+
```
|
|
671
|
+
|
|
672
|
+
**After in v14**
|
|
673
|
+
|
|
674
|
+
```tsx
|
|
675
|
+
// If you wish to still theme you application and Modals, you can either define the CSS variables at the root level of your application or define a className and pass it to the CanvasProvider.
|
|
676
|
+
:root {
|
|
677
|
+
--cnvs-brand-primary-base: blue;
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
<CanvasProvider>
|
|
681
|
+
<Modal>//... rest of modal code</Modal>
|
|
682
|
+
</CanvasProvider>
|
|
683
|
+
```
|
|
653
684
|
### Search Form (Labs) 🚨
|
|
654
685
|
|
|
655
686
|
**PR:** [#3303](https://github.com/Workday/canvas-kit/pull/3303)
|
|
@@ -134,6 +134,36 @@ const themedBrand = createStyles({
|
|
|
134
134
|
</CanvasProvider>
|
|
135
135
|
```
|
|
136
136
|
|
|
137
|
+
### Theming Modals and Dialogs
|
|
138
|
+
|
|
139
|
+
Previously, the `usePopupStack` hook created a CSS class name that was passed to our Popups. We attached those theme styles to that class name. This allowed the theme to be available in our Popups. But it also created a cascade barrier that blocked the global theme from being applied to our Popup components.
|
|
140
|
+
Because we now use global CSS variables, we no longer need this class name to provide the global theme to Popups. But we have to remove this generated class name to allow the global theme to be applied to Popups.
|
|
141
|
+
|
|
142
|
+
> **Important:** Passing a `theme` to the `CanvasProvider` **will not** theme components in Modals
|
|
143
|
+
> and Dialogs. You can either pass a `className` or define CSS variables at the root.
|
|
144
|
+
|
|
145
|
+
**Before in v13**
|
|
146
|
+
|
|
147
|
+
```tsx
|
|
148
|
+
// When passing a theme to the Canvas Provider, the `usePopupStack` would grab the theme and generate a class to forward the theme to Modals and Dialogs. This would create a cascade barrier for any CSS variables deinfed at the root.
|
|
149
|
+
<CanvasProvider theme={{canvas: {palette: {primary: {main: 'blue'}}}}}>
|
|
150
|
+
<Modal>//... rest of modal code</Modal>
|
|
151
|
+
</CanvasProvider>
|
|
152
|
+
```
|
|
153
|
+
|
|
154
|
+
**After in v14**
|
|
155
|
+
|
|
156
|
+
```tsx
|
|
157
|
+
// If you wish to still theme you application and Modals, you can either define the CSS variables at the root level of your application or define a className and pass it to the CanvasProvider.
|
|
158
|
+
:root {
|
|
159
|
+
--cnvs-brand-primary-base: blue;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
<CanvasProvider>
|
|
163
|
+
<Modal>//... rest of modal code</Modal>
|
|
164
|
+
</CanvasProvider>
|
|
165
|
+
```
|
|
166
|
+
|
|
137
167
|
## CSS Token Structure
|
|
138
168
|
|
|
139
169
|
Canvas Kit provides three layers of CSS variables.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.1.
|
|
3
|
+
"version": "14.1.7",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.1.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.1.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.1.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.1.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.1.7",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.1.7",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.1.7",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.1.7",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.36",
|
|
53
53
|
"@workday/canvas-tokens-web": "^3.1.1",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "3808e546938e4ee8ad73e75484bc49eeef7da755"
|
|
65
65
|
}
|