EPMRPP-94577 || Fix the tooltip on the sidebar's popover and progress…

src/assets/styles/themes/base.scss

@@ -78,7 +78,7 @@
 
   // TODO: discuss with UX
   /* colors rgb */
-  --rp-ui-base-almost-black-light: rgba(63, 63, 63, 0.75);
+  --rp-ui-base-tooltip-bg: rgba(34, 34, 34, 0.91);
   --rp-ui-base-almost-black-slight-light: rgba(63, 63, 63, 0.95);
   --rp-ui-base-dark-bg-light: rgba(16, 16, 16, 0.15);
 

src/components/pagination/pageControls/activePage/activePage.module.scss

@@ -17,5 +17,4 @@
 .page-selector-button {
   margin-left: 4px;
   font-weight: $fw-bold;
-  @include font-scale('s-small');
 }

src/components/pagination/pageSizeControl/pageSizeControl.module.scss

@@ -1,5 +1,4 @@
 @import 'src/assets/styles/variables/typography';
-@import 'src/assets/styles/mixins/font-scale';
 
 .page-size-control {
   display: flex;
@@ -13,5 +12,4 @@
 .size-selector-button {
   margin-right: 4px;
   font-weight: $fw-bold;
-  @include font-scale('s-small');
 }

src/components/pagination/pagination.module.scss

@@ -11,6 +11,6 @@
 
   font-family: var(--rp-ui-base-font-family);
   font-weight: $fw-regular;
-  @include font-scale('s-small');
+  @include font-scale();
   color: var(--rp-ui-base-almost-black);
 }

src/components/tooltip/README.md

@@ -7,5 +7,10 @@
 - **placement**: _string_ (Floating UI Placement), optional, default = 'bottom'
 - **width**: _string_, optional, default = ''
 - **dynamicWidth**: _string_, optional, default = ''
-- **className**: _string_, optional, default = ''
 - **dataAutomationId**: _string_, optional, default = ''
+- **wrapperClassName**: _string_, optional, default = ''
+- **contentClassName**: _string_, optional, default = ''
+- **arrowColor**: _string_, optional, default = 'rgba(34, 34, 34, 0.91)'
+- **minWidth**: _number_, optional, default = '120'
+- **safeZone**: _number_, optional, default = '4'
+- **zIndex**: _number_, optional, default = '9'

src/components/tooltip/tooltip.module.scss

@@ -1,149 +1,39 @@
-@use "sass:math";
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 @import 'src/assets/styles/variables/typography';
 @import 'src/assets/styles/mixins/font-scale';
 
-$ARROW_HEIGHT: 9px;
-$ARROW_WIDTH: 18px;
-$DEFAULT_MARGIN: 4px;
-$ARROW_LINE: math.div($ARROW-WIDTH, 2);
-$triangle-color: var(--rp-ui-base-almost-black-light);
-
 .tooltip-wrapper {
   display: block;
   width: 100%;
   height: fit-content;
   cursor: pointer;
 }
 
-.tooltip {
-  transition: opacity 300ms ease;
-  margin: $DEFAULT_MARGIN;
-  &[data-placement*='bottom'] {
-    padding-top: $ARROW_HEIGHT;
-    z-index: 2;
-  }
-
-  &[data-placement*='top'] {
-    padding-bottom: $ARROW_HEIGHT;
-  }
-
-  &[data-placement*='left'] {
-    padding-right: $ARROW_HEIGHT;
-  }
-
-  &[data-placement*='right'] {
-    padding-left: $ARROW_HEIGHT;
-  }
-}
-
 .tooltip-content {
+  @include font-scale('s-small');
   padding: 16px;
   border-radius: 8px;
-  background-color: var(--rp-ui-base-almost-black-slight-light);
+  background-color: var(--rp-ui-base-tooltip-bg);
   font-family: var(--rp-ui-base-font-family);
   font-weight: $fw-medium;
-  @include font-scale('s-small');
   color: var(--rp-ui-base-bg-000);
   word-wrap: break-word;
   white-space: pre-wrap;
-}
-
-.tooltip-arrow {
-  position: absolute;
-
-  &::before,
-  &::after {
-    content: '';
-    margin: auto;
-    display: block;
-    width: 0;
-    height: 0;
-    border-style: solid;
-  }
-
-  &::after {
-    position: absolute;
-  }
-
-  &[data-placement*='bottom'] {
-    top: 0;
-    width: $ARROW_WIDTH;
-    height: $ARROW_HEIGHT;
-
-    &::before,
-    &::after {
-      border-width: 0 $ARROW_LINE $ARROW_HEIGHT;
-    }
-
-    &::before {
-      border-color: transparent transparent $triangle-color;
-    }
-
-    &::after {
-      top: 0;
-      border-color: transparent transparent $triangle-color;
-    }
-  }
-
-  &[data-placement*='top'] {
-    bottom: 0;
-    width: $ARROW_WIDTH;
-    height: $ARROW_HEIGHT;
-
-    &::before,
-    &::after {
-      border-width: $ARROW_HEIGHT $ARROW_LINE 0;
-    }
-
-    &::before {
-      border-color: $triangle-color transparent transparent;
-    }
-
-    &::after {
-      bottom: 0;
-      border-color: $triangle-color transparent transparent;
-    }
-  }
-
-  &[data-placement*='left'] {
-    right: 0;
-    width: $ARROW_HEIGHT;
-    height: $ARROW_WIDTH;
-
-    &::before,
-    &::after {
-      border-width: $ARROW_LINE 0 $ARROW_LINE $ARROW_HEIGHT;
-    }
-
-    &::before {
-      border-color: transparent transparent transparent $triangle-color;
-    }
-
-    &::after {
-      top: 0;
-      right: 0;
-      border-color: transparent transparent transparent $triangle-color;
-    }
-  }
-
-  &[data-placement*='right'] {
-    left: 0;
-    width: $ARROW_HEIGHT;
-    height: $ARROW_WIDTH;
-
-    &::before,
-    &::after {
-      border-width: $ARROW_LINE $ARROW_HEIGHT $ARROW_LINE 0;
-    }
-
-    &::before {
-      border-color: transparent $triangle-color transparent transparent;
-    }
-
-    &::after {
-      top: 0;
-      left: 0;
-      border-color: transparent $triangle-color transparent transparent;
-    }
-  }
+  box-sizing: border-box;
+  width: 100%;
 }

src/components/tooltip/tooltip.stories.tsx

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 import { FC } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 

src/components/tooltip/tooltip.tsx

@@ -16,12 +16,23 @@
 
 import { FC, ReactElement, useRef, useState, ReactNode } from 'react';
 import classNames from 'classnames/bind';
-import { useFloating, flip, Placement } from '@floating-ui/react-dom';
+import {
+  useFloating,
+  flip,
+  Placement,
+  FloatingArrow,
+  arrow,
+  offset,
+  autoUpdate,
+} from '@floating-ui/react';
 import styles from './tooltip.module.scss';
 
 const cx = classNames.bind(styles);
 const TOOLTIP_DELAY_MS = 300;
 const SAFE_ZONE = 100;
+const TRIANGLE_WIDTH = 16;
+const TRIANGLE_HEIGHT = 8;
+const placements: Placement[] = ['top', 'right', 'bottom', 'left'];
 
 interface TooltipProps {
   content: ReactNode;
@@ -30,8 +41,12 @@ interface TooltipProps {
   contentClassName?: string;
   dynamicWidth?: boolean;
   width?: number;
+  minWidth?: number;
   placement?: Placement;
   dataAutomationId?: string;
+  arrowColor?: string;
+  safeZone?: number;
+  zIndex?: number;
 }
 
 export const Tooltip: FC<TooltipProps> = ({
@@ -40,21 +55,34 @@ export const Tooltip: FC<TooltipProps> = ({
   contentClassName,
   dynamicWidth,
   width,
+  minWidth = 120,
+  safeZone = 4,
+  zIndex = 9,
   placement = 'bottom',
+  arrowColor = 'rgba(34, 34, 34, 0.91)',
   dataAutomationId,
   children,
 }): ReactElement => {
   const [isOpened, setOpened] = useState(false);
+  const arrowRef = useRef(null);
   const timeoutId = useRef<ReturnType<typeof setTimeout>>();
 
-  const { refs, floatingStyles } = useFloating({
+  const { refs, floatingStyles, context } = useFloating({
+    open: isOpened,
     placement,
-    strategy: 'fixed',
     middleware: [
+      offset({
+        mainAxis: safeZone + TRIANGLE_HEIGHT,
+      }),
       flip({
-        fallbackPlacements: ['bottom', 'top', 'right', 'left'],
+        fallbackAxisSideDirection: 'start',
+        fallbackPlacements: placements,
+      }),
+      arrow({
+        element: arrowRef,
       }),
     ],
+    whileElementsMounted: autoUpdate,
   });
 
   const styleWidth = dynamicWidth ? null : { width: `${width}px` };
@@ -76,7 +104,7 @@ export const Tooltip: FC<TooltipProps> = ({
   return (
     <>
       <div
-        ref={(node) => refs.setReference(node as HTMLElement)}
+        ref={refs.setReference}
         className={cx('tooltip-wrapper', wrapperClassName)}
         onMouseDown={handleHideTooltip}
         onMouseEnter={handleShowTooltip}
@@ -86,14 +114,22 @@ export const Tooltip: FC<TooltipProps> = ({
       </div>
       {isOpened && (
         <div
-          className={cx('tooltip')}
-          ref={(node) => refs.setFloating(node as HTMLElement)}
+          ref={refs.setFloating}
           style={{
             ...floatingStyles,
             ...styleWidth,
+            minWidth,
+            zIndex,
           }}
           data-automation-id={dataAutomationId}
         >
+          <FloatingArrow
+            ref={arrowRef}
+            context={context}
+            width={TRIANGLE_WIDTH}
+            height={TRIANGLE_HEIGHT}
+            fill={arrowColor}
+          />
           <div
             className={cx('tooltip-content', contentClassName)}
             style={{