@workday/canvas-kit-docs 16.1.8 → 16.1.10
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 +38 -64
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/16.0-UPGRADE-GUIDE.mdx +1 -1
- package/dist/mdx/preview-react/tabs/Tabs.mdx +4 -4
- package/dist/mdx/preview-react/tabs/examples/{OutlinedTabs.tsx → FilledTabs.tsx} +1 -1
- package/dist/mdx/preview-react/tabs/examples/RightToLeft.tsx +1 -1
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -88124,6 +88124,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
88124
88124
|
],
|
|
88125
88125
|
"tags": {}
|
|
88126
88126
|
},
|
|
88127
|
+
{
|
|
88128
|
+
"kind": "property",
|
|
88129
|
+
"name": "cs",
|
|
88130
|
+
"required": false,
|
|
88131
|
+
"type": {
|
|
88132
|
+
"kind": "symbol",
|
|
88133
|
+
"name": "CSToPropsInput",
|
|
88134
|
+
"value": "CSToPropsInput"
|
|
88135
|
+
},
|
|
88136
|
+
"description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles }, or the result of {@link createVars } and\n{@link createModifiers }. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp } wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
|
|
88137
|
+
"declarations": [
|
|
88138
|
+
{
|
|
88139
|
+
"name": "cs",
|
|
88140
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
88141
|
+
}
|
|
88142
|
+
],
|
|
88143
|
+
"tags": {}
|
|
88144
|
+
},
|
|
88127
88145
|
{
|
|
88128
88146
|
"kind": "property",
|
|
88129
88147
|
"name": "variant",
|
|
@@ -88141,37 +88159,13 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
88141
88159
|
}
|
|
88142
88160
|
]
|
|
88143
88161
|
},
|
|
88144
|
-
"description": "
|
|
88162
|
+
"description": "",
|
|
88145
88163
|
"declarations": [
|
|
88146
88164
|
{
|
|
88147
88165
|
"name": "variant",
|
|
88148
88166
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/tabs/lib/TabsItem.tsx"
|
|
88149
88167
|
}
|
|
88150
88168
|
],
|
|
88151
|
-
"tags": {
|
|
88152
|
-
"default": "'filled'"
|
|
88153
|
-
},
|
|
88154
|
-
"defaultValue": {
|
|
88155
|
-
"kind": "string",
|
|
88156
|
-
"value": "filled"
|
|
88157
|
-
}
|
|
88158
|
-
},
|
|
88159
|
-
{
|
|
88160
|
-
"kind": "property",
|
|
88161
|
-
"name": "cs",
|
|
88162
|
-
"required": false,
|
|
88163
|
-
"type": {
|
|
88164
|
-
"kind": "symbol",
|
|
88165
|
-
"name": "CSToPropsInput",
|
|
88166
|
-
"value": "CSToPropsInput"
|
|
88167
|
-
},
|
|
88168
|
-
"description": "The `cs` prop takes in a single value or an array of values. You can pass the CSS class name\nreturned by {@link createStyles }, or the result of {@link createVars } and\n{@link createModifiers }. If you're extending a component already using `cs`, you can merge that\nprop in as well. Any style that is passed to the `cs` prop will override style props. If you\nwish to have styles that are overridden by the `css` prop, or styles added via the `styled`\nAPI, use {@link handleCsProp } wherever `elemProps` is used. If your component needs to also\nhandle style props, use {@link mergeStyles} instead.\n\n\n```tsx\nimport {handleCsProp} from '@workday/canvas-kit-styling';\nimport {mergeStyles} from '@workday/canvas-kit-react/layout';\n\n// ...\n\n// `handleCsProp` handles compat mode with Emotion's runtime APIs. `mergeStyles` has the same\n// function signature, but adds support for style props.\n\nreturn (\n <Element\n {...handleCsProp(elemProps, [\n myStyles,\n myModifiers({ size: 'medium' }),\n myVars({ backgroundColor: 'red' })\n ])}\n >\n {children}\n </Element>\n)\n```",
|
|
88169
|
-
"declarations": [
|
|
88170
|
-
{
|
|
88171
|
-
"name": "cs",
|
|
88172
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/dist/es6/lib/cs.d.ts"
|
|
88173
|
-
}
|
|
88174
|
-
],
|
|
88175
88169
|
"tags": {}
|
|
88176
88170
|
},
|
|
88177
88171
|
{
|
|
@@ -88531,38 +88525,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
88531
88525
|
],
|
|
88532
88526
|
"tags": {}
|
|
88533
88527
|
},
|
|
88534
|
-
{
|
|
88535
|
-
"kind": "property",
|
|
88536
|
-
"name": "variant",
|
|
88537
|
-
"required": false,
|
|
88538
|
-
"type": {
|
|
88539
|
-
"kind": "union",
|
|
88540
|
-
"value": [
|
|
88541
|
-
{
|
|
88542
|
-
"kind": "string",
|
|
88543
|
-
"value": "filled"
|
|
88544
|
-
},
|
|
88545
|
-
{
|
|
88546
|
-
"kind": "string",
|
|
88547
|
-
"value": "outlined"
|
|
88548
|
-
}
|
|
88549
|
-
]
|
|
88550
|
-
},
|
|
88551
|
-
"description": "The variant of the TabsItem.",
|
|
88552
|
-
"declarations": [
|
|
88553
|
-
{
|
|
88554
|
-
"name": "variant",
|
|
88555
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/preview-react/tabs/lib/TabsItem.tsx"
|
|
88556
|
-
}
|
|
88557
|
-
],
|
|
88558
|
-
"tags": {
|
|
88559
|
-
"default": "'filled'"
|
|
88560
|
-
},
|
|
88561
|
-
"defaultValue": {
|
|
88562
|
-
"kind": "string",
|
|
88563
|
-
"value": "filled"
|
|
88564
|
-
}
|
|
88565
|
-
},
|
|
88566
88528
|
{
|
|
88567
88529
|
"kind": "property",
|
|
88568
88530
|
"name": "cs",
|
|
@@ -95244,9 +95206,21 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
95244
95206
|
"kind": "property",
|
|
95245
95207
|
"name": "variant",
|
|
95246
95208
|
"defaultValue": {
|
|
95247
|
-
"kind": "
|
|
95248
|
-
"
|
|
95249
|
-
"
|
|
95209
|
+
"kind": "property",
|
|
95210
|
+
"name": "variant",
|
|
95211
|
+
"type": {
|
|
95212
|
+
"kind": "union",
|
|
95213
|
+
"value": [
|
|
95214
|
+
{
|
|
95215
|
+
"kind": "string",
|
|
95216
|
+
"value": "filled"
|
|
95217
|
+
},
|
|
95218
|
+
{
|
|
95219
|
+
"kind": "string",
|
|
95220
|
+
"value": "outlined"
|
|
95221
|
+
}
|
|
95222
|
+
]
|
|
95223
|
+
}
|
|
95250
95224
|
},
|
|
95251
95225
|
"type": {
|
|
95252
95226
|
"kind": "union",
|
|
@@ -103687,7 +103661,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
103687
103661
|
"name": "variant",
|
|
103688
103662
|
"defaultValue": {
|
|
103689
103663
|
"kind": "string",
|
|
103690
|
-
"value": "
|
|
103664
|
+
"value": "outlined"
|
|
103691
103665
|
},
|
|
103692
103666
|
"type": {
|
|
103693
103667
|
"kind": "union",
|
|
@@ -103711,7 +103685,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
103711
103685
|
}
|
|
103712
103686
|
],
|
|
103713
103687
|
"tags": {
|
|
103714
|
-
"default": "'
|
|
103688
|
+
"default": "'outlined'"
|
|
103715
103689
|
}
|
|
103716
103690
|
},
|
|
103717
103691
|
{
|
|
@@ -106629,7 +106603,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
106629
106603
|
"name": "variant",
|
|
106630
106604
|
"defaultValue": {
|
|
106631
106605
|
"kind": "string",
|
|
106632
|
-
"value": "
|
|
106606
|
+
"value": "outlined"
|
|
106633
106607
|
},
|
|
106634
106608
|
"type": {
|
|
106635
106609
|
"kind": "union",
|
|
@@ -106653,7 +106627,7 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
106653
106627
|
}
|
|
106654
106628
|
],
|
|
106655
106629
|
"tags": {
|
|
106656
|
-
"default": "'
|
|
106630
|
+
"default": "'outlined'"
|
|
106657
106631
|
}
|
|
106658
106632
|
},
|
|
106659
106633
|
{
|
|
@@ -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": "16.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "16.1.
|
|
23
|
-
"@workday/canvas-kit-react": "16.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^16.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "16.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "16.1.10",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "16.1.10",
|
|
23
|
+
"@workday/canvas-kit-react": "16.1.10",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^16.1.10",
|
|
25
|
+
"@workday/canvas-kit-styling": "16.1.10",
|
|
26
26
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -19,11 +19,11 @@ export const packageJSONFile = `{
|
|
|
19
19
|
"@emotion/react": "11.11.4",
|
|
20
20
|
"@types/react": "18.2.60",
|
|
21
21
|
"@types/react-dom": "18.2.19",
|
|
22
|
-
"@workday/canvas-kit-labs-react": "16.1.
|
|
23
|
-
"@workday/canvas-kit-preview-react": "16.1.
|
|
24
|
-
"@workday/canvas-kit-react": "16.1.
|
|
25
|
-
"@workday/canvas-kit-react-fonts": "^16.1.
|
|
26
|
-
"@workday/canvas-kit-styling": "16.1.
|
|
22
|
+
"@workday/canvas-kit-labs-react": "16.1.10",
|
|
23
|
+
"@workday/canvas-kit-preview-react": "16.1.10",
|
|
24
|
+
"@workday/canvas-kit-react": "16.1.10",
|
|
25
|
+
"@workday/canvas-kit-react-fonts": "^16.1.10",
|
|
26
|
+
"@workday/canvas-kit-styling": "16.1.10",
|
|
27
27
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
@@ -400,7 +400,7 @@ functional shortcuts, refer to the storybook documentation and our example stori
|
|
|
400
400
|
**PR:** [#4062](https://github.com/Workday/canvas-kit/pull/4062)
|
|
401
401
|
|
|
402
402
|
A new `Tabs` component has been added to `@workday/canvas-kit-preview-react`, aligned with the Sana
|
|
403
|
-
Canvas visual language. It supports `filled` and `outlined` variants.
|
|
403
|
+
Canvas visual language. It supports `filled` and `outlined` variants, with `outlined` variant as default.
|
|
404
404
|
|
|
405
405
|
```tsx
|
|
406
406
|
import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
|
|
@@ -6,7 +6,7 @@ import DynamicTabs from './examples/DynamicTabs';
|
|
|
6
6
|
import HoistedModel from './examples/HoistedModel';
|
|
7
7
|
import Icons from './examples/Icons';
|
|
8
8
|
import NamedTabs from './examples/NamedTabs';
|
|
9
|
-
import
|
|
9
|
+
import FilledTabs from './examples/FilledTabs';
|
|
10
10
|
import OverflowTabs from './examples/OverflowTabs';
|
|
11
11
|
import RightToLeft from './examples/RightToLeft';
|
|
12
12
|
import SinglePanel from './examples/SinglePanel';
|
|
@@ -39,11 +39,11 @@ that does not support overflow.
|
|
|
39
39
|
|
|
40
40
|
<ExampleCodeBlock code={Basic} />
|
|
41
41
|
|
|
42
|
-
###
|
|
42
|
+
### Filled Tabs
|
|
43
43
|
|
|
44
|
-
Set the `variant` prop of `Tabs` to `
|
|
44
|
+
Set the `variant` prop of `Tabs` to `filled` to render a filled style of tabs.
|
|
45
45
|
|
|
46
|
-
<ExampleCodeBlock code={
|
|
46
|
+
<ExampleCodeBlock code={FilledTabs} />
|
|
47
47
|
|
|
48
48
|
### Overflow Tabs
|
|
49
49
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "16.1.
|
|
3
|
+
"version": "16.1.10",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -47,10 +47,10 @@
|
|
|
47
47
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
48
|
"@storybook/csf": "0.0.1",
|
|
49
49
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^16.1.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.1.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.1.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.1.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.1.10",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.1.10",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.1.10",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.1.10",
|
|
54
54
|
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
55
55
|
"@workday/canvas-tokens-web": "^4.4.0",
|
|
56
56
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"mkdirp": "^1.0.3",
|
|
64
64
|
"typescript": "5.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "8cb9ddb3c4f2b2821f425cd186e3ea4581373a45"
|
|
67
67
|
}
|