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

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 (22) hide show
  1. package/button/lib/TertiaryButton.tsx +45 -36
  2. package/button/lib/parts/ButtonContainer.tsx +2 -0
  3. package/button/lib/types.ts +2 -1
  4. package/dist/commonjs/button/lib/TertiaryButton.d.ts +8 -4
  5. package/dist/commonjs/button/lib/TertiaryButton.d.ts.map +1 -1
  6. package/dist/commonjs/button/lib/TertiaryButton.js +24 -20
  7. package/dist/commonjs/button/lib/parts/ButtonContainer.d.ts.map +1 -1
  8. package/dist/commonjs/button/lib/parts/ButtonContainer.js +2 -6
  9. package/dist/commonjs/button/lib/types.d.ts +1 -0
  10. package/dist/commonjs/button/lib/types.d.ts.map +1 -1
  11. package/dist/es6/button/lib/TertiaryButton.d.ts +8 -4
  12. package/dist/es6/button/lib/TertiaryButton.d.ts.map +1 -1
  13. package/dist/es6/button/lib/TertiaryButton.js +25 -21
  14. package/dist/es6/button/lib/parts/ButtonContainer.d.ts.map +1 -1
  15. package/dist/es6/button/lib/parts/ButtonContainer.js +2 -6
  16. package/dist/es6/button/lib/types.d.ts +1 -0
  17. package/dist/es6/button/lib/types.d.ts.map +1 -1
  18. package/package.json +5 -5
  19. package/ts3.5/dist/commonjs/button/lib/TertiaryButton.d.ts +8 -4
  20. package/ts3.5/dist/commonjs/button/lib/types.d.ts +1 -0
  21. package/ts3.5/dist/es6/button/lib/TertiaryButton.d.ts +8 -4
  22. package/ts3.5/dist/es6/button/lib/types.d.ts +1 -0
package/button/lib/TertiaryButton.tsx CHANGED
@@ -7,9 +7,9 @@ import {
7
7
  EmotionCanvasTheme,
8
8
  createComponent,
9
9
  } from '@workday/canvas-kit-react/common';
10
- import {colors, space, type, borderRadius} from '@workday/canvas-kit-react/tokens';
10
+ import {colors, space, borderRadius} from '@workday/canvas-kit-react/tokens';
11
11
  import {CanvasSystemIcon} from '@workday/design-assets-types';
12
- import {ButtonColors} from './types';
12
+ import {ButtonColors, TertiaryButtonSizes, IconPositions} from './types';
13
13
  import {ButtonContainer, ButtonLabelIcon, ButtonLabel} from './parts';
14
14
 
15
15
  export interface TertiaryButtonProps extends Themeable {
@@ -19,15 +19,18 @@ export interface TertiaryButtonProps extends Themeable {
19
19
  */
20
20
  variant?: 'inverse' | undefined;
21
21
  /**
22
- * The size of the TertiaryButton.
22
+ * There are three button sizes: `extraSmall`, `small`, and `medium`.
23
+ * If no size is provided, it will default to `medium`.
24
+ *
23
25
  * @default 'medium'
24
26
  */
25
- size?: 'small' | 'medium';
27
+ size?: TertiaryButtonSizes;
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
  * The icon of the TertiaryButton.
33
36
  */
@@ -87,8 +90,8 @@ const getTertiaryButtonColors = (
87
90
  },
88
91
  disabled: {
89
92
  background: 'transparent',
90
- icon: 'rgba(255, 255, 255, 0.5)',
91
- label: 'rgba(255, 255, 255, 0.5)',
93
+ icon: colors.frenchVanilla100,
94
+ label: colors.frenchVanilla100,
92
95
  },
93
96
  };
94
97
  } else {
@@ -113,26 +116,34 @@ const getTertiaryButtonColors = (
113
116
  focusRing: focusRing({}, theme),
114
117
  },
115
118
  disabled: {
116
- background: 'transparent',
117
- icon: themePrimary.light,
118
- label: themePrimary.light,
119
+ icon: themePrimary.main,
120
+ label: themePrimary.main,
119
121
  },
120
122
  };
