style(Slider): fix issues with hidden input variant misalignment (#16250

) Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · May 6, 2024 · f3d8bf4 · f3d8bf4
1 parent 92cd840
commit f3d8bf4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/packages/react/src/components/Slider/Slider.tsx b/packages/react/src/components/Slider/Slider.tsx
@@ -1518,7 +1518,7 @@ class Slider extends PureComponent<SliderProps> {
                     hasTooltip={hideTextInput}
                     className={lowerThumbWrapperClasses}
                     label={`${value}`}
-                    align={twoHandles ? 'top-right' : 'top'}
+                    align="top"
                     {...lowerThumbWrapperProps}>
                     <div
                       className={lowerThumbClasses}
@@ -1552,7 +1552,7 @@ class Slider extends PureComponent<SliderProps> {
                       hasTooltip={hideTextInput}
                       className={upperThumbWrapperClasses}
                       label={`${valueUpper}`}
-                      align="top-left"
+                      align="top"
                       {...upperThumbWrapperProps}>
                       <div
                         className={upperThumbClasses}

diff --git a/packages/styles/scss/components/slider/_slider.scss b/packages/styles/scss/components/slider/_slider.scss
@@ -121,7 +121,6 @@
     }
 
     > .#{$prefix}--popover > .#{$prefix}--popover-caret {
-      inset-inline-end: 0;
       inset-inline-start: revert;
       transform: translate(
         50%,
@@ -159,7 +158,6 @@
     }
 
     > .#{$prefix}--popover > .#{$prefix}--popover-caret {
-      inset-inline-start: 0;
       transform: translate(
         -50%,
         calc(-1 * custom-property.get-var('popover-offset', 0rem))
@@ -477,6 +475,11 @@
     }
   }
 
+  // With hidden input
+  .#{$prefix}--popover-container.#{$prefix}--slider__thumb-wrapper {
+    position: absolute;
+  }
+
   // Windows HCM fix
   /* stylelint-disable */
   .#{$prefix}--slider__thumb {