@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.
@@ -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 [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
411
- component now supports the `cs` prop, but otherwise the API has not changed. It should behave
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
- <Flex alignItems="center" paddingY="s" paddingX="s">
30
- <Flex marginInlineEnd="s">
31
- <AccentIcon icon={rocketIcon} />
32
- </Flex>
33
- <Text
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
- <Flex alignItems="center" justifyContent="flex-end" paddingY="s" paddingX="s">
29
- <Text
30
- as="h3"
31
- typeLevel="body.large"
32
- color="licorice500"
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
- <Flex alignItems="center" paddingY="s" paddingX="s">
28
- <Text
29
- as="h3"
30
- typeLevel="body.large"
31
- color="licorice500"
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.671-next.0",
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.671-next.0",
48
- "@workday/canvas-kit-preview-react": "^11.0.0-alpha.671-next.0",
49
- "@workday/canvas-kit-react": "^11.0.0-alpha.671-next.0",
50
- "@workday/canvas-kit-styling": "^10.3.1",
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": "a38c87c96e3c54cb7eb20ea92d615d297c861112"
62
+ "gitHead": "2c256dd5658519e10bfd8e30d629ceb0a8260a71"
63
63
  }