From b23c136cbe6e31d5ced6189b22fdf065af190b4f Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Fri, 26 Feb 2021 15:36:05 +0700
Subject: [PATCH] added button tooltips

---
 .../comment/CommentForm/styles.module.scss    |  2 +
 .../CommentFormFormatButtons/index.tsx        | 15 +++++++
 .../styles.module.scss                        |  1 -
 src/components/input/Button/index.tsx         | 43 +++++++++++++++++--
 .../input/Button/styles.module.scss           | 19 ++++++++
 5 files changed, 75 insertions(+), 5 deletions(-)

diff --git a/src/components/comment/CommentForm/styles.module.scss b/src/components/comment/CommentForm/styles.module.scss
index 37719a51..dd978bde 100644
--- a/src/components/comment/CommentForm/styles.module.scss
+++ b/src/components/comment/CommentForm/styles.module.scss
@@ -19,6 +19,8 @@
 .buttons {
   @include outer_shadow();
 
+  position: relative;
+  z-index: 1;
   display: flex;
   flex-direction: row;
   background: transparentize(black, 0.8);
diff --git a/src/components/comment/CommentFormFormatButtons/index.tsx b/src/components/comment/CommentFormFormatButtons/index.tsx
index 390b9e77..de39bbe0 100644
--- a/src/components/comment/CommentFormFormatButtons/index.tsx
+++ b/src/components/comment/CommentFormFormatButtons/index.tsx
@@ -24,6 +24,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         color="gray"
         iconOnly
         type="button"
+        label="Жирный"
       />
 
       <Button
@@ -33,6 +34,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         color="gray"
         iconOnly
         type="button"
+        label="Наклонный"
       />
 
       <Button
@@ -42,6 +44,7 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         color="gray"
         iconOnly
         type="button"
+        label="Заголовок"
       />
 
       <Button
@@ -51,7 +54,19 @@ const CommentFormFormatButtons: FC<IProps> = ({ element, handler }) => {
         color="gray"
         iconOnly
         type="button"
+        label="Ссылка"
       />
+
+      <Button
+        onClick={wrap('// ')}
+        size="small"
+        color="gray"
+        iconOnly
+        type="button"
+        label="Коммент"
+      >
+        {`/ /`}
+      </Button>
     </ButtonGroup>
   );
 };
diff --git a/src/components/comment/CommentFormFormatButtons/styles.module.scss b/src/components/comment/CommentFormFormatButtons/styles.module.scss
index 55e5b2ee..738e46e6 100644
--- a/src/components/comment/CommentFormFormatButtons/styles.module.scss
+++ b/src/components/comment/CommentFormFormatButtons/styles.module.scss
@@ -4,5 +4,4 @@
   display: flex;
   flex-wrap: wrap;
   height: 32px;
-  overflow: hidden;
 }
diff --git a/src/components/input/Button/index.tsx b/src/components/input/Button/index.tsx
index 7b9d8a8c..b480ef8d 100644
--- a/src/components/input/Button/index.tsx
+++ b/src/components/input/Button/index.tsx
@@ -1,8 +1,16 @@
 import classnames from 'classnames';
-import React, { ButtonHTMLAttributes, DetailedHTMLProps, FC, createElement, memo } from 'react';
+import React, {
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  FC,
+  createElement,
+  memo,
+  useRef,
+} from 'react';
 import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IIcon } from '~/redux/types';
+import { usePopper } from 'react-popper';
 
 type IButtonProps = DetailedHTMLProps<
   ButtonHTMLAttributes<HTMLButtonElement>,
@@ -19,6 +27,7 @@ type IButtonProps = DetailedHTMLProps<
   is_loading?: boolean;
   stretchy?: boolean;
   iconOnly?: boolean;
+  label?: string;
 };
 
 const Button: FC<IButtonProps> = memo(
@@ -37,9 +46,24 @@ const Button: FC<IButtonProps> = memo(
     stretchy,
     disabled,
     iconOnly,
+    label,
+    ref,
     ...props
-  }) =>
-    createElement(
+  }) => {
+    const tooltip = useRef<HTMLSpanElement>();
+    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], {
@@ -58,8 +82,19 @@ const Button: FC<IButtonProps> = memo(
         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}
+            {...pop.attributes.popper}
+          >
+            {label}
+          </span>
+        ),
       ]
-    )
+    );
+  }
 );
 
 export { Button };
diff --git a/src/components/input/Button/styles.module.scss b/src/components/input/Button/styles.module.scss
index a2fd301e..c3ee1e0c 100644
--- a/src/components/input/Button/styles.module.scss
+++ b/src/components/input/Button/styles.module.scss
@@ -10,6 +10,7 @@
 }
 
 .button {
+  position: relative;
   height: $input_height;
   border: none;
   box-sizing: border-box;
@@ -235,3 +236,21 @@
   width: 20px;
   height: 20px;
 }
+
+.tooltip {
+  padding: 5px 10px;
+  background-color: darken($content_bg, 4%);
+  z-index: 2;
+  border-radius: $input_radius;
+  text-transform: none;
+  opacity: 0;
+  pointer-events: none;
+  touch-action: none;
+  transition: opacity 0.1s;
+  border: 1px solid transparentize(white, 0.9);
+
+  .button:hover & {
+    opacity: 1;
+    font: $font_14_semibold;
+  }
+}