@workday/canvas-kit-react 6.0.0-alpha.0-next.22 → 6.0.0-alpha.0-next.28
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/action-bar/lib/ActionBar.tsx +43 -30
- package/button/lib/PrimaryButton.tsx +110 -32
- package/button/lib/parts/ButtonContainer.tsx +16 -5
- package/button/lib/parts/ButtonLabelIcon.tsx +34 -14
- package/button/lib/types.ts +10 -0
- package/common/lib/styles/accessibleHide.ts +2 -2
- package/common/lib/theming/README.md +189 -25
- package/common/lib/theming/breakpoints.ts +296 -16
- package/common/lib/theming/types.ts +191 -1
- package/dist/commonjs/action-bar/lib/ActionBar.d.ts.map +1 -1
- package/dist/commonjs/action-bar/lib/ActionBar.js +35 -27
- package/dist/commonjs/button/lib/PrimaryButton.d.ts +80 -6
- package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/commonjs/button/lib/PrimaryButton.js +80 -26
- package/dist/commonjs/button/lib/parts/ButtonContainer.d.ts +5 -3
- package/dist/commonjs/button/lib/parts/ButtonContainer.d.ts.map +1 -1
- package/dist/commonjs/button/lib/parts/ButtonContainer.js +11 -9
- package/dist/commonjs/button/lib/parts/ButtonLabel.d.ts +1 -1
- package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
- package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
- package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js +28 -13
- package/dist/commonjs/button/lib/types.d.ts +8 -0
- package/dist/commonjs/button/lib/types.d.ts.map +1 -1
- package/dist/commonjs/common/lib/styles/accessibleHide.d.ts +2 -2
- package/dist/commonjs/common/lib/styles/accessibleHide.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/breakpoints.d.ts +287 -6
- package/dist/commonjs/common/lib/theming/breakpoints.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/breakpoints.js +192 -10
- package/dist/commonjs/common/lib/theming/types.d.ts +191 -1
- package/dist/commonjs/common/lib/theming/types.d.ts.map +1 -1
- package/dist/commonjs/common/lib/utils/components.d.ts +1 -1
- package/dist/commonjs/pagination/lib/Pagination/PageList.d.ts +1 -1
- package/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts +5 -5
- package/dist/commonjs/pagination/lib/Pagination/common/List.d.ts +1 -1
- package/dist/commonjs/pagination/lib/Pagination/common/utils/space.d.ts +28 -28
- package/dist/commonjs/tokens/index.d.ts +3 -20
- package/dist/commonjs/tokens/index.d.ts.map +1 -1
- package/dist/commonjs/tokens/index.js +3 -6
- package/dist/commonjs/tokens/lib/depth.d.ts +109 -3
- package/dist/commonjs/tokens/lib/depth.d.ts.map +1 -1
- package/dist/commonjs/tokens/lib/depth.js +40 -5
- package/dist/es6/action-bar/lib/ActionBar.d.ts.map +1 -1
- package/dist/es6/action-bar/lib/ActionBar.js +33 -22
- package/dist/es6/button/lib/PrimaryButton.d.ts +80 -6
- package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
- package/dist/es6/button/lib/PrimaryButton.js +81 -27
- package/dist/es6/button/lib/parts/ButtonContainer.d.ts +5 -3
- package/dist/es6/button/lib/parts/ButtonContainer.d.ts.map +1 -1
- package/dist/es6/button/lib/parts/ButtonContainer.js +11 -9
- package/dist/es6/button/lib/parts/ButtonLabel.d.ts +1 -1
- package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
- package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
- package/dist/es6/button/lib/parts/ButtonLabelIcon.js +28 -13
- package/dist/es6/button/lib/types.d.ts +8 -0
- package/dist/es6/button/lib/types.d.ts.map +1 -1
- package/dist/es6/common/lib/styles/accessibleHide.d.ts +2 -2
- package/dist/es6/common/lib/styles/accessibleHide.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/breakpoints.d.ts +287 -6
- package/dist/es6/common/lib/theming/breakpoints.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/breakpoints.js +192 -10
- package/dist/es6/common/lib/theming/types.d.ts +191 -1
- package/dist/es6/common/lib/theming/types.d.ts.map +1 -1
- package/dist/es6/pagination/lib/Pagination/PageList.d.ts +1 -1
- package/dist/es6/pagination/lib/Pagination/Pagination.d.ts +5 -5
- package/dist/es6/pagination/lib/Pagination/common/List.d.ts +1 -1
- package/dist/es6/pagination/lib/Pagination/common/utils/space.d.ts +28 -28
- package/dist/es6/tokens/index.d.ts +3 -20
- package/dist/es6/tokens/index.d.ts.map +1 -1
- package/dist/es6/tokens/index.js +1 -1
- package/dist/es6/tokens/lib/depth.d.ts +109 -3
- package/dist/es6/tokens/lib/depth.d.ts.map +1 -1
- package/dist/es6/tokens/lib/depth.js +40 -2
- package/package.json +5 -6
- package/tokens/README.md +5 -12
- package/tokens/index.ts +2 -2
- package/tokens/lib/depth.ts +125 -3
- package/ts3.5/dist/commonjs/button/lib/PrimaryButton.d.ts +80 -6
- package/ts3.5/dist/commonjs/button/lib/parts/ButtonContainer.d.ts +5 -3
- package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabel.d.ts +1 -1
- package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
- package/ts3.5/dist/commonjs/button/lib/types.d.ts +8 -0
- package/ts3.5/dist/commonjs/common/lib/styles/accessibleHide.d.ts +2 -2
- package/ts3.5/dist/commonjs/common/lib/theming/breakpoints.d.ts +287 -6
- package/ts3.5/dist/commonjs/common/lib/theming/types.d.ts +191 -1
- package/ts3.5/dist/commonjs/common/lib/utils/components.d.ts +1 -1
- package/ts3.5/dist/commonjs/pagination/lib/Pagination/PageList.d.ts +1 -1
- package/ts3.5/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts +5 -5
- package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/List.d.ts +1 -1
- package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/utils/space.d.ts +28 -28
- package/ts3.5/dist/commonjs/tokens/index.d.ts +3 -20
- package/ts3.5/dist/commonjs/tokens/lib/depth.d.ts +109 -3
- package/ts3.5/dist/es6/button/lib/PrimaryButton.d.ts +80 -6
- package/ts3.5/dist/es6/button/lib/parts/ButtonContainer.d.ts +5 -3
- package/ts3.5/dist/es6/button/lib/parts/ButtonLabel.d.ts +1 -1
- package/ts3.5/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
- package/ts3.5/dist/es6/button/lib/types.d.ts +8 -0
- package/ts3.5/dist/es6/common/lib/styles/accessibleHide.d.ts +2 -2
- package/ts3.5/dist/es6/common/lib/theming/breakpoints.d.ts +287 -6
- package/ts3.5/dist/es6/common/lib/theming/types.d.ts +191 -1
- package/ts3.5/dist/es6/pagination/lib/Pagination/PageList.d.ts +1 -1
- package/ts3.5/dist/es6/pagination/lib/Pagination/Pagination.d.ts +5 -5
- package/ts3.5/dist/es6/pagination/lib/Pagination/common/List.d.ts +1 -1
- package/ts3.5/dist/es6/pagination/lib/Pagination/common/utils/space.d.ts +28 -28
- package/ts3.5/dist/es6/tokens/index.d.ts +3 -20
- package/ts3.5/dist/es6/tokens/lib/depth.d.ts +109 -3
|
@@ -1,2 +1,40 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
/**
|
|
2
|
+
* ### Depth Tokens
|
|
3
|
+
*
|
|
4
|
+
* Depth is the relative distance between surfaces in the z-axis.
|
|
5
|
+
* It provides delineation, focus, and priority with shadows and layering.
|
|
6
|
+
* There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
|
|
7
|
+
* Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* ```tsx
|
|
11
|
+
* import { depth } from '@workday/canvas-kit-react/tokens';
|
|
12
|
+
*
|
|
13
|
+
* const CustomCard = () => {
|
|
14
|
+
* return (
|
|
15
|
+
* <div css={depth[2]}>
|
|
16
|
+
* A standard-depth card
|
|
17
|
+
* </div>
|
|
18
|
+
* );
|
|
19
|
+
* }
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
*/
|
|
23
|
+
export var depth = {
|
|
24
|
+
inset: {
|
|
25
|
+
boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
|
|
26
|
+
},
|
|
27
|
+
1: {
|
|
28
|
+
boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
|
|
29
|
+
},
|
|
30
|
+
2: {
|
|
31
|
+
boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
|
|
32
|
+
},
|
|
33
|
+
3: {
|
|
34
|
+
boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
|
|
35
|
+
},
|
|
36
|
+
4: {
|
|
37
|
+
border: '1px solid rgba(218, 226, 230, 1)',
|
|
38
|
+
boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
|
|
39
|
+
},
|
|
40
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-react",
|
|
3
|
-
"version": "6.0.0-alpha.0-next.
|
|
3
|
+
"version": "6.0.0-alpha.0-next.28+c4856dee",
|
|
4
4
|
"description": "The parent module that contains all Workday Canvas Kit React components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -56,10 +56,9 @@
|
|
|
56
56
|
"@emotion/styled": "^10.0.27",
|
|
57
57
|
"@popperjs/core": "^2.5.4",
|
|
58
58
|
"@workday/canvas-colors-web": "^2.0.0",
|
|
59
|
-
"@workday/canvas-
|
|
60
|
-
"@workday/canvas-kit-
|
|
61
|
-
"@workday/canvas-kit-
|
|
62
|
-
"@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.22+d9de9f09",
|
|
59
|
+
"@workday/canvas-kit-labs-react": "^6.0.0-alpha.0-next.28+c4856dee",
|
|
60
|
+
"@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.28+c4856dee",
|
|
61
|
+
"@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.28+c4856dee",
|
|
63
62
|
"@workday/canvas-system-icons-web": "1.0.41",
|
|
64
63
|
"@workday/design-assets-types": "^0.2.4",
|
|
65
64
|
"chroma-js": "^2.1.0",
|
|
@@ -75,5 +74,5 @@
|
|
|
75
74
|
"@workday/canvas-accent-icons-web": "^1.0.0",
|
|
76
75
|
"@workday/canvas-applet-icons-web": "^0.17.50"
|
|
77
76
|
},
|
|
78
|
-
"gitHead": "
|
|
77
|
+
"gitHead": "c4856dee60238eceb0481cb522466dc4bee29506"
|
|
79
78
|
}
|
package/tokens/README.md
CHANGED
|
@@ -174,23 +174,16 @@ const buttonSyles = {
|
|
|
174
174
|
|
|
175
175
|
## Depth
|
|
176
176
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
| Level | Usage Recommendations |
|
|
180
|
-
| ---------------- | --------------------------------- |
|
|
181
|
-
| Depth -1 (inset) | Inset card depth |
|
|
182
|
-
| Depth 1 | Standard card depth |
|
|
183
|
-
| Depth 2 | Increased card depth on hover |
|
|
184
|
-
| Depth 3 | Active cards, popups |
|
|
185
|
-
| Depth 4 | Cards on white backgrounds, menus |
|
|
177
|
+
Depth is the relative distance between surfaces in the z-axis. It provides delineation, focus, and priority with shadows and layering. There are five depth levels, `inset`, `1`, `2`, `3`, and `4`. Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
|
|
186
178
|
|
|
187
179
|
### Usage
|
|
188
180
|
|
|
189
181
|
```tsx
|
|
190
|
-
import {depth} from '@workday/canvas-kit-react/tokens';
|
|
182
|
+
import { depth } from '@workday/canvas-kit-react/tokens';
|
|
191
183
|
|
|
192
|
-
|
|
193
|
-
depth[
|
|
184
|
+
const CustomCard = () => {
|
|
185
|
+
return <div css={depth[2]}>A standard-depth card</div>;
|
|
186
|
+
}
|
|
194
187
|
```
|
|
195
188
|
|
|
196
189
|
## Type
|
package/tokens/index.ts
CHANGED
|
@@ -13,7 +13,7 @@ import {
|
|
|
13
13
|
|
|
14
14
|
import {borderRadius, CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues} from './lib/radius';
|
|
15
15
|
import {BrandingColor, CanvasColor} from './lib/colors.types';
|
|
16
|
-
import depth,
|
|
16
|
+
import {depth, CanvasDepth, CanvasDepthValues} from './lib/depth';
|
|
17
17
|
import {
|
|
18
18
|
space,
|
|
19
19
|
CanvasSpace,
|
|
@@ -64,7 +64,7 @@ export {
|
|
|
64
64
|
monoFontFamily,
|
|
65
65
|
BrandingColor,
|
|
66
66
|
CanvasDepth,
|
|
67
|
-
|
|
67
|
+
CanvasDepthValues,
|
|
68
68
|
CSSProperties,
|
|
69
69
|
};
|
|
70
70
|
export default canvas;
|
package/tokens/lib/depth.ts
CHANGED
|
@@ -1,5 +1,127 @@
|
|
|
1
|
-
|
|
1
|
+
export type CanvasDepth = {
|
|
2
|
+
/**
|
|
3
|
+
* ### Depth Inset
|
|
4
|
+
* Used for inset containers
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* ```ts
|
|
8
|
+
* import { depth } from '@workday/canvas-kit-react/tokens';
|
|
9
|
+
*
|
|
10
|
+
* const insetCardStyles = {
|
|
11
|
+
* ...depth.inset,
|
|
12
|
+
* };
|
|
13
|
+
* ```
|
|
14
|
+
*/
|
|
15
|
+
inset: {
|
|
16
|
+
boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* ### Depth 1
|
|
20
|
+
* Used for minimal offset
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```ts
|
|
24
|
+
* import { depth } from '@workday/canvas-kit-react/tokens';
|
|
25
|
+
*
|
|
26
|
+
* const cardStyles = {
|
|
27
|
+
* ...depth[1],
|
|
28
|
+
* };
|
|
29
|
+
* ```
|
|
30
|
+
*/
|
|
31
|
+
1: {
|
|
32
|
+
boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
|
|
33
|
+
};
|
|
34
|
+
/**
|
|
35
|
+
* ### Depth 2
|
|
36
|
+
* Used for Cards, Popups, and Menus — our most common depth
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```ts
|
|
40
|
+
* import { depth } from '@workday/canvas-kit-react/tokens';
|
|
41
|
+
*
|
|
42
|
+
* const cardStyles = {
|
|
43
|
+
* ...depth[2],
|
|
44
|
+
* };
|
|
45
|
+
* ```
|
|
46
|
+
*/
|
|
47
|
+
2: {
|
|
48
|
+
boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
|
|
49
|
+
};
|
|
50
|
+
/**
|
|
51
|
+
* ### Depth 3
|
|
52
|
+
* Used for interactive Cards on hover
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```ts
|
|
56
|
+
* import { depth } from '@workday/canvas-kit-react/tokens';
|
|
57
|
+
*
|
|
58
|
+
* const cardStyles = {
|
|
59
|
+
* ...depth[3],
|
|
60
|
+
* };
|
|
61
|
+
* ```
|
|
62
|
+
*/
|
|
63
|
+
3: {
|
|
64
|
+
boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* ### Depth 4
|
|
68
|
+
* Used for Cards on white backgrounds — adds border styles for more contrast
|
|
69
|
+
*
|
|
70
|
+
* @example
|
|
71
|
+
* ```ts
|
|
72
|
+
* import { depth } from '@workday/canvas-kit-react/tokens';
|
|
73
|
+
*
|
|
74
|
+
* const cardStyles = {
|
|
75
|
+
* ...depth[4],
|
|
76
|
+
* };
|
|
77
|
+
* ```
|
|
78
|
+
*/
|
|
79
|
+
4: {
|
|
80
|
+
border: '1px solid rgba(218, 226, 230, 1)';
|
|
81
|
+
boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
|
|
82
|
+
};
|
|
83
|
+
};
|
|
2
84
|
|
|
3
|
-
|
|
85
|
+
type ValueOf<T> = T[keyof T];
|
|
86
|
+
export type CanvasDepthValues = ValueOf<CanvasDepth>;
|
|
4
87
|
|
|
5
|
-
|
|
88
|
+
/**
|
|
89
|
+
* ### Depth Tokens
|
|
90
|
+
*
|
|
91
|
+
* Depth is the relative distance between surfaces in the z-axis.
|
|
92
|
+
* It provides delineation, focus, and priority with shadows and layering.
|
|
93
|
+
* There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
|
|
94
|
+
* Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```tsx
|
|
98
|
+
* import { depth } from '@workday/canvas-kit-react/tokens';
|
|
99
|
+
*
|
|
100
|
+
* const CustomCard = () => {
|
|
101
|
+
* return (
|
|
102
|
+
* <div css={depth[2]}>
|
|
103
|
+
* A standard-depth card
|
|
104
|
+
* </div>
|
|
105
|
+
* );
|
|
106
|
+
* }
|
|
107
|
+
* ```
|
|
108
|
+
*
|
|
109
|
+
*/
|
|
110
|
+
export const depth: CanvasDepth = {
|
|
111
|
+
inset: {
|
|
112
|
+
boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
|
|
113
|
+
},
|
|
114
|
+
1: {
|
|
115
|
+
boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
|
|
116
|
+
},
|
|
117
|
+
2: {
|
|
118
|
+
boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
|
|
119
|
+
},
|
|
120
|
+
3: {
|
|
121
|
+
boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
|
|
122
|
+
},
|
|
123
|
+
4: {
|
|
124
|
+
border: '1px solid rgba(218, 226, 230, 1)',
|
|
125
|
+
boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
|
|
126
|
+
},
|
|
127
|
+
};
|
|
@@ -1,13 +1,20 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { GrowthBehavior, Themeable, EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { CanvasSystemIcon } from '@workday/design-assets-types';
|
|
4
|
-
import {
|
|
4
|
+
import { ButtonSizes, IconPositions } from './types';
|
|
5
5
|
export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
|
|
6
6
|
/**
|
|
7
|
-
* The
|
|
7
|
+
* The variant of the PrimaryButton.
|
|
8
|
+
* @default undefined
|
|
9
|
+
*/
|
|
10
|
+
variant?: 'inverse';
|
|
11
|
+
/**
|
|
12
|
+
* There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
|
|
13
|
+
* If no size is provided, it will default to `medium`.
|
|
14
|
+
*
|
|
8
15
|
* @default 'medium'
|
|
9
16
|
*/
|
|
10
|
-
size?:
|
|
17
|
+
size?: ButtonSizes;
|
|
11
18
|
/**
|
|
12
19
|
* The data label of the Button.
|
|
13
20
|
* Note: not displayed at `small` size
|
|
@@ -19,10 +26,11 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
|
|
|
19
26
|
*/
|
|
20
27
|
icon?: CanvasSystemIcon;
|
|
21
28
|
/**
|
|
22
|
-
*
|
|
29
|
+
* Button icon positions can either be `left` or `right`.
|
|
30
|
+
* If no value is provided, it defaults to `left`.
|
|
23
31
|
* @default 'left'
|
|
24
32
|
*/
|
|
25
|
-
iconPosition?:
|
|
33
|
+
iconPosition?: IconPositions;
|
|
26
34
|
/**
|
|
27
35
|
* If set to `true`, transform the icon's x-axis to mirror the graphic
|
|
28
36
|
* @default false
|
|
@@ -31,5 +39,71 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
|
|
|
31
39
|
children?: React.ReactNode;
|
|
32
40
|
}
|
|
33
41
|
export declare const PrimaryButton: import("../../common").ElementComponent<"button", PrimaryButtonProps>;
|
|
34
|
-
export declare const getPrimaryButtonColors: (
|
|
42
|
+
export declare const getPrimaryButtonColors: (variant: "inverse" | undefined, theme: EmotionCanvasTheme) => {
|
|
43
|
+
default: {
|
|
44
|
+
background: string;
|
|
45
|
+
icon: string;
|
|
46
|
+
label: string;
|
|
47
|
+
labelData?: undefined;
|
|
48
|
+
};
|
|
49
|
+
hover: {
|
|
50
|
+
background: string;
|
|
51
|
+
icon?: undefined;
|
|
52
|
+
label?: undefined;
|
|
53
|
+
labelData?: undefined;
|
|
54
|
+
};
|
|
55
|
+
active: {
|
|
56
|
+
background: string;
|
|
57
|
+
icon?: undefined;
|
|
58
|
+
label?: undefined;
|
|
59
|
+
labelData?: undefined;
|
|
60
|
+
};
|
|
61
|
+
focus: {
|
|
62
|
+
background: string;
|
|
63
|
+
border?: undefined;
|
|
64
|
+
icon?: undefined;
|
|
65
|
+
label?: undefined;
|
|
66
|
+
labelData?: undefined;
|
|
67
|
+
focusRing?: undefined;
|
|
68
|
+
};
|
|
69
|
+
disabled: {
|
|
70
|
+
background: string;
|
|
71
|
+
icon?: undefined;
|
|
72
|
+
label?: undefined;
|
|
73
|
+
labelData?: undefined;
|
|
74
|
+
};
|
|
75
|
+
} | {
|
|
76
|
+
default: {
|
|
77
|
+
background: string;
|
|
78
|
+
icon: string;
|
|
79
|
+
label: string;
|
|
80
|
+
labelData: string;
|
|
81
|
+
};
|
|
82
|
+
hover: {
|
|
83
|
+
background: string;
|
|
84
|
+
icon: string;
|
|
85
|
+
label: string;
|
|
86
|
+
labelData: string;
|
|
87
|
+
};
|
|
88
|
+
active: {
|
|
89
|
+
background: string;
|
|
90
|
+
icon: string;
|
|
91
|
+
label: string;
|
|
92
|
+
labelData: string;
|
|
93
|
+
};
|
|
94
|
+
focus: {
|
|
95
|
+
background: string;
|
|
96
|
+
border: string;
|
|
97
|
+
icon: string;
|
|
98
|
+
label: string;
|
|
99
|
+
labelData: string;
|
|
100
|
+
focusRing: import("@emotion/serialize").CSSObject;
|
|
101
|
+
};
|
|
102
|
+
disabled: {
|
|
103
|
+
background: string;
|
|
104
|
+
icon: string;
|
|
105
|
+
label: string;
|
|
106
|
+
labelData: string;
|
|
107
|
+
};
|
|
108
|
+
};
|
|
35
109
|
//# sourceMappingURL=PrimaryButton.d.ts.map
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { CSSObject } from '@emotion/core';
|
|
3
3
|
import { GrowthBehavior, EmotionCanvasTheme, StyledType } from '@workday/canvas-kit-react/common';
|
|
4
|
-
import { ButtonColors } from '../types';
|
|
4
|
+
import { ButtonColors, ButtonSizes } from '../types';
|
|
5
5
|
export interface ButtonContainerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, GrowthBehavior {
|
|
6
6
|
colors?: ButtonColors;
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
|
|
9
|
+
* If no size is provided, it will default to `medium`.
|
|
10
|
+
*
|
|
9
11
|
* @default 'medium'
|
|
10
12
|
*/
|
|
11
|
-
size?:
|
|
13
|
+
size?: ButtonSizes;
|
|
12
14
|
/**
|
|
13
15
|
* The ref to the button that the styled component renders.
|
|
14
16
|
*/
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
/// <reference types="@emotion/core" />
|
|
2
|
-
export declare const ButtonLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style" | "title" | "
|
|
2
|
+
export declare const ButtonLabel: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "css" | "style" | "title" | "dir" | "slot" | "children" | "hidden" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, import("../../../common").EmotionCanvasTheme>;
|
|
3
3
|
//# sourceMappingURL=ButtonLabel.d.ts.map
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
import { CanvasSystemIcon } from '@workday/design-assets-types';
|
|
2
|
+
import { ButtonSizes, IconPositions } from '../types';
|
|
2
3
|
export interface ButtonLabelIconProps {
|
|
3
4
|
/**
|
|
4
|
-
*
|
|
5
|
+
* There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
|
|
6
|
+
*
|
|
5
7
|
* @default 'medium'
|
|
6
8
|
*/
|
|
7
|
-
size?:
|
|
9
|
+
size?: ButtonSizes;
|
|
8
10
|
/**
|
|
9
11
|
* The icon of the Button.
|
|
10
12
|
* Note: not displayed at `small` size
|
|
11
13
|
*/
|
|
12
14
|
icon?: CanvasSystemIcon;
|
|
13
15
|
/**
|
|
14
|
-
*
|
|
16
|
+
* Button icon positions can either be `left` or `right`.
|
|
17
|
+
* If no value is provided, it defaults to `left`.
|
|
15
18
|
* @default 'left'
|
|
16
19
|
*/
|
|
17
|
-
iconPosition?:
|
|
20
|
+
iconPosition?: IconPositions;
|
|
18
21
|
/**
|
|
19
22
|
* If set to `true`, transform the icon's x-axis to mirror the graphic
|
|
20
23
|
* @default false
|
|
@@ -19,4 +19,12 @@ export interface ButtonColors {
|
|
|
19
19
|
};
|
|
20
20
|
disabled: ButtonStateColors;
|
|
21
21
|
}
|
|
22
|
+
/**
|
|
23
|
+
* There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
|
|
24
|
+
* If no size is provided, it will default to `medium`.
|
|
25
|
+
*
|
|
26
|
+
* @default 'medium'
|
|
27
|
+
*/
|
|
28
|
+
export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
|
|
29
|
+
export declare type IconPositions = 'left' | 'right';
|
|
22
30
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CSSProperties } from '@workday/canvas-kit-react/tokens';
|
|
2
2
|
/**
|
|
3
3
|
* A utility to hide content normal users while still making accessible to screenreaders
|
|
4
4
|
* See https://a11y-101.com/development/skip-link
|
|
5
5
|
*/
|
|
6
|
-
export declare const accessibleHide:
|
|
6
|
+
export declare const accessibleHide: CSSProperties;
|
|
7
7
|
//# sourceMappingURL=accessibleHide.d.ts.map
|