121
123
  }
122
124
  };
123
125
 
124
- const containerStyles = {
125
- borderRadius: borderRadius.m,
126
- border: '0',
127
- padding: `0 ${space.xxs}`,
128
- minWidth: 'auto',
129
- '.wdc-text-button-label': {
130
- borderBottom: '2px solid transparent',
131
- paddingTop: '2px',
132
- transition: 'border-color 0.3s',
133
- },
134
- '&:hover:not([disabled]) .wdc-text-button-label': {
135
- borderBottomColor: 'currentColor',
126
+ const getPaddingStyles = (
127
+ icon: CanvasSystemIcon | undefined,
128
+ iconPosition: 'left' | 'right'
129
+ ): string => {
130
+ // if there is an icon on the left, add 4px extra padding to the right for visual balance
131
+ if (icon && iconPosition === 'left') {
132
+ return `0 ${space.xs} 0 ${space.xxs}`;
133
+ }
134
+ // if there is an icon on the right, add 4px extra padding to the left for visual balance
135
+ if (icon && iconPosition === 'right') {
136
+ return `0 ${space.xxs} 0 ${space.xs}`;
137
+ }
138
+ // if there is no icon, return the default padding
139
+ return `0 ${space.xxs}`;
140
+ };
141
+
142
+ // All disabled buttons are set to 40% opacity.
143
+ // This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
144
+ const disabledButtonOpacity = {
145
+ '&:disabled, &:disabled:active': {
146
+ opacity: 0.4,
136
147
  },
137
148
  };
138
149
 
@@ -155,19 +166,17 @@ export const TertiaryButton = createComponent('button')({
155
166
  ref,
156
167
  Element
157
168
  ) => {
158
- // Note: We don't use ButtonLabel because the label styles differ from other button types
159
- const allContainerStyles: CSSObject = allCaps
160
- ? {
161
- ...containerStyles,
162
- textTransform: 'uppercase',
163
- fontWeight: type.properties.fontWeights.bold,
164
- fontSize: size === 'medium' ? type.properties.fontSizes[16] : undefined,
165
- letterSpacing: '.5px',
166
- }
167
- : {
168
- ...containerStyles,
169
- fontSize: size === 'medium' ? type.properties.fontSizes[14] : undefined,
170
- };
169
+ const allContainerStyles: CSSObject = {
170
+ borderRadius: borderRadius.m,
171
+ border: '0',
172
+ padding: getPaddingStyles(icon, iconPosition),
173
+ minWidth: 'auto',
174
+ textTransform: allCaps ? 'uppercase' : undefined,
175
+ '.wdc-text-button-label': {
176
+ textDecoration: 'underline',
177
+ },
178
+ ...disabledButtonOpacity,
179
+ };
171
180
 
172
181
  return (
173
182
  <ButtonContainer
package/button/lib/parts/ButtonContainer.tsx CHANGED
@@ -142,6 +142,8 @@ export const ButtonContainer = styled('button', {
142
142
  };
143
143
  case 'extraSmall':
144
144
  return {
145
+ ...type.levels.subtext.medium,
146
+ fontWeight: type.properties.fontWeights.bold,
145
147
  height: space.m,
146
148
  padding: `0 ${space.xs}`,
147
149
  '& > * ': {
package/button/lib/types.ts CHANGED
@@ -28,5 +28,6 @@ export interface ButtonColors {
28
28
  * @default 'medium'
29
29
  */
30
30
  export type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
31
-
31
+ // TODO: Remove TertiaryButtonSizes in favor of button sizes when we add Tertiary large
32
+ export type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
32
33
  export type IconPositions = 'left' | 'right';
package/dist/commonjs/button/lib/TertiaryButton.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { Themeable } from '@workday/canvas-kit-react/common';
3
3
  import { CanvasSystemIcon } from '@workday/design-assets-types';
4
+ import { TertiaryButtonSizes, IconPositions } from './types';
4
5
  export interface TertiaryButtonProps extends Themeable {
5
6
  /**
6
7
  * The variant of the TertiaryButton.
@@ -8,15 +9,18 @@ export interface TertiaryButtonProps extends Themeable {
8
9
  */
9
10
  variant?: 'inverse' | undefined;
10
11
  /**
11
- * The size of the TertiaryButton.
12
+ * There are three button sizes: `extraSmall`, `small`, and `medium`.
13
+ * If no size is provided, it will default to `medium`.
14
+ *
12
15
  * @default 'medium'
13
16
  */
14
- size?: 'small' | 'medium';
17
+ size?: TertiaryButtonSizes;
15
18
  /**
16
- * The position of the TertiaryButton icon.
19
+ * Button icon positions can either be `left` or `right`.
20
+ * If no value is provided, it defaults to `left`.
17
21
  * @default 'left'
18
22
  */
19
- iconPosition?: 'left' | 'right';
23
+ iconPosition?: IconPositions;
20
24
  /**
21
25
  * The icon of the TertiaryButton.
22
26
  */
package/dist/commonjs/button/lib/TertiaryButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8FD,eAAO,MAAM,cAAc,wEA8DzB,CAAC"}
1
+ {"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,mBAAmB,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGzE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAsGD,eAAO,MAAM,cAAc,wEA4DzB,CAAC"}
package/dist/commonjs/button/lib/TertiaryButton.js CHANGED
@@ -65,8 +65,8 @@ var getTertiaryButtonColors = function (variant, theme) {
65
65
  },
66
66
  disabled: {
67
67
  background: 'transparent',
68
- icon: 'rgba(255, 255, 255, 0.5)',
69
- label: 'rgba(255, 255, 255, 0.5)',
68
+ icon: tokens_1.colors.frenchVanilla100,
69
+ label: tokens_1.colors.frenchVanilla100,
70
70
  },
71
71
  };
72
72
  }
@@ -92,25 +92,29 @@ var getTertiaryButtonColors = function (variant, theme) {
92
92
  focusRing: common_1.focusRing({}, theme),
93
93
  },
94
94
  disabled: {
95
- background: 'transparent',
96
- icon: themePrimary.light,
97
- label: themePrimary.light,
95
+ icon: themePrimary.main,
96
+ label: themePrimary.main,
98
97
  },
99
98
  };
100
99
  }
101
100
  };
102
- var containerStyles = {
103
- borderRadius: tokens_1.borderRadius.m,
104
- border: '0',
105
- padding: "0 " + tokens_1.space.xxs,
106
- minWidth: 'auto',
107
- '.wdc-text-button-label': {
108
- borderBottom: '2px solid transparent',
109
- paddingTop: '2px',
110
- transition: 'border-color 0.3s',
111
- },
112
- '&:hover:not([disabled]) .wdc-text-button-label': {
113
- borderBottomColor: 'currentColor',
101
+ var getPaddingStyles = function (icon, iconPosition) {
102
+ // if there is an icon on the left, add 4px extra padding to the right for visual balance
103
+ if (icon && iconPosition === 'left') {
104
+ return "0 " + tokens_1.space.xs + " 0 " + tokens_1.space.xxs;
105
+ }
106
+ // if there is an icon on the right, add 4px extra padding to the left for visual balance
107
+ if (icon && iconPosition === 'right') {
108
+ return "0 " + tokens_1.space.xxs + " 0 " + tokens_1.space.xs;
109
+ }
110
+ // if there is no icon, return the default padding
111
+ return "0 " + tokens_1.space.xxs;
112
+ };
113
+ // All disabled buttons are set to 40% opacity.
114
+ // This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
115
+ var disabledButtonOpacity = {
116
+ '&:disabled, &:disabled:active': {
117
+ opacity: 0.4,
114
118
  },
115
119
  };
116
120
  exports.TertiaryButton = common_1.createComponent('button')({
@@ -123,9 +127,9 @@ exports.TertiaryButton = common_1.createComponent('button')({
123
127
  // TODO: Fix useTheme and make it a real hook
124
128
  // eslint-disable-next-line react-hooks/rules-of-hooks
125
129
  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, children = _a.children, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, allCaps = _a.allCaps, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
126
- // Note: We don't use ButtonLabel because the label styles differ from other button types
127
- var allContainerStyles = allCaps
128
- ? __assign(__assign({}, containerStyles), { textTransform: 'uppercase', fontWeight: tokens_1.type.properties.fontWeights.bold, fontSize: size === 'medium' ? tokens_1.type.properties.fontSizes[16] : undefined, letterSpacing: '.5px' }) : __assign(__assign({}, containerStyles), { fontSize: size === 'medium' ? tokens_1.type.properties.fontSizes[14] : undefined });
130
+ var allContainerStyles = __assign({ borderRadius: tokens_1.borderRadius.m, border: '0', padding: getPaddingStyles(icon, iconPosition), minWidth: 'auto', textTransform: allCaps ? 'uppercase' : undefined, '.wdc-text-button-label': {
131
+ textDecoration: 'underline',
132
+ } }, disabledButtonOpacity);
129
133
  return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme), size: size, extraStyles: allContainerStyles }, elemProps),
130
134
  icon && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
131
135
  React.createElement(parts_1.ButtonLabel, { className: "wdc-text-button-label" }, children),
package/dist/commonjs/button/lib/parts/ButtonContainer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EACL,cAAc,EAId,kBAAkB,EAClB,UAAU,EACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAGnD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,cAAc;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AA8BD,eAAO,MAAM,eAAe,kMA8K3B,CAAC"}
1
+ {"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EACL,cAAc,EAId,kBAAkB,EAClB,UAAU,EACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAGnD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,cAAc;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AA8BD,eAAO,MAAM,eAAe,kMAgL3B,CAAC"}
package/dist/commonjs/button/lib/parts/ButtonContainer.js CHANGED
@@ -73,13 +73,9 @@ exports.ButtonContainer = common_1.styled('button', {
73
73
  },
74
74
  };
75
75
  case 'extraSmall':
76
- return {
77
- height: tokens_1.space.m,
78
- padding: "0 " + tokens_1.space.xs,
79
- '& > * ': {
76
+ return __assign(__assign({}, tokens_1.type.levels.subtext.medium), { fontWeight: tokens_1.type.properties.fontWeights.bold, height: tokens_1.space.m, padding: "0 " + tokens_1.space.xs, '& > * ': {
80
77
  margin: "0 " + tokens_1.spaceNumbers.xxxs / 2 + "px",
81
- },
82
- };
78
+ } });
83
79
  }
84
80
  }, function (_a) {
85
81
  var grow = _a.grow;
package/dist/commonjs/button/lib/types.d.ts CHANGED
@@ -26,5 +26,6 @@ export interface ButtonColors {
26
26
  * @default 'medium'
27
27
  */
28
28
  export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
29
+ export declare type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
29
30
  export declare type IconPositions = 'left' | 'right';
30
31
  //# sourceMappingURL=types.d.ts.map
package/dist/commonjs/button/lib/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,iBAAiB,GAAG;QACzB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,oBAAY,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,iBAAiB,GAAG;QACzB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,oBAAY,mBAAmB,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpE,oBAAY,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC"}
package/dist/es6/button/lib/TertiaryButton.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { Themeable } from '@workday/canvas-kit-react/common';
3
3
  import { CanvasSystemIcon } from '@workday/design-assets-types';
4
+ import { TertiaryButtonSizes, IconPositions } from './types';
4
5
  export interface TertiaryButtonProps extends Themeable {
5
6
  /**
6
7
  * The variant of the TertiaryButton.
@@ -8,15 +9,18 @@ export interface TertiaryButtonProps extends Themeable {
8
9
  */
9
10
  variant?: 'inverse' | undefined;
10
11
  /**
11
- * The size of the TertiaryButton.
12
+ * There are three button sizes: `extraSmall`, `small`, and `medium`.
13
+ * If no size is provided, it will default to `medium`.
14
+ *
12
15
  * @default 'medium'
13
16
  */
14
- size?: 'small' | 'medium';
17
+ size?: TertiaryButtonSizes;
15
18
  /**
16
- * The position of the TertiaryButton icon.
19
+ * Button icon positions can either be `left` or `right`.
20
+ * If no value is provided, it defaults to `left`.
17
21
  * @default 'left'
18
22
  */
19
- iconPosition?: 'left' | 'right';
23
+ iconPosition?: IconPositions;
20
24
  /**
21
25
  * The icon of the TertiaryButton.
22
26
  */
package/dist/es6/button/lib/TertiaryButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8FD,eAAO,MAAM,cAAc,wEA8DzB,CAAC"}
1
+ {"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,mBAAmB,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAGzE,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAsGD,eAAO,MAAM,cAAc,wEA4DzB,CAAC"}
package/dist/es6/button/lib/TertiaryButton.js CHANGED
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import * as React from 'react';
24
24
  import { focusRing, useTheme, createComponent, } from '@workday/canvas-kit-react/common';
25
- import { colors, space, type, borderRadius } from '@workday/canvas-kit-react/tokens';
25
+ import { colors, space, borderRadius } from '@workday/canvas-kit-react/tokens';
26
26
  import { ButtonContainer, ButtonLabelIcon, ButtonLabel } from './parts';
27
27
  var getTertiaryButtonColors = function (variant, theme) {
28
28
  var themePrimary = theme.canvas.palette.primary;
@@ -56,8 +56,8 @@ var getTertiaryButtonColors = function (variant, theme) {
56
56
  },
57
57
  disabled: {
58
58
  background: 'transparent',
59
- icon: 'rgba(255, 255, 255, 0.5)',
60
- label: 'rgba(255, 255, 255, 0.5)',
59
+ icon: colors.frenchVanilla100,
60
+ label: colors.frenchVanilla100,
61
61
  },
62
62
  };
63
63
  }
@@ -83,25 +83,29 @@ var getTertiaryButtonColors = function (variant, theme) {
83
83
  focusRing: focusRing({}, theme),
84
84
  },
85
85
  disabled: {
86
- background: 'transparent',
87
- icon: themePrimary.light,
88
- label: themePrimary.light,
86
+ icon: themePrimary.main,
87
+ label: themePrimary.main,
89
88
  },
90
89
  };
91
90
  }
92
91
  };
93
- var containerStyles = {
94
- borderRadius: borderRadius.m,
95
- border: '0',
96
- padding: "0 " + space.xxs,
97
- minWidth: 'auto',
98
- '.wdc-text-button-label': {
99
- borderBottom: '2px solid transparent',
100
- paddingTop: '2px',
101
- transition: 'border-color 0.3s',
102
- },
103
- '&:hover:not([disabled]) .wdc-text-button-label': {
104
- borderBottomColor: 'currentColor',
92
+ var getPaddingStyles = function (icon, iconPosition) {
93
+ // if there is an icon on the left, add 4px extra padding to the right for visual balance
94
+ if (icon && iconPosition === 'left') {
95
+ return "0 " + space.xs + " 0 " + space.xxs;
96
+ }
97
+ // if there is an icon on the right, add 4px extra padding to the left for visual balance
98
+ if (icon && iconPosition === 'right') {
99
+ return "0 " + space.xxs + " 0 " + space.xs;
100
+ }
101
+ // if there is no icon, return the default padding
102
+ return "0 " + space.xxs;
103
+ };
104
+ // All disabled buttons are set to 40% opacity.
105
+ // This will eventually live in the ButtonContainer styles, but for now we're scoping it to Primary, Secondary, and Tertiary buttons.
106
+ var disabledButtonOpacity = {
107
+ '&:disabled, &:disabled:active': {
108
+ opacity: 0.4,
105
109
  },
106
110
  };
107
111
  export var TertiaryButton = createComponent('button')({
@@ -114,9 +118,9 @@ export var TertiaryButton = createComponent('button')({
114
118
  // TODO: Fix useTheme and make it a real hook
115
119
  // eslint-disable-next-line react-hooks/rules-of-hooks
116
120
  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, children = _a.children, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, allCaps = _a.allCaps, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
117
- // Note: We don't use ButtonLabel because the label styles differ from other button types
118
- var allContainerStyles = allCaps
119
- ? __assign(__assign({}, containerStyles), { textTransform: 'uppercase', fontWeight: type.properties.fontWeights.bold, fontSize: size === 'medium' ? type.properties.fontSizes[16] : undefined, letterSpacing: '.5px' }) : __assign(__assign({}, containerStyles), { fontSize: size === 'medium' ? type.properties.fontSizes[14] : undefined });
121
+ var allContainerStyles = __assign({ borderRadius: borderRadius.m, border: '0', padding: getPaddingStyles(icon, iconPosition), minWidth: 'auto', textTransform: allCaps ? 'uppercase' : undefined, '.wdc-text-button-label': {
122
+ textDecoration: 'underline',
123
+ } }, disabledButtonOpacity);
120
124
  return (React.createElement(ButtonContainer, __assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme), size: size, extraStyles: allContainerStyles }, elemProps),
121
125
  icon && iconPosition === 'left' && (React.createElement(ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
122
126
  React.createElement(ButtonLabel, { className: "wdc-text-button-label" }, children),
package/dist/es6/button/lib/parts/ButtonContainer.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EACL,cAAc,EAId,kBAAkB,EAClB,UAAU,EACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAGnD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,cAAc;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AA8BD,eAAO,MAAM,eAAe,kMA8K3B,CAAC"}
1
+ {"version":3,"file":"ButtonContainer.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC,OAAO,EACL,cAAc,EAId,kBAAkB,EAClB,UAAU,EACX,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAGnD,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,cAAc;IAChB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AA8BD,eAAO,MAAM,eAAe,kMAgL3B,CAAC"}
package/dist/es6/button/lib/parts/ButtonContainer.js CHANGED
@@ -68,13 +68,9 @@ export var ButtonContainer = styled('button', {
68
68
  },
69
69
  };
70
70
  case 'extraSmall':
71
- return {
72
- height: space.m,
73
- padding: "0 " + space.xs,
74
- '& > * ': {
71
+ return __assign(__assign({}, type.levels.subtext.medium), { fontWeight: type.properties.fontWeights.bold, height: space.m, padding: "0 " + space.xs, '& > * ': {
75
72
  margin: "0 " + spaceNumbers.xxxs / 2 + "px",
76
- },
77
- };
73
+ } });
78
74
  }
79
75
  }, function (_a) {
80
76
  var grow = _a.grow;
package/dist/es6/button/lib/types.d.ts CHANGED
@@ -26,5 +26,6 @@ export interface ButtonColors {
26
26
  * @default 'medium'
27
27
  */
28
28
  export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
29
+ export declare type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
29
30
  export declare type IconPositions = 'left' | 'right';
30
31
  //# sourceMappingURL=types.d.ts.map
package/dist/es6/button/lib/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,iBAAiB,GAAG;QACzB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,oBAAY,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../button/lib/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,eAAe,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AACD,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,KAAK,EAAE,iBAAiB,CAAC;IACzB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,EAAE,iBAAiB,GAAG;QACzB,SAAS,CAAC,EAAE,SAAS,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,oBAAY,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtE,oBAAY,mBAAmB,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAC;AACpE,oBAAY,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC"}
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.30+38d21d80",
3
+ "version": "6.0.0-alpha.0-next.31+17cf46c1",
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.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",
59
+ "@workday/canvas-kit-labs-react": "^6.0.0-alpha.0-next.31+17cf46c1",
60
+ "@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.31+17cf46c1",
61
+ "@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.31+17cf46c1",
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": "38d21d80658997a8a7ebbab29230548fc13ec854"
77
+ "gitHead": "17cf46c147e4ccad22b84011924c73456d63e252"
78
78
  }
package/ts3.5/dist/commonjs/button/lib/TertiaryButton.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { Themeable } from '@workday/canvas-kit-react/common';
3
3
  import { CanvasSystemIcon } from '@workday/design-assets-types';
4
+ import { TertiaryButtonSizes, IconPositions } from './types';
4
5
  export interface TertiaryButtonProps extends Themeable {
5
6
  /**
6
7
  * The variant of the TertiaryButton.
@@ -8,15 +9,18 @@ export interface TertiaryButtonProps extends Themeable {
8
9
  */
9
10
  variant?: 'inverse' | undefined;
10
11
  /**
11
- * The size of the TertiaryButton.
12
+ * There are three button sizes: `extraSmall`, `small`, and `medium`.
13
+ * If no size is provided, it will default to `medium`.
14
+ *
12
15
  * @default 'medium'
13
16
  */
14
- size?: 'small' | 'medium';
17
+ size?: TertiaryButtonSizes;
15
18
  /**
16
- * The position of the TertiaryButton icon.
19
+ * Button icon positions can either be `left` or `right`.
20
+ * If no value is provided, it defaults to `left`.
17
21
  * @default 'left'
18
22
  */
19
- iconPosition?: 'left' | 'right';
23
+ iconPosition?: IconPositions;
20
24
  /**
21
25
  * The icon of the TertiaryButton.
22
26
  */
package/ts3.5/dist/commonjs/button/lib/types.d.ts CHANGED
@@ -26,5 +26,6 @@ export interface ButtonColors {
26
26
  * @default 'medium'
27
27
  */
28
28
  export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
29
+ export declare type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
29
30
  export declare type IconPositions = 'left' | 'right';
30
31
  //# sourceMappingURL=types.d.ts.map
package/ts3.5/dist/es6/button/lib/TertiaryButton.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { Themeable } from '@workday/canvas-kit-react/common';
3
3
  import { CanvasSystemIcon } from '@workday/design-assets-types';
4
+ import { TertiaryButtonSizes, IconPositions } from './types';
4
5
  export interface TertiaryButtonProps extends Themeable {
5
6
  /**
6
7
  * The variant of the TertiaryButton.
@@ -8,15 +9,18 @@ export interface TertiaryButtonProps extends Themeable {
8
9
  */
9
10
  variant?: 'inverse' | undefined;
10
11
  /**
11
- * The size of the TertiaryButton.
12
+ * There are three button sizes: `extraSmall`, `small`, and `medium`.
13
+ * If no size is provided, it will default to `medium`.
14
+ *
12
15
  * @default 'medium'
13
16
  */
14
- size?: 'small' | 'medium';
17
+ size?: TertiaryButtonSizes;
15
18
  /**
16
- * The position of the TertiaryButton icon.
19
+ * Button icon positions can either be `left` or `right`.
20
+ * If no value is provided, it defaults to `left`.
17
21
  * @default 'left'
18
22
  */
19
- iconPosition?: 'left' | 'right';
23
+ iconPosition?: IconPositions;
20
24
  /**
21
25
  * The icon of the TertiaryButton.
22
26
  */
package/ts3.5/dist/es6/button/lib/types.d.ts CHANGED
@@ -26,5 +26,6 @@ export interface ButtonColors {
26
26
  * @default 'medium'
27
27
  */
28
28
  export declare type ButtonSizes = 'extraSmall' | 'small' | 'medium' | 'large';
29
+ export declare type TertiaryButtonSizes = 'extraSmall' | 'small' | 'medium';
29
30
  export declare type IconPositions = 'left' | 'right';
30
31
  //# sourceMappingURL=types.d.ts.map