diff --git a/CHANGELOG.md b/CHANGELOG.md index c4d48fe7a..144187220 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/components/Label/Label.stories.tsx b/src/components/Label/Label.stories.tsx index 2c1eeba1b..c6a30f206 100644 --- a/src/components/Label/Label.stories.tsx +++ b/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: , }; diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 880678c34..790bc6817 100644 --- a/src/components/Label/Label.tsx +++ b/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 { @@ -34,6 +35,10 @@ export interface LabelProps extends React.LabelHTMLAttributes * 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 = ({ )} {children && {children}} + {additionalElements && ( + <> + + {additionalElements} + + )} ); - return !!text || !!info || !!tooltip || !!children ? ( + return !!text || !!info || !!tooltip || !!children || !!additionalElements ? ( React.createElement( htmlElementstring, {