@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.
- package/dist/es6/lib/docs.js +101 -57
- package/dist/es6/mdx/installBlock.d.ts.map +1 -1
- package/dist/es6/mdx/installBlock.js +4 -1
- package/dist/es6/mdx/welcomePage.d.ts.map +1 -1
- package/dist/es6/mdx/welcomePage.js +1 -1
- package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +9 -7
- package/dist/mdx/MAINTAINING.mdx +4 -4
- package/dist/mdx/PACKAGES.mdx +9 -10
- package/dist/mdx/labs-react/search-form/SearchForm.mdx +8 -3
- package/dist/mdx/preview-react/divider/Divider.mdx +15 -5
- package/dist/mdx/preview-react/pill/Pill.mdx +4 -4
- package/dist/mdx/preview-react/radio/Radio.mdx +2 -2
- package/dist/mdx/preview-react/select/Select.mdx +1 -1
- package/dist/mdx/preview-react/status-indicator/StatusIndicator.mdx +2 -2
- package/dist/mdx/react/_examples/mdx/Layouts.mdx +1 -1
- package/dist/mdx/react/avatar/avatar/Avatar.mdx +10 -4
- package/dist/mdx/react/button/button/Button.mdx +21 -16
- package/dist/mdx/react/card/card.mdx +1 -1
- package/dist/mdx/react/checkbox/Checkbox.mdx +5 -5
- package/dist/mdx/react/combobox/Combobox.mdx +2 -2
- package/dist/mdx/react/form-field/FormField.mdx +2 -2
- package/dist/mdx/react/select/Select.mdx +6 -6
- package/dist/mdx/react/status-indicator/StatusIndicator.mdx +1 -1
- package/dist/mdx/react/switch/Switch.mdx +5 -5
- package/dist/mdx/react/table/Table.mdx +26 -13
- package/dist/mdx/react/text/BodyText.mdx +2 -2
- package/dist/mdx/react/text/Heading.mdx +2 -2
- package/dist/mdx/react/text/Subtext.mdx +2 -2
- package/dist/mdx/react/text/Text.mdx +2 -2
- package/dist/mdx/react/text/Title.mdx +2 -2
- package/dist/mdx/style-props/STYLE_PROPS.mdx +1 -1
- package/dist/mdx/styling/mdx/CustomizingStyles.mdx +8 -8
- package/dist/mdx/styling/mdx/Overview.mdx +7 -3
- package/dist/mdx/tokens/TokenMigrationFinal.mdx +1 -1
- package/package.json +6 -6
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
2
|
import Basic from './examples/Text/Basic';
|
|
3
3
|
import TypeLevel from './examples/Text/TypeLevel';
|
|
4
4
|
import Variant from './examples/Text/Variant';
|
|
@@ -44,7 +44,7 @@ understanding of the text being rendered.
|
|
|
44
44
|
### Custom Styles
|
|
45
45
|
|
|
46
46
|
Text supports custom styling via the `cs` prop. For more information, check our
|
|
47
|
-
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-
|
|
47
|
+
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).
|
|
48
48
|
|
|
49
49
|
## Component API
|
|
50
50
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
2
|
import Basic from './examples/Title/Basic';
|
|
3
3
|
|
|
4
4
|
# Canvas Kit Title
|
|
@@ -29,7 +29,7 @@ You may override the rendered element using the `as` prop.
|
|
|
29
29
|
### Custom Styles
|
|
30
30
|
|
|
31
31
|
Title 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-
|
|
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
|
|
|
@@ -42,7 +42,7 @@ with props.
|
|
|
42
42
|
<InformationHighlight.Icon />
|
|
43
43
|
<InformationHighlight.Heading> Caution: Performance Hit</InformationHighlight.Heading>
|
|
44
44
|
<InformationHighlight.Body>
|
|
45
|
-
As we transition away from Emotion's runtime costs, we advise against using style props. Please use our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started--docs">styling utilities</Hyperlink> instead. For more information on this change, view our discussion on the <Hyperlink src="https://github.com/Workday/canvas-kit/discussions/2265">Future of Styling</Hyperlink>.
|
|
45
|
+
As we transition away from Emotion's runtime costs, we advise against using style props. Please use our <Hyperlink src="https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs">styling utilities</Hyperlink> instead. For more information on this change, view our discussion on the <Hyperlink src="https://github.com/Workday/canvas-kit/discussions/2265">Future of Styling</Hyperlink>.
|
|
46
46
|
</InformationHighlight.Body>
|
|
47
47
|
</InformationHighlight>
|
|
48
48
|
|
|
@@ -11,9 +11,9 @@ here are the following options:
|
|
|
11
11
|
|
|
12
12
|
### Using `createStyles` with `cs` prop
|
|
13
13
|
|
|
14
|
-
Use `createStyles` in tandem with `cs` prop when you're overriding static styles and making small
|
|
15
|
-
existing Canvas Kit component like padding, color and flex properties. Take our
|
|
16
|
-
an example.
|
|
14
|
+
Use `createStyles` in tandem with `cs` prop when you're overriding static styles and making small
|
|
15
|
+
modifications to an existing Canvas Kit component like padding, color and flex properties. Take our
|
|
16
|
+
`Text` component as an example.
|
|
17
17
|
|
|
18
18
|
```tsx
|
|
19
19
|
import {createStyles} from '@Workday/canvas-kit-styling';
|
|
@@ -45,8 +45,8 @@ const uppercaseTextStyles = createStyles({
|
|
|
45
45
|
<Text className={uppercaseTextStyles}>My uppercased text</Text>;
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
-
If you need to dynamically apply styles based on some state or prop, use [Stencils](#stencils)
|
|
49
|
-
|
|
48
|
+
If you need to dynamically apply styles based on some state or prop, use [Stencils](#stencils)
|
|
49
|
+
instead.
|
|
50
50
|
|
|
51
51
|
## Stencils
|
|
52
52
|
|
|
@@ -54,8 +54,8 @@ Stencils can be useful when applying dynamic styles or building your own reusabl
|
|
|
54
54
|
|
|
55
55
|
### Extending Stencils
|
|
56
56
|
|
|
57
|
-
[Stencils](https://workday.github.io/canvas-kit/?path=/docs/styling-
|
|
58
|
-
organize the styling of reusable components into base styles, modifiers, and variables. The
|
|
57
|
+
[Stencils](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-stencil--docs)
|
|
58
|
+
help you organize the styling of reusable components into base styles, modifiers, and variables. The
|
|
59
59
|
organization makes it more natural to produce static and clean CSS with optional extraction into CSS
|
|
60
60
|
files.
|
|
61
61
|
|
|
@@ -175,5 +175,5 @@ const NavIcon = ({
|
|
|
175
175
|
```
|
|
176
176
|
|
|
177
177
|
Another example of Stencil extension and customization is our
|
|
178
|
-
[CustomButton](https://workday.github.io/canvas-kit/?path=/story/components-buttons--custom-styles)
|
|
178
|
+
[CustomButton](https://workday.github.io/canvas-kit/?path=/story/components-buttons--docs#custom-styles)
|
|
179
179
|
example. This example highlights the power of inheritance that you get from extending stencils.
|
|
@@ -17,7 +17,7 @@ static parsing process for build time. This system offers several key benefits:
|
|
|
17
17
|
|
|
18
18
|
The motivation behind this custom styling solution stems from the need to move beyond IE11 support
|
|
19
19
|
and implement performance improvements using static styling methods. For more details, refer to the
|
|
20
|
-
[Why Canvas Kit Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-why-canvas-styling--docs)
|
|
20
|
+
[Why Canvas Kit Styling](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-why-canvas-styling--docs)
|
|
21
21
|
section.
|
|
22
22
|
|
|
23
23
|
## Overview
|
|
@@ -326,7 +326,9 @@ together and applies `className` and `style` attributes to a React element.
|
|
|
326
326
|
<InformationHighlight.Icon />
|
|
327
327
|
<InformationHighlight.Heading>Information</InformationHighlight.Heading>
|
|
328
328
|
<InformationHighlight.Body>
|
|
329
|
-
For a more in depth overview, please view our
|
|
329
|
+
For a more in depth overview, please view our [Create
|
|
330
|
+
Styles](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-styles--docs)
|
|
331
|
+
docs.
|
|
330
332
|
</InformationHighlight.Body>
|
|
331
333
|
</InformationHighlight>
|
|
332
334
|
|
|
@@ -396,6 +398,8 @@ const ThemedCard = ({isDarkTheme, headerColor, elemProps}) => {
|
|
|
396
398
|
<InformationHighlight.Icon />
|
|
397
399
|
<InformationHighlight.Heading>Information</InformationHighlight.Heading>
|
|
398
400
|
<InformationHighlight.Body>
|
|
399
|
-
For a more in depth overview, please view our
|
|
401
|
+
For a more in depth overview, please view our [Create
|
|
402
|
+
Stencil](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-create-stencil--docs)
|
|
403
|
+
docs.
|
|
400
404
|
</InformationHighlight.Body>
|
|
401
405
|
</InformationHighlight>
|
|
@@ -196,6 +196,6 @@ After completing the token migration:
|
|
|
196
196
|
## Resources
|
|
197
197
|
|
|
198
198
|
- [Canvas Tokens Documentation](https://canvas.workday.com/styles/tokens/)
|
|
199
|
-
- [Canvas Kit Styling Documentation](https://workday.github.io/canvas-kit/?path=/docs/
|
|
199
|
+
- [Canvas Kit Styling Documentation](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs)
|
|
200
200
|
- [Token Migration Discussion](https://github.com/Workday/canvas-tokens/discussions/77)
|
|
201
201
|
- [Canvas Kit GitHub Repository](https://github.com/Workday/canvas-kit)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1234-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",
|
|
@@ -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.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1234-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1234-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1234-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1234-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
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": "782f4efdb11b1729f0a706c900be60cfe1910391"
|
|
65
65
|
}
|