diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
index deec1e89d0..cd45ddefba 100644
--- a/src/components/Label/Label.scss
+++ b/src/components/Label/Label.scss
@@ -26,7 +26,7 @@ $transition-timing-function: ease-in-out;
&__text {
@include mixins.text-body-1();
- display: flex;
+ display: inline-flex;
align-items: baseline;
margin: 0 var(--_--margin-inline);
width: 100%;
@@ -64,12 +64,13 @@ $transition-timing-function: ease-in-out;
}
&__addon {
- display: flex;
+ display: inline-flex;
align-items: center;
justify-content: center;
width: var(--_--height);
- height: var(--_--height);
+ height: 100%;
border-radius: var(--_--border-radius);
+ box-sizing: border-box;
&_side_start,
&_side_end {
@@ -115,6 +116,11 @@ $transition-timing-function: ease-in-out;
--_--margin-addon-end: 22px;
}
+ &_xs.g-label_multiline {
+ --_--addon-padding-on-multiline: 4px;
+ --_--label-padding-on-multiline: 1px;
+ }
+
&_s {
--_--height: 24px;
--_--border-radius: var(--g-border-radius-s);
@@ -123,6 +129,11 @@ $transition-timing-function: ease-in-out;
--_--margin-addon-end: 26px;
}
+ &_s.g-label_multiline {
+ --_--addon-padding-on-multiline: 5px;
+ --_--label-padding-on-multiline: 3px;
+ }
+
&_m {
--_--height: 28px;
--_--border-radius: var(--g-border-radius-m);
@@ -130,6 +141,11 @@ $transition-timing-function: ease-in-out;
--_--margin-addon-start: 32px;
--_--margin-addon-end: 32px;
}
+
+ &_m.g-label_multiline {
+ --_--addon-padding-on-multiline: 6px;
+ --_--label-padding-on-multiline: 5px;
+ }
}
&_disabled {
@@ -212,4 +228,31 @@ $transition-timing-function: ease-in-out;
&__addon_type_button:focus-visible {
outline: 2px solid var(--g-color-line-focus);
}
+
+ &_multiline {
+ height: min-content;
+ padding-block: var(--_--label-padding-on-multiline);
+
+ #{$block}__text {
+ white-space: normal;
+ overflow: inherit;
+ text-align: start;
+ line-height: 18px;
+ }
+
+ #{$block}__addon_side_end,
+ #{$block}__addon_side_start {
+ padding: var(--_--addon-padding-on-multiline);
+ width: auto;
+ align-items: start;
+ }
+
+ #{$block}__addon_side_start {
+ inset-inline-start: 2px;
+ }
+
+ #{$block}__addon_side_end {
+ inset-inline-end: 0;
+ }
+ }
}
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index f217390805..8b9f95d4ae 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -56,6 +56,8 @@ export interface LabelProps extends QAProps {
size?: 'xs' | 's' | 'm';
/** Browser title for Label */
title?: string;
+ /** Multiline available */
+ multiline?: boolean;
}
export const Label = React.forwardRef(function Label(
@@ -80,6 +82,7 @@ export const Label = React.forwardRef(function Label(
onCopy,
onClick,
qa,
+ multiline,
} = props;
const hasContent = Boolean(children !== '' && React.Children.count(children) > 0);
@@ -92,7 +95,12 @@ export const Label = React.forwardRef(function Label(
const {copyIconSize, closeIconSize} = sizeMap[size];
const startIcon = icon && (
-
+
{icon}
);
@@ -152,6 +160,7 @@ export const Label = React.forwardRef(function Label(
size,
interactive: isInteractive,
disabled,
+ multiline,
},
className,
)}
diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-chromium-linux.png
new file mode 100644
index 0000000000..69845eb12b
Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-chromium-linux.png differ
diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-webkit-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-webkit-linux.png
new file mode 100644
index 0000000000..8492c3385e
Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-webkit-linux.png differ
diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-chromium-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-chromium-linux.png
new file mode 100644
index 0000000000..12c6fad34c
Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-chromium-linux.png differ
diff --git a/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-webkit-linux.png b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-webkit-linux.png
new file mode 100644
index 0000000000..1fd7ea80c0
Binary files /dev/null and b/src/components/Label/__snapshots__/Label.visual.test.tsx-snapshots/Label-render-story-Multiline-light-webkit-linux.png differ
diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx
index aac0960180..056de726cd 100644
--- a/src/components/Label/__stories__/Label.stories.tsx
+++ b/src/components/Label/__stories__/Label.stories.tsx
@@ -155,7 +155,24 @@ export const LinkWrapper: Story = {
},
};
+export const Multiline: Story = {
+ render: (args) => (
+
+
+
+ ),
+ args: {
+ children: 'Multiline label',
+ multiline: true,
+ },
+};
+
export const ShowcaseStory: Story = {
render: () =>
,
name: 'Showcase',
};
+
+export const MultilineShowcaseStory: Story = {
+ render: () =>
,
+ name: 'Showcase (multiline)',
+};
diff --git a/src/components/Label/__stories__/LabelShowcase.scss b/src/components/Label/__stories__/LabelShowcase.scss
index 506ce99bf0..adca29cf9e 100644
--- a/src/components/Label/__stories__/LabelShowcase.scss
+++ b/src/components/Label/__stories__/LabelShowcase.scss
@@ -4,6 +4,7 @@
.grid {
display: grid;
gap: 30px;
+ width: min-content;
}
.header {
@@ -14,9 +15,5 @@
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
- & > * {
- width: min-content;
- margin-inline-start: unset;
- }
}
}
diff --git a/src/components/Label/__stories__/LabelShowcase.tsx b/src/components/Label/__stories__/LabelShowcase.tsx
index 838ac5a8ca..71d91b7f69 100644
--- a/src/components/Label/__stories__/LabelShowcase.tsx
+++ b/src/components/Label/__stories__/LabelShowcase.tsx
@@ -22,17 +22,21 @@ const icons = (id: 'TickIcon' | 'GearIcon' | '-', size: 'xs' | 's' | 'm' = 'xs')
}[id];
};
-export function LabelShowcase(args: LabelProps) {
- const themes = [
- 'normal',
- 'info',
- 'success',
- 'warning',
- 'danger',
- 'utility',
- 'unknown',
- 'clear',
- ] as const;
+type LabelShowcaseProps = LabelProps & {multiline?: boolean};
+
+export function LabelShowcase({multiline, ...args}: LabelShowcaseProps) {
+ const themes = multiline
+ ? (['normal'] as const)
+ : ([
+ 'normal',
+ 'info',
+ 'success',
+ 'warning',
+ 'danger',
+ 'utility',
+ 'unknown',
+ 'clear',
+ ] as const);
const sizes = ['xs', 's', 'm'] as const;
const getLabel = ({...props}: WithKey
) => ;
@@ -80,7 +84,93 @@ export function LabelShowcase(args: LabelProps) {
{children: 'Key', value: 'Value', type: 'close', closeButtonLabel: 'Close'},
{icon: icons('TickIcon', props.size)},
];
- return cases.map((label, i) => getLabel({key: i, ...props, ...label}));
+ const multilineCases: LabelProps[] = [
+ {
+ children: 'Multiline ',
+ type: 'default',
+ multiline: true,
+ },
+ {
+ children: 'Multiline',
+ icon: icons('TickIcon', props.size),
+ type: 'default',
+ multiline: true,
+ },
+ {
+ children: 'Multiline',
+ type: 'close',
+ closeButtonLabel: 'Close',
+ multiline: true,
+ },
+ {
+ children: 'Multiline',
+ icon: icons('TickIcon', props.size),
+ type: 'close',
+ closeButtonLabel: 'Close',
+ multiline: true,
+ },
+ {
+ children: 'Multiline label short',
+ type: 'default',
+ multiline: true,
+ },
+ {
+ children: 'Multiline label short',
+ icon: icons('TickIcon', props.size),
+ type: 'default',
+ multiline: true,
+ },
+ {
+ children: 'Multiline label short',
+ type: 'close',
+ closeButtonLabel: 'Close',
+ multiline: true,
+ },
+ {
+ children: 'Multiline label short',
+ icon: icons('TickIcon', props.size),
+ type: 'close',
+ closeButtonLabel: 'Close',
+ multiline: true,
+ },
+ {
+ children: 'Multiline label very-very long',
+ type: 'default',
+ multiline: true,
+ },
+ {
+ children: 'Multiline label very-very long',
+ icon: icons('TickIcon', props.size),
+ type: 'default',
+ multiline: true,
+ },
+ {
+ children: 'Multiline label very-very long',
+ type: 'close',
+ closeButtonLabel: 'Close',
+ multiline: true,
+ },
+ {
+ children: 'Multiline label very-very long',
+ icon: icons('TickIcon', props.size),
+ type: 'close',
+ closeButtonLabel: 'Close',
+ multiline: true,
+ },
+ {
+ children: 'Multiline key-value label: key',
+ value: 'Multiline key-value label: value',
+ icon: icons('TickIcon', props.size),
+ type: 'close',
+ closeButtonLabel: 'Close',
+ multiline: true,
+ },
+ ];
+ return (multiline ? multilineCases : cases).map((label, i) => (
+
+ {getLabel({key: i, ...props, ...label})}
+
+ ));
};
return (
diff --git a/src/components/Label/__tests__/Label.visual.test.tsx b/src/components/Label/__tests__/Label.visual.test.tsx
index b13df3ea33..ddc2876905 100644
--- a/src/components/Label/__tests__/Label.visual.test.tsx
+++ b/src/components/Label/__tests__/Label.visual.test.tsx
@@ -64,4 +64,10 @@ test.describe('Label', () => {
await expectScreenshot();
});
+
+ test('render story: ', async ({mount, expectScreenshot}) => {
+ await mount();
+
+ await expectScreenshot();
+ });
});