#23 lost fixes

src/components/input/Button/index.tsx

@@ -1,30 +1,20 @@
 import classnames from 'classnames';
-import React, {
-  ButtonHTMLAttributes,
-  DetailedHTMLProps,
-  FC,
-  createElement,
-  memo,
-  useRef,
-} from 'react';
+import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, memo, useMemo } from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
-import { usePopper } from 'react-popper';
+import Tippy from '@tippy.js/react';
+import 'tippy.js/dist/tippy.css';
 
 type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
   HTMLButtonElement
 > & {
   size?: 'mini' | 'normal' | 'big' | 'giant' | 'micro' | 'small';
-  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray';
+  color?: 'primary' | 'secondary' | 'outline' | 'link' | 'gray' | 'lab';
   iconLeft?: IIcon;
   iconRight?: IIcon;
-  seamless?: boolean;
-  transparent?: boolean;
   title?: string;
-  non_submitting?: boolean;
-  is_loading?: boolean;
   stretchy?: boolean;
   iconOnly?: boolean;
   label?: string;
@@ -39,10 +29,6 @@ const Button: FC<IButtonProps> = memo(
     iconLeft,
     iconRight,
     children,
-    seamless = false,
-    transparent = false,
-    non_submitting = false,
-    is_loading,
     title,
     stretchy,
     disabled,
@@ -52,45 +38,27 @@ const Button: FC<IButtonProps> = memo(
     round,
     ...props
   }) => {
-    const tooltip = useRef<HTMLSpanElement | null>(null);
-    const pop = usePopper(tooltip?.current?.parentElement, tooltip.current, {
-      placement: 'top',
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, 5],
-          },
-        },
-      ],
-    });
-
-    return createElement(
-      seamless || non_submitting ? 'div' : 'button',
-      {
-        className: classnames(styles.button, className, styles[size], styles[color], {
-          seamless,
-          transparent,
+    const computedClassName = useMemo(
+      () =>
+        classnames(styles.button, className, styles[size], styles[color], {
           disabled,
-          is_loading,
           stretchy,
           icon: ((iconLeft || iconRight) && !title && !children) || iconOnly,
           has_icon_left: !!iconLeft,
           has_icon_right: !!iconRight,
           round,
         }),
-        ...props,
-      },
-      [
-        iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />,
-        title ? <span>{title}</span> : children || null,
-        iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />,
-        !!label && (
-          <span ref={tooltip} className={styles.tooltip} style={pop.styles.popper} key="tooltip">
-            {label}
-          </span>
-        ),
-      ]
+      [round, disabled, className, stretchy, iconLeft, iconRight, size, color]
+    );
+
+    return (
+      <Tippy content={label || ''} enabled={!!label}>
+        <button className={computedClassName} {...props}>
+          {iconLeft && <Icon icon={iconLeft} size={20} key={0} className={styles.icon_left} />}
+          {!!title ? <span>{title}</span> : children}
+          {iconRight && <Icon icon={iconRight} size={20} key={2} className={styles.icon_right} />}
+        </button>
+      </Tippy>
     );
   }
 );