fix(slider): update rc-slider [EE-5011] (#8611)

* fix(slider): update rc-slider [EE-5011]

* fix PasswordLengthSlider tooltip

* fix unnecessarily bulky className for SliderTooltip

* remove SliderTooltip inner div

* center slider handle value

* relative tooltip

* update z index

---------

Co-authored-by: testa113 <testa113>

app/react/components/form-components/Slider/Slider.module.css

@@ -1,58 +1,40 @@
 .root {
-  margin: 0 25px;
-}
-
-.slider {
   padding-top: 50px;
 }
 
-.slider :global .rc-slider-handle {
+.root :global .rc-slider .rc-slider-handle-dragging {
+  @apply border-2 border-blue-8;
+}
+
+.root :global .rc-slider-dot {
+  display: none;
+}
+
+.root :global .rc-slider-handle {
   @apply border-2 border-blue-8;
   width: 24px;
   height: 24px;
   margin-top: -8px;
   border-radius: 16px;
-  cursor: pointer;
+  opacity: 1;
   background-color: #ffffff;
 }
 
-.slider :global .rc-slider-track {
+.root :global .rc-slider-track {
   @apply bg-blue-8;
+  height: 8px;
 }
 
-.slider :global .rc-slider-handle:after {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-  width: 9px;
-  height: 9px;
-  background: #ffffff;
-  border-radius: 5px;
-  content: '';
+.root :global .rc-slider-rail {
+  height: 8px;
 }
 
-.slider :global .rc-slider-mark-text {
+.root :global .rc-slider-mark {
+  top: -28px;
+}
+
+.root :global .rc-slider-mark-text {
   font-size: 14px;
   color: var(--text-body-color);
-}
-
-.slider :global .rc-slider-tooltip-arrow {
-  bottom: 2px;
-  border-top-color: var(--bg-tooltip-color);
-}
-
-.slider :global .rc-slider-tooltip-placement-top {
-  padding: 6px 0px;
-}
-
-.slider :global .rc-slider-tooltip-inner {
-  font-size: 14px;
-  color: var(--text-tooltip-color);
-  height: fit-content;
-  background-color: var(--bg-tooltip-color);
-  box-shadow: 0 2px 4px 0 rgb(34 36 38 / 12%), 0 2px 10px 0 rgb(34 36 38 / 15%);
-  padding: 8px 12px;
-  text-align: center;
   user-select: none;
-  cursor: pointer;
 }

app/react/components/form-components/Slider/Slider.stories.tsx

@@ -28,7 +28,13 @@ function Template({
       max={max}
       step={step}
       value={sliderValue}
-      onChange={setSliderValue}
+      onChange={(value) => {
+        if (Array.isArray(value)) {
+          setSliderValue(value[0]);
+        } else {
+          setSliderValue(value);
+        }
+      }}
       dataCy={dataCy}
       visibleTooltip={visibleTooltip}
     />

app/react/components/form-components/Slider/Slider.tsx

@@ -1,5 +1,8 @@
+import { useCallback } from 'react';
 import RcSlider from 'rc-slider';
 
+import { SliderTooltip } from '@@/Tip/SliderTooltip';
+
 import styles from './Slider.module.css';
 import 'rc-slider/assets/index.css';
 
@@ -8,7 +11,7 @@ export interface Props {
   max: number;
   step: number;
   value: number;
-  onChange: (value: number) => void;
+  onChange: (value: number | number[]) => void;
   // true if you want to always show the tooltip
   dataCy: string;
   visibleTooltip?: boolean;
@@ -23,29 +26,33 @@ export function Slider({
   dataCy,
   visibleTooltip: visible,
 }: Props) {
-  const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
-  // if the tooltip is always visible, hide the marks when tooltip value gets close to the edges
   const marks = {
     [min]: visible && value / max < 0.1 ? '' : translateMinValue(min),
     [max]: visible && value / max > 0.9 ? '' : max.toString(),
   };
 
+  const sliderTooltip = useCallback(
+    (node, handleProps) => (
+      <SliderTooltip
+        value={translateMinValue(handleProps.value)}
+        child={node}
+        delay={0}
+      />
+    ),
+    []
+  );
+
   return (
     <div className={styles.root}>
-      <SliderWithTooltip
-        tipFormatter={translateMinValue}
+      <RcSlider
+        handleRender={sliderTooltip}
         min={min}
         max={max}
-        step={step}
         marks={marks}
-        defaultValue={value}
-        onAfterChange={onChange}
-        className={styles.slider}
-        tipProps={{ visible }}
-        railStyle={{ height: 8 }}
-        trackStyle={{ height: 8 }}
-        dotStyle={{ visibility: 'hidden' }}
+        step={step}
         data-cy={dataCy}
+        value={value}
+        onChange={onChange}
       />
     </div>
   );