@workday/canvas-kit-docs 11.0.0-alpha.671-next.0 → 11.0.0-alpha.682-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/es6/lib/docs.js +2270 -240
- package/dist/mdx/11.0-UPGRADE-GUIDE.mdx +14 -2
- package/dist/mdx/preview-react/side-panel/examples/Basic.tsx +17 -15
- package/dist/mdx/preview-react/side-panel/examples/RightOrigin.tsx +14 -12
- package/dist/mdx/preview-react/side-panel/examples/Variant.tsx +14 -12
- package/package.json +6 -6
|
@@ -18,6 +18,7 @@ any questions.
|
|
|
18
18
|
- [Component Updates](#component-updates)
|
|
19
19
|
- [Component Style Updates](#component-style-updates)
|
|
20
20
|
- [Card](#card)
|
|
21
|
+
- [Checkbox](#checkbox)
|
|
21
22
|
- [Count Badge](#count-badge)
|
|
22
23
|
- [Form Field Preview](#form-field-preview)
|
|
23
24
|
- [Radio (Preview)](#radio-preview)
|
|
@@ -345,6 +346,14 @@ See below:
|
|
|
345
346
|
and [tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs). `Card`
|
|
346
347
|
no longer extends the `Box` component, however, it still supports Emotion `styled` and style props.
|
|
347
348
|
|
|
349
|
+
### Checkbox
|
|
350
|
+
|
|
351
|
+
**PR:** [#2542](https://github.com/Workday/canvas-kit/pull/2542)
|
|
352
|
+
|
|
353
|
+
`Checkbox` now uses [Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and our [new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api). The component now supports the `cs`
|
|
354
|
+
prop, but otherwise the API has not changed. It should behave identically as it did in previous
|
|
355
|
+
versions.
|
|
356
|
+
|
|
348
357
|
### Count Badge
|
|
349
358
|
|
|
350
359
|
**PR:** [#2442](https://github.com/Workday/canvas-kit/pull/2442)
|
|
@@ -407,8 +416,11 @@ import {TextInput} from '@workday/canvas-kit-react/text-input';
|
|
|
407
416
|
|
|
408
417
|
**PR:** [#2546](https://github.com/Workday/canvas-kit/pull/2546)
|
|
409
418
|
|
|
410
|
-
`Radio` and `RadioGroup` now use
|
|
411
|
-
|
|
419
|
+
`Radio` and `RadioGroup` now use
|
|
420
|
+
[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
|
|
421
|
+
our
|
|
422
|
+
[new styling utilities](https://workday.github.io/canvas-kit/?path=/docs/styling-basics--create-modifiers#createstyles-api).
|
|
423
|
+
The component now supports the `cs` prop, but otherwise the API has not changed. It should behave
|
|
412
424
|
identically as it did in previous versions.
|
|
413
425
|
|
|
414
426
|
### Text
|
|
@@ -20,26 +20,28 @@ export default () => {
|
|
|
20
20
|
expanded ? 'expanded' : 'collapsed'
|
|
21
21
|
);
|
|
22
22
|
|
|
23
|
+
const expandedContent = (
|
|
24
|
+
<Flex alignItems="center" paddingY="s" paddingX="s">
|
|
25
|
+
<Flex marginInlineEnd="s">
|
|
26
|
+
<AccentIcon icon={rocketIcon} />
|
|
27
|
+
</Flex>
|
|
28
|
+
<Text as="h3" typeLevel="body.large" color="licorice500" fontWeight="bold" {...labelProps}>
|
|
29
|
+
Tasks Panel
|
|
30
|
+
</Text>
|
|
31
|
+
</Flex>
|
|
32
|
+
);
|
|
33
|
+
|
|
23
34
|
return (
|
|
24
35
|
<CanvasProvider theme={{canvas: {direction}}}>
|
|
25
36
|
<Flex height={320}>
|
|
26
37
|
<SidePanel {...panelProps} onStateTransition={setPanelState}>
|
|
27
38
|
<SidePanel.ToggleButton {...controlProps} />
|
|
28
|
-
{panelState === 'expanded'
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
as="h3"
|
|
35
|
-
typeLevel="body.large"
|
|
36
|
-
color="licorice500"
|
|
37
|
-
fontWeight="bold"
|
|
38
|
-
{...labelProps}
|
|
39
|
-
>
|
|
40
|
-
Tasks Panel
|
|
41
|
-
</Text>
|
|
42
|
-
</Flex>
|
|
39
|
+
{panelState === 'expanded' ? (
|
|
40
|
+
expandedContent
|
|
41
|
+
) : (
|
|
42
|
+
<Text hidden {...labelProps}>
|
|
43
|
+
Tasks Panel
|
|
44
|
+
</Text>
|
|
43
45
|
)}
|
|
44
46
|
</SidePanel>
|
|
45
47
|
<Flex
|
|
@@ -21,21 +21,23 @@ const RightPanel = () => {
|
|
|
21
21
|
expanded ? 'expanded' : 'collapsed'
|
|
22
22
|
);
|
|
23
23
|
|
|
24
|
+
const expandedContent = (
|
|
25
|
+
<Flex alignItems="center" justifyContent="flex-end" paddingY="s" paddingX="s">
|
|
26
|
+
<Text as="h3" typeLevel="body.large" color="licorice500" fontWeight="bold" {...labelProps}>
|
|
27
|
+
Tasks Panel
|
|
28
|
+
</Text>
|
|
29
|
+
</Flex>
|
|
30
|
+
);
|
|
31
|
+
|
|
24
32
|
return (
|
|
25
33
|
<StyledSidePanel {...panelProps} onStateTransition={setPanelState} origin="right">
|
|
26
34
|
<SidePanel.ToggleButton {...controlProps} />
|
|
27
|
-
{panelState === 'expanded'
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
fontWeight="bold"
|
|
34
|
-
{...labelProps}
|
|
35
|
-
>
|
|
36
|
-
Tasks Panel
|
|
37
|
-
</Text>
|
|
38
|
-
</Flex>
|
|
35
|
+
{panelState === 'expanded' ? (
|
|
36
|
+
expandedContent
|
|
37
|
+
) : (
|
|
38
|
+
<Text hidden {...labelProps}>
|
|
39
|
+
Tasks Panel
|
|
40
|
+
</Text>
|
|
39
41
|
)}
|
|
40
42
|
</StyledSidePanel>
|
|
41
43
|
);
|
|
@@ -18,23 +18,25 @@ export default () => {
|
|
|
18
18
|
expanded ? 'expanded' : 'collapsed'
|
|
19
19
|
);
|
|
20
20
|
|
|
21
|
+
const expandedContent = (
|
|
22
|
+
<Flex alignItems="center" paddingY="s" paddingX="s">
|
|
23
|
+
<Text as="h3" typeLevel="body.large" color="licorice500" fontWeight="bold" {...labelProps}>
|
|
24
|
+
Alternate Panel
|
|
25
|
+
</Text>
|
|
26
|
+
</Flex>
|
|
27
|
+
);
|
|
28
|
+
|
|
21
29
|
return (
|
|
22
30
|
<CanvasProvider theme={{canvas: {direction}}}>
|
|
23
31
|
<Flex height={320} backgroundColor="soap100">
|
|
24
32
|
<SidePanel {...panelProps} onStateTransition={setPanelState} variant="alternate">
|
|
25
33
|
<SidePanel.ToggleButton {...controlProps} />
|
|
26
|
-
{panelState === 'expanded'
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
fontWeight="bold"
|
|
33
|
-
{...labelProps}
|
|
34
|
-
>
|
|
35
|
-
Alternate Panel
|
|
36
|
-
</Text>
|
|
37
|
-
</Flex>
|
|
34
|
+
{panelState === 'expanded' ? (
|
|
35
|
+
expandedContent
|
|
36
|
+
) : (
|
|
37
|
+
<Text hidden {...labelProps}>
|
|
38
|
+
Tasks Panel
|
|
39
|
+
</Text>
|
|
38
40
|
)}
|
|
39
41
|
</SidePanel>
|
|
40
42
|
<Flex
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "11.0.0-alpha.
|
|
3
|
+
"version": "11.0.0-alpha.682-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^11.0.0-alpha.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^11.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^11.0.0-alpha.682-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^11.0.0-alpha.682-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^11.0.0-alpha.682-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^11.0.0-alpha.682-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^1.0.2",
|
|
53
53
|
"markdown-to-jsx": "^6.10.3",
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"mkdirp": "^1.0.3",
|
|
60
60
|
"typescript": "4.2"
|
|
61
61
|
},
|
|
62
|
-
"gitHead": "
|
|
62
|
+
"gitHead": "2c256dd5658519e10bfd8e30d629ceb0a8260a71"
|
|
63
63
|
}
|