@workday/canvas-kit-react 10.0.0-alpha.464-next.0 → 10.0.0-alpha.468-next.0

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 (17) hide show
  1. package/breadcrumbs/lib/BreadcrumbsLink.tsx +1 -1
  2. package/button/lib/BaseButton.tsx +10 -10
  3. package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
  4. package/dist/commonjs/button/lib/BaseButton.js +10 -10
  5. package/dist/commonjs/icon/lib/Svg.js +1 -1
  6. package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts +30 -0
  7. package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
  8. package/dist/commonjs/status-indicator/lib/StatusIndicator.js +20 -0
  9. package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js +1 -1
  10. package/dist/es6/button/lib/BaseButton.js +10 -10
  11. package/dist/es6/icon/lib/Svg.js +1 -1
  12. package/dist/es6/status-indicator/lib/StatusIndicator.d.ts +30 -0
  13. package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
  14. package/dist/es6/status-indicator/lib/StatusIndicator.js +20 -0
  15. package/icon/lib/Svg.tsx +1 -1
  16. package/package.json +3 -3
  17. package/status-indicator/lib/StatusIndicator.tsx +30 -0
package/breadcrumbs/lib/BreadcrumbsLink.tsx CHANGED
@@ -27,8 +27,8 @@ const StyledLink = styled(Hyperlink)(
27
27
  ...subtextLargeStyles,
28
28
  },
29
29
  ({maxWidth}: StyledLinkProps) => ({
30
- maxWidth,
31
30
  ...ellipsisStyles,
31
+ maxWidth,
32
32
  })
33
33
  );
34
34
 
package/button/lib/BaseButton.tsx CHANGED
@@ -156,62 +156,62 @@ const ButtonContainer = styled('button')<StyledType & ButtonContainerProps>(
156
156
  }
157
157
 
158
158
  const baseStyles = {
159
- backgroundColor: colors.default.background,
160
- borderColor: colors.default.border,
161
- color: colors.default.label,
162
159
  ...(colors.default.icon && {
163
160
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
164
161
  transition: 'fill 120ms ease-in',
165
162
  },
166
163
  ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
167
164
  }),
165
+ backgroundColor: colors.default.background,
166
+ borderColor: colors.default.border,
167
+ color: colors.default.label,
168
168
  };
169
169
 
170
170
  const hoverStyles = {
171
171
  '&:hover': {
172
+ ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
172
173
  backgroundColor: colors.hover.background,
173
174
  borderColor: colors.hover.border,
174
175
  color: colors.hover.label,
175
- ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
176
176
  },
177
177
  };
178
178
 
179
179
  const activeStyles = {
180
180
  '&:active, &:focus:active, &:hover:active': {
181
+ ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
181
182
  backgroundColor: colors.active.background,
182
183
  borderColor: colors.active.border,
183
184
  color: colors.active.label,
184
- ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
185
185
  },
186
186
  };
187
187
 
188
188
  return {
189
189
  ...baseStyles,
190
190
  '&:focus': {
191
+ ...(colors.focus.focusRing || focusRing({separation: 2}, theme)),
192
+ ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
191
193
  backgroundColor: colors.focus.background,
192
194
  borderColor: colors.focus.border,
193
195
  color: colors.focus.label,
194
- ...(colors.focus.focusRing || focusRing({separation: 2}, theme)),
195
- ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
196
196
  },
197
197
 
198
198
  ...activeStyles,
199
199
  ...hoverStyles,
200
200
  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
201
+ ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
201
202
  backgroundColor: colors.disabled.background,
202
203
  borderColor: colors.disabled.border,
203
204
  color: colors.disabled.label,
204
205
  opacity: colors.disabled.opacity,
205
- ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
206
206
  },
207
207
  ...mouseFocusBehavior({
208
208
  '&:focus': {
209
209
  ...baseStyles,
210
+ ...hoverStyles,
211
+ ...activeStyles,
210
212
  outline: 'none',
211
213
  boxShadow: 'none',
212
214
  animation: 'none',
213
- ...hoverStyles,
214
- ...activeStyles,
215
215
  },
216
216
  }),
