feat: add multiline property to Label component

gravity-ui · Sep 10, 2024 · f5e7525 · f5e7525
1 parent c8e1ebb
commit f5e7525
Show file tree

Hide file tree

Showing 10 changed files with 151 additions and 9 deletions.
diff --git 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: 5px;
+            --_--label-padding-on-multiline: 2px;
+        }
+
         &_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;
+        }
+    }
 }
diff --git 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 && (
-        <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,
                 )}

diff --git a/....visual.test.tsx-snapshots/Label-render-story-Multiline-dark-chromium-linux.png b/....visual.test.tsx-snapshots/Label-render-story-Multiline-dark-chromium-linux.png
diff --git a/...el.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-webkit-linux.png b/...el.visual.test.tsx-snapshots/Label-render-story-Multiline-dark-webkit-linux.png
diff --git a/...visual.test.tsx-snapshots/Label-render-story-Multiline-light-chromium-linux.png b/...visual.test.tsx-snapshots/Label-render-story-Multiline-light-chromium-linux.png
diff --git a/...l.visual.test.tsx-snapshots/Label-render-story-Multiline-light-webkit-linux.png b/...l.visual.test.tsx-snapshots/Label-render-story-Multiline-light-webkit-linux.png
diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx
@@ -159,3 +159,15 @@ export const ShowcaseStory: Story = {
     render: () => <LabelShowcase />,
     name: 'Showcase',
 };
+
+export const Multiline: Story = {
+    render: (args) => (
+        <div style={{width: 75}}>
+            <Label {...args} />
+        </div>
+    ),
+    args: {
+        children: 'Multiline label',
+        multiline: true,
+    },
+};
diff --git a/src/components/Label/__stories__/LabelShowcase.scss b/src/components/Label/__stories__/LabelShowcase.scss
@@ -14,9 +14,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
@@ -79,8 +79,84 @@ export function LabelShowcase(args: LabelProps) {
             },
             {children: 'Key', value: 'Value', type: 'close', closeButtonLabel: 'Close'},
             {icon: icons('TickIcon', props.size)},
+            {
+                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,
+            },
         ];
-        return cases.map((label, i) => getLabel({key: i, ...props, ...label}));
+        return cases.map((label, i) => (
+            <div style={{width: 'auto'}} key={i}>
+                {getLabel({key: i, ...props, ...label})}
+            </div>
+        ));
     };
 
     return (

diff --git 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: <Multiline>', async ({mount, expectScreenshot}) => {
+        await mount(<LabelStories.Multiline />);
+
+        await expectScreenshot();
+    });
 });