@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.
Files changed (105) hide show
  1. package/action-bar/lib/ActionBar.tsx +43 -30
  2. package/button/lib/PrimaryButton.tsx +110 -32
  3. package/button/lib/parts/ButtonContainer.tsx +16 -5
  4. package/button/lib/parts/ButtonLabelIcon.tsx +34 -14
  5. package/button/lib/types.ts +10 -0
  6. package/common/lib/styles/accessibleHide.ts +2 -2
  7. package/common/lib/theming/README.md +189 -25
  8. package/common/lib/theming/breakpoints.ts +296 -16
  9. package/common/lib/theming/types.ts +191 -1
  10. package/dist/commonjs/action-bar/lib/ActionBar.d.ts.map +1 -1
  11. package/dist/commonjs/action-bar/lib/ActionBar.js +35 -27
  12. package/dist/commonjs/button/lib/PrimaryButton.d.ts +80 -6
  13. package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
  14. package/dist/commonjs/button/lib/PrimaryButton.js +80 -26
  15. package/dist/commonjs/button/lib/parts/ButtonContainer.d.ts +5 -3
  16. package/dist/commonjs/button/lib/parts/ButtonContainer.d.ts.map +1 -1
  17. package/dist/commonjs/button/lib/parts/ButtonContainer.js +11 -9
  18. package/dist/commonjs/button/lib/parts/ButtonLabel.d.ts +1 -1
  19. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
  20. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
  21. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js +28 -13
  22. package/dist/commonjs/button/lib/types.d.ts +8 -0
  23. package/dist/commonjs/button/lib/types.d.ts.map +1 -1
  24. package/dist/commonjs/common/lib/styles/accessibleHide.d.ts +2 -2
  25. package/dist/commonjs/common/lib/styles/accessibleHide.d.ts.map +1 -1
  26. package/dist/commonjs/common/lib/theming/breakpoints.d.ts +287 -6
  27. package/dist/commonjs/common/lib/theming/breakpoints.d.ts.map +1 -1
  28. package/dist/commonjs/common/lib/theming/breakpoints.js +192 -10
  29. package/dist/commonjs/common/lib/theming/types.d.ts +191 -1
  30. package/dist/commonjs/common/lib/theming/types.d.ts.map +1 -1
  31. package/dist/commonjs/common/lib/utils/components.d.ts +1 -1
  32. package/dist/commonjs/pagination/lib/Pagination/PageList.d.ts +1 -1
  33. package/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts +5 -5
  34. package/dist/commonjs/pagination/lib/Pagination/common/List.d.ts +1 -1
  35. package/dist/commonjs/pagination/lib/Pagination/common/utils/space.d.ts +28 -28
  36. package/dist/commonjs/tokens/index.d.ts +3 -20
  37. package/dist/commonjs/tokens/index.d.ts.map +1 -1
  38. package/dist/commonjs/tokens/index.js +3 -6
  39. package/dist/commonjs/tokens/lib/depth.d.ts +109 -3
  40. package/dist/commonjs/tokens/lib/depth.d.ts.map +1 -1
  41. package/dist/commonjs/tokens/lib/depth.js +40 -5
  42. package/dist/es6/action-bar/lib/ActionBar.d.ts.map +1 -1
  43. package/dist/es6/action-bar/lib/ActionBar.js +33 -22
  44. package/dist/es6/button/lib/PrimaryButton.d.ts +80 -6
  45. package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
  46. package/dist/es6/button/lib/PrimaryButton.js +81 -27
  47. package/dist/es6/button/lib/parts/ButtonContainer.d.ts +5 -3
  48. package/dist/es6/button/lib/parts/ButtonContainer.d.ts.map +1 -1
  49. package/dist/es6/button/lib/parts/ButtonContainer.js +11 -9
  50. package/dist/es6/button/lib/parts/ButtonLabel.d.ts +1 -1
  51. package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
  52. package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
  53. package/dist/es6/button/lib/parts/ButtonLabelIcon.js +28 -13
  54. package/dist/es6/button/lib/types.d.ts +8 -0
  55. package/dist/es6/button/lib/types.d.ts.map +1 -1
  56. package/dist/es6/common/lib/styles/accessibleHide.d.ts +2 -2
  57. package/dist/es6/common/lib/styles/accessibleHide.d.ts.map +1 -1
  58. package/dist/es6/common/lib/theming/breakpoints.d.ts +287 -6
  59. package/dist/es6/common/lib/theming/breakpoints.d.ts.map +1 -1
  60. package/dist/es6/common/lib/theming/breakpoints.js +192 -10
  61. package/dist/es6/common/lib/theming/types.d.ts +191 -1
  62. package/dist/es6/common/lib/theming/types.d.ts.map +1 -1
  63. package/dist/es6/pagination/lib/Pagination/PageList.d.ts +1 -1
  64. package/dist/es6/pagination/lib/Pagination/Pagination.d.ts +5 -5
  65. package/dist/es6/pagination/lib/Pagination/common/List.d.ts +1 -1
  66. package/dist/es6/pagination/lib/Pagination/common/utils/space.d.ts +28 -28
  67. package/dist/es6/tokens/index.d.ts +3 -20
  68. package/dist/es6/tokens/index.d.ts.map +1 -1
  69. package/dist/es6/tokens/index.js +1 -1
  70. package/dist/es6/tokens/lib/depth.d.ts +109 -3
  71. package/dist/es6/tokens/lib/depth.d.ts.map +1 -1
  72. package/dist/es6/tokens/lib/depth.js +40 -2
  73. package/package.json +5 -6
  74. package/tokens/README.md +5 -12
  75. package/tokens/index.ts +2 -2
  76. package/tokens/lib/depth.ts +125 -3
  77. package/ts3.5/dist/commonjs/button/lib/PrimaryButton.d.ts +80 -6
  78. package/ts3.5/dist/commonjs/button/lib/parts/ButtonContainer.d.ts +5 -3
  79. package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabel.d.ts +1 -1
  80. package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
  81. package/ts3.5/dist/commonjs/button/lib/types.d.ts +8 -0
  82. package/ts3.5/dist/commonjs/common/lib/styles/accessibleHide.d.ts +2 -2
  83. package/ts3.5/dist/commonjs/common/lib/theming/breakpoints.d.ts +287 -6
  84. package/ts3.5/dist/commonjs/common/lib/theming/types.d.ts +191 -1
  85. package/ts3.5/dist/commonjs/common/lib/utils/components.d.ts +1 -1
  86. package/ts3.5/dist/commonjs/pagination/lib/Pagination/PageList.d.ts +1 -1
  87. package/ts3.5/dist/commonjs/pagination/lib/Pagination/Pagination.d.ts +5 -5
  88. package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/List.d.ts +1 -1
  89. package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/utils/space.d.ts +28 -28
  90. package/ts3.5/dist/commonjs/tokens/index.d.ts +3 -20
  91. package/ts3.5/dist/commonjs/tokens/lib/depth.d.ts +109 -3
  92. package/ts3.5/dist/es6/button/lib/PrimaryButton.d.ts +80 -6
  93. package/ts3.5/dist/es6/button/lib/parts/ButtonContainer.d.ts +5 -3
  94. package/ts3.5/dist/es6/button/lib/parts/ButtonLabel.d.ts +1 -1
  95. package/ts3.5/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
  96. package/ts3.5/dist/es6/button/lib/types.d.ts +8 -0
  97. package/ts3.5/dist/es6/common/lib/styles/accessibleHide.d.ts +2 -2
  98. package/ts3.5/dist/es6/common/lib/theming/breakpoints.d.ts +287 -6
  99. package/ts3.5/dist/es6/common/lib/theming/types.d.ts +191 -1
  100. package/ts3.5/dist/es6/pagination/lib/Pagination/PageList.d.ts +1 -1
  101. package/ts3.5/dist/es6/pagination/lib/Pagination/Pagination.d.ts +5 -5
  102. package/ts3.5/dist/es6/pagination/lib/Pagination/common/List.d.ts +1 -1
  103. package/ts3.5/dist/es6/pagination/lib/Pagination/common/utils/space.d.ts +28 -28
  104. package/ts3.5/dist/es6/tokens/index.d.ts +3 -20
  105. package/ts3.5/dist/es6/tokens/lib/depth.d.ts +109 -3