217
217
  };
package/dist/commonjs/breadcrumbs/lib/BreadcrumbsLink.js CHANGED
@@ -13,8 +13,8 @@ const { color, ...subtextLargeStyles } = tokens_1.type.levels.subtext.large;
13
13
  const StyledLink = common_1.styled(button_1.Hyperlink)({
14
14
  ...subtextLargeStyles,
15
15
  }, ({ maxWidth }) => ({
16
- maxWidth,
17
16
  ...common_1.ellipsisStyles,
17
+ maxWidth,
18
18
  }));
19
19
  exports.BreadcrumbsLink = common_1.createComponent('a')({
20
20
  displayName: 'Breadcrumbs.Link',
package/dist/commonjs/button/lib/BaseButton.js CHANGED
@@ -119,58 +119,58 @@ const ButtonContainer = common_1.styled('button')({
119
119
  return;
120
120
  }
121
121
  const baseStyles = {
122
- backgroundColor: colors.default.background,
123
- borderColor: colors.default.border,
124
- color: colors.default.label,
125
122
  ...(colors.default.icon && {
126
123
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
127
124
  transition: 'fill 120ms ease-in',
128
125
  },
129
126
  ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
130
127
  }),
128
+ backgroundColor: colors.default.background,
129
+ borderColor: colors.default.border,
130
+ color: colors.default.label,
131
131
  };
132
132
  const hoverStyles = {
133
133
  '&:hover': {
134
+ ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
134
135
  backgroundColor: colors.hover.background,
135
136
  borderColor: colors.hover.border,
136
137
  color: colors.hover.label,
137
- ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
138
138
  },
139
139
  };
140
140
  const activeStyles = {
141
141
  '&:active, &:focus:active, &:hover:active': {
142
+ ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
142
143
  backgroundColor: colors.active.background,
143
144
  borderColor: colors.active.border,
144
145
  color: colors.active.label,
145
- ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
146
146
  },
147
147
  };
148
148
  return {
149
149
  ...baseStyles,
150
150
  '&:focus': {
151
+ ...(colors.focus.focusRing || common_1.focusRing({ separation: 2 }, theme)),
152
+ ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
151
153
  backgroundColor: colors.focus.background,
152
154
  borderColor: colors.focus.border,
153
155
  color: colors.focus.label,
154
- ...(colors.focus.focusRing || common_1.focusRing({ separation: 2 }, theme)),
155
- ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
156
156
  },
157
157
  ...activeStyles,
158
158
  ...hoverStyles,
159
159
  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
160
+ ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
160
161
  backgroundColor: colors.disabled.background,
161
162
  borderColor: colors.disabled.border,
162
163
  color: colors.disabled.label,
163
164
  opacity: colors.disabled.opacity,
164
- ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
165
165
  },
166
166
  ...common_1.mouseFocusBehavior({
167
167
  '&:focus': {
168
168
  ...baseStyles,
169
+ ...hoverStyles,
170
+ ...activeStyles,
169
171
  outline: 'none',
170
172
  boxShadow: 'none',
171
173
  animation: 'none',
172
- ...hoverStyles,
173
- ...activeStyles,
174
174
  },
175
175
  }),
176
176
  };
package/dist/commonjs/icon/lib/Svg.js CHANGED
@@ -28,8 +28,8 @@ const StyledIconSpan = common_1.styled(layout_1.Box.as('span'))({
28
28
  display: 'inline-block',
29
29
  '> svg': { display: 'block' },
30
30
  }, ({ shouldMirror, styles }) => ({
31
- transform: shouldMirror ? 'scaleX(-1)' : undefined,
32
31
  ...styles,
32
+ transform: shouldMirror ? 'scaleX(-1)' : undefined,
33
33
  }));
34
34
  exports.Svg = common_1.createComponent('span')({
35
35
  displayName: 'Svg',
package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts CHANGED
@@ -2,6 +2,11 @@ import * as React from 'react';
2
2
  import { CanvasSystemIcon } from '@workday/design-assets-types';
3
3
  import { GenericStyle } from '@workday/canvas-kit-react/common';
4
4
  import { CSSProperties } from '@workday/canvas-kit-react/tokens';
5
+ /**
6
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
7
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
8
+ * @deprecated
9
+ */
5
10
  export declare enum StatusIndicatorType {
6
11
  Gray = "gray",
7
12
  Orange = "orange",
@@ -10,10 +15,20 @@ export declare enum StatusIndicatorType {
10
15
  Red = "red",
11
16
  Transparent = "transparent"
12
17
  }
18
+ /**
19
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
20
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
21
+ * @deprecated
22
+ */
13
23
  export declare enum StatusIndicatorEmphasis {
14
24
  High = "high",
15
25
  Low = "low"
16
26
  }
27
+ /**
28
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
29
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
30
+ * @deprecated
31
+ */
17
32
  export interface StatusIndicatorGenericStyle extends GenericStyle {
18
33
  styles: CSSProperties;
19
34
  variants: {
@@ -22,7 +37,17 @@ export interface StatusIndicatorGenericStyle extends GenericStyle {
22
37
  };
23
38
  };
24
39
  }
40
+ /**
41
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
42
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
43
+ * @deprecated
44
+ */
25
45
  export declare const statusIndicatorStyles: StatusIndicatorGenericStyle;
46
+ /**
47
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
48
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
49
+ * @deprecated
50
+ */
26
51
  export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
27
52
  /**
28
53
  * The type of the StatusIndicator. Accepts `Gray`, `Orange`, `Blue`, `Green`, `Red`, or `Transparent`.
@@ -47,6 +72,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
47
72
  */
48
73
  icon?: CanvasSystemIcon;
49
74
  }
75
+ /**
76
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
77
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
78
+ * @deprecated
79
+ */
50
80
  export declare class StatusIndicator extends React.Component<StatusIndicatorProps> {
51
81
  static Type: typeof StatusIndicatorType;
52
82
  static Emphasis: typeof StatusIndicatorEmphasis;
package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAe,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAoC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGlG,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,WAAW,gBAAgB;CAC5B;AAED,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAED,MAAM,WAAW,2BAA4B,SAAQ,YAAY;IAC/D,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE;SACP,UAAU,IAAI,mBAAmB,GAAG;aAClC,cAAc,IAAI,uBAAuB,CAAC,CAAC,EAAE,aAAa;SAC5D;KACF,CAAC;CACH;AAED,eAAO,MAAM,qBAAqB,EAAE,2BA2EnC,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACjF;;OAEG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAkBD,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IACxE,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CA0Bd"}
1
+ {"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAe,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAoC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGlG;;;;GAIG;AACH,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,WAAW,gBAAgB;CAC5B;AAED;;;;GAIG;AACH,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAED;;;;GAIG;AACH,MAAM,WAAW,2BAA4B,SAAQ,YAAY;IAC/D,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE;SACP,UAAU,IAAI,mBAAmB,GAAG;aAClC,cAAc,IAAI,uBAAuB,CAAC,CAAC,EAAE,aAAa;SAC5D;KACF,CAAC;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,2BA2EnC,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACjF;;OAEG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAkBD;;;;GAIG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IACxE,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CA0Bd"}
package/dist/commonjs/status-indicator/lib/StatusIndicator.js CHANGED
@@ -27,6 +27,11 @@ const React = __importStar(require("react"));
27
27
  const icon_1 = require("@workday/canvas-kit-react/icon");
28
28
  const tokens_1 = require("@workday/canvas-kit-react/tokens");
29
29
  const styled_1 = __importDefault(require("@emotion/styled"));
30
+ /**
31
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
32
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
33
+ * @deprecated
34
+ */
30
35
  var StatusIndicatorType;
31
36
  (function (StatusIndicatorType) {
32
37
  StatusIndicatorType["Gray"] = "gray";
@@ -36,11 +41,21 @@ var StatusIndicatorType;
36
41
  StatusIndicatorType["Red"] = "red";
37
42
  StatusIndicatorType["Transparent"] = "transparent";
38
43
  })(StatusIndicatorType = exports.StatusIndicatorType || (exports.StatusIndicatorType = {}));
44
+ /**
45
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
46
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
47
+ * @deprecated
48
+ */
39
49
  var StatusIndicatorEmphasis;
40
50
  (function (StatusIndicatorEmphasis) {
41
51
  StatusIndicatorEmphasis["High"] = "high";
42
52
  StatusIndicatorEmphasis["Low"] = "low";
43
53
  })(StatusIndicatorEmphasis = exports.StatusIndicatorEmphasis || (exports.StatusIndicatorEmphasis = {}));
54
+ /**
55
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
56
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
57
+ * @deprecated
58
+ */
44
59
  exports.statusIndicatorStyles = {
45
60
  classname: 'status-indicator',
46
61
  styles: {
@@ -129,6 +144,11 @@ const StatusLabel = styled_1.default('span')({
129
144
  whiteSpace: 'nowrap',
130
145
  textOverflow: 'ellipsis',
131
146
  });
147
+ /**
148
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
149
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
150
+ * @deprecated
151
+ */
132
152
  class StatusIndicator extends React.Component {
133
153
  render() {
134
154
  const { emphasis = StatusIndicatorEmphasis.High, maxWidth = 200, type, icon, label, ...elemProps } = this.props;
package/dist/es6/breadcrumbs/lib/BreadcrumbsLink.js CHANGED
@@ -7,8 +7,8 @@ const { color, ...subtextLargeStyles } = type.levels.subtext.large;
7
7
  const StyledLink = styled(Hyperlink)({
8
8
  ...subtextLargeStyles,
9
9
  }, ({ maxWidth }) => ({
10
- maxWidth,
11
10
  ...ellipsisStyles,
11
+ maxWidth,
12
12
  }));
13
13
  export const BreadcrumbsLink = createComponent('a')({
14
14
  displayName: 'Breadcrumbs.Link',
package/dist/es6/button/lib/BaseButton.js CHANGED
@@ -97,58 +97,58 @@ const ButtonContainer = styled('button')({
97
97
  return;
98
98
  }
99
99
  const baseStyles = {
100
- backgroundColor: colors.default.background,
101
- borderColor: colors.default.border,
102
- color: colors.default.label,
103
100
  ...(colors.default.icon && {
104
101
  '.wd-icon-fill, .wd-icon-accent, .wd-icon-accent2, .wd-icon-background': {
105
102
  transition: 'fill 120ms ease-in',
106
103
  },
107
104
  ...getIconColorSelectors(theme, colors.default.icon, fillIcon),
108
105
  }),
106
+ backgroundColor: colors.default.background,
107
+ borderColor: colors.default.border,
108
+ color: colors.default.label,
109
109
  };
110
110
  const hoverStyles = {
111
111
  '&:hover': {
112
+ ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
112
113
  backgroundColor: colors.hover.background,
113
114
  borderColor: colors.hover.border,
114
115
  color: colors.hover.label,
115
- ...(colors.hover.icon && getIconColorSelectors(theme, colors.hover.icon, fillIcon)),
116
116
  },
117
117
  };
118
118
  const activeStyles = {
119
119
  '&:active, &:focus:active, &:hover:active': {
120
+ ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
120
121
  backgroundColor: colors.active.background,
121
122
  borderColor: colors.active.border,
122
123
  color: colors.active.label,
123
- ...(colors.active.icon && getIconColorSelectors(theme, colors.active.icon, fillIcon)),
124
124
  },
125
125
  };
126
126
  return {
127
127
  ...baseStyles,
128
128
  '&:focus': {
129
+ ...(colors.focus.focusRing || focusRing({ separation: 2 }, theme)),
130
+ ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
129
131
  backgroundColor: colors.focus.background,
130
132
  borderColor: colors.focus.border,
131
133
  color: colors.focus.label,
132
- ...(colors.focus.focusRing || focusRing({ separation: 2 }, theme)),
133
- ...(colors.focus.icon && getIconColorSelectors(theme, colors.focus.icon, fillIcon)),
134
134
  },
135
135
  ...activeStyles,
136
136
  ...hoverStyles,
137
137
  '&:disabled, &:active:disabled, &:focus:disabled, &:hover:disabled': {
138
+ ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
138
139
  backgroundColor: colors.disabled.background,
139
140
  borderColor: colors.disabled.border,
140
141
  color: colors.disabled.label,
141
142
  opacity: colors.disabled.opacity,
142
- ...(colors.disabled.icon && getIconColorSelectors(theme, colors.disabled.icon, fillIcon)),
143
143
  },
144
144
  ...mouseFocusBehavior({
145
145
  '&:focus': {
146
146
  ...baseStyles,
147
+ ...hoverStyles,
148
+ ...activeStyles,
147
149
  outline: 'none',
148
150
  boxShadow: 'none',
149
151
  animation: 'none',
150
- ...hoverStyles,
151
- ...activeStyles,
152
152
  },
153
153
  }),
154
154
  };
package/dist/es6/icon/lib/Svg.js CHANGED
@@ -6,8 +6,8 @@ const StyledIconSpan = styled(Box.as('span'))({
6
6
  display: 'inline-block',
7
7
  '> svg': { display: 'block' },
8
8
  }, ({ shouldMirror, styles }) => ({
9
- transform: shouldMirror ? 'scaleX(-1)' : undefined,
10
9
  ...styles,
10
+ transform: shouldMirror ? 'scaleX(-1)' : undefined,
11
11
  }));
12
12
  export const Svg = createComponent('span')({
13
13
  displayName: 'Svg',
package/dist/es6/status-indicator/lib/StatusIndicator.d.ts CHANGED
@@ -2,6 +2,11 @@ import * as React from 'react';
2
2
  import { CanvasSystemIcon } from '@workday/design-assets-types';
3
3
  import { GenericStyle } from '@workday/canvas-kit-react/common';
4
4
  import { CSSProperties } from '@workday/canvas-kit-react/tokens';
5
+ /**
6
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
7
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
8
+ * @deprecated
9
+ */
5
10
  export declare enum StatusIndicatorType {
6
11
  Gray = "gray",
7
12
  Orange = "orange",
@@ -10,10 +15,20 @@ export declare enum StatusIndicatorType {
10
15
  Red = "red",
11
16
  Transparent = "transparent"
12
17
  }
18
+ /**
19
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
20
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
21
+ * @deprecated
22
+ */
13
23
  export declare enum StatusIndicatorEmphasis {
14
24
  High = "high",
15
25
  Low = "low"
16
26
  }
27
+ /**
28
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
29
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
30
+ * @deprecated
31
+ */
17
32
  export interface StatusIndicatorGenericStyle extends GenericStyle {
18
33
  styles: CSSProperties;
19
34
  variants: {
@@ -22,7 +37,17 @@ export interface StatusIndicatorGenericStyle extends GenericStyle {
22
37
  };
23
38
  };
24
39
  }
40
+ /**
41
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
42
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
43
+ * @deprecated
44
+ */
25
45
  export declare const statusIndicatorStyles: StatusIndicatorGenericStyle;
46
+ /**
47
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
48
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
49
+ * @deprecated
50
+ */
26
51
  export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
27
52
  /**
28
53
  * The type of the StatusIndicator. Accepts `Gray`, `Orange`, `Blue`, `Green`, `Red`, or `Transparent`.
@@ -47,6 +72,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
47
72
  */
48
73
  icon?: CanvasSystemIcon;
49
74
  }
75
+ /**
76
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
77
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
78
+ * @deprecated
79
+ */
50
80
  export declare class StatusIndicator extends React.Component<StatusIndicatorProps> {
51
81
  static Type: typeof StatusIndicatorType;
52
82
  static Emphasis: typeof StatusIndicatorEmphasis;
package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAe,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAoC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGlG,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,WAAW,gBAAgB;CAC5B;AAED,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAED,MAAM,WAAW,2BAA4B,SAAQ,YAAY;IAC/D,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE;SACP,UAAU,IAAI,mBAAmB,GAAG;aAClC,cAAc,IAAI,uBAAuB,CAAC,CAAC,EAAE,aAAa;SAC5D;KACF,CAAC;CACH;AAED,eAAO,MAAM,qBAAqB,EAAE,2BA2EnC,CAAC;AAEF,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACjF;;OAEG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAkBD,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IACxE,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CA0Bd"}
1
+ {"version":3,"file":"StatusIndicator.d.ts","sourceRoot":"","sources":["../../../../status-indicator/lib/StatusIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAe,MAAM,kCAAkC,CAAC;AAC5E,OAAO,EAAoC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAGlG;;;;GAIG;AACH,oBAAY,mBAAmB;IAC7B,IAAI,SAAS;IACb,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;IACf,GAAG,QAAQ;IACX,WAAW,gBAAgB;CAC5B;AAED;;;;GAIG;AACH,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,GAAG,QAAQ;CACZ;AAED;;;;GAIG;AACH,MAAM,WAAW,2BAA4B,SAAQ,YAAY;IAC/D,MAAM,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE;SACP,UAAU,IAAI,mBAAmB,GAAG;aAClC,cAAc,IAAI,uBAAuB,CAAC,CAAC,EAAE,aAAa;SAC5D;KACF,CAAC;CACH;AAED;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,EAAE,2BA2EnC,CAAC;AAEF;;;;GAIG;AACH,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACjF;;OAEG;IACH,IAAI,EAAE,mBAAmB,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAkBD;;;;GAIG;AACH,qBAAa,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IACxE,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CA0Bd"}
package/dist/es6/status-indicator/lib/StatusIndicator.js CHANGED
@@ -2,6 +2,11 @@ import * as React from 'react';
2
2
  import { SystemIcon } from '@workday/canvas-kit-react/icon';
3
3
  import { borderRadius, colors, type, space } from '@workday/canvas-kit-react/tokens';
4
4
  import styled from '@emotion/styled';
5
+ /**
6
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
7
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
8
+ * @deprecated
9
+ */
5
10
  export var StatusIndicatorType;
6
11
  (function (StatusIndicatorType) {
7
12
  StatusIndicatorType["Gray"] = "gray";
@@ -11,11 +16,21 @@ export var StatusIndicatorType;
11
16
  StatusIndicatorType["Red"] = "red";
12
17
  StatusIndicatorType["Transparent"] = "transparent";
13
18
  })(StatusIndicatorType || (StatusIndicatorType = {}));
19
+ /**
20
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
21
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
22
+ * @deprecated
23
+ */
14
24
  export var StatusIndicatorEmphasis;
15
25
  (function (StatusIndicatorEmphasis) {
16
26
  StatusIndicatorEmphasis["High"] = "high";
17
27
  StatusIndicatorEmphasis["Low"] = "low";
18
28
  })(StatusIndicatorEmphasis || (StatusIndicatorEmphasis = {}));
29
+ /**
30
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
31
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
32
+ * @deprecated
33
+ */
19
34
  export const statusIndicatorStyles = {
20
35
  classname: 'status-indicator',
21
36
  styles: {
@@ -104,6 +119,11 @@ const StatusLabel = styled('span')({
104
119
  whiteSpace: 'nowrap',
105
120
  textOverflow: 'ellipsis',
106
121
  });
122
+ /**
123
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
124
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
125
+ * @deprecated
126
+ */
107
127
  export class StatusIndicator extends React.Component {
108
128
  render() {
109
129
  const { emphasis = StatusIndicatorEmphasis.High, maxWidth = 200, type, icon, label, ...elemProps } = this.props;
package/icon/lib/Svg.tsx CHANGED
@@ -24,8 +24,8 @@ const StyledIconSpan = styled(Box.as('span'))<
24
24
  '> svg': {display: 'block'},
25
25
  },
26
26
  ({shouldMirror, styles}) => ({
27
- transform: shouldMirror ? 'scaleX(-1)' : undefined,
28
27
  ...styles,
28
+ transform: shouldMirror ? 'scaleX(-1)' : undefined,
29
29
  })
30
30
  );
31
31
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "10.0.0-alpha.464-next.0",
3
+ "version": "10.0.0-alpha.468-next.0",
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",
@@ -49,7 +49,7 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.464-next.0",
52
+ "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.468-next.0",
53
53
  "@workday/canvas-system-icons-web": "^3.0.0",
54
54
  "@workday/design-assets-types": "^0.2.8",
55
55
  "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
66
66
  "@workday/canvas-accent-icons-web": "^3.0.0",
67
67
  "@workday/canvas-applet-icons-web": "^2.0.0"
68
68
  },
69
- "gitHead": "6e5c32264d0680bbb2faec47130a5583e596e02d"
69
+ "gitHead": "7555f642afd40f7d1cdc3d7913a9635eced8622c"
70
70
  }
package/status-indicator/lib/StatusIndicator.tsx CHANGED
@@ -5,6 +5,11 @@ import {GenericStyle, PickRequired} from '@workday/canvas-kit-react/common';
5
5
  import {borderRadius, colors, type, space, CSSProperties} from '@workday/canvas-kit-react/tokens';
6
6
  import styled from '@emotion/styled';
7
7
 
8
+ /**
9
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
10
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
11
+ * @deprecated
12
+ */
8
13
  export enum StatusIndicatorType {
9
14
  Gray = 'gray',
10
15
  Orange = 'orange',
@@ -14,11 +19,21 @@ export enum StatusIndicatorType {
14
19
  Transparent = 'transparent',
15
20
  }
16
21
 
22
+ /**
23
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
24
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
25
+ * @deprecated
26
+ */
17
27
  export enum StatusIndicatorEmphasis {
18
28
  High = 'high',
19
29
  Low = 'low',
20
30
  }
21
31
 
32
+ /**
33
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
34
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
35
+ * @deprecated
36
+ */
22
37
  export interface StatusIndicatorGenericStyle extends GenericStyle {
23
38
  styles: CSSProperties;
24
39
  variants: {
@@ -28,6 +43,11 @@ export interface StatusIndicatorGenericStyle extends GenericStyle {
28
43
  };
29
44
  }
30
45
 
46
+ /**
47
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
48
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
49
+ * @deprecated
50
+ */
31
51
  export const statusIndicatorStyles: StatusIndicatorGenericStyle = {
32
52
  classname: 'status-indicator',
33
53
  styles: {
@@ -105,6 +125,11 @@ export const statusIndicatorStyles: StatusIndicatorGenericStyle = {
105
125
  },
106
126
  };
107
127
 
128
+ /**
129
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
130
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
131
+ * @deprecated
132
+ */
108
133
  export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
109
134
  /**
110
135
  * The type of the StatusIndicator. Accepts `Gray`, `Orange`, `Blue`, `Green`, `Red`, or `Transparent`.
@@ -146,6 +171,11 @@ const StatusLabel = styled('span')({
146
171
  textOverflow: 'ellipsis',
147
172
  });
148
173
 
174
+ /**
175
+ * ### ⚠️ Status Indicator has been deprecated and will be removed in v11 ⚠️
176
+ * - Please consider using [`Status Indicator`](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in preview
177
+ * @deprecated
178
+ */
149
179
  export class StatusIndicator extends React.Component<StatusIndicatorProps> {
150
180
  public static Type = StatusIndicatorType;
151
181
  public static Emphasis = StatusIndicatorEmphasis;