fix(Label): actions icon size fix (#851)

Co-authored-by: Georgy Malkov <[email protected]>
gravity-ui · Aug 1, 2023 · 1bce6e4 · 1bce6e4
1 parent 6065c56
commit 1bce6e4
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 21 deletions.
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
@@ -17,8 +17,8 @@ type SizeMapType = {copyIconSize: number; closeIconSize: number; buttonSize: But
 
 const sizeMap: Record<string, SizeMapType> = {
     xs: {copyIconSize: 12, closeIconSize: 12, buttonSize: 'xs'},
-    s: {copyIconSize: 12, closeIconSize: 12, buttonSize: 's'},
-    m: {copyIconSize: 12, closeIconSize: 12, buttonSize: 'm'},
+    s: {copyIconSize: 14, closeIconSize: 14, buttonSize: 's'},
+    m: {copyIconSize: 16, closeIconSize: 16, buttonSize: 'm'},
 };
 
 const commonActionButtonProps: ButtonProps = {

diff --git a/src/components/Label/__stories__/LabelShowcase.tsx b/src/components/Label/__stories__/LabelShowcase.tsx
@@ -12,10 +12,14 @@ import './LabelShowcase.scss';
 const b = block('label-showcase');
 type WithKey<T> = T & {key: React.Key};
 
-const icons = {
-    '-': undefined,
-    TickIcon: <IconComponent size={12} data={Check} />,
-    GearIcon: <IconComponent size={12} data={Gear} />,
+const icons = (id: 'TickIcon' | 'GearIcon' | '-', size: 'xs' | 's' | 'm' = 'xs') => {
+    const sizes = {xs: 12, s: 14, m: 16} as const;
+
+    return {
+        '-': undefined,
+        TickIcon: <IconComponent size={sizes[size]} data={Check} />,
+        GearIcon: <IconComponent size={sizes[size]} data={Gear} />,
+    }[id];
 };
 
 export function LabelShowcase(args: LabelProps) {
@@ -26,19 +30,42 @@ export function LabelShowcase(args: LabelProps) {
 
     const section = (props: LabelProps) => {
         const cases: LabelProps[] = [
-            {children: 'Label', icon: icons['TickIcon'], type: 'default'},
+            {children: 'Label', icon: icons('TickIcon', props.size), type: 'default'},
             {children: 'Label', type: 'default'},
-            {children: 'Label', icon: icons['TickIcon'], type: 'copy'},
+            {
+                children: 'Label',
+                icon: icons('TickIcon', props.size),
+                type: 'copy',
+            },
             {children: 'Label', type: 'copy'},
-            {children: 'Label', icon: icons['TickIcon'], type: 'close'},
+            {
+                children: 'Label',
+                icon: icons('TickIcon', props.size),
+                type: 'close',
+            },
             {children: 'Label', type: 'close'},
-            {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'default'},
+            {
+                children: 'Key',
+                value: 'Value',
+                icon: icons('TickIcon', props.size),
+                type: 'default',
+            },
             {children: 'Key', value: 'Value', type: 'default'},
-            {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'copy'},
+            {
+                children: 'Key',
+                value: 'Value',
+                icon: icons('TickIcon', props.size),
+                type: 'copy',
+            },
             {children: 'Key', value: 'Value', type: 'copy'},
-            {children: 'Key', value: 'Value', icon: icons['TickIcon'], type: 'close'},
+            {
+                children: 'Key',
+                value: 'Value',
+                icon: icons('TickIcon', props.size),
+                type: 'close',
+            },
             {children: 'Key', value: 'Value', type: 'close'},
-            {icon: icons['TickIcon']},
+            {icon: icons('TickIcon', props.size)},
         ];
         return cases.map((label, i) => getLabel({key: i, ...props, ...label}));
     };

diff --git a/src/components/Label/__stories__/examples/LabelExampleView/LabelExampleView.tsx b/src/components/Label/__stories__/examples/LabelExampleView/LabelExampleView.tsx
@@ -73,27 +73,27 @@ export function LabelExampleViewIcon() {
     return (
         <Unstyled>
             <DocsExample>
-                <Label size="s" icon={<Icon size={16} data={Gear} />}>
+                <Label size="s" icon={<Icon size={14} data={Gear} />}>
                     Default with Icon
                 </Label>
-                <Label theme="info" size="s" icon={<Icon size={16} data={Gear} />}>
+                <Label theme="info" size="s" icon={<Icon size={14} data={Gear} />}>
                     Info with icon
                 </Label>
-                <Label type="close" size="s" icon={<Icon size={16} data={Gear} />}>
+                <Label type="close" size="s" icon={<Icon size={14} data={Gear} />}>
                     Close action and icon
                 </Label>
-                <Label size="m" icon={<Icon size={18} data={Gear} />}>
+                <Label size="m" icon={<Icon size={16} data={Gear} />}>
                     M-size icon
                 </Label>
             </DocsExample>
         </Unstyled>
     );
 }
 LabelExampleViewIcon.code = `
-<Label size="s" icon={<Icon size={16} data={GearIcon} />}>Default with icon</Label>
-<Label theme="info" size="s" icon={<Icon size={16} data={GearIcon} />}>Info with icon</Label>
-<Label type="close" size="s" icon={<Icon size={16} data={GearIcon} />}>Close action and icon</Label>
-<Label size="m" icon={<Icon data={GearIcon} />}>M-size icon</Label>
+<Label size="s" icon={<Icon size={14} data={GearIcon} />}>Default with icon</Label>
+<Label theme="info" size="s" icon={<Icon size={14} data={GearIcon} />}>Info with icon</Label>
+<Label type="close" size="s" icon={<Icon size={14} data={GearIcon} />}>Close action and icon</Label>
+<Label size="m" icon={<Icon size={16} data={GearIcon} />}>M-size icon</Label>
 `.trim();
 
 export function LabelExampleValue() {