@workday/canvas-kit-react 6.0.0-alpha.0-next.27 → 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 (35) hide show
  1. package/button/lib/PrimaryButton.tsx +110 -32
  2. package/button/lib/parts/ButtonContainer.tsx +16 -5
  3. package/button/lib/parts/ButtonLabelIcon.tsx +34 -14
  4. package/button/lib/types.ts +10 -0
  5. package/dist/commonjs/button/lib/PrimaryButton.d.ts +80 -6
  6. package/dist/commonjs/button/lib/PrimaryButton.d.ts.map +1 -1
  7. package/dist/commonjs/button/lib/PrimaryButton.js +80 -26
  8. package/dist/commonjs/button/lib/parts/ButtonContainer.d.ts +5 -3
  9. package/dist/commonjs/button/lib/parts/ButtonContainer.d.ts.map +1 -1
  10. package/dist/commonjs/button/lib/parts/ButtonContainer.js +11 -9
  11. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
  12. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
  13. package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js +28 -13
  14. package/dist/commonjs/button/lib/types.d.ts +8 -0
  15. package/dist/commonjs/button/lib/types.d.ts.map +1 -1
  16. package/dist/es6/button/lib/PrimaryButton.d.ts +80 -6
  17. package/dist/es6/button/lib/PrimaryButton.d.ts.map +1 -1
  18. package/dist/es6/button/lib/PrimaryButton.js +81 -27
  19. package/dist/es6/button/lib/parts/ButtonContainer.d.ts +5 -3
  20. package/dist/es6/button/lib/parts/ButtonContainer.d.ts.map +1 -1
  21. package/dist/es6/button/lib/parts/ButtonContainer.js +11 -9
  22. package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
  23. package/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts.map +1 -1
  24. package/dist/es6/button/lib/parts/ButtonLabelIcon.js +28 -13
  25. package/dist/es6/button/lib/types.d.ts +8 -0
  26. package/dist/es6/button/lib/types.d.ts.map +1 -1
  27. package/package.json +5 -5
  28. package/ts3.5/dist/commonjs/button/lib/PrimaryButton.d.ts +80 -6
  29. package/ts3.5/dist/commonjs/button/lib/parts/ButtonContainer.d.ts +5 -3
  30. package/ts3.5/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
  31. package/ts3.5/dist/commonjs/button/lib/types.d.ts +8 -0
  32. package/ts3.5/dist/es6/button/lib/PrimaryButton.d.ts +80 -6
  33. package/ts3.5/dist/es6/button/lib/parts/ButtonContainer.d.ts +5 -3
  34. package/ts3.5/dist/es6/button/lib/parts/ButtonLabelIcon.d.ts +7 -4
  35. package/ts3.5/dist/es6/button/lib/types.d.ts +8 -0
@@ -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,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,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,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