@workday/canvas-kit-react 6.0.0-alpha.0-next.29 → 6.0.0-alpha.0-next.30

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 (10) hide show
  1. package/button/lib/SecondaryButton.tsx +31 -16
  2. package/dist/commonjs/button/lib/SecondaryButton.d.ts +8 -5
  3. package/dist/commonjs/button/lib/SecondaryButton.d.ts.map +1 -1
  4. package/dist/commonjs/button/lib/SecondaryButton.js +22 -12
  5. package/dist/es6/button/lib/SecondaryButton.d.ts +8 -5
  6. package/dist/es6/button/lib/SecondaryButton.d.ts.map +1 -1
  7. package/dist/es6/button/lib/SecondaryButton.js +22 -12
  8. package/package.json +5 -5
  9. package/ts3.5/dist/commonjs/button/lib/SecondaryButton.d.ts +8 -5
  10. package/ts3.5/dist/es6/button/lib/SecondaryButton.d.ts +8 -5
package/button/lib/SecondaryButton.tsx CHANGED
@@ -10,7 +10,7 @@ import {
10
10
  focusRing,
11
11
  } from '@workday/canvas-kit-react/common';
12
12
  import {CanvasSystemIcon} from '@workday/design-assets-types';
13
- import {ButtonColors} from './types';
13
+ import {ButtonColors, ButtonSizes, IconPositions} from './types';
14
14
  import {ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon} from './parts';
15
15
 
16
16
  export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
@@ -20,10 +20,12 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
20
20
  */
21
21
  variant?: 'inverse' | undefined;
22
22
  /**
23
- * The size of the Button.
23
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
24
+ * If no size is provided, it will default to `medium`.
25
+ *
24
26
  * @default 'medium'
25
27
  */
26
- size?: 'small' | 'medium' | 'large';
28
+ size?: ButtonSizes;
27
29
  /**
28
30
  * The data label of the Button.
29
31
  * Note: not displayed at `small` size
@@ -35,10 +37,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
35
37
  */
36
38
  icon?: CanvasSystemIcon;
37
39
  /**
38
- * The position of the TertiaryButton icon.
40
+ * Button icon positions can either be `left` or `right`.
41
+ * If no value is provided, it defaults to `left`.
39
42
  * @default 'left'
40
43
  */
