@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.
- package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts +5 -0
- package/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
- package/dist/commonjs/status-indicator/lib/StatusIndicator.js +5 -5
- package/dist/es6/status-indicator/lib/StatusIndicator.d.ts +5 -0
- package/dist/es6/status-indicator/lib/StatusIndicator.d.ts.map +1 -1
- package/dist/es6/status-indicator/lib/StatusIndicator.js +5 -5
- package/package.json +5 -5
- package/status-indicator/lib/StatusIndicator.tsx +20 -9
- package/ts3.5/dist/commonjs/status-indicator/lib/StatusIndicator.d.ts +5 -0
- package/ts3.5/dist/es6/status-indicator/lib/StatusIndicator.d.ts +5 -0
|
@@ -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,
|
|
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',
|
|
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,
|
|
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',
|
|
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.
|
|
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.
|
|
61
|
-
"@workday/canvas-kit-popup-stack": "^7.0.0-alpha.0-next.
|
|
62
|
-
"@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.
|
|
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": "
|
|
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')<
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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 {
|
|
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
|
*/
|