@workday/canvas-kit-docs 14.0.0-alpha.1233-next.0 → 14.0.0-alpha.1234-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.
Files changed (35) hide show
  1. package/dist/es6/lib/docs.js +101 -57
  2. package/dist/es6/mdx/installBlock.d.ts.map +1 -1
  3. package/dist/es6/mdx/installBlock.js +4 -1
  4. package/dist/es6/mdx/welcomePage.d.ts.map +1 -1
  5. package/dist/es6/mdx/welcomePage.js +1 -1
  6. package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +9 -7
  7. package/dist/mdx/MAINTAINING.mdx +4 -4
  8. package/dist/mdx/PACKAGES.mdx +9 -10
  9. package/dist/mdx/labs-react/search-form/SearchForm.mdx +8 -3
  10. package/dist/mdx/preview-react/divider/Divider.mdx +15 -5
  11. package/dist/mdx/preview-react/pill/Pill.mdx +4 -4
  12. package/dist/mdx/preview-react/radio/Radio.mdx +2 -2
  13. package/dist/mdx/preview-react/select/Select.mdx +1 -1
  14. package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx +2 -2
  15. package/dist/mdx/react/_examples/mdx/Layouts.mdx +1 -1
  16. package/dist/mdx/react/avatar/avatar/Avatar.mdx +10 -4
  17. package/dist/mdx/react/button/button/Button.mdx +21 -16
  18. package/dist/mdx/react/card/card.mdx +1 -1
  19. package/dist/mdx/react/checkbox/Checkbox.mdx +5 -5
  20. package/dist/mdx/react/combobox/Combobox.mdx +2 -2
  21. package/dist/mdx/react/form-field/FormField.mdx +2 -2
  22. package/dist/mdx/react/select/Select.mdx +6 -6
  23. package/dist/mdx/react/status-indicator/StatusIndicator.mdx +1 -1
  24. package/dist/mdx/react/switch/Switch.mdx +5 -5
  25. package/dist/mdx/react/table/Table.mdx +26 -13
  26. package/dist/mdx/react/text/BodyText.mdx +2 -2
  27. package/dist/mdx/react/text/Heading.mdx +2 -2
  28. package/dist/mdx/react/text/Subtext.mdx +2 -2
  29. package/dist/mdx/react/text/Text.mdx +2 -2
  30. package/dist/mdx/react/text/Title.mdx +2 -2
  31. package/dist/mdx/style-props/STYLE_PROPS.mdx +1 -1
  32. package/dist/mdx/styling/mdx/CustomizingStyles.mdx +8 -8
  33. package/dist/mdx/styling/mdx/Overview.mdx +7 -3
  34. package/dist/mdx/tokens/TokenMigrationFinal.mdx +1 -1
  35. package/package.json +6 -6
@@ -561,7 +561,7 @@ import {BaseAvatar} from '@workday/canvas-kit-preview-react/avatar';
561
561
 
562
562
  The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated and will be
563
563
  removed in a future major release. Please migrate to the
564
- [Combobox](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-combobox--docs) in
564
+ [Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs) in
565
565
  `@workday/canvas-kit-react`.
566
566
 
567
567
  ### Radio (Main)
@@ -574,22 +574,24 @@ from the same package, which offers improved accessibility and API consistency.
574
574
 