@@ -1,2 +1,40 @@
1
- import depth from '@workday/canvas-depth-web';
2
- export default depth;
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.22+d9de9f09",
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-depth-web": "^0.16.4",
60
- "@workday/canvas-kit-labs-react": "^6.0.0-alpha.0-next.22+d9de9f09",
61
- "@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.22+d9de9f09",
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": "d9de9f09b1f4619b99ebacbca9c1d7e440350cbf"
77
+ "gitHead": "c4856dee60238eceb0481cb522466dc4bee29506"
79
78
  }
package/tokens/README.md CHANGED
@@ -174,23 +174,16 @@ const buttonSyles = {
174
174
 
175
175
  ## Depth
176
176
 
177
- Five levels of depth are available. They are directly exported from `@workday/canvas-depth-web`.
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
- depth.inset;
193
- depth['2'];
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, {CanvasDepth, CanvasDepthValue} from './lib/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
- CanvasDepthValue,
67
+ CanvasDepthValues,
68
68
  CSSProperties,
69
69
  };
70
70
  export default canvas;
@@ -1,5 +1,127 @@
1
- import depth, {CanvasDepth, CanvasDepthValue} from '@workday/canvas-depth-web';
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
- export {CanvasDepth, CanvasDepthValue};
85
+ type ValueOf<T> = T[keyof T];
86
+ export type CanvasDepthValues = ValueOf<CanvasDepth>;
4
87
 
5
- export default depth;
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 { ButtonColors } from './types';
4
+ import { ButtonSizes, IconPositions } from './types';
5
5
  export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
6
6
  /**
7
- * The size of the Button.
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?: 'small' | 'medium' | 'large';
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
- * The position of the TertiaryButton icon.
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?: 'left' | 'right';
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: ({ canvas: { palette: { primary: themePrimary }, }, }: EmotionCanvasTheme) => ButtonColors;
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
- * The size of the Button.
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?: 'small' | 'medium' | 'large';
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" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "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" | "children" | "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" | "css">, import("../../../common").EmotionCanvasTheme>;
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
- * The size of the Button.
5
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
6
+ *
5
7
  * @default 'medium'
6
8
  */
7
- size?: 'small' | 'medium' | 'large';
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
- * The position of the TertiaryButton icon.
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?: 'left' | 'right';
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 { CSSObject } from '@emotion/core';
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: CSSObject;
6
+ export declare const accessibleHide: CSSProperties;
7
7
  //# sourceMappingURL=accessibleHide.d.ts.map