@eccenca/gui-elements 23.7.0-rc.3 → 23.7.0-rc.4
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/CHANGELOG.md +8 -0
- package/dist/cjs/components/Depiction/Depiction.js +4 -2
- package/dist/cjs/components/Depiction/Depiction.js.map +1 -1
- package/dist/esm/components/Depiction/Depiction.js +4 -2
- package/dist/esm/components/Depiction/Depiction.js.map +1 -1
- package/dist/types/cmem/ActivityControl/ActivityControlTypes.d.ts +1 -1
- package/dist/types/components/Depiction/Depiction.d.ts +7 -1
- package/package.json +1 -1
- package/src/cmem/ActivityControl/ActivityControlTypes.ts +2 -2
- package/src/components/Depiction/Depiction.tsx +10 -1
- package/src/components/Depiction/depiction.scss +25 -0
- package/src/components/Select/Select.stories.tsx +11 -2
package/CHANGELOG.md
CHANGED
|
@@ -23,6 +23,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
23
23
|
- `intent` property to set the state, formerly used `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger` properties are now deprecated
|
|
24
24
|
- `leftIcon`: set the left aligned icon
|
|
25
25
|
- `rightElement`: renders on right side
|
|
26
|
+
- `<Depiction />`
|
|
27
|
+
- `disabled` property could be used if the element is used inside a disabled interactive element or form control but the state is not adapted automatically to the depiction
|
|
26
28
|
|
|
27
29
|
### Fixed
|
|
28
30
|
|
|
@@ -33,6 +35,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
33
35
|
- static test id `data-test-id="sticky-note-modal"` will be removed with next major version
|
|
34
36
|
- `<BreadcrumbsList />`
|
|
35
37
|
- `onItemClick` handler is only executed if breadcrumb has `href` set because this is one callback parameter and the handler would not have any information otherwise
|
|
38
|
+
- `<Depiction />`
|
|
39
|
+
- position fixed when element is used as icon in `<Button />`
|
|
36
40
|
|
|
37
41
|
### Changed
|
|
38
42
|
|
|
@@ -42,6 +46,10 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
42
46
|
- `elevation` allows now `-1` as value, the card is borderless then
|
|
43
47
|
- `<MultiSuggestField />`
|
|
44
48
|
- use "Search for item, or enter term to create new one..." as default `placeholder` if `createNewItemFromQuery` is given
|
|
49
|
+
- `<SilkActivityControl />`
|
|
50
|
+
- interface of `initialStatus` property has been updated with the so far missing `lastUpdateTime` property. If you run in problems because of that you could use `Date.now()` as fix. Or consider to use `<ActivityControlWidget />` directly, what is probably even better.
|
|
51
|
+
- `<Depiction />`
|
|
52
|
+
- opcaity is reduced automatically when element is used as icon in a disabled `<Button />`
|
|
45
53
|
|
|
46
54
|
### Deprecated
|
|
47
55
|
|
|
@@ -44,7 +44,7 @@ const colorDecideContrastvalue_1 = __importDefault(require("./../../common/utils
|
|
|
44
44
|
* Display a graphical representation and attache a caption or a badge to it.
|
|
45
45
|
*/
|
|
46
46
|
function Depiction(_a) {
|
|
47
|
-
var { className = "", image, forceInlineSvg = false, size = "medium", resizing = "cover", ratio = "source", caption, captionPosition = "none", backgroundColor, border, rounded, padding = "none", badge, tooltipProps } = _a, otherFigureProps = __rest(_a, ["className", "image", "forceInlineSvg", "size", "resizing", "ratio", "caption", "captionPosition", "backgroundColor", "border", "rounded", "padding", "badge", "tooltipProps"]);
|
|
47
|
+
var { className = "", image, forceInlineSvg = false, size = "medium", resizing = "cover", ratio = "source", caption, captionPosition = "none", backgroundColor, border, rounded, padding = "none", disabled, badge, tooltipProps } = _a, otherFigureProps = __rest(_a, ["className", "image", "forceInlineSvg", "size", "resizing", "ratio", "caption", "captionPosition", "backgroundColor", "border", "rounded", "padding", "disabled", "badge", "tooltipProps"]);
|
|
48
48
|
const containerRef = (0, react_1.useRef)(null);
|
|
49
49
|
let styleDepictionColors = Object.create(null);
|
|
50
50
|
if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
|
|
@@ -56,6 +56,7 @@ function Depiction(_a) {
|
|
|
56
56
|
};
|
|
57
57
|
}
|
|
58
58
|
catch (ex) {
|
|
59
|
+
// eslint-disable-next-line no-console
|
|
59
60
|
console.warn("Received invalid background color for depiction: " + backgroundColor);
|
|
60
61
|
}
|
|
61
62
|
}
|
|
@@ -101,7 +102,8 @@ function Depiction(_a) {
|
|
|
101
102
|
(backgroundColor ? ` ${constants_1.CLASSPREFIX}-depiction__image--color-config` : "") +
|
|
102
103
|
(border ? ` ${constants_1.CLASSPREFIX}-depiction__image--hasborder` : "") +
|
|
103
104
|
(rounded ? ` ${constants_1.CLASSPREFIX}-depiction__image--roundedborder` : "") +
|
|
104
|
-
(padding && padding !== "none" ? ` ${constants_1.CLASSPREFIX}-depiction__image--padding-${padding}` : "")
|
|
105
|
+
(padding && padding !== "none" ? ` ${constants_1.CLASSPREFIX}-depiction__image--padding-${padding}` : "") +
|
|
106
|
+
(disabled ? ` ${constants_1.CLASSPREFIX}-depiction__image--disabled` : ""), style: styleDepictionColors }, depiction));
|
|
105
107
|
return (react_1.default.createElement("figure", Object.assign({ className: `${constants_1.CLASSPREFIX}-depiction` + (className ? ` ${className}` : "") }, otherFigureProps),
|
|
106
108
|
captionPosition === "tooltip" && !!caption ? (react_1.default.createElement(Tooltip_1.default, Object.assign({ content: caption, size: "medium" }, tooltipProps), depictionContainer)) : (depictionContainer),
|
|
107
109
|
!!caption && (react_1.default.createElement("figcaption", { className: `${constants_1.CLASSPREFIX}-depiction__caption` + ` ${constants_1.CLASSPREFIX}-depiction__caption--${captionPosition}` }, caption)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Depiction.js","sourceRoot":"","sources":["../../../../src/components/Depiction/Depiction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8D;AAC9D,sEAAkC;AAClC,kDAA0B;AAE1B,6DAAsE;AAItE,iEAA2D;AAE3D,6GAAqF;
|
|
1
|
+
{"version":3,"file":"Depiction.js","sourceRoot":"","sources":["../../../../src/components/Depiction/Depiction.tsx"],"names":[],"mappings":"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"}
|
|
@@ -31,7 +31,7 @@ import decideContrastColorValue from "./../../common/utils/colorDecideContrastva
|
|
|
31
31
|
*/
|
|
32
32
|
export function Depiction(_a) {
|
|
33
33
|
var _b;
|
|
34
|
-
var _c = _a.className, className = _c === void 0 ? "" : _c, image = _a.image, _d = _a.forceInlineSvg, forceInlineSvg = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "medium" : _e, _f = _a.resizing, resizing = _f === void 0 ? "cover" : _f, _g = _a.ratio, ratio = _g === void 0 ? "source" : _g, caption = _a.caption, _h = _a.captionPosition, captionPosition = _h === void 0 ? "none" : _h, backgroundColor = _a.backgroundColor, border = _a.border, rounded = _a.rounded, _j = _a.padding, padding = _j === void 0 ? "none" : _j, badge = _a.badge, tooltipProps = _a.tooltipProps, otherFigureProps = __rest(_a, ["className", "image", "forceInlineSvg", "size", "resizing", "ratio", "caption", "captionPosition", "backgroundColor", "border", "rounded", "padding", "badge", "tooltipProps"]);
|
|
34
|
+
var _c = _a.className, className = _c === void 0 ? "" : _c, image = _a.image, _d = _a.forceInlineSvg, forceInlineSvg = _d === void 0 ? false : _d, _e = _a.size, size = _e === void 0 ? "medium" : _e, _f = _a.resizing, resizing = _f === void 0 ? "cover" : _f, _g = _a.ratio, ratio = _g === void 0 ? "source" : _g, caption = _a.caption, _h = _a.captionPosition, captionPosition = _h === void 0 ? "none" : _h, backgroundColor = _a.backgroundColor, border = _a.border, rounded = _a.rounded, _j = _a.padding, padding = _j === void 0 ? "none" : _j, disabled = _a.disabled, badge = _a.badge, tooltipProps = _a.tooltipProps, otherFigureProps = __rest(_a, ["className", "image", "forceInlineSvg", "size", "resizing", "ratio", "caption", "captionPosition", "backgroundColor", "border", "rounded", "padding", "disabled", "badge", "tooltipProps"]);
|
|
35
35
|
var containerRef = useRef(null);
|
|
36
36
|
var styleDepictionColors = Object.create(null);
|
|
37
37
|
if (!!backgroundColor && backgroundColor !== "light" && backgroundColor !== "dark") {
|
|
@@ -43,6 +43,7 @@ export function Depiction(_a) {
|
|
|
43
43
|
_b);
|
|
44
44
|
}
|
|
45
45
|
catch (ex) {
|
|
46
|
+
// eslint-disable-next-line no-console
|
|
46
47
|
console.warn("Received invalid background color for depiction: " + backgroundColor);
|
|
47
48
|
}
|
|
48
49
|
}
|
|
@@ -88,7 +89,8 @@ export function Depiction(_a) {
|
|
|
88
89
|
(backgroundColor ? " ".concat(eccgui, "-depiction__image--color-config") : "") +
|
|
89
90
|
(border ? " ".concat(eccgui, "-depiction__image--hasborder") : "") +
|
|
90
91
|
(rounded ? " ".concat(eccgui, "-depiction__image--roundedborder") : "") +
|
|
91
|
-
(padding && padding !== "none" ? " ".concat(eccgui, "-depiction__image--padding-").concat(padding) : "")
|
|
92
|
+
(padding && padding !== "none" ? " ".concat(eccgui, "-depiction__image--padding-").concat(padding) : "") +
|
|
93
|
+
(disabled ? " ".concat(eccgui, "-depiction__image--disabled") : ""), style: styleDepictionColors }, depiction));
|
|
92
94
|
return (React.createElement("figure", __assign({ className: "".concat(eccgui, "-depiction") + (className ? " ".concat(className) : "") }, otherFigureProps),
|
|
93
95
|
captionPosition === "tooltip" && !!caption ? (React.createElement(Tooltip, __assign({ content: caption, size: "medium" }, tooltipProps), depictionContainer)) : (depictionContainer),
|
|
94
96
|
!!caption && (React.createElement("figcaption", { className: "".concat(eccgui, "-depiction__caption") + " ".concat(eccgui, "-depiction__caption--").concat(captionPosition) }, caption)),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Depiction.js","sourceRoot":"","sources":["../../../../src/components/Depiction/Depiction.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,GAAG,MAAM,iBAAiB,CAAC;AAClC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAItE,OAAO,OAAyB,MAAM,oBAAoB,CAAC;AAE3D,OAAO,wBAAwB,MAAM,+CAA+C,CAAC;
|
|
1
|
+
{"version":3,"file":"Depiction.js","sourceRoot":"","sources":["../../../../src/components/Depiction/Depiction.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ export interface IActivityStatus {
|
|
|
7
7
|
failed: boolean;
|
|
8
8
|
statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
|
|
9
9
|
progress: number;
|
|
10
|
-
lastUpdateTime:
|
|
10
|
+
lastUpdateTime: number;
|
|
11
11
|
message: string;
|
|
12
12
|
cancelled: boolean;
|
|
13
13
|
concreteStatus: ConcreteActivityStatus;
|
|
@@ -48,6 +48,12 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
48
48
|
* The amount of padding is defined relative to the depiction size, so a small padding on a small depiction is displayed smaller than a small padding on a large depiction.
|
|
49
49
|
*/
|
|
50
50
|
padding?: "none" | "tiny" | "small" | "medium" | "large";
|
|
51
|
+
/**
|
|
52
|
+
* Reduce opacity to let it appear as inactive.
|
|
53
|
+
* Even if it is no form control element it could be used inside one.
|
|
54
|
+
* Use this property if the `disabled` state there is not adapted automatically to the depiction.
|
|
55
|
+
*/
|
|
56
|
+
disabled?: boolean;
|
|
51
57
|
/**
|
|
52
58
|
* Description of the depiction.
|
|
53
59
|
*/
|
|
@@ -68,4 +74,4 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
68
74
|
/**
|
|
69
75
|
* Display a graphical representation and attache a caption or a badge to it.
|
|
70
76
|
*/
|
|
71
|
-
export declare function Depiction({ className, image, forceInlineSvg, size, resizing, ratio, caption, captionPosition, backgroundColor, border, rounded, padding, badge, tooltipProps, ...otherFigureProps }: DepictionProps): React.JSX.Element;
|
|
77
|
+
export declare function Depiction({ className, image, forceInlineSvg, size, resizing, ratio, caption, captionPosition, backgroundColor, border, rounded, padding, disabled, badge, tooltipProps, ...otherFigureProps }: DepictionProps): React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eccenca/gui-elements",
|
|
3
3
|
"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
|
|
4
|
-
"version": "23.7.0-rc.
|
|
4
|
+
"version": "23.7.0-rc.4",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"homepage": "https://github.com/eccenca/gui-elements",
|
|
7
7
|
"bugs": "https://github.com/eccenca/gui-elements/issues",
|
|
@@ -16,8 +16,8 @@ export interface IActivityStatus {
|
|
|
16
16
|
statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
|
|
17
17
|
// A number between 0 and 100
|
|
18
18
|
progress: number;
|
|
19
|
-
// timestamp for last update
|
|
20
|
-
lastUpdateTime:
|
|
19
|
+
// timestamp for last update
|
|
20
|
+
lastUpdateTime: number;
|
|
21
21
|
// More information corresponding to the status
|
|
22
22
|
message: string;
|
|
23
23
|
// If the activity has been cancelled
|
|
@@ -56,6 +56,12 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
|
|
|
56
56
|
* The amount of padding is defined relative to the depiction size, so a small padding on a small depiction is displayed smaller than a small padding on a large depiction.
|
|
57
57
|
*/
|
|
58
58
|
padding?: "none" | "tiny" | "small" | "medium" | "large";
|
|
59
|
+
/**
|
|
60
|
+
* Reduce opacity to let it appear as inactive.
|
|
61
|
+
* Even if it is no form control element it could be used inside one.
|
|
62
|
+
* Use this property if the `disabled` state there is not adapted automatically to the depiction.
|
|
63
|
+
*/
|
|
64
|
+
disabled?: boolean;
|
|
59
65
|
/**
|
|
60
66
|
* Description of the depiction.
|
|
61
67
|
*/
|
|
@@ -90,6 +96,7 @@ export function Depiction({
|
|
|
90
96
|
border,
|
|
91
97
|
rounded,
|
|
92
98
|
padding = "none",
|
|
99
|
+
disabled,
|
|
93
100
|
badge,
|
|
94
101
|
tooltipProps,
|
|
95
102
|
...otherFigureProps
|
|
@@ -105,6 +112,7 @@ export function Depiction({
|
|
|
105
112
|
[`--${eccgui}-depiction-color`]: decideContrastColorValue({ testColor: color }),
|
|
106
113
|
};
|
|
107
114
|
} catch (ex) {
|
|
115
|
+
// eslint-disable-next-line no-console
|
|
108
116
|
console.warn("Received invalid background color for depiction: " + backgroundColor);
|
|
109
117
|
}
|
|
110
118
|
}
|
|
@@ -171,7 +179,8 @@ export function Depiction({
|
|
|
171
179
|
(backgroundColor ? ` ${eccgui}-depiction__image--color-config` : "") +
|
|
172
180
|
(border ? ` ${eccgui}-depiction__image--hasborder` : "") +
|
|
173
181
|
(rounded ? ` ${eccgui}-depiction__image--roundedborder` : "") +
|
|
174
|
-
(padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : "")
|
|
182
|
+
(padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : "") +
|
|
183
|
+
(disabled ? ` ${eccgui}-depiction__image--disabled` : "")
|
|
175
184
|
}
|
|
176
185
|
style={styleDepictionColors as React.CSSProperties}
|
|
177
186
|
>
|
|
@@ -21,6 +21,20 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
21
21
|
& + .#{$eccgui}-overviewitem__description {
|
|
22
22
|
margin-left: mini-units(1);
|
|
23
23
|
}
|
|
24
|
+
|
|
25
|
+
.#{$ns}-button & {
|
|
26
|
+
.#{$eccgui}-icon:first-child:last-child {
|
|
27
|
+
margin-right: 0;
|
|
28
|
+
margin-left: 0;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.#{$ns}-button &:first-child {
|
|
33
|
+
margin-left: -($pt-button-height - $pt-icon-size-standard) * 0.5;
|
|
34
|
+
}
|
|
35
|
+
.#{$ns}-button &:last-child {
|
|
36
|
+
margin-right: -($pt-button-height - $pt-icon-size-standard) * 0.5;
|
|
37
|
+
}
|
|
24
38
|
}
|
|
25
39
|
|
|
26
40
|
.#{$eccgui}-depiction__image {
|
|
@@ -35,6 +49,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
35
49
|
height: 100%;
|
|
36
50
|
}
|
|
37
51
|
|
|
52
|
+
*:disabled & {
|
|
53
|
+
img,
|
|
54
|
+
svg:not(.#{$eccgui}-icon) {
|
|
55
|
+
opacity: $eccgui-opacity-disabled;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
38
59
|
.#{$eccgui}-icon {
|
|
39
60
|
vertical-align: initial;
|
|
40
61
|
}
|
|
@@ -53,6 +74,10 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
|
|
|
53
74
|
}
|
|
54
75
|
}
|
|
55
76
|
|
|
77
|
+
.#{$eccgui}-depiction__image--disabled {
|
|
78
|
+
opacity: $eccgui-opacity-disabled;
|
|
79
|
+
}
|
|
80
|
+
|
|
56
81
|
.#{$eccgui}-depiction__image--ratio-source {
|
|
57
82
|
aspect-ratio: auto;
|
|
58
83
|
|
|
@@ -3,7 +3,8 @@ import { loremIpsum } from "react-lorem-ipsum";
|
|
|
3
3
|
import { Meta, StoryFn } from "@storybook/react";
|
|
4
4
|
|
|
5
5
|
import { helpersArgTypes } from "../../../.storybook/helpers";
|
|
6
|
-
import { Button, MenuItem, Select } from "../../index";
|
|
6
|
+
import { Button, Depiction, MenuItem, Select } from "../../index";
|
|
7
|
+
import { FullExample as DepictionExample } from "../Depiction/stories/Depiction.stories";
|
|
7
8
|
|
|
8
9
|
export default {
|
|
9
10
|
title: "Forms/Select",
|
|
@@ -32,7 +33,15 @@ Default.args = {
|
|
|
32
33
|
return <MenuItem text={item.label} title={item.label} />;
|
|
33
34
|
},
|
|
34
35
|
fill: true,
|
|
35
|
-
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Using a `Depiction` element instead of a simple `icon` name
|
|
40
|
+
*/
|
|
41
|
+
export const UsingDepictionAsIcon = Template.bind({});
|
|
42
|
+
UsingDepictionAsIcon.args = {
|
|
43
|
+
...Default.args,
|
|
44
|
+
icon: <Depiction {...DepictionExample.args} size="tiny" resizing="cover" ratio="1:1" />,
|
|
36
45
|
};
|
|
37
46
|
|
|
38
47
|
/**
|