fix: slider tooltip disabled crossing color

gravity-ui · Jan 18, 2024 · 1be6de7 · 1be6de7
1 parent bd4e1a0
commit 1be6de7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/src/components/Slider/SliderTooltip/SliderTooltip.scss b/src/components/Slider/SliderTooltip/SliderTooltip.scss
@@ -1,5 +1,6 @@
 @use '../../variables';
 @use '../sliderVariables';
+@use '../../../../styles/mixins';
 
 $block: '.#{variables.$ns-new}slider-tooltip';
 
@@ -9,29 +10,30 @@ $block: '.#{variables.$ns-new}slider-tooltip';
     transform: translateX(-50%);
     cursor: default;
 
+    $base-background-color: var(--g-color-base-background);
+
     &__card {
         position: relative;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 4px;
-        height: 24px;
         padding: 4px 4px 2px;
         background-color: #{sliderVariables.$slider-color};
-        font-size: var(--g-text-body-1-font-size);
+        @include mixins.text-body-1;
         color: #{sliderVariables.$handle-center-color};
 
         &_size {
             &_xl {
-                font-size: var(--g-text-body-2-font-size);
+                @include mixins.text-body-2;
             }
         }
     }
 
     &__pin {
         display: flex;
         position: absolute;
-        bottom: -6px;
+        bottom: -5px;
         left: 0;
         right: 0;
         justify-content: center;
@@ -46,11 +48,24 @@ $block: '.#{variables.$ns-new}slider-tooltip';
         background-color: #{sliderVariables.$slider-disabled-color};
     }
 
+    //use this element to prevent crossing effect
+    &_disabled &__card::after {
+        content: '';
+        position: absolute;
+        inset: 0;
+        border-radius: 4px;
+        background-color: $base-background-color;
+        z-index: -1;
+    }
+
     &_error &__pin {
         color: #{sliderVariables.$slider-error-color};
     }
 
     &_disabled &__pin {
         color: #{sliderVariables.$slider-disabled-color};
+        &_background {
+            color: $base-background-color;
+        }
     }
 }
diff --git a/src/components/Slider/SliderTooltip/SliderTooltip.tsx b/src/components/Slider/SliderTooltip/SliderTooltip.tsx
@@ -33,6 +33,10 @@ export const SliderTooltip = ({value, className, style, styleModifiers}: SliderT
         >
             <div className={b('card', styleModifiers)}>
                 {value}
+                {styleModifiers.disabled && (
+                    //use this element to prevent crossing effect
+                    <SliderTooltipPin className={b('pin', {background: true})} />
+                )}
                 <SliderTooltipPin className={b('pin')} />
             </div>
         </div>