@workday/canvas-kit-docs 13.0.0-alpha.996-next.0 → 13.0.0-alpha.998-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
CHANGED
|
@@ -139368,6 +139368,24 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
139368
139368
|
}
|
|
139369
139369
|
],
|
|
139370
139370
|
"tags": {}
|
|
139371
|
+
},
|
|
139372
|
+
{
|
|
139373
|
+
"kind": "property",
|
|
139374
|
+
"name": "action",
|
|
139375
|
+
"required": true,
|
|
139376
|
+
"type": {
|
|
139377
|
+
"kind": "symbol",
|
|
139378
|
+
"name": "CanvasThemePalette",
|
|
139379
|
+
"value": "CanvasThemePalette"
|
|
139380
|
+
},
|
|
139381
|
+
"description": "",
|
|
139382
|
+
"declarations": [
|
|
139383
|
+
{
|
|
139384
|
+
"name": "action",
|
|
139385
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
|
|
139386
|
+
}
|
|
139387
|
+
],
|
|
139388
|
+
"tags": {}
|
|
139371
139389
|
}
|
|
139372
139390
|
]
|
|
139373
139391
|
},
|
|
@@ -14,6 +14,7 @@ import TertiaryInverse from './examples/TertiaryInverse';
|
|
|
14
14
|
import Delete from './examples/Delete';
|
|
15
15
|
import Grow from './examples/Grow';
|
|
16
16
|
import CustomStyles from './examples/CustomStyles';
|
|
17
|
+
import ThemeOverrides from './examples/ThemeOverrides';
|
|
17
18
|
|
|
18
19
|
|
|
19
20
|
# Canvas Kit Button
|
|
@@ -91,6 +92,12 @@ or view the example below.
|
|
|
91
92
|
|
|
92
93
|
<ExampleCodeBlock code={CustomStyles} />
|
|
93
94
|
|
|
95
|
+
### Theme Overrides
|
|
96
|
+
|
|
97
|
+
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.**`.
|
|
98
|
+
|
|
99
|
+
<ExampleCodeBlock code={ThemeOverrides} />
|
|
100
|
+
|
|
94
101
|
### Accessible Use of the `as` Prop
|
|
95
102
|
|
|
96
103
|
Like many of our components, Buttons accept an `as` prop, which lets you change the underlying
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import {PrimaryButton} from '@workday/canvas-kit-react/button';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
5
|
+
import {
|
|
6
|
+
plusIcon,
|
|
7
|
+
relatedActionsVerticalIcon,
|
|
8
|
+
caretDownIcon,
|
|
9
|
+
} from '@workday/canvas-system-icons-web';
|
|
10
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
11
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
12
|
+
import {CanvasProvider} from '@workday/canvas-kit-react/common';
|
|
13
|
+
import {Heading} from '@workday/canvas-kit-react/text';
|
|
14
|
+
|
|
15
|
+
const parentContainerStyles = createStyles({
|
|
16
|
+
gap: system.space.x4,
|
|
17
|
+
padding: system.space.x4,
|
|
18
|
+
});
|
|
19
|
+
|
|
20
|
+
export default () => (
|
|
21
|
+
<div>
|
|
22
|
+
<Heading size="medium" as="h3">
|
|
23
|
+
Override Primary Color
|
|
24
|
+
</Heading>
|
|
25
|
+
<CanvasProvider
|
|
26
|
+
theme={{
|
|
27
|
+
canvas: {
|
|
28
|
+
palette: {
|
|
29
|
+
action: {
|
|
30
|
+
main: 'teal',
|
|
31
|
+
},
|
|
32
|
+
},
|
|
33
|
+
},
|
|
34
|
+
}}
|
|
35
|
+
>
|
|
36
|
+
<Flex cs={parentContainerStyles}>
|
|
37
|
+
<PrimaryButton>Primary</PrimaryButton>
|
|
38
|
+
<PrimaryButton icon={plusIcon} iconPosition="start">
|
|
39
|
+
Primary
|
|
40
|
+
</PrimaryButton>
|
|
41
|
+
<PrimaryButton icon={caretDownIcon} iconPosition="end">
|
|
42
|
+
Primary
|
|
43
|
+
</PrimaryButton>
|
|
44
|
+
<PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
|
|
45
|
+
</Flex>
|
|
46
|
+
</CanvasProvider>
|
|
47
|
+
<Heading size="medium" as="h3">
|
|
48
|
+
Override Action Color
|
|
49
|
+
</Heading>
|
|
50
|
+
<CanvasProvider
|
|
51
|
+
theme={{
|
|
52
|
+
canvas: {
|
|
53
|
+
palette: {
|
|
54
|
+
primary: {
|
|
55
|
+
main: 'navy',
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
},
|
|
59
|
+
}}
|
|
60
|
+
>
|
|
61
|
+
<Flex cs={parentContainerStyles}>
|
|
62
|
+
<PrimaryButton>Primary</PrimaryButton>
|
|
63
|
+
<PrimaryButton icon={plusIcon} iconPosition="start">
|
|
64
|
+
Primary
|
|
65
|
+
</PrimaryButton>
|
|
66
|
+
<PrimaryButton icon={caretDownIcon} iconPosition="end">
|
|
67
|
+
Primary
|
|
68
|
+
</PrimaryButton>
|
|
69
|
+
<PrimaryButton aria-label="Related Actions" icon={relatedActionsVerticalIcon} />
|
|
70
|
+
</Flex>
|
|
71
|
+
</CanvasProvider>
|
|
72
|
+
</div>
|
|
73
|
+
);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "13.0.0-alpha.
|
|
3
|
+
"version": "13.0.0-alpha.998-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,12 +44,12 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^13.0.0-alpha.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^13.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^13.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^13.0.0-alpha.998-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.998-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^13.0.0-alpha.998-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^13.0.0-alpha.998-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
|
-
"@workday/canvas-tokens-web": "^2.0
|
|
52
|
+
"@workday/canvas-tokens-web": "^2.1.0",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
54
54
|
"react-syntax-highlighter": "^15.5.0",
|
|
55
55
|
"ts-node": "^10.9.1"
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "5.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "d95041596e2b948c0a371f4c763746a98c58b2da"
|
|
64
64
|
}
|