575
575
  **PR:** [#3469](https://github.com/Workday/canvas-kit/pull/3469)
576
576
 
577
- The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated and will be removed in a future major release. Please migrate to the new
578
- [Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage) in `@workday/canvas-kit-react`.
577
+ The `SearchForm` in `@workday/canvas-kit-labs-react/search-form` has been deprecated and will be
578
+ removed in a future major release. Please migrate to the new
579
+ [Combobox](https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs#usage) in
580
+ `@workday/canvas-kit-react`.
579
581
 
580
582
  ### Segmented Control (Main)
581
583
 
582
584
  The Segmented Control component in `@workday/canvas-kit-react/segmented-control` has been
583
585
  deprecated. Please migrate to the new
584
- [Segmented Control](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-segmented-control--docs)
586
+ [Segmented Control](https://workday.github.io/canvas-kit/?path=/docs/components-buttons-segmented-control--docs)
585
587
  for improved features and support.
586
588
 
587
589
  ### Side Panel (Main)
588
590
 
589
591
  The Side Panel component in `@workday/canvas-kit-react/side-panel` is now deprecated and will be
590
592
  removed in a future release. Please use the new
591
- [Side Panel](https://workday.github.io/canvas-kit/?path=/docs/components-navigation-side-panel--docs)
592
- for enhanced functionality.
593
+ [Side Panel](https://workday.github.io/canvas-kit/?path=/docs/preview-side-panel--docs) for enhanced
594
+ functionality.
593
595
 
594
596
  ### Tokens
595
597
 
@@ -671,7 +673,7 @@ We've removed `TextArea` from `@workday/canvas-kit-preview-react` package. Pleas
671
673
 
672
674
  We've removed `TextInput` from `@workday/canvas-kit-preview-react` package. Please use
673
675
  [TextInput](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs)
674
- from `@workday/canvas-kit-react` instead. =======
676
+ from `@workday/canvas-kit-react` instead.
675
677
 
676
678
  ---
677
679
 
@@ -402,7 +402,7 @@ component.
402
402
 
403
403
  ```tsx
404
404
  /**
405
- * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead.
405
+ * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) instead.
406
406
  */
407
407
  export class StatusIndicator...
408
408
  ```
@@ -420,17 +420,17 @@ You may share the same `@deprecation` note for multiple deprecations related to
420
420
 
421
421
  ```tsx
422
422
  /**
423
- * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead.
423
+ * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) instead.
424
424
  */
425
425
  export enum StatusIndicatorType...
426
426
 
427
427
  /**
428
- * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead.
428
+ * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) instead.
429
429
  */
430
430
  export interface StatusIndicatorProps...
431
431
 
432
432
  /**
433
- * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) instead.
433
+ * @deprecated ⚠️ Status Indicator in Main has been deprecated and will be removed in a future major release. Please use [Status Indicator in Preview](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) instead.
434
434
  */
435
435
  export class StatusIndicator...
436
436
  ```
@@ -1,7 +1,7 @@
1
1
  ### Main
2
2
 
3
- Our Main package of Canvas Kit components and utilities at `@workday/canvas-kit-react` has
4
- undergone a full design and a11y review and is approved for use in product.
3
+ Our Main package of Canvas Kit components and utilities at `@workday/canvas-kit-react` has undergone
4
+ a full design and a11y review and is approved for use in product.
5
5
 
6
6
  Breaking changes to code in Main will only occur during major version updates and will always be
7
7
  communicated in advance and accompanied by migration strategies.
@@ -10,10 +10,9 @@ communicated in advance and accompanied by migration strategies.
10
10
 
11
11
  ### Preview
12
12
 
13
- Our Preview package of Canvas Kit components and utilities at
14
- `@workday/canvas-kit-preview-react` has undergone a full design and a11y review and is approved for
15
- use in product, but may not be up to the high code standards upheld in the [Main](#main) package.
16
- Preview is analagous to code in beta.
13
+ Our Preview package of Canvas Kit components and utilities at `@workday/canvas-kit-preview-react`
14
+ has undergone a full design and a11y review and is approved for use in product, but may not be up to
15
+ the high code standards upheld in the [Main](#main) package. Preview is analagous to code in beta.
17
16
 
18
17
  Breaking changes are unlikely, but possible, and can be deployed to Preview at any time without
19
18
  triggering a major version update, though such changes will be communicated in advance and
@@ -22,7 +21,7 @@ accompanied by migration strategies.
22
21
  Generally speaking, our goal is to eventually promote code from Preview to [Main](#main).
23
22
  Occasionally, a component with the same name will exist in both [Main](#main) and Preview (for
24
23
  example, see Segmented Control in [Preview](/components/buttons/segmented-control/) and
25
- [Main](https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/components-buttons-segmented-control--basic)).
24
+ [Main](https://workday.github.io/canvas-kit//?path=/docs/components-buttons-segmented-control--docs)).
26
25
  In these cases, Preview serves as a staging ground for an improved version of the component with a
27
26
  different API. The component in [Main](#main) will eventually be replaced with the one in Preview.
28
27
 
@@ -30,8 +29,8 @@ different API. The component in [Main](#main) will eventually be replaced with t
30
29
 
31
30
  ### Labs
32
31
 
33
- Our Labs package of Canvas Kit components and utilities at `@workday/canvas-kit-labs-react`
34
- has **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
32
+ Our Labs package of Canvas Kit components and utilities at `@workday/canvas-kit-labs-react` has
33
+ **not** undergone a full design and a11y review. Labs serves as an incubator space for new and
35
34
  experimental code and is analagous to code in alpha.
36
35
 
37
36
  Breaking changes can be deployed to Labs at any time without triggering a major version update and
@@ -43,4 +42,4 @@ changes in [Preview](#preview) and [Main](#main).
43
42
 
44
43
  This package contains everything needed to create CSS styling. This styling package contains a
45
44
  runtime for development and a static parsing process for build time. For more information, visit
46
- https://workday.github.io/canvas-kit/?path=/docs/styling-why-canvas-styling--docs
45
+ https://workday.github.io/canvas-kit/?path=/docs/styling-guides-why-canvas-styling--docs
@@ -1,4 +1,4 @@
1
- import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator,} from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, SymbolDoc, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
2
2
  import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import Basic from './examples/Basic';
3
3
  import Collapsed from './examples/Collapsed';
4
4
  import CustomTheme from './examples/CustomTheme';
@@ -74,11 +74,16 @@ additional configuration.
74
74
 
75
75
  ### Custom Styles
76
76
 
77
- You can apply custom styles to the component via the `cs` prop. The example below uses CSS Variables and [createStencil](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs#stencils) to create a custom style for the `SearchForm` component.
77
+ You can apply custom styles to the component via the `cs` prop. The example below uses CSS Variables
78
+ and
79
+ [createStencil](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs#stencils)
80
+ to create a custom style for the `SearchForm` component.
78
81
 
79
82
  <ExampleCodeBlock code={CustomStyles} />
80
83
 
81
- Learn more in our [Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs) docs.
84
+ Learn more in our
85
+ [Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
86
+ docs.
82
87
 
83
88
  ## Component API
84
89
 
@@ -1,6 +1,6 @@
1
- import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
2
2
 
3
- import {Divider} from '@workday/canvas-kit-preview-react/divider';
3
+ import * as Divider from './Divider.stories.ts';
4
4
  import Basic from './examples/Basic';
5
5
  import CustomSpace from './examples/CustomSpace';
6
6
 
@@ -17,17 +17,27 @@ yarn add @workday/canvas-kit-preview-react
17
17
 
18
18
  ## Usage
19
19
 
20
- Use a `Divider` to separate content and create visual hierarchy. Typically they are used between paragraph sections to indicate a break or shift in content. However, they can also be used as decorative elements to provide greater emphasis and visual hierarchy.
20
+ Use a `Divider` to separate content and create visual hierarchy. Typically they are used between
21
+ paragraph sections to indicate a break or shift in content. However, they can also be used as
22
+ decorative elements to provide greater emphasis and visual hierarchy.
21
23
 
22
24
  ### Basic Example
23
25
 
24
- By default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and bottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the `Divider`s provide a subtle deliniation between each profile card without being as visually prominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and bottom margin.
26
+ By default, `Divider` renders a `<hr>` (horizontal rule) element with `0.5rem` of margin on top and
27
+ bottom. The `space` prop allows you to adjust the vertical margin evenly. In the example below, the
28
+ `Divider`s provide a subtle deliniation between each profile card without being as visually
29
+ prominent as a `Card`. The `space` is adjusted to `0.25rem` which applied `0.125rem` to the top and
30
+ bottom margin.
25
31
 
26
32
  <ExampleCodeBlock code={Basic} />
27
33
 
28
34
  ### Custom Space
29
35
 
30
- You might also want to apply custom space to `Divider` where the top and bottom margin are not equal. The best way to achieve this is with `createStyles` and the `cs` property. In the example below, the `Divider` is applied as a decorative element to add emphasis to the section heading. Custom styles are defined in the `createStyles` function outside the component and are passed to `Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.
36
+ You might also want to apply custom space to `Divider` where the top and bottom margin are not
37
+ equal. The best way to achieve this is with `createStyles` and the `cs` property. In the example
38
+ below, the `Divider` is applied as a decorative element to add emphasis to the section heading.
39
+ Custom styles are defined in the `createStyles` function outside the component and are passed to
40
+ `Divider`'s `cs` prop. These styles remove the top margin and set the bottom margin to `1rem`.
31
41
 
32
42
  <ExampleCodeBlock code={CustomSpace} />
33
43
 
@@ -28,9 +28,9 @@ information to help with scanning and organization.
28
28
 
29
29
  ### Basic Pills
30
30
 
31
- By default a Pill is considered interactive. All leading
32
- elements (icons or avatars) are intended to be descriptive, helping support the label. Do not rely
33
- on the leading element to indicate the interaction behavior.
31
+ By default a Pill is considered interactive. All leading elements (icons or avatars) are intended to
32
+ be descriptive, helping support the label. Do not rely on the leading element to indicate the
33
+ interaction behavior.
34
34
 
35
35
  #### Icon
36
36
 
@@ -101,7 +101,7 @@ accordingly.
101
101
  ### Custom Styles
102
102
 
103
103
  `Pill` supports custom styling via the `cs` prop. For more information, check our
104
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
104
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
105
105
  or view the example below.
106
106
 
107
107
  <ExampleCodeBlock code={CustomStyles} />
@@ -1,4 +1,4 @@
1
- import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
2
2
 
3
3
  import Basic from './examples/Basic';
4
4
  import Alert from './examples/Alert';
@@ -139,7 +139,7 @@ how to use `RadioGroup` with React Hook Form.
139
139
 
140
140
  Radio and its subcomponents support custom styling via the `cs` prop. For more information, check
141
141
  our
142
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
142
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
143
143
 
144
144
  ## Component API
145
145
 
@@ -32,7 +32,7 @@ import GrowLeft from './examples/Left Label/GrowLeft';
32
32
  use `Select` in Main instead.
33
33
  </InformationHighlight.Body>
34
34
  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs">
35
- Form Field Docs
35
+ Select (main) Docs
36
36
  </InformationHighlight.Link>
37
37
  </InformationHighlight>
38
38
 
@@ -1,4 +1,4 @@
1
- import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
2
2
 
3
3
  import Basic from './examples/Basic';
4
4
  import Emphasis from './examples/Emphasis';
@@ -75,7 +75,7 @@ The background color dictated by the `variant` will be dark or light based on th
75
75
 
76
76
  Status Indicator and its subcomponents support custom styling via the `cs` prop. For more
77
77
  information, check our
78
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
78
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
79
79
 
80
80
  ## Component API
81
81
 
@@ -14,7 +14,7 @@ import Tiled4and2Columns from './examples/layout/Tiled4and2Columns';
14
14
 
15
15
  Below are layout examples to reference as you build your own. For more in-depth information on our
16
16
  `Grid` component, please reference our
17
- [`Grid` documentation](https://workday.github.io/canvas-kit//?path=/docs/components-containers-grid--basic).
17
+ [`Grid` documentation](https://workday.github.io/canvas-kit/?path=/docs/components-layout-grid--docs).
18
18
 
19
19
  ## Area Column Positioning
20
20
 
@@ -1,4 +1,10 @@
1
- import {Specifications, SymbolDoc, SymbolDescription, ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
1
+ import {
2
+ Specifications,
3
+ SymbolDoc,
4
+ SymbolDescription,
5
+ ExampleCodeBlock,
6
+ StorybookStatusIndicator,
7
+ } from '@workday/canvas-kit-docs';
2
8
  import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
3
9
 
4
10
  import Basic from './examples/Basic';
@@ -16,9 +22,9 @@ import CustomStyles from './examples/CustomStyles';
16
22
  <InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
17
23
  <InformationHighlight.Icon />
18
24
  <InformationHighlight.Body>
19
- `Avatar` in Main has been deprecated and will be removed in a future major version.
20
- Please use [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--basic) in
21
- Preview instead.
25
+ `Avatar` in Main has been deprecated and will be removed in a future major version. Please use
26
+ [Avatar](https://workday.github.io/canvas-kit/?path=/docs/preview-avatar--docs) in Preview
27
+ instead.
22
28
  </InformationHighlight.Body>
23
29
  </InformationHighlight>
24
30
 
@@ -1,11 +1,11 @@
1
1
  import {
2
- ExampleCodeBlock,
3
- Specifications,
4
- SymbolDoc,
5
- SymbolDescription,
2
+ ExampleCodeBlock,
3
+ Specifications,
4
+ SymbolDoc,
5
+ SymbolDescription,
6
6
  } from '@workday/canvas-kit-docs';
7
- import { Pill } from '@workday/canvas-kit-preview-react/pill';
8
- import { accessibilityIcon } from '@workday/canvas-system-icons-web';
7
+ import {Pill} from '@workday/canvas-kit-preview-react/pill';
8
+ import {accessibilityIcon} from '@workday/canvas-system-icons-web';
9
9
 
10
10
  import Primary from './examples/Primary';
11
11
  import PrimaryInverse from './examples/PrimaryInverse';
@@ -89,27 +89,31 @@ the width of the button to the width of its container.
89
89
  ### Custom Styles
90
90
 
91
91
  All of our buttons support custom styling via the `cs` prop. For more information, check our
92
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs)
92
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs)
93
93
  or view the example below.
94
94
 
95
95
  <ExampleCodeBlock code={CustomStyles} />
96
96
 
97
97
  ### Theme Overrides
98
98
 
99
- The most common way to theme our buttons is to pass a `theme` object at the root level of the application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**` tokens with the fallback being `brand.primary.**`.
99
+ The most common way to theme our buttons is to pass a `theme` object at the root level of the
100
+ application via the `CanvasProvider`. In the example below, our buttons use our `brand.action.**`
101
+ tokens with the fallback being `brand.primary.**`.
100
102
 
101
- > **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all `PrimaryButton` theme colors set at the `CanvasProvider` level.
103
+ > **Caution:** Setting `--cnvs-brand-action**` tokens at the `:root` CSS will override all
104
+ > `PrimaryButton` theme colors set at the `CanvasProvider` level.
102
105
 
103
- > **Note:** You should **not** individually theme components wrapping them with the `CanvasProvider`, but rather theme at the root level of the application.
106
+ > **Note:** You should **not** individually theme components wrapping them with the
107
+ > `CanvasProvider`, but rather theme at the root level of the application.
104
108
 
105
109
  <ExampleCodeBlock code={ThemeOverrides} />
106
110
 
107
- ## Accessibility
111
+ ## Accessibility
108
112
 
109
- <Pill className='sb-unstyled'>
110
- <Pill.Icon icon={accessibilityIcon} />
111
- <Pill.Label>WAI-ARIA Reference</Pill.Label>
112
- </Pill>
113
+ <Pill className="sb-unstyled">
114
+ <Pill.Icon icon={accessibilityIcon} />
115
+ <Pill.Label>WAI-ARIA Reference</Pill.Label>
116
+ </Pill>
113
117
 
114
118
  ### Accessible Use of the `as` Prop
115
119
 
@@ -120,7 +124,8 @@ should be used for navigation.
120
124
 
121
125
  ### Role
122
126
 
123
- By default buttons have a `role` of `button`. If you wish to use buttons in the context of a form, the role should be set to type `submit`.
127
+ By default buttons have a `role` of `button`. If you wish to use buttons in the context of a form,
128
+ the role should be set to type `submit`.
124
129
 
125
130
  ## Component API
126
131
 
@@ -48,7 +48,7 @@ grayish background to create visual separation from the page background.
48
48
  ### Custom Styles
49
49
 
50
50
  Card and its subcomponents support custom styling via the `cs` prop. For more information, check our
51
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
51
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
52
52
 
53
53
  <ExampleCodeBlock code={WithCustomStyles} />
54
54
 
@@ -1,8 +1,8 @@
1
1
  import {
2
- ExampleCodeBlock,
3
- SymbolDoc,
4
- Specifications,
5
- InformationHighlight,
2
+ ExampleCodeBlock,
3
+ SymbolDoc,
4
+ Specifications,
5
+ InformationHighlight,
6
6
  } from '@workday/canvas-kit-docs';
7
7
  import Alert from './examples/Alert';
8
8
  import Basic from './examples/Basic';
@@ -104,7 +104,7 @@ or `Checkbox.ErrorType.Error` if Form Field is not being used.
104
104
  ### Custom Styles
105
105
 
106
106
  Checkbox supports custom styling via the `cs` prop. For more information, check our
107
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
107
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
108
108
 
109
109
  ## Component API
110
110
 
@@ -1,4 +1,4 @@
1
- import { ExampleCodeBlock, SymbolDoc, Specifications } from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
2
2
  import Autocomplete from './examples/Autocomplete';
3
3
 
4
4
  # Combobox
@@ -72,7 +72,7 @@ An Autocomplete is an example of an arbitrary combobox.
72
72
 
73
73
  Combobox and its subcomponents support custom styling via the `cs` prop. For more information, check
74
74
  our
75
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
75
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
76
76
 
77
77
  ## Component API
78
78
 
@@ -1,4 +1,4 @@
1
- import { ExampleCodeBlock, Specifications, SymbolDoc } from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, Specifications, SymbolDoc} from '@workday/canvas-kit-docs';
2
2
  import Basic from './examples/Basic';
3
3
  import Alert from './examples/Alert';
4
4
  import Error from './examples/Error';
@@ -202,7 +202,7 @@ You can theme your error rings by wrapping an input in a `CanvasProvider` and de
202
202
 
203
203
  Form Field and its subcomponents support custom styling via the `cs` prop. For more information,
204
204
  check our
205
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
205
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
206
206
 
207
207
  ## Component API
208
208
 
@@ -1,8 +1,8 @@
1
1
  import {
2
- ExampleCodeBlock,
3
- InformationHighlight,
4
- SymbolDoc,
5
- Specifications,
2
+ ExampleCodeBlock,
3
+ InformationHighlight,
4
+ SymbolDoc,
5
+ Specifications,
6
6
  } from '@workday/canvas-kit-docs';
7
7
  import Alert from './examples/Alert';
8
8
  import Basic from './examples/Basic';
@@ -20,7 +20,7 @@ import HoistedModel from './examples/HoistedModel';
20
20
  import RefForwarding from './examples/RefForwarding';
21
21
  import FetchingDynamicItems from './examples/FetchingDynamicItems';
22
22
  import Placeholder from './examples/Placeholder';
23
- import InitialSelectedItem from './examples/InitialSelectedItem';import { Table } from '@workday/canvas-kit-react/table';
23
+ import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
24
24
 
25
25
 
26
26
  # Canvas Kit Select
@@ -305,7 +305,7 @@ prop as well as the `value` DOM property and will update the model accordingly.
305
305
 
306
306
  Select and its subcomponents support custom styling via the `cs` prop. For more information, check
307
307
  our
308
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
308
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
309
309
 
310
310
  ## Component API
311
311
 
@@ -13,7 +13,7 @@ import MaxWidth from './examples/MaxWidth';
13
13
  <InformationHighlight.Body>
14
14
  `StatusIndicator` in Main has been deprecated and will be removed in a future major version.
15
15
  Please use [Status
16
- Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in
16
+ Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--docs) in
17
17
  Preview instead.
18
18
  </InformationHighlight.Body>
19
19
  </InformationHighlight>
@@ -1,8 +1,8 @@
1
1
  import {
2
- ExampleCodeBlock,
3
- SymbolDoc,
4
- Specifications,
5
- InformationHighlight,
2
+ ExampleCodeBlock,
3
+ SymbolDoc,
4
+ Specifications,
5
+ InformationHighlight,
6
6
  } from '@workday/canvas-kit-docs';
7
7
  import Alert from './examples/Alert';
8
8
  import Basic from './examples/Basic';
@@ -73,7 +73,7 @@ The `error` prop may be applied directly to the Switch with a value of `Switch.E
73
73
  ### Custom Styles
74
74
 
75
75
  Switch supports custom styling via the `cs` prop. For more information, check our
76
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
76
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
77
77
 
78
78
  ## Component API
79
79
 
@@ -1,16 +1,17 @@
1
- import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
2
2
  import Basic from './examples/Basic';
3
3
  import BasicWithHeading from './examples/BasicWithHeading';
4
4
  import FixedColumn from './examples/FixedColumn';
5
5
  import RightToLeft from './examples/RightToLeft';
6
- import BaseHtmlTable from './examples/BaseHtmlTable'
6
+ import BaseHtmlTable from './examples/BaseHtmlTable';
7
7
 
8
8
  # Canvas Kit Table
9
9
 
10
10
  `Table` is a simple styled compound component that renders a
11
11
  [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) element. It is used to
12
12
  present information in a two-dimensional table comprised of rows and columns of cells containing
13
- data. `Table` is built off of `BaseTable` and is using [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.
13
+ data. `Table` is built off of `BaseTable` and is using
14
+ [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features.
14
15
 
15
16
  ## Installation
16
17
 
@@ -22,9 +23,10 @@ yarn add @workday/canvas-kit-react
22
23
 
23
24
  ### Basic Example
24
25
 
25
- Users may not want to use a `caption` so they can import [Heading](/components/text/heading/) or
26
- [Text](/components/text/text/) instead. This will give the user more flexibility around the
27
- customization of the title/heading of their table.
26
+ Users may not want to use a `caption` so they can import
27
+ [Heading](https://workday.github.io/canvas-kit/?path=/docs/components-text-heading--docs) or
28
+ [Text](https://workday.github.io/canvas-kit/?path=/docs/components-text-text--docs) instead. This
29
+ will give the user more flexibility around the customization of the title/heading of their table.
28
30
 
29
31
  <ExampleCodeBlock code={BasicWithHeading} />
30
32
 
@@ -53,29 +55,40 @@ Users may add styles to the `Table.Header` to render a fixed column. The example
53
55
 
54
56
  ### Base Html Table Example
55
57
 
56
- If a user needs a standard HTML [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can use the `BaseTable` component.
58
+ If a user needs a standard HTML
59
+ [table](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table) with no
60
+ [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features, then they can
61
+ use the `BaseTable` component.
57
62
 
58
63
  <ExampleCodeBlock code={BaseHtmlTable} />
59
64
 
60
65
  ### Which Component Should I Use?
61
66
 
62
- > If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their Table, then use the [Table](/components/containers/table/) component.
67
+ > If a user wants [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout)
68
+ > features with their Table, then use the
69
+ > [Table](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#basic-example)
70
+ > component.
63
71
 
64
- > If a user __does not__ want [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their Table, then use the [BaseTable](/components/text/heading/) component.
72
+ > If a user **does not** want
73
+ > [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) features with their
74
+ > Table, then use the
75
+ > [BaseTable](https://workday.github.io/canvas-kit/?path=/docs/components-containers-table--docs#base-html-table-example)
76
+ > component.
65
77
 
66
78
  ### Advanced
67
79
 
68
80
  You can also find several advanced Table examples in our Storybook Examples section.
69
81
 
70
- - [Expandable Rows](/docs/examples-tables-advanced--expandable-rows)
71
- - [Selectable Rows ](/docs/examples-tables-advanced--selectable-rows)
72
- - [Sortable Column Headers](/docs/examples-tables-advanced--sortable-column-headers)
82
+ - [Expandable Rows](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#expandable-rows)
83
+ - [Selectable Rows ](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#selectable-rows)
84
+ - [Filterable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#filterable-column-headers)
85
+ - [Sortable Column Headers](https://workday.github.io/canvas-kit/?path=/docs/guides-accessibility-examples-advanced-tables--docs#sortable-column-headers)
73
86
 
74
87
  ### Custom Styles
75
88
 
76
89
  Table and its subcomponents support custom styling via the `cs` prop. For more information, check
77
90
  our
78
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
91
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
79
92
 
80
93
  ## Component API
81
94
 
@@ -1,4 +1,4 @@
1
- import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
2
2
  import Basic from './examples/BodyText/Basic';
3
3
 
4
4
  # Canvas Kit Body Text
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
29
29
  ### Custom Styles
30
30
 
31
31
  Body Text supports custom styling via the `cs` prop. For more information, check our
32
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
32
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
33
33
 
34
34
  ## Component API
35
35
 
@@ -1,4 +1,4 @@
1
- import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
1
+ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';import Basic from './examples/Heading/Basic';
2
2
 
3
3
 
4
4
  # Canvas Kit Heading
@@ -29,7 +29,7 @@ according to the [Canvas type hierarchy](/tokens/type/#type-styles).
29
29
  ### Custom Styles
30
30
 
31
31
  Heading supports custom styling via the `cs` prop. For more information, check our
32
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
32
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
33
33
 
34
34
  ## Component API
35
35
 
@@ -1,4 +1,4 @@
1
- import { ExampleCodeBlock, SymbolDoc } from '@workday/canvas-kit-docs';
1
+ import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
2
2
  import Basic from './examples/Subtext/Basic';
3
3
 
4
4
  # Canvas Kit Subtext
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
29
29
  ### Custom Styles
30
30
 
31
31
  Subtext supports custom styling via the `cs` prop. For more information, check our
32
- ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-how-to-customize-styles--docs).
32
+ ["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
33
33
 
34
34
  ## Component API
35
35