From 3769e4b6e174dc476663fb885499a7e46637c588 Mon Sep 17 00:00:00 2001 From: Anda Spanu Date: Mon, 10 Feb 2025 16:58:32 +0200 Subject: [PATCH 1/5] added actions property to label --- src/components/Label/Label.tsx | 12 ++++++++++++ .../stories/PropertyName.stories.tsx | 18 +++++++++++++++++- 2 files changed, 29 insertions(+), 1 deletion(-) diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 880678c34..c5587d152 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"; + /** + * Include elements to the action footer, e.g. buttons. + */ + actions?: React.ReactNode | React.ReactNode[]; } export const Label = ({ @@ -46,6 +51,7 @@ export const Label = ({ tooltipProps, isLayoutForElement = "label", emphasis = "normal", + actions, ...otherLabelProps }: LabelProps) => { let htmlElementstring = isLayoutForElement; @@ -63,6 +69,12 @@ export const Label = ({ )} {children && {children}} + {actions && ( + <> + + {actions} + + )} ); diff --git a/src/components/PropertyValuePair/stories/PropertyName.stories.tsx b/src/components/PropertyValuePair/stories/PropertyName.stories.tsx index 931855549..858b44881 100644 --- a/src/components/PropertyValuePair/stories/PropertyName.stories.tsx +++ b/src/components/PropertyValuePair/stories/PropertyName.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { loremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { PropertyName } from "../../../index"; +import { Icon, PropertyName } from "../../../index"; export default { title: "Components/PropertyValuePair/Name", @@ -16,3 +16,19 @@ export const Default = Template.bind({}); Default.args = { children: loremIpsum({ p: 1, avgSentencesPerParagraph: 1, avgWordsPerSentence: 4, random: false }).toString(), }; + +export const EmphasisLabel = Template.bind({}); +EmphasisLabel.args = { + ...Default.args, + labelProps: { + emphasis: "strong", + }, +}; + +export const RightIconabel = Template.bind({}); +RightIconabel.args = { + ...Default.args, + labelProps: { + actions: , + }, +}; From 012a70b22f3ba299b392f20707f8c36b81e11373 Mon Sep 17 00:00:00 2001 From: Anda Spanu Date: Mon, 10 Feb 2025 17:13:11 +0200 Subject: [PATCH 2/5] small fix --- src/components/Label/Label.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index c5587d152..24ab298ba 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -36,7 +36,7 @@ export interface LabelProps extends React.LabelHTMLAttributes */ emphasis?: "strong" | "normal"; /** - * Include elements to the action footer, e.g. buttons. + * Include elements to the right of the label */ actions?: React.ReactNode | React.ReactNode[]; } From ea671147eb2e5dd234be7ecfd09c6d64d15d9ae7 Mon Sep 17 00:00:00 2001 From: Anda Spanu Date: Tue, 11 Feb 2025 16:05:14 +0200 Subject: [PATCH 3/5] fixes --- src/components/Label/Label.tsx | 10 +++++----- .../stories/PropertyName.stories.tsx | 15 +-------------- 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index 24ab298ba..e344937c7 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -36,9 +36,9 @@ export interface LabelProps extends React.LabelHTMLAttributes */ emphasis?: "strong" | "normal"; /** - * Include elements to the right of the label + * Add other elements to the end of the label content */ - actions?: React.ReactNode | React.ReactNode[]; + additionalElements?: React.ReactNode | React.ReactNode[]; } export const Label = ({ @@ -51,7 +51,7 @@ export const Label = ({ tooltipProps, isLayoutForElement = "label", emphasis = "normal", - actions, + additionalElements, ...otherLabelProps }: LabelProps) => { let htmlElementstring = isLayoutForElement; @@ -69,10 +69,10 @@ export const Label = ({ )} {children && {children}} - {actions && ( + {additionalElements && ( <> - {actions} + {additionalElements} )} diff --git a/src/components/PropertyValuePair/stories/PropertyName.stories.tsx b/src/components/PropertyValuePair/stories/PropertyName.stories.tsx index 858b44881..e9fcad47d 100644 --- a/src/components/PropertyValuePair/stories/PropertyName.stories.tsx +++ b/src/components/PropertyValuePair/stories/PropertyName.stories.tsx @@ -15,20 +15,7 @@ const Template: StoryFn = (args) => , + additionalElements: , }, }; From 5aae727349bf32ebd630c0e963ac2d138b7cbd99 Mon Sep 17 00:00:00 2001 From: Anda Spanu Date: Wed, 12 Feb 2025 15:54:36 +0200 Subject: [PATCH 4/5] fixes --- CHANGELOG.md | 2 ++ src/components/Label/Label.stories.tsx | 3 ++- .../PropertyValuePair/stories/PropertyName.stories.tsx | 5 +---- 3 files changed, 5 insertions(+), 5 deletions(-) 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/PropertyValuePair/stories/PropertyName.stories.tsx b/src/components/PropertyValuePair/stories/PropertyName.stories.tsx index e9fcad47d..931855549 100644 --- a/src/components/PropertyValuePair/stories/PropertyName.stories.tsx +++ b/src/components/PropertyValuePair/stories/PropertyName.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { loremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { Icon, PropertyName } from "../../../index"; +import { PropertyName } from "../../../index"; export default { title: "Components/PropertyValuePair/Name", @@ -15,7 +15,4 @@ const Template: StoryFn = (args) => , - }, }; From d2e61e0a711fda031f4a0f528f2cb1b9b5f57480 Mon Sep 17 00:00:00 2001 From: Anda Spanu Date: Thu, 13 Feb 2025 11:56:16 +0200 Subject: [PATCH 5/5] fix --- src/components/Label/Label.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx index e344937c7..790bc6817 100644 --- a/src/components/Label/Label.tsx +++ b/src/components/Label/Label.tsx @@ -78,7 +78,7 @@ export const Label = ({ ); - return !!text || !!info || !!tooltip || !!children ? ( + return !!text || !!info || !!tooltip || !!children || !!additionalElements ? ( React.createElement( htmlElementstring, {