feat: disabled animation; updated readme file

gravity-ui · Dec 4, 2023 · cee757a · cee757a
1 parent ed45461
commit cee757a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/src/components/Tooltip/README.md b/src/components/Tooltip/README.md
@@ -22,7 +22,7 @@ import {Tooltip} from '@gravity-ui/uikit';
 | Name       | Description                                                                             |                       Type                       | Default |
 | :--------- | --------------------------------------------------------------------------------------- | :----------------------------------------------: | :-----: |
 | children   | An anchor element for a `Tooltip`. Must accept a `ref` that will provide a DOM element. |               `React.ReactElement`               |         |
-| content    | Content that will be shown in the `Tooltip`                                             |                `React.ReactNode`                 |         |
+| content    | Content that will be shown in the `Tooltip`                                             |                     `string`                     |         |
 | closeDelay | Number of ms to delay hiding the `Tooltip` after the hover ends                         |                     `number`                     |   `0`   |
 | openDelay  | Number of ms to delay showing the `Tooltip` after the hover begins                      |                     `number`                     |  `250`  |
 | placement  | `Tooltip` position relative to its anchor                                               | [`PopupPlacement`](../Popup/README.md#placement) |         |
diff --git a/src/components/Tooltip/Tooltip.scss b/src/components/Tooltip/Tooltip.scss
@@ -6,13 +6,16 @@ $block: '.#{variables.$ns}tooltip';
     // [class] for increasing specificity
     &[class] {
         --g-popup-border-width: 0;
-        --g-popup-background-color: var(--g-color-base-float);
 
         > div {
             padding: 4px 8px;
             max-width: 360px;
             box-sizing: border-box;
             box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
+
+            animation-duration: unset;
+            animation-timing-function: unset;
+            animation-fill-mode: unset;
         }
     }
 
@@ -36,7 +39,5 @@ $block: '.#{variables.$ns}tooltip';
 
         overflow: hidden;
         text-overflow: ellipsis;
-
-        color: var(--g-color-text-complementary);
     }
 }
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -4,6 +4,7 @@ import {KeyCode} from '../../constants';
 import {useForkRef} from '../../hooks';
 import {Popup} from '../Popup';
 import type {PopupPlacement} from '../Popup';
+import {Text} from '../Text';
 import type {DOMProps} from '../types';
 import {block} from '../utils/cn';
 import {useBoolean} from '../utils/useBoolean';
@@ -46,7 +47,11 @@ export const Tooltip = (props: TooltipProps) => {
                 disableOutsideClick
                 disableLayer
             >
-                <div className={b('content', props.contentClassName)}>{content}</div>
+                <div className={b('content', props.contentClassName)}>
+                    <Text variant="body-short" color="complementary">
+                        {content}
+                    </Text>
+                </div>
             </Popup>
         );
     };