@workday/canvas-kit-react 7.0.0-alpha.0-next.0 → 7.0.0-alpha.0-next.1

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.
@@ -33,6 +33,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
33
33
  * @default StatusIndicatorEmphasis.High
34
34
  */
35
35
  emphasis?: StatusIndicatorEmphasis;
36
+ /**
37
+ * The maxWidth of the container before it truncates
38
+ * @default 200
39
+ */
40
+ maxWidth?: number;
36
41
  /**
37
42
  * The text of the StatusIndicator.
38
43
  */
@@ -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,2BA4EnC,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;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAkBD,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAChF,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CAmBd"}
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,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAChF,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CA0Bd"}
@@ -65,7 +65,7 @@ var StatusIndicatorEmphasis;
65
65
  })(StatusIndicatorEmphasis = exports.StatusIndicatorEmphasis || (exports.StatusIndicatorEmphasis = {}));
66
66
  exports.statusIndicatorStyles = {
67
67
  classname: 'status-indicator',
68
- styles: __assign(__assign({}, tokens_1.type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', maxWidth: 150, height: tokens_1.space.s, padding: "1px " + tokens_1.space.xxxs, borderRadius: tokens_1.borderRadius.s, boxSizing: 'border-box' }),
68
+ styles: __assign(__assign({}, tokens_1.type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', height: tokens_1.space.s, padding: "1px " + tokens_1.space.xxxs, borderRadius: tokens_1.borderRadius.s, boxSizing: 'border-box' }),
69
69
  variants: {
70
70
  gray: {
71
71
  high: {
@@ -131,8 +131,8 @@ exports.statusIndicatorStyles = {
131
131
  },
132
132
  };
133
133
  var Container = styled_1.default('span')(exports.statusIndicatorStyles.styles, function (_a) {
134
- var type = _a.type, emphasis = _a.emphasis;
135
- return (__assign({}, exports.statusIndicatorStyles.variants[type][emphasis]));
134
+ var type = _a.type, emphasis = _a.emphasis, maxWidth = _a.maxWidth;
135
+ return (__assign(__assign({}, exports.statusIndicatorStyles.variants[type][emphasis]), { maxWidth: maxWidth }));
136
136
  });
137
137
  var StatusLabel = styled_1.default('span')({
138
138
  fontWeight: 'bold',
@@ -148,9 +148,9 @@ var StatusIndicator = /** @class */ (function (_super) {
148
148
  return _super !== null && _super.apply(this, arguments) || this;
149
149
  }
150
150
  StatusIndicator.prototype.render = function () {
151
- var _a = this.props, _b = _a.emphasis, emphasis = _b === void 0 ? StatusIndicatorEmphasis.High : _b, type = _a.type, icon = _a.icon, label = _a.label, elemProps = __rest(_a, ["emphasis", "type", "icon", "label"]);
151
+ var _a = this.props, _b = _a.emphasis, emphasis = _b === void 0 ? StatusIndicatorEmphasis.High : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 200 : _c, type = _a.type, icon = _a.icon, label = _a.label, elemProps = __rest(_a, ["emphasis", "maxWidth", "type", "icon", "label"]);
152
152
  var variant = exports.statusIndicatorStyles.variants[type][emphasis];
153
- return (React.createElement(Container, __assign({ type: type, emphasis: emphasis }, elemProps),
153
+ return (React.createElement(Container, __assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
154
154
  icon && (React.createElement(icon_1.SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: tokens_1.space.xxxs } })),
155
155
  React.createElement(StatusLabel, null, label)));
156
156
  };
@@ -33,6 +33,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
33
33
  * @default StatusIndicatorEmphasis.High
34
34
  */
35
35
  emphasis?: StatusIndicatorEmphasis;
36
+ /**
37
+ * The maxWidth of the container before it truncates
38
+ * @default 200
39
+ */
40
+ maxWidth?: number;
36
41
  /**
37
42
  * The text of the StatusIndicator.
38
43
  */
@@ -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,2BA4EnC,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;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAkBD,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAChF,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CAmBd"}
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,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,KAAK,CAAC,SAAS,CAAC,oBAAoB,CAAC;IAChF,OAAc,IAAI,6BAAuB;IACzC,OAAc,QAAQ,iCAA2B;IAE1C,MAAM;CA0Bd"}
@@ -53,7 +53,7 @@ export var StatusIndicatorEmphasis;
53
53
  })(StatusIndicatorEmphasis || (StatusIndicatorEmphasis = {}));
54
54
  export var statusIndicatorStyles = {
55
55
  classname: 'status-indicator',
56
- styles: __assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', maxWidth: 150, height: space.s, padding: "1px " + space.xxxs, borderRadius: borderRadius.s, boxSizing: 'border-box' }),
56
+ styles: __assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', alignItems: 'center', verticalAlign: 'middle', height: space.s, padding: "1px " + space.xxxs, borderRadius: borderRadius.s, boxSizing: 'border-box' }),
57
57
  variants: {
58
58
  gray: {
59
59
  high: {
@@ -119,8 +119,8 @@ export var statusIndicatorStyles = {
119
119
  },
120
120
  };
121
121
  var Container = styled('span')(statusIndicatorStyles.styles, function (_a) {
122
- var type = _a.type, emphasis = _a.emphasis;
123
- return (__assign({}, statusIndicatorStyles.variants[type][emphasis]));
122
+ var type = _a.type, emphasis = _a.emphasis, maxWidth = _a.maxWidth;
123
+ return (__assign(__assign({}, statusIndicatorStyles.variants[type][emphasis]), { maxWidth: maxWidth }));
124
124
  });
125
125
  var StatusLabel = styled('span')({
126
126
  fontWeight: 'bold',
@@ -136,9 +136,9 @@ var StatusIndicator = /** @class */ (function (_super) {
136
136
  return _super !== null && _super.apply(this, arguments) || this;
137
137
  }
138
138
  StatusIndicator.prototype.render = function () {
139
- var _a = this.props, _b = _a.emphasis, emphasis = _b === void 0 ? StatusIndicatorEmphasis.High : _b, type = _a.type, icon = _a.icon, label = _a.label, elemProps = __rest(_a, ["emphasis", "type", "icon", "label"]);
139
+ var _a = this.props, _b = _a.emphasis, emphasis = _b === void 0 ? StatusIndicatorEmphasis.High : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? 200 : _c, type = _a.type, icon = _a.icon, label = _a.label, elemProps = __rest(_a, ["emphasis", "maxWidth", "type", "icon", "label"]);
140
140
  var variant = statusIndicatorStyles.variants[type][emphasis];
141
- return (React.createElement(Container, __assign({ type: type, emphasis: emphasis }, elemProps),
141
+ return (React.createElement(Container, __assign({ type: type, emphasis: emphasis, maxWidth: maxWidth }, elemProps),
142
142
  icon && (React.createElement(SystemIcon, { colorHover: variant.color, color: variant.color, icon: icon, size: 14, style: { paddingRight: space.xxxs } })),
143
143
  React.createElement(StatusLabel, null, label)));
144
144
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "7.0.0-alpha.0-next.0+69f28d82",
3
+ "version": "7.0.0-alpha.0-next.1+57471fa0",
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",
@@ -57,9 +57,9 @@
57
57
  "@emotion/styled": "^10.0.27",
58
58
  "@popperjs/core": "^2.5.4",
59
59
  "@workday/canvas-colors-web": "^2.0.0",
60
- "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.0+69f28d82",
61
- "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.0+69f28d82",
62
- "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.0+69f28d82",
60
+ "@workday/canvas-kit-labs-react": "^7.0.0-alpha.0-next.1+57471fa0",
61
+ "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.1+57471fa0",
62
+ "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.1+57471fa0",
63
63
  "@workday/canvas-system-icons-web": "1.0.41",
64
64
  "@workday/design-assets-types": "^0.2.4",
65
65
  "chroma-js": "^2.1.0",
@@ -77,5 +77,5 @@
77
77
  "@workday/canvas-accent-icons-web": "^1.0.0",
78
78
  "@workday/canvas-applet-icons-web": "^0.17.50"
79
79
  },
80
- "gitHead": "69f28d82a0291ed45c2c9d3ef92e437d69033471"
80
+ "gitHead": "57471fa0c73534126f9ef9a18203d49c5834d21e"
81
81
  }
@@ -35,7 +35,6 @@ export const statusIndicatorStyles: StatusIndicatorGenericStyle = {
35
35
  display: 'inline-flex',
36
36
  alignItems: 'center',
37
37
  verticalAlign: 'middle',
38
- maxWidth: 150,
39
38
  height: space.s,
40
39
  padding: `1px ${space.xxxs}`,
41
40
  borderRadius: borderRadius.s,
@@ -116,6 +115,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
116
115
  * @default StatusIndicatorEmphasis.High
117
116
  */
118
117
  emphasis?: StatusIndicatorEmphasis;
118
+ /**
119
+ * The maxWidth of the container before it truncates
120
+ * @default 200
121
+ */
122
+ maxWidth?: number;
119
123
  /**
120
124
  * The text of the StatusIndicator.
121
125
  */
@@ -126,12 +130,12 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
126
130
  icon?: CanvasSystemIcon;
127
131
  }
128
132
 
129
- const Container = styled('span')<PickRequired<StatusIndicatorProps, 'emphasis', 'type'>>(
130
- statusIndicatorStyles.styles,
131
- ({type, emphasis}) => ({
132
- ...statusIndicatorStyles.variants[type][emphasis],
133
- })
134
- );
133
+ const Container = styled('span')<
134
+ PickRequired<StatusIndicatorProps, 'emphasis' | 'maxWidth', 'type'>
135
+ >(statusIndicatorStyles.styles, ({type, emphasis, maxWidth}) => ({
136
+ ...statusIndicatorStyles.variants[type][emphasis],
137
+ maxWidth: maxWidth,
138
+ }));
135
139
 
136
140
  const StatusLabel = styled('span')({
137
141
  fontWeight: 'bold',
@@ -147,11 +151,18 @@ export default class StatusIndicator extends React.Component<StatusIndicatorProp
147
151
  public static Emphasis = StatusIndicatorEmphasis;
148
152
 
149
153
  public render() {
150
- const {emphasis = StatusIndicatorEmphasis.High, type, icon, label, ...elemProps} = this.props;
154
+ const {
155
+ emphasis = StatusIndicatorEmphasis.High,
156
+ maxWidth = 200,
157
+ type,
158
+ icon,
159
+ label,
160
+ ...elemProps
161
+ } = this.props;
151
162
  const variant = statusIndicatorStyles.variants[type][emphasis]!;
152
163
 
153
164
  return (
154
- <Container type={type} emphasis={emphasis} {...elemProps}>
165
+ <Container type={type} emphasis={emphasis} maxWidth={maxWidth} {...elemProps}>
155
166
  {icon && (
156
167
  <SystemIcon
157
168
  colorHover={variant.color}
@@ -33,6 +33,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
33
33
  * @default StatusIndicatorEmphasis.High
34
34
  */
35
35
  emphasis?: StatusIndicatorEmphasis;
36
+ /**
37
+ * The maxWidth of the container before it truncates
38
+ * @default 200
39
+ */
40
+ maxWidth?: number;
36
41
  /**
37
42
  * The text of the StatusIndicator.
38
43
  */
@@ -33,6 +33,11 @@ export interface StatusIndicatorProps extends React.HTMLAttributes<HTMLSpanEleme
33
33
  * @default StatusIndicatorEmphasis.High
34
34
  */
35
35
  emphasis?: StatusIndicatorEmphasis;
36
+ /**
37
+ * The maxWidth of the container before it truncates
38
+ * @default 200
39
+ */
40
+ maxWidth?: number;
36
41
  /**
37
42
  * The text of the StatusIndicator.
38
43
  */