@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.
- 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/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/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/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/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/package.json +5 -5
- 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/ButtonLabelIcon.d.ts +7 -4
- package/ts3.5/dist/commonjs/button/lib/types.d.ts +8 -0
- 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/ButtonLabelIcon.d.ts +7 -4
- 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 {
|
|
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,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,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,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
|