fix(info_icon): fix info_icon size and usage in several components (#264)

Author: ehsan-github

src/components/callout/index.tsx

@@ -40,9 +40,13 @@ const Callout: FC<ICalloutProps> = ({
       alignItems="center"
       maxWidth={cta ? '80%' : '100%'}
     >
-      <Box mt="-2px" mb="-3px" mr="8px">
-        <GetIcon color={calloutColors[type]} icon={IconName.info_block} />
-      </Box>
+      <GetIcon
+        size="sm"
+        mr="12px"
+        ml="5px"
+        color={calloutColors[type]}
+        icon={IconName.info_block}
+      />
       <Box as="pre">
         <Text
           width="100%"

src/components/code-input/index.stories.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import { InputProps } from '.';
 import CodeInput from '.';
 
-
 export default {
   title: 'Quartz/CodeInput',
   component: CodeInput,
@@ -104,6 +103,7 @@ Default.args = {
   label: 'Label',
   mode: 'javascript',
   value: 'const a = 100;',
+  tooltipInfo: 'some tooltip',
   onChange: action('Input change'),
 };
 

src/components/code-input/index.tsx

@@ -62,9 +62,7 @@ const CodeInput: FC<InputProps> = forwardRef(
         )}
         {tooltipInfo && (
           <Tooltip mainText={tooltipInfo}>
-            <Box mt="-6px" mb="-3px">
-              <GetIcon icon={IconName.info_block} />
-            </Box>
+            <GetIcon mt="3px" ml="3px" size="xs" icon={IconName.info_block} />
           </Tooltip>
         )}
       </Flex>

src/components/icon/list.tsx

@@ -1038,14 +1038,14 @@ export function getIcon(
         <svg
           width={size}
           height={size}
-          viewBox="0 0 24 24"
+          viewBox="0 0 12 12"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
             fillRule="evenodd"
             clipRule="evenodd"
-            d="M12 18C15.3137 18 18 15.3137 18 12C18 8.68629 15.3137 6 12 6C8.68629 6 6 8.68629 6 12C6 15.3137 8.68629 18 12 18ZM11.8465 16.3637C11.3908 16.3637 11.0214 15.9943 11.0214 15.5385V11.2384C11.0214 10.7827 11.3908 10.4133 11.8465 10.4133C12.3022 10.4133 12.6717 10.7827 12.6717 11.2384V15.5385C12.6717 15.9943 12.3022 16.3637 11.8465 16.3637ZM12.7453 8.80947C12.7453 9.27047 12.3424 9.64624 11.8504 9.64624C11.3623 9.64624 10.9594 9.27047 10.9594 8.80947C10.9594 8.35234 11.3623 7.97656 11.8504 7.97656C12.3424 7.97656 12.7453 8.35234 12.7453 8.80947Z"
+            d="M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12ZM5.84651 10.3637C5.39079 10.3637 5.02136 9.99427 5.02136 9.53855V5.23844C5.02136 4.78272 5.39079 4.41329 5.84651 4.41329C6.30223 4.41329 6.67167 4.78272 6.67167 5.23844V9.53855C6.67167 9.99427 6.30223 10.3637 5.84651 10.3637ZM6.74527 2.80947C6.74527 3.27047 6.34238 3.64624 5.85039 3.64624C5.36227 3.64624 4.95937 3.27047 4.95937 2.80947C4.95937 2.35234 5.36227 1.97656 5.85039 1.97656C6.34238 1.97656 6.74527 2.35234 6.74527 2.80947Z"
             fill={color}
           />
         </svg>
@@ -1681,16 +1681,21 @@ export function getIcon(
       );
     case IconName.grafana:
       return (
-        <svg  width={size}  height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width={size}
+          height={size}
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             fillRule="evenodd"
             clipRule="evenodd"
             d="M15.9703 8.228C15.9391 7.93346 15.8935 7.59309 15.8007 7.22146C15.708 6.84982 15.5537 6.44691 15.353 6.01345C15.137 5.59527 14.8747 5.14582 14.5197 4.72764C14.3806 4.55746 14.2262 4.40255 14.0719 4.23236C14.319 3.25636 13.7785 2.40473 13.7785 2.40473C12.8372 2.34291 12.2511 2.69927 12.0351 2.85418C12.004 2.83891 11.9583 2.82291 11.9272 2.80764C11.7728 2.74582 11.6033 2.684 11.4337 2.62145C11.2642 2.57491 11.0939 2.51309 10.9244 2.48182C10.7548 2.43527 10.5693 2.40473 10.3846 2.37345C10.3534 2.37345 10.323 2.35818 10.2918 2.35818C9.89041 1.05709 8.71805 0.5 8.71805 0.5C7.37542 1.36764 7.11312 2.52909 7.11312 2.52909C7.11312 2.52909 7.11312 2.56036 7.09791 2.59091C7.0211 2.60618 6.95879 2.63745 6.88199 2.65273C6.78924 2.684 6.68128 2.71455 6.58853 2.76109C6.49579 2.80764 6.38783 2.83818 6.29508 2.88473C6.09438 2.97782 5.90961 3.07091 5.7089 3.17927C5.52323 3.28356 5.34306 3.39741 5.1691 3.52036C5.13794 3.50509 5.12272 3.48909 5.12272 3.48909C3.31709 2.79236 1.71289 3.62873 1.71289 3.62873C1.57377 5.56473 2.43818 6.77273 2.60773 6.98946C2.56136 7.11309 2.53093 7.22146 2.48456 7.34582C2.34703 7.78538 2.24883 8.23638 2.19111 8.69346C2.17589 8.75527 2.17589 8.83309 2.15995 8.89491C0.493434 9.716 0 11.4193 0 11.4193C1.389 13.0302 3.02436 13.1233 3.02436 13.1233C3.22868 13.4952 3.46636 13.8477 3.73444 14.1764C3.84241 14.316 3.96558 14.4396 4.08948 14.5793C3.58011 16.0353 4.16629 17.2585 4.16629 17.2585C5.72484 17.3204 6.74287 16.5771 6.95879 16.4069L7.42179 16.5465C7.90001 16.6702 8.39417 16.748 8.87238 16.7633H9.50494C10.2302 17.8164 11.5265 17.956 11.5265 17.956C12.4366 16.98 12.4989 16.0353 12.4989 15.8185V15.8033V15.772V15.7255C12.6844 15.5858 12.8691 15.4469 13.0546 15.292C13.4249 14.9669 13.7335 14.5793 14.011 14.1771C14.0422 14.1458 14.0574 14.1 14.0879 14.0687C15.1218 14.1305 15.8471 13.4185 15.8471 13.4185C15.6776 12.3342 15.0602 11.8076 14.9371 11.7145L14.9218 11.6993L14.9066 11.684L14.8914 11.6687C14.8914 11.6069 14.9066 11.5451 14.9066 11.4673C14.9218 11.3436 14.9218 11.2353 14.9218 11.1109V10.956V10.7545V10.6615C14.9218 10.6302 14.9218 10.5996 14.9066 10.5684L14.8755 10.3822C14.8602 10.2585 14.8291 10.1502 14.8139 10.0258C14.7063 9.56775 14.5294 9.12895 14.2893 8.72473C14.0476 8.33337 13.7514 7.97874 13.4097 7.67164C13.0784 7.37775 12.7037 7.1373 12.2989 6.95891C11.9139 6.77921 11.5022 6.66399 11.0802 6.61782C10.8794 6.58655 10.6635 6.58655 10.4628 6.58655H10.3701H10.1542C10.0462 6.60182 9.93823 6.61782 9.84548 6.63309C9.42885 6.71018 9.04338 6.86509 8.70356 7.06655C8.36373 7.268 8.07101 7.53127 7.82393 7.82509C7.58446 8.10453 7.3963 8.42439 7.26818 8.76982C7.145 9.09491 7.06748 9.45127 7.05226 9.77636V10.148C7.05226 10.1945 7.05226 10.2251 7.06748 10.2716C7.11546 10.7486 7.2915 11.2036 7.57685 11.588C7.76234 11.836 7.96232 12.0215 8.19419 12.1764C8.42532 12.3313 8.65719 12.4396 8.90427 12.5175C9.15134 12.5953 9.38248 12.6258 9.5984 12.6105H9.92156C9.95272 12.6105 9.98315 12.5953 9.99837 12.5953C10.0295 12.5953 10.0447 12.58 10.0752 12.58C10.1215 12.5647 10.1831 12.5487 10.2295 12.5335C10.3223 12.5022 10.415 12.4564 10.507 12.4251C10.5998 12.3785 10.6766 12.332 10.7382 12.2855C10.7534 12.2702 10.7845 12.2542 10.7997 12.2389C10.8183 12.2249 10.8338 12.2072 10.8454 12.1871C10.857 12.1669 10.8645 12.1446 10.8674 12.1215C10.8703 12.0984 10.8686 12.0749 10.8623 12.0525C10.856 12.0301 10.8454 12.0091 10.8309 11.9909C10.801 11.9615 10.7633 11.9414 10.7222 11.9332C10.6812 11.9249 10.6386 11.9288 10.5998 11.9444C10.5845 11.9596 10.5686 11.9596 10.5382 11.9756C10.4741 12.0082 10.4069 12.0341 10.3375 12.0527C10.2607 12.068 10.1831 12.0993 10.1063 12.1145C10.06 12.1145 10.0295 12.1298 9.98315 12.1298H9.72158C9.72158 12.1298 9.70637 12.1298 9.72158 12.1298H9.65927C9.64333 12.1298 9.6129 12.1298 9.59768 12.1145C9.42813 12.0833 9.24264 12.0375 9.07309 11.9596C8.90354 11.8818 8.73327 11.7735 8.59487 11.6345C8.44054 11.4949 8.31736 11.34 8.2094 11.1545C8.10144 10.9691 8.03985 10.7676 8.00869 10.5662C7.99348 10.4578 7.97754 10.3495 7.99348 10.2411V10.148C7.99348 10.1633 7.99348 10.148 7.99348 10.148V10.1167V10.0702C7.99348 10.0084 8.00869 9.96182 8.02463 9.9C8.10611 9.4212 8.33879 8.98138 8.68834 8.64546C8.78109 8.55236 8.87383 8.47527 8.98179 8.41346C9.08976 8.33636 9.19772 8.27382 9.30568 8.22727C9.41364 8.18073 9.53682 8.13418 9.66072 8.10364C9.7839 8.07236 9.9078 8.04182 10.031 8.04182C10.0926 8.04182 10.1542 8.02655 10.2165 8.02655H10.3396C10.3549 8.02655 10.3396 8.02655 10.3396 8.02655H10.4012C10.8129 8.06105 11.2127 8.18249 11.5743 8.38291C12.0677 8.66146 12.4844 9.07964 12.7315 9.59091C12.8546 9.83891 12.9474 10.1175 12.9938 10.412C13.009 10.4891 13.009 10.5516 13.0249 10.6287V11.0316C13.0249 11.1087 13.0097 11.1865 13.0097 11.2636C12.9945 11.3407 12.9945 11.4185 12.9785 11.4956L12.9322 11.7276C12.9169 11.8047 12.8394 12.0222 12.793 12.1771C12.7467 12.332 12.5307 12.7502 12.3453 12.9982C11.9704 13.5129 11.4712 13.9234 10.8947 14.1909C10.6012 14.3145 10.3085 14.4229 9.99982 14.4695C9.84741 14.5004 9.69231 14.516 9.53682 14.516H9.30568C9.32089 14.516 9.30568 14.516 9.30568 14.516H9.29046C9.21366 14.516 9.12091 14.516 9.04338 14.5007C8.70356 14.4695 8.37967 14.4076 8.05579 14.3145C7.73191 14.2215 7.42324 14.0978 7.12979 13.9429C6.54189 13.6254 6.02271 13.1937 5.60239 12.6731C5.40168 12.4098 5.21692 12.1313 5.06258 11.8367C4.90825 11.5422 4.80029 11.2324 4.70754 10.9233C4.61732 10.6108 4.56549 10.2884 4.55321 9.96327V9.60691V9.48327C4.55321 9.32836 4.56843 9.15818 4.59958 8.988C4.6148 8.81782 4.64596 8.66291 4.67639 8.49273C4.70682 8.32255 4.75319 8.16764 4.79956 7.99746C4.84594 7.82727 5.00027 7.36255 5.13939 7.068C5.4169 6.47964 5.77194 5.95309 6.18857 5.53491C6.29653 5.42655 6.40449 5.33346 6.52839 5.24036C6.57477 5.19382 6.68273 5.10073 6.8059 5.02364C6.92908 4.94655 7.05298 4.86873 7.19138 4.80691C7.25297 4.77564 7.31455 4.74509 7.39208 4.71382C7.42324 4.69855 7.45367 4.68255 7.50004 4.66727C7.5312 4.652 7.56163 4.636 7.60801 4.62073C7.74712 4.55891 7.88552 4.51236 8.02463 4.46582C8.05579 4.45055 8.10144 4.45055 8.1326 4.43455C8.16375 4.41855 8.2094 4.41927 8.24056 4.40327C8.27171 4.38727 8.37967 4.372 8.45648 4.34145C8.48764 4.32618 8.53328 4.32618 8.56444 4.31018C8.5956 4.31018 8.64125 4.29491 8.6724 4.29491C8.70356 4.29491 8.74921 4.27964 8.78036 4.27964L8.90354 4.24836C8.9347 4.24836 8.98035 4.23309 9.0115 4.23309C9.05787 4.23309 9.08831 4.21782 9.13468 4.21782C9.16584 4.21782 9.22742 4.20255 9.25786 4.20255C9.28829 4.20255 9.30423 4.20255 9.33466 4.18727H9.44262C9.48899 4.18727 9.51943 4.18727 9.5658 4.172H9.62739C9.62739 4.172 9.6426 4.172 9.62739 4.172H10.1984C10.4759 4.18727 10.7541 4.21855 11.0164 4.26509C11.5319 4.35505 12.0311 4.522 12.4974 4.76036C12.9309 4.97026 13.3355 5.23575 13.7009 5.55018C13.7161 5.56545 13.7473 5.58145 13.7625 5.612C13.7777 5.62727 13.8089 5.64327 13.8241 5.67382C13.8705 5.70509 13.9009 5.75091 13.9473 5.78218C13.9937 5.81346 14.0241 5.85927 14.0705 5.89055C14.1016 5.93709 14.1473 5.96764 14.1784 6.01418C14.5901 6.43846 14.9338 6.92423 15.1972 7.45418C15.2124 7.46946 15.2124 7.48546 15.2283 7.516C15.2435 7.53127 15.2435 7.54727 15.2595 7.57782C15.2754 7.60836 15.2906 7.65491 15.3211 7.68618C15.3363 7.71745 15.3522 7.76327 15.3674 7.79455C15.3827 7.82582 15.3986 7.87164 15.4138 7.90291C15.4754 8.04255 15.5218 8.18146 15.5682 8.32109C15.645 8.53782 15.6913 8.724 15.7377 8.87891C15.7462 8.90956 15.7644 8.93664 15.7894 8.95616C15.8145 8.97567 15.8451 8.98658 15.8768 8.98727C15.9536 8.98727 16 8.92546 16 8.84764C15.9848 8.66146 15.9848 8.46073 15.9688 8.228H15.9703Z"
             fill={color}
           />
         </svg>
-
-      )
+      );
     default:
       return <svg />;
   }

src/components/input/index.tsx

@@ -66,9 +66,7 @@ const Input: FC<InputProps> = forwardRef(
         )}
         {tooltipInfo && (
           <Tooltip mainText={tooltipInfo}>
-            <Box mt="-6px" mb="-3px">
-              <GetIcon icon={IconName.info_block}/>
-            </Box>
+            <GetIcon ml="3px" mt="3px" size="xs" icon={IconName.info_block} />
           </Tooltip>
         )}
       </Flex>
@@ -98,7 +96,9 @@ const Input: FC<InputProps> = forwardRef(
             placeholder={placeholder}
             {...props}
           />{' '}
-          {icon && <GetIcon icon={icon} color="gray" size="sm" sx={getIconStyle}/>}
+          {icon && (
+            <GetIcon icon={icon} color="gray" size="sm" sx={getIconStyle} />
+          )}
           {rightIcon && rightIcon}
         </Box>
         {info && <InputInfo intent={intent}>{info}</InputInfo>}

src/components/input/input.stories.tsx

@@ -153,6 +153,7 @@ Default.args = {
   label: 'Label',
   placeholder: 'Placeholder',
   onChange: action('Input change'),
+  tooltipInfo: 'tooltip info',
 };
 
 Default.argTypes = argTypes;

src/components/select2/index.tsx

@@ -166,9 +166,7 @@ const Select: FC<SelectProps> = ({
           justifyContent="space-between"
         >
           <Tooltip mainText={info}>
-            <Box mb="-3px">
-              <GetIcon size="md" icon={IconName.info_block} />
-            </Box>
+            <GetIcon mx="5px" mt="3px" size="xs" icon={IconName.info_block} />
           </Tooltip>
           {labelAction}
         </Flex>
@@ -252,7 +250,7 @@ const Select: FC<SelectProps> = ({
                         zIndex: 1,
                       }}
                     >
-                       <GetIcon size="md" color="gray" icon={IconName.glass} />
+                      <GetIcon size="md" color="gray" icon={IconName.glass} />
                     </Box>
                     <Input
                       pl="32px"