41
- iconPosition?: 'left' | 'right';
44
+ iconPosition?: IconPositions;
42
45
  /**
43
46
  * If set to `true`, transform the icon's x-axis to mirror the graphic
44
47
  * @default false
@@ -47,6 +50,16 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
47
50
  children?: React.ReactNode;
48
51
  }
49
52
 
53
+ // Button sizes where data labels are enabled
54
+ const dataLabelSizes = ['medium', 'large'];
55
+ // All disabled buttons are set to 40% opacity.
56
+ // This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
57
+ const disabledButtonOpacity = {
58
+ '&:disabled, &:disabled:active': {
59
+ opacity: 0.4,
60
+ },
61
+ };
62
+
50
63
  export const SecondaryButton = createComponent('button')({
51
64
  displayName: 'SecondaryButton',
52
65
  Component: (
@@ -71,9 +84,10 @@ export const SecondaryButton = createComponent('button')({
71
84
  as={Element}
72
85
  colors={getSecondaryButtonColors(variant, theme)}
73
86
  size={size}
87
+ extraStyles={disabledButtonOpacity}
74
88
  {...elemProps}
75
89
  >
76
- {icon && size !== 'small' && iconPosition === 'left' && (
90
+ {icon && iconPosition === 'left' && (
77
91
  <ButtonLabelIcon
78
92
  size={size}
79
93
  iconPosition={iconPosition}
@@ -82,8 +96,8 @@ export const SecondaryButton = createComponent('button')({
82
96
  />
83
97
  )}
84
98
  <ButtonLabel>{children}</ButtonLabel>
85
- {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
86
- {icon && size !== 'small' && iconPosition === 'right' && (
99
+ {dataLabel && dataLabelSizes.includes(size) && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
100
+ {icon && iconPosition === 'right' && (
87
101
  <ButtonLabelIcon
88
102
  size={size}
89
103
  iconPosition={iconPosition}
@@ -136,12 +150,13 @@ export const getSecondaryButtonColors = (
136
150
  label: colors.blackPepper400,
137
151
  labelData: colors.blackPepper400,
138
152
  },
153
+ // Identical to 'default' styles. ButtonContainer will set opacity to 40%
139
154
  disabled: {
140
155
  background: 'transparent',
141
- border: 'rgba(30, 30, 30, 0.4)', // Black Pepper 400 @ 40%
142
- icon: 'rgba(30, 30, 30, 0.4)', // Black Pepper 400 @ 40%
143
- label: 'rgba(30, 30, 30, 0.4)', // Black Pepper 400 @ 40%
144
- labelData: 'rgba(30, 30, 30, 0.4)', // Black Pepper 400 @ 40%
156
+ border: colors.blackPepper400,
157
+ icon: colors.blackPepper400,
158
+ label: colors.blackPepper400,
159
+ labelData: colors.blackPepper400,
145
160
  },
146
161
  };
147
162
  case 'inverse':
@@ -180,12 +195,12 @@ export const getSecondaryButtonColors = (
180
195
  theme
181
196
  ),
182
197
  },
198
+ // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
183
199
  disabled: {
184
200
  background: 'transparent',
185
- border: 'rgba(255, 255, 255, 0.4)', // French Vanilla 400 @ 40%
186
- icon: 'rgba(255, 255, 255, 0.4)', // French Vanilla 400 @ 40%
187
- label: 'rgba(255, 255, 255, 0.4)', // French Vanilla 400 @ 40%
188
- labelData: 'rgba(255, 255, 255, 0.4)', // French Vanilla 400 @ 40%
201
+ border: colors.frenchVanilla100,
202
+ icon: colors.frenchVanilla100,
203
+ label: colors.frenchVanilla100,
189
204
  },
190
205
  };
191
206
  }
package/dist/commonjs/button/lib/SecondaryButton.d.ts CHANGED
@@ -1,7 +1,7 @@
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 { ButtonColors, ButtonSizes, IconPositions } from './types';
5
5
  export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
6
6
  /**
7
7
  * The variant of the SecondaryButton.
@@ -9,10 +9,12 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
9
9
  */
10
10
  variant?: 'inverse' | undefined;
11
11
  /**
12
- * The size of the Button.
12
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
13
+ * If no size is provided, it will default to `medium`.
14
+ *
13
15
  * @default 'medium'
14
16
  */
15
- size?: 'small' | 'medium' | 'large';
17
+ size?: ButtonSizes;
16
18
  /**
17
19
  * The data label of the Button.
18
20
  * Note: not displayed at `small` size
@@ -24,10 +26,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
24
26
  */
25
27
  icon?: CanvasSystemIcon;
26
28
  /**
27
- * 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`.
28
31
  * @default 'left'
29
32
  */
30
- iconPosition?: 'left' | 'right';
33
+ iconPosition?: IconPositions;
31
34
  /**
32
35
  * If set to `true`, transform the icon's x-axis to mirror the graphic
33
36
  * @default false
package/dist/commonjs/button/lib/SecondaryButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA8C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA8FpC,CAAC"}
1
+ {"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA+FpC,CAAC"}
package/dist/commonjs/button/lib/SecondaryButton.js CHANGED
@@ -33,6 +33,15 @@ var React = __importStar(require("react"));
33
33
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
34
34
  var common_1 = require("@workday/canvas-kit-react/common");
35
35
  var parts_1 = require("./parts");
36
+ // Button sizes where data labels are enabled
37
+ var dataLabelSizes = ['medium', 'large'];
38
+ // All disabled buttons are set to 40% opacity.
39
+ // This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
40
+ var disabledButtonOpacity = {
41
+ '&:disabled, &:disabled:active': {
42
+ opacity: 0.4,
43
+ },
44
+ };
36
45
  exports.SecondaryButton = common_1.createComponent('button')({
37
46
  displayName: 'SecondaryButton',
38
47
  Component: function (_a, ref, Element) {
@@ -43,11 +52,11 @@ exports.SecondaryButton = common_1.createComponent('button')({
43
52
  // TODO: Fix useTheme and make it a real hook
44
53
  // eslint-disable-next-line react-hooks/rules-of-hooks
45
54
  theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
46
- return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getSecondaryButtonColors(variant, theme), size: size }, elemProps),
47
- icon && size !== 'small' && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
55
+ return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getSecondaryButtonColors(variant, theme), size: size, extraStyles: disabledButtonOpacity }, elemProps),
56
+ icon && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
48
57
  React.createElement(parts_1.ButtonLabel, null, children),
49
- dataLabel && size !== 'small' && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
50
- icon && size !== 'small' && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
58
+ dataLabel && dataLabelSizes.includes(size) && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
59
+ icon && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
51
60
  },
52
61
  });
53
62
  exports.getSecondaryButtonColors = function (variant, theme) {
@@ -83,12 +92,13 @@ exports.getSecondaryButtonColors = function (variant, theme) {
83
92
  label: tokens_1.colors.blackPepper400,
84
93
  labelData: tokens_1.colors.blackPepper400,
85
94
  },
95
+ // Identical to 'default' styles. ButtonContainer will set opacity to 40%
86
96
  disabled: {
87
97
  background: 'transparent',
88
- border: 'rgba(30, 30, 30, 0.4)',
89
- icon: 'rgba(30, 30, 30, 0.4)',
90
- label: 'rgba(30, 30, 30, 0.4)',
91
- labelData: 'rgba(30, 30, 30, 0.4)',
98
+ border: tokens_1.colors.blackPepper400,
99
+ icon: tokens_1.colors.blackPepper400,
100
+ label: tokens_1.colors.blackPepper400,
101
+ labelData: tokens_1.colors.blackPepper400,
92
102
  },
93
103
  };
94
104
  case 'inverse':
@@ -124,12 +134,12 @@ exports.getSecondaryButtonColors = function (variant, theme) {
124
134
  outerColor: tokens_1.colors.frenchVanilla100,
125
135
  }, theme),
126
136
  },
137
+ // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
127
138
  disabled: {
128
139
  background: 'transparent',
129
- border: 'rgba(255, 255, 255, 0.4)',
130
- icon: 'rgba(255, 255, 255, 0.4)',
131
- label: 'rgba(255, 255, 255, 0.4)',
132
- labelData: 'rgba(255, 255, 255, 0.4)',
140
+ border: tokens_1.colors.frenchVanilla100,
141
+ icon: tokens_1.colors.frenchVanilla100,
142
+ label: tokens_1.colors.frenchVanilla100,
133
143
  },
134
144
  };
135
145
  }
package/dist/es6/button/lib/SecondaryButton.d.ts CHANGED
@@ -1,7 +1,7 @@
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 { ButtonColors, ButtonSizes, IconPositions } from './types';
5
5
  export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
6
6
  /**
7
7
  * The variant of the SecondaryButton.
@@ -9,10 +9,12 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
9
9
  */
10
10
  variant?: 'inverse' | undefined;
11
11
  /**
12
- * The size of the Button.
12
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
13
+ * If no size is provided, it will default to `medium`.
14
+ *
13
15
  * @default 'medium'
14
16
  */
15
- size?: 'small' | 'medium' | 'large';
17
+ size?: ButtonSizes;
16
18
  /**
17
19
  * The data label of the Button.
18
20
  * Note: not displayed at `small` size
@@ -24,10 +26,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
24
26
  */
25
27
  icon?: CanvasSystemIcon;
26
28
  /**
27
- * 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`.
28
31
  * @default 'left'
29
32
  */
30
- iconPosition?: 'left' | 'right';
33
+ iconPosition?: IconPositions;
31
34
  /**
32
35
  * If set to `true`, transform the icon's x-axis to mirror the graphic
33
36
  * @default false
package/dist/es6/button/lib/SecondaryButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA8C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA8FpC,CAAC"}
1
+ {"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGjE,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA+FpC,CAAC"}
package/dist/es6/button/lib/SecondaryButton.js CHANGED
@@ -24,6 +24,15 @@ import * as React from 'react';
24
24
  import { colors } from '@workday/canvas-kit-react/tokens';
25
25
  import { useTheme, createComponent, focusRing, } from '@workday/canvas-kit-react/common';
26
26
  import { ButtonContainer, ButtonLabel, ButtonLabelData, ButtonLabelIcon } from './parts';
27
+ // Button sizes where data labels are enabled
28
+ var dataLabelSizes = ['medium', 'large'];
29
+ // All disabled buttons are set to 40% opacity.
30
+ // This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
31
+ var disabledButtonOpacity = {
32
+ '&:disabled, &:disabled:active': {
33
+ opacity: 0.4,
34
+ },
35
+ };
27
36
  export var SecondaryButton = createComponent('button')({
28
37
  displayName: 'SecondaryButton',
29
38
  Component: function (_a, ref, Element) {
@@ -34,11 +43,11 @@ export var SecondaryButton = createComponent('button')({
34
43
  // TODO: Fix useTheme and make it a real hook
35
44
  // eslint-disable-next-line react-hooks/rules-of-hooks
36
45
  theme = _b === void 0 ? useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
37
- return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getSecondaryButtonColors(variant, theme), size: size }, elemProps),
38
- icon && size !== 'small' && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
46
+ return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getSecondaryButtonColors(variant, theme), size: size, extraStyles: disabledButtonOpacity }, elemProps),
47
+ icon && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
39
48
  React.createElement(ButtonLabel, null, children),
40
- dataLabel && size !== 'small' && React.createElement(ButtonLabelData, null, dataLabel),
41
- icon && size !== 'small' && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
49
+ dataLabel && dataLabelSizes.includes(size) && React.createElement(ButtonLabelData, null, dataLabel),
50
+ icon && iconPosition === 'right' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
42
51
  },
43
52
  });
44
53
  export var getSecondaryButtonColors = function (variant, theme) {
@@ -74,12 +83,13 @@ export var getSecondaryButtonColors = function (variant, theme) {
74
83
  label: colors.blackPepper400,
75
84
  labelData: colors.blackPepper400,
76
85
  },
86
+ // Identical to 'default' styles. ButtonContainer will set opacity to 40%
77
87
  disabled: {
78
88
  background: 'transparent',
79
- border: 'rgba(30, 30, 30, 0.4)',
80
- icon: 'rgba(30, 30, 30, 0.4)',
81
- label: 'rgba(30, 30, 30, 0.4)',
82
- labelData: 'rgba(30, 30, 30, 0.4)',
89
+ border: colors.blackPepper400,
90
+ icon: colors.blackPepper400,
91
+ label: colors.blackPepper400,
92
+ labelData: colors.blackPepper400,
83
93
  },
84
94
  };
85
95
  case 'inverse':
@@ -115,12 +125,12 @@ export var getSecondaryButtonColors = function (variant, theme) {
115
125
  outerColor: colors.frenchVanilla100,
116
126
  }, theme),
117
127
  },
128
+ // Identical to inverse 'default' styles. ButtonContainer will set opacity to 40%
118
129
  disabled: {
119
130
  background: 'transparent',
120
- border: 'rgba(255, 255, 255, 0.4)',
121
- icon: 'rgba(255, 255, 255, 0.4)',
122
- label: 'rgba(255, 255, 255, 0.4)',
123
- labelData: 'rgba(255, 255, 255, 0.4)',
131
+ border: colors.frenchVanilla100,
132
+ icon: colors.frenchVanilla100,
133
+ label: colors.frenchVanilla100,
124
134
  },
125
135
  };
126
136
  }
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.29+b7aadf9e",
3
+ "version": "6.0.0-alpha.0-next.30+38d21d80",
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,9 +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-kit-labs-react": "^6.0.0-alpha.0-next.29+b7aadf9e",
60
- "@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.29+b7aadf9e",
61
- "@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.29+b7aadf9e",
59
+ "@workday/canvas-kit-labs-react": "^6.0.0-alpha.0-next.30+38d21d80",
60
+ "@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.30+38d21d80",
61
+ "@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.30+38d21d80",
62
62
  "@workday/canvas-system-icons-web": "1.0.41",
63
63
  "@workday/design-assets-types": "^0.2.4",
64
64
  "chroma-js": "^2.1.0",
@@ -74,5 +74,5 @@
74
74
  "@workday/canvas-accent-icons-web": "^1.0.0",
75
75
  "@workday/canvas-applet-icons-web": "^0.17.50"
76
76
  },
77
- "gitHead": "b7aadf9e2c88c65ecb7a8e6bb07e47b67ae7510d"
77
+ "gitHead": "38d21d80658997a8a7ebbab29230548fc13ec854"
78
78
  }
package/ts3.5/dist/commonjs/button/lib/SecondaryButton.d.ts CHANGED
@@ -1,7 +1,7 @@
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 { ButtonColors, ButtonSizes, IconPositions } from './types';
5
5
  export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
6
6
  /**
7
7
  * The variant of the SecondaryButton.
@@ -9,10 +9,12 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
9
9
  */
10
10
  variant?: 'inverse' | undefined;
11
11
  /**
12
- * The size of the Button.
12
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
13
+ * If no size is provided, it will default to `medium`.
14
+ *
13
15
  * @default 'medium'
14
16
  */
15
- size?: 'small' | 'medium' | 'large';
17
+ size?: ButtonSizes;
16
18
  /**
17
19
  * The data label of the Button.
18
20
  * Note: not displayed at `small` size
@@ -24,10 +26,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
24
26
  */
25
27
  icon?: CanvasSystemIcon;
26
28
  /**
27
- * 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`.
28
31
  * @default 'left'
29
32
  */
30
- iconPosition?: 'left' | 'right';
33
+ iconPosition?: IconPositions;
31
34
  /**
32
35
  * If set to `true`, transform the icon's x-axis to mirror the graphic
33
36
  * @default false
package/ts3.5/dist/es6/button/lib/SecondaryButton.d.ts CHANGED
@@ -1,7 +1,7 @@
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 { ButtonColors, ButtonSizes, IconPositions } from './types';
5
5
  export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
6
6
  /**
7
7
  * The variant of the SecondaryButton.
@@ -9,10 +9,12 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
9
9
  */
10
10
  variant?: 'inverse' | undefined;
11
11
  /**
12
- * The size of the Button.
12
+ * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
13
+ * If no size is provided, it will default to `medium`.
14
+ *
13
15
  * @default 'medium'
14
16
  */
15
- size?: 'small' | 'medium' | 'large';
17
+ size?: ButtonSizes;
16
18
  /**
17
19
  * The data label of the Button.
18
20
  * Note: not displayed at `small` size
@@ -24,10 +26,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
24
26
  */
25
27
  icon?: CanvasSystemIcon;
26
28
  /**
27
- * 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`.
28
31
  * @default 'left'
29
32
  */
30
- iconPosition?: 'left' | 'right';
33
+ iconPosition?: IconPositions;
31
34
  /**
32
35
  * If set to `true`, transform the icon's x-axis to mirror the graphic
33
36
  * @default false