fix(core): update the CSS for Slider Tooltip (#12377)

Author: InnaAtanasova

libs/core/slider/slider.component.html

@@ -110,7 +110,7 @@
         [appendTo]="handle"
         [disabled]="!tooltipMode"
         class="fd-popover--slider"
-        additionalBodyClass="fd-slider--tooltip-popover"
+        additionalBodyClass="fd-slider-tooltip-popover"
         placement="top"
     >
         <ng-template
@@ -192,7 +192,7 @@
         [closeOnOutsideClick]="false"
         [appendTo]="rangeHandle1"
         [disabled]="!tooltipMode"
-        additionalBodyClass="fd-slider--tooltip-popover"
+        additionalBodyClass="fd-slider-tooltip-popover"
         class="fd-popover--slider"
         placement="top"
     >
@@ -207,7 +207,7 @@
         [closeOnOutsideClick]="false"
         [appendTo]="rangeHandle2"
         [disabled]="!tooltipMode"
-        additionalBodyClass="fd-slider--tooltip-popover"
+        additionalBodyClass="fd-slider-tooltip-popover"
         class="fd-popover--slider"
         placement="top"
     >
@@ -220,14 +220,14 @@
 <ng-template #popoverInner let-target="target" let-position="position">
     <div
         #sliderTooltipWrapper
-        class="fd-slider--tooltip-wrapper"
+        class="fd-slider-tooltip-wrapper"
         (click)="$event.stopPropagation()"
         (keydown)="$event.stopPropagation()"
         (mouseenter)="_popoverInputFieldHovered$.next(true)"
         (mouseleave)="_popoverInputFieldHovered$.next(false)"
     >
         @if ((customValues && customValues.length > 0) || tooltipMode === 'readonly') {
-            <div class="fd-slider--tooltip">
+            <div class="fd-slider-tooltip">
                 {{ customValues && customValues.length > 0 ? customValues[position].label : _popoverValueRef[target] }}
             </div>
         }
@@ -240,7 +240,7 @@
                 fdkOnlyDigits
                 [decimal]="true"
                 [style.width.ch]="('' + _popoverValueRef[target]).length + 2"
-                class="fd-input fd-slider--tooltip {{ _popoverInputFieldClass }}"
+                class="fd-input fd-slider-tooltip {{ _popoverInputFieldClass }}"
                 [(ngModel)]="_popoverValueRef[target]"
                 (blur)="_updateValueFromInput(popoverInputField.value, target)"
                 (keydown.enter)="_updateValueFromInput(popoverInputField.value, target)"

libs/core/slider/slider.component.scss

@@ -8,26 +8,30 @@
     display: block !important;
 }
 
-.fd-popover__body.fd-slider--tooltip-popover {
-    top: -7px !important;
+.fd-popover__body.fd-slider-tooltip-popover {
+    height: 1rem;
+    border: none;
+    padding-block: 0;
     overflow: hidden;
+    padding-inline: 0.5rem;
+    border-radius: 0.0625rem;
+    top: -0.4375rem !important;
+    background: var(--sapBackgroundColor);
+    box-shadow: var(--sapContent_Shadow1);
 
-    .fd-slider--tooltip {
-        padding: 0.25rem;
-        min-width: 2rem;
+    .fd-slider-tooltip {
+        line-height: 1rem;
         text-align: center;
-        height: 1.375rem;
-        line-height: 1;
-        direction: ltr;
-        box-sizing: border-box;
-
-        margin: 0 !important;
-        border: 0;
+        color: var(--sapTextColor);
+        font-family: var(--sapFontFamily);
+        font-size: var(--sapFontSmallSize);
+    }
 
-        color: #6a6d70;
-        color: var(--sapContent_LabelColor, #6a6d70);
-        font-size: 0.875rem;
-        font-size: var(--sapFontSize);
+    &:has(input) {
+        width: auto;
+        height: auto;
+        box-shadow: none;
+        padding-inline: 0;
     }
 }
 
@@ -38,6 +42,7 @@
         padding-bottom: 2rem;
     }
 
+    // Has to stay in ngx
     &__tick-wrapper {
         .fd-slider__label,
         .fd-slider__tick {
@@ -70,13 +75,6 @@
             white-space: nowrap;
         }
     }
-
-    // IE11 workaround
-    &__alternative-tick-width {
-        .fd-slider__tick {
-            width: 1px;
-        }
-    }
 }
 
 [dir='rtl'] {

libs/docs/core/slider/e2e/slider.po.ts

@@ -18,9 +18,9 @@ export class SliderPo extends CoreBaseComponentPo {
     // main selectors
     sliderHandles = '.fd-slider__handle';
     valueLabels = 'p:nth-of-type(2)';
-    sliderTooltip = 'fd-popover-body .fd-slider--tooltip';
+    sliderTooltip = 'fd-popover-body .fd-slider-tooltip';
     sliderTooltipInput = 'fd-popover-body .fd-popover__body input';
-    sliderTooltipInputFF = 'fd-popover-body .fd-slider--tooltip-wrapper input';
+    sliderTooltipInputFF = 'fd-popover-body .fd-slider-tooltip-wrapper input';
     sliderAttr = 'fd-slider';
     sliderLabels = '.fd-slider__labels';
     sliderLabel = '.fd-slider__label';

libs/docs/platform/slider/e2e/slider.po.ts

@@ -18,9 +18,9 @@ export class SliderPo extends PlatformBaseComponentPo {
     sliderHandles = '.fd-slider__handle';
     valueLabels = 'p:nth-of-type(2)';
     formValueLabels = 'p';
-    sliderTooltip = 'fd-popover-body .fd-slider--tooltip';
+    sliderTooltip = 'fd-popover-body .fd-slider-tooltip';
     sliderTooltipInput = 'fd-popover-body .fd-popover__body input';
-    sliderTooltipInputFF = 'fd-popover-body .fd-slider--tooltip-wrapper input';
+    sliderTooltipInputFF = 'fd-popover-body .fd-slider-tooltip-wrapper input';
     sliderAttr = 'fd-slider';
     altSliderAttr = 'fdp-slider';
     sliderLabels = '.fd-slider__labels';