@eccenca/gui-elements 24.1.0-rc.2 → 24.1.0-rc.3

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 (9) hide show
  1. package/CHANGELOG.md +3 -1
  2. package/dist/cjs/components/Label/Label.js +7 -3
  3. package/dist/cjs/components/Label/Label.js.map +1 -1
  4. package/dist/esm/components/Label/Label.js +7 -3
  5. package/dist/esm/components/Label/Label.js.map +1 -1
  6. package/dist/types/components/Label/Label.d.ts +5 -1
  7. package/package.json +1 -1
  8. package/src/components/Label/Label.stories.tsx +2 -1
  9. package/src/components/Label/Label.tsx +13 -1
package/CHANGELOG.md CHANGED
@@ -8,7 +8,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
8
8
 
9
9
  ### Added
10
10
 
11
- - `CntentGroup` component
11
+ - `ContentGroup` component
12
12
  - Manage display of a grouped content section.
13
13
  - Add info, actions and context annotations by using its properties.
14
14
  - Can be nested into each other.
@@ -18,6 +18,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
18
18
  - editor is focused on load if `autoFocus` prop is set to `true`
19
19
  - implemented support for `disabled` state in code editor
20
20
  - implemented support for `intent` states in code editor
21
+ - `<Label />`
22
+ - added `additionalElements` property to display elements at the end of the label
21
23
 
22
24
  ## [24.0.1] - 2025-02-06
23
25
 
package/dist/cjs/components/Label/Label.js CHANGED
@@ -18,9 +18,10 @@ exports.Label = void 0;
18
18
  const react_1 = __importDefault(require("react"));
19
19
  const constants_1 = require("../../configuration/constants");
20
20
  const Icon_1 = __importDefault(require("../Icon/Icon"));
21
+ const Spacing_1 = __importDefault(require("../Separation/Spacing"));
21
22
  const Tooltip_1 = __importDefault(require("../Tooltip/Tooltip"));
22
23
  const Label = (_a) => {
23
- var { children, className = "", disabled, text, info, tooltip, tooltipProps, isLayoutForElement = "label", emphasis = "normal" } = _a, otherLabelProps = __rest(_a, ["children", "className", "disabled", "text", "info", "tooltip", "tooltipProps", "isLayoutForElement", "emphasis"]);
24
+ var { children, className = "", disabled, text, info, tooltip, tooltipProps, isLayoutForElement = "label", emphasis = "normal", additionalElements } = _a, otherLabelProps = __rest(_a, ["children", "className", "disabled", "text", "info", "tooltip", "tooltipProps", "isLayoutForElement", "emphasis", "additionalElements"]);
24
25
  let htmlElementstring = isLayoutForElement;
25
26
  htmlElementstring = disabled && htmlElementstring === "label" ? "span" : htmlElementstring;
26
27
  const labelContent = (react_1.default.createElement(react_1.default.Fragment, null,
@@ -29,8 +30,11 @@ const Label = (_a) => {
29
30
  tooltip && (react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-label__tooltip` },
30
31
  react_1.default.createElement(Tooltip_1.default, Object.assign({ content: tooltip, disabled: disabled }, tooltipProps),
31
32
  react_1.default.createElement(Icon_1.default, { name: "item-info", small: true })))),
32
- children && react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-label__other` }, children)));
33
- return !!text || !!info || !!tooltip || !!children ? (react_1.default.createElement(htmlElementstring, Object.assign({ className: `${constants_1.CLASSPREFIX}-label ${constants_1.CLASSPREFIX}-label--${emphasis}` +
33
+ children && react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-label__other` }, children),
34
+ additionalElements && (react_1.default.createElement(react_1.default.Fragment, null,
35
+ react_1.default.createElement(Spacing_1.default, { vertical: true, size: "tiny" }),
36
+ additionalElements))));
37
+ return !!text || !!info || !!tooltip || !!children || !!additionalElements ? (react_1.default.createElement(htmlElementstring, Object.assign({ className: `${constants_1.CLASSPREFIX}-label ${constants_1.CLASSPREFIX}-label--${emphasis}` +
34
38
  (className ? " " + className : "") +
35
39
  (disabled ? ` ${constants_1.CLASSPREFIX}-label--disabled` : "") }, otherLabelProps), labelContent)) : (react_1.default.createElement(react_1.default.Fragment, null));
36
40
  };
package/dist/cjs/components/Label/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,6DAAsE;AACtE,wDAAgC;AAChC,iEAA2D;AAkCpD,MAAM,KAAK,GAAG,CAAC,EAWT,EAAE,EAAE;QAXK,EAClB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,kBAAkB,GAAG,OAAO,EAC5B,QAAQ,GAAG,QAAQ,OAEV,EADN,eAAe,cAVA,kHAWrB,CADqB;IAElB,IAAI,iBAAiB,GAAG,kBAAkB,CAAC;IAC3C,iBAAiB,GAAG,QAAQ,IAAI,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAE3F,MAAM,YAAY,GAAG,CACjB;QACK,IAAI,IAAI,wCAAM,SAAS,EAAE,GAAG,uBAAM,cAAc,IAAG,IAAI,CAAQ;QAC/D,IAAI,IAAI,wCAAM,SAAS,EAAE,GAAG,uBAAM,cAAc,IAAG,IAAI,CAAQ;QAC/D,OAAO,IAAI,CACR,wCAAM,SAAS,EAAE,GAAG,uBAAM,iBAAiB;YACvC,8BAAC,iBAAO,kBAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAAM,YAAY;gBAC3D,8BAAC,cAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,SAAG,CACzB,CACP,CACV;QACA,QAAQ,IAAI,wCAAM,SAAS,EAAE,GAAG,uBAAM,eAAe,IAAG,QAAQ,CAAQ,CAC1E,CACN,CAAC;IAEF,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjD,eAAK,CAAC,aAAa,CACf,iBAAiB,kBAEb,SAAS,EACL,GAAG,uBAAM,UAAU,uBAAM,WAAW,QAAQ,EAAE;YAC9C,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,uBAAM,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,IAC/C,eAAe,GAEtB,YAAY,CACf,CACJ,CAAC,CAAC,CAAC,CACA,6DAAK,CACR,CAAC;AACN,CAAC,CAAC;AA7CW,QAAA,KAAK,SA6ChB;AAEF,kBAAe,aAAK,CAAC"}
1
+ {"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAE1B,6DAAsE;AACtE,wDAAgC;AAChC,oEAA4C;AAC5C,iEAA2D;AAsCpD,MAAM,KAAK,GAAG,CAAC,EAYT,EAAE,EAAE;QAZK,EAClB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,kBAAkB,GAAG,OAAO,EAC5B,QAAQ,GAAG,QAAQ,EACnB,kBAAkB,OAET,EADN,eAAe,cAXA,wIAYrB,CADqB;IAElB,IAAI,iBAAiB,GAAG,kBAAkB,CAAC;IAC3C,iBAAiB,GAAG,QAAQ,IAAI,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAE3F,MAAM,YAAY,GAAG,CACjB;QACK,IAAI,IAAI,wCAAM,SAAS,EAAE,GAAG,uBAAM,cAAc,IAAG,IAAI,CAAQ;QAC/D,IAAI,IAAI,wCAAM,SAAS,EAAE,GAAG,uBAAM,cAAc,IAAG,IAAI,CAAQ;QAC/D,OAAO,IAAI,CACR,wCAAM,SAAS,EAAE,GAAG,uBAAM,iBAAiB;YACvC,8BAAC,iBAAO,kBAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAAM,YAAY;gBAC3D,8BAAC,cAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,SAAG,CACzB,CACP,CACV;QACA,QAAQ,IAAI,wCAAM,SAAS,EAAE,GAAG,uBAAM,eAAe,IAAG,QAAQ,CAAQ;QACxE,kBAAkB,IAAI,CACnB;YACI,8BAAC,iBAAO,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,GAAG;YAC/B,kBAAkB,CACpB,CACN,CACF,CACN,CAAC;IAEF,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACzE,eAAK,CAAC,aAAa,CACf,iBAAiB,kBAEb,SAAS,EACL,GAAG,uBAAM,UAAU,uBAAM,WAAW,QAAQ,EAAE;YAC9C,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,uBAAM,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,IAC/C,eAAe,GAEtB,YAAY,CACf,CACJ,CAAC,CAAC,CAAC,CACA,6DAAK,CACR,CAAC;AACN,CAAC,CAAC;AApDW,QAAA,KAAK,SAoDhB;AAEF,kBAAe,aAAK,CAAC"}
package/dist/esm/components/Label/Label.js CHANGED
@@ -23,9 +23,10 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import React from "react";
24
24
  import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
25
25
  import Icon from "../Icon/Icon.js";
26
+ import Spacing from "../Separation/Spacing.js";
26
27
  import Tooltip from "../Tooltip/Tooltip.js";
27
28
  export var Label = function (_a) {
28
- var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, disabled = _a.disabled, text = _a.text, info = _a.info, tooltip = _a.tooltip, tooltipProps = _a.tooltipProps, _c = _a.isLayoutForElement, isLayoutForElement = _c === void 0 ? "label" : _c, _d = _a.emphasis, emphasis = _d === void 0 ? "normal" : _d, otherLabelProps = __rest(_a, ["children", "className", "disabled", "text", "info", "tooltip", "tooltipProps", "isLayoutForElement", "emphasis"]);
29
+ var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, disabled = _a.disabled, text = _a.text, info = _a.info, tooltip = _a.tooltip, tooltipProps = _a.tooltipProps, _c = _a.isLayoutForElement, isLayoutForElement = _c === void 0 ? "label" : _c, _d = _a.emphasis, emphasis = _d === void 0 ? "normal" : _d, additionalElements = _a.additionalElements, otherLabelProps = __rest(_a, ["children", "className", "disabled", "text", "info", "tooltip", "tooltipProps", "isLayoutForElement", "emphasis", "additionalElements"]);
29
30
  var htmlElementstring = isLayoutForElement;
30
31
  htmlElementstring = disabled && htmlElementstring === "label" ? "span" : htmlElementstring;
31
32
  var labelContent = (React.createElement(React.Fragment, null,
@@ -34,8 +35,11 @@ export var Label = function (_a) {
34
35
  tooltip && (React.createElement("span", { className: "".concat(eccgui, "-label__tooltip") },
35
36
  React.createElement(Tooltip, __assign({ content: tooltip, disabled: disabled }, tooltipProps),
36
37
  React.createElement(Icon, { name: "item-info", small: true })))),
37
- children && React.createElement("span", { className: "".concat(eccgui, "-label__other") }, children)));
38
- return !!text || !!info || !!tooltip || !!children ? (React.createElement(htmlElementstring, __assign({ className: "".concat(eccgui, "-label ").concat(eccgui, "-label--").concat(emphasis) +
38
+ children && React.createElement("span", { className: "".concat(eccgui, "-label__other") }, children),
39
+ additionalElements && (React.createElement(React.Fragment, null,
40
+ React.createElement(Spacing, { vertical: true, size: "tiny" }),
41
+ additionalElements))));
42
+ return !!text || !!info || !!tooltip || !!children || !!additionalElements ? (React.createElement(htmlElementstring, __assign({ className: "".concat(eccgui, "-label ").concat(eccgui, "-label--").concat(emphasis) +
39
43
  (className ? " " + className : "") +
40
44
  (disabled ? " ".concat(eccgui, "-label--disabled") : "") }, otherLabelProps), labelContent)) : (React.createElement(React.Fragment, null));
41
45
  };
package/dist/esm/components/Label/Label.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,OAAyB,MAAM,oBAAoB,CAAC;AAkC3D,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAWT;IAVT,IAAA,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,0BAA4B,EAA5B,kBAAkB,mBAAG,OAAO,KAAA,EAC5B,gBAAmB,EAAnB,QAAQ,mBAAG,QAAQ,KAAA,EAChB,eAAe,cAVA,kHAWrB,CADqB;IAElB,IAAI,iBAAiB,GAAG,kBAAkB,CAAC;IAC3C,iBAAiB,GAAG,QAAQ,IAAI,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAE3F,IAAM,YAAY,GAAG,CACjB;QACK,IAAI,IAAI,8BAAM,SAAS,EAAE,UAAG,MAAM,iBAAc,IAAG,IAAI,CAAQ;QAC/D,IAAI,IAAI,8BAAM,SAAS,EAAE,UAAG,MAAM,iBAAc,IAAG,IAAI,CAAQ;QAC/D,OAAO,IAAI,CACR,8BAAM,SAAS,EAAE,UAAG,MAAM,oBAAiB;YACvC,oBAAC,OAAO,aAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAAM,YAAY;gBAC3D,oBAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,SAAG,CACzB,CACP,CACV;QACA,QAAQ,IAAI,8BAAM,SAAS,EAAE,UAAG,MAAM,kBAAe,IAAG,QAAQ,CAAQ,CAC1E,CACN,CAAC;IAEF,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CACjD,KAAK,CAAC,aAAa,CACf,iBAAiB,aAEb,SAAS,EACL,UAAG,MAAM,oBAAU,MAAM,qBAAW,QAAQ,CAAE;YAC9C,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAI,MAAM,qBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,IAC/C,eAAe,GAEtB,YAAY,CACf,CACJ,CAAC,CAAC,CAAC,CACA,yCAAK,CACR,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
1
+ {"version":3,"file":"Label.js","sourceRoot":"","sources":["../../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,WAAW,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AACtE,OAAO,IAAI,MAAM,cAAc,CAAC;AAChC,OAAO,OAAO,MAAM,uBAAuB,CAAC;AAC5C,OAAO,OAAyB,MAAM,oBAAoB,CAAC;AAsC3D,MAAM,CAAC,IAAM,KAAK,GAAG,UAAC,EAYT;IAXT,IAAA,QAAQ,cAAA,EACR,iBAAc,EAAd,SAAS,mBAAG,EAAE,KAAA,EACd,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,YAAY,kBAAA,EACZ,0BAA4B,EAA5B,kBAAkB,mBAAG,OAAO,KAAA,EAC5B,gBAAmB,EAAnB,QAAQ,mBAAG,QAAQ,KAAA,EACnB,kBAAkB,wBAAA,EACf,eAAe,cAXA,wIAYrB,CADqB;IAElB,IAAI,iBAAiB,GAAG,kBAAkB,CAAC;IAC3C,iBAAiB,GAAG,QAAQ,IAAI,iBAAiB,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC;IAE3F,IAAM,YAAY,GAAG,CACjB;QACK,IAAI,IAAI,8BAAM,SAAS,EAAE,UAAG,MAAM,iBAAc,IAAG,IAAI,CAAQ;QAC/D,IAAI,IAAI,8BAAM,SAAS,EAAE,UAAG,MAAM,iBAAc,IAAG,IAAI,CAAQ;QAC/D,OAAO,IAAI,CACR,8BAAM,SAAS,EAAE,UAAG,MAAM,oBAAiB;YACvC,oBAAC,OAAO,aAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,IAAM,YAAY;gBAC3D,oBAAC,IAAI,IAAC,IAAI,EAAC,WAAW,EAAC,KAAK,SAAG,CACzB,CACP,CACV;QACA,QAAQ,IAAI,8BAAM,SAAS,EAAE,UAAG,MAAM,kBAAe,IAAG,QAAQ,CAAQ;QACxE,kBAAkB,IAAI,CACnB;YACI,oBAAC,OAAO,IAAC,QAAQ,QAAC,IAAI,EAAC,MAAM,GAAG;YAC/B,kBAAkB,CACpB,CACN,CACF,CACN,CAAC;IAEF,OAAO,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,CACzE,KAAK,CAAC,aAAa,CACf,iBAAiB,aAEb,SAAS,EACL,UAAG,MAAM,oBAAU,MAAM,qBAAW,QAAQ,CAAE;YAC9C,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YAClC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAI,MAAM,qBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,IAC/C,eAAe,GAEtB,YAAY,CACf,CACJ,CAAC,CAAC,CAAC,CACA,yCAAK,CACR,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/dist/types/components/Label/Label.d.ts CHANGED
@@ -30,6 +30,10 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
30
30
  * visual appearance of the label
31
31
  */
32
32
  emphasis?: "strong" | "normal";
33
+ /**
34
+ * Add other elements to the end of the label content
35
+ */
36
+ additionalElements?: React.ReactNode | React.ReactNode[];
33
37
  }
34
- export declare const Label: ({ children, className, disabled, text, info, tooltip, tooltipProps, isLayoutForElement, emphasis, ...otherLabelProps }: LabelProps) => React.JSX.Element;
38
+ export declare const Label: ({ children, className, disabled, text, info, tooltip, tooltipProps, isLayoutForElement, emphasis, additionalElements, ...otherLabelProps }: LabelProps) => React.JSX.Element;
35
39
  export default Label;
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": "24.1.0-rc.2",
4
+ "version": "24.1.0-rc.3",
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",
package/src/components/Label/Label.stories.tsx CHANGED
@@ -2,7 +2,7 @@ import React from "react";
2
2
  import { loremIpsum } from "react-lorem-ipsum";
3
3
  import { Meta, StoryFn } from "@storybook/react";
4
4
 
5
- import { Label } from "../../index";
5
+ import { Icon, Label } from "../../index";
6
6
 
7
7
  export default {
8
8
  title: "Forms/Label",
@@ -19,4 +19,5 @@ Default.args = {
19
19
  tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
20
20
  disabled: false,
21
21
  htmlFor: "inputid",
22
+ additionalElements: <Icon name={"state-warning"} tooltipText={"message"} small />,
22
23
  };
package/src/components/Label/Label.tsx CHANGED
@@ -2,6 +2,7 @@ import React from "react";
2
2
 
3
3
  import { CLASSPREFIX as eccgui } from "../../configuration/constants";
4
4
  import Icon from "../Icon/Icon";
5
+ import Spacing from "../Separation/Spacing";
5
6
  import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
6
7
 
7
8
  export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -34,6 +35,10 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
34
35
  * visual appearance of the label
35
36
  */
36
37
  emphasis?: "strong" | "normal";
38
+ /**
39
+ * Add other elements to the end of the label content
40
+ */
41
+ additionalElements?: React.ReactNode | React.ReactNode[];
37
42
  }
38
43
 
39
44
  export const Label = ({
@@ -46,6 +51,7 @@ export const Label = ({
46
51
  tooltipProps,
47
52
  isLayoutForElement = "label",
48
53
  emphasis = "normal",
54
+ additionalElements,
49
55
  ...otherLabelProps
50
56
  }: LabelProps) => {
51
57
  let htmlElementstring = isLayoutForElement;
@@ -63,10 +69,16 @@ export const Label = ({
63
69
  </span>
64
70
  )}
65
71
  {children && <span className={`${eccgui}-label__other`}>{children}</span>}
72
+ {additionalElements && (
73
+ <>
74
+ <Spacing vertical size="tiny" />
75
+ {additionalElements}
76
+ </>
77
+ )}
66
78
  </>
67
79
  );
68
80
 
69
- return !!text || !!info || !!tooltip || !!children ? (
81
+ return !!text || !!info || !!tooltip || !!children || !!additionalElements ? (
70
82
  React.createElement(
71
83
  htmlElementstring,
72
84
  {