feat: add key-value for multiline

gravity-ui · Oct 1, 2024 · b42f46e · b42f46e
1 parent bbf7e2a
commit b42f46e
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 19 deletions.
diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -117,8 +117,8 @@ $transition-timing-function: ease-in-out;
         }
 
         &_xs.g-label_multiline {
-            --_--addon-padding-on-multiline: 5px;
-            --_--label-padding-on-multiline: 2px;
+            --_--addon-padding-on-multiline: 4px;
+            --_--label-padding-on-multiline: 1px;
         }
 
         &_s {

diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx
@@ -155,11 +155,6 @@ export const LinkWrapper: Story = {
     },
 };
 
-export const ShowcaseStory: Story = {
-    render: () => <LabelShowcase />,
-    name: 'Showcase',
-};
-
 export const Multiline: Story = {
     render: (args) => (
         <div style={{width: 75}}>
@@ -171,3 +166,13 @@ export const Multiline: Story = {
         multiline: true,
     },
 };
+
+export const ShowcaseStory: Story = {
+    render: () => <LabelShowcase />,
+    name: 'Showcase',
+};
+
+export const MultilineShowcaseStory: Story = {
+    render: () => <LabelShowcase multiline />,
+    name: 'Showcase (multiline)',
+};
diff --git 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 {

diff --git 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<LabelProps>) => <Label {...props} />;
@@ -79,6 +83,8 @@ export function LabelShowcase(args: LabelProps) {
             },
             {children: 'Key', value: 'Value', type: 'close', closeButtonLabel: 'Close'},
             {icon: icons('TickIcon', props.size)},
+        ];
+        const multilineCases: LabelProps[] = [
             {
                 children: 'Multiline ',
                 type: 'default',
@@ -151,8 +157,16 @@ export function LabelShowcase(args: LabelProps) {
                 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 cases.map((label, i) => (
+        return (multiline ? multilineCases : cases).map((label, i) => (
             <div style={{width: 'auto'}} key={i}>
                 {getLabel({key: i, ...props, ...label})}
             </div>