feat: add multiline property to Label component

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,13 +129,23 @@ $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);
             --_--margin-inline: 12px;
             --_--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;
+        }
+    }
 }

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 && (
-        <div className={b('addon', {side: hasContent ? 'start' : undefined, type: 'icon'})}>
+        <div
+            className={b('addon', {
+                side: hasContent ? 'start' : undefined,
+                type: 'icon',
+            })}
+        >
             {icon}
         </div>
     );
@@ -152,6 +160,7 @@ export const Label = React.forwardRef(function Label(
                         size,
                         interactive: isInteractive,
                         disabled,
+                        multiline,
                     },
                     className,
                 )}

src/components/Label/__stories__/Label.stories.tsx

@@ -155,7 +155,24 @@ export const LinkWrapper: Story = {
     },
 };
 
+export const Multiline: Story = {
+    render: (args) => (
+        <div style={{width: 75}}>
+            <Label {...args} />
+        </div>
+    ),
+    args: {
+        children: 'Multiline label',
+        multiline: true,
+    },
+};
+
 export const ShowcaseStory: Story = {
     render: () => <LabelShowcase />,
     name: 'Showcase',
 };
+
+export const MultilineShowcaseStory: Story = {
+    render: () => <LabelShowcase multiline />,
+    name: 'Showcase (multiline)',
+};

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;
-        }
     }
 }

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<LabelProps>) => <Label {...props} />;
@@ -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) => (
+            <div style={{width: 'auto'}} key={i}>
+                {getLabel({key: i, ...props, ...label})}
+            </div>
+        ));
     };
 
     return (

src/components/Label/__tests__/Label.visual.test.tsx

@@ -64,4 +64,10 @@ test.describe('Label', () => {
 
         await expectScreenshot();
     });
+
+    test('render story: <Multiline>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Multiline />);
+
+        await expectScreenshot();
+    });
 });