Merge pull request #247 from eccenca/feature/extend-label-with-actions-CMEM-5332

Extend label by option to add other elements (CMEM-6112)

Author: haschek

CHANGELOG.md

@@ -18,6 +18,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
     -   editor is focused on load if `autoFocus` prop is set to `true`
     -   implemented support for `disabled` state in code editor
     -   implemented support for `intent` states in code editor
+-   `Label` component
+    -   added `additionalElements` property to display elements at the end of the label
 
 ## [24.0.1] - 2025-02-06
 

src/components/Label/Label.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { Label } from "../../index";
+import { Icon, Label } from "../../index";
 
 export default {
     title: "Forms/Label",
@@ -19,4 +19,5 @@ Default.args = {
     tooltip: loremIpsum({ p: 1, avgSentencesPerParagraph: 2, startWithLoremIpsum: false, random: false }).toString(),
     disabled: false,
     htmlFor: "inputid",
+    additionalElements: <Icon name={"state-warning"} tooltipText={"message"} small />,
 };

src/components/Label/Label.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import Icon from "../Icon/Icon";
+import Spacing from "../Separation/Spacing";
 import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
@@ -34,6 +35,10 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
      * visual appearance of the label
      */
     emphasis?: "strong" | "normal";
+    /**
+     * Add other elements to the end of the label content
+     */
+    additionalElements?: React.ReactNode | React.ReactNode[];
 }
 
 export const Label = ({
@@ -46,6 +51,7 @@ export const Label = ({
     tooltipProps,
     isLayoutForElement = "label",
     emphasis = "normal",
+    additionalElements,
     ...otherLabelProps
 }: LabelProps) => {
     let htmlElementstring = isLayoutForElement;
@@ -63,10 +69,16 @@ export const Label = ({
                 </span>
             )}
             {children && <span className={`${eccgui}-label__other`}>{children}</span>}
+            {additionalElements && (
+                <>
+                    <Spacing vertical size="tiny" />
+                    {additionalElements}
+                </>
+            )}
         </>
     );
 
-    return !!text || !!info || !!tooltip || !!children ? (
+    return !!text || !!info || !!tooltip || !!children || !!additionalElements ? (
         React.createElement(
             htmlElementstring,
             {