feat(Slider): be able to change value label position and color (#2734)

Author: talkor

packages/core/src/components/Slider/Slider.tsx

@@ -11,7 +11,7 @@ import { SliderColor as SliderColorEnum } from "./SliderConstants";
 import cx from "classnames";
 import { withStaticProps } from "../../types";
 import styles from "./Slider.module.scss";
-import { SliderColor, SliderSize } from "./Slider.types";
+import { SliderColor, SliderLabelColor, SliderLabelPosition, SliderSize } from "./Slider.types";
 
 export type SliderProps = {
   /**
@@ -76,6 +76,14 @@ export type SliderProps = {
    * Always show `value` instead of Tooltip
    */
   showValue?: boolean;
+  /**
+   * Position of the `value` when `showValue` is true
+   */
+  valueLabelPosition?: SliderLabelPosition;
+  /**
+   * Color of the `value` when `showValue` is true
+   */
+  valueLabelColor?: SliderLabelColor;
   /**
    * Size small/medium/large of the component (Slider)
    */
@@ -136,6 +144,8 @@ const Slider: React.FC<SliderProps> & {
       ranged = false,
       step = 1,
       showValue = false,
+      valueLabelPosition = "top",
+      valueLabelColor = "primary",
       size = "small",
       value,
       defaultValue = 0,
@@ -167,6 +177,8 @@ const Slider: React.FC<SliderProps> & {
         onChange={onChange}
         ranged={ranged}
         showValue={showValue}
+        valueLabelPosition={valueLabelPosition}
+        valueLabelColor={valueLabelColor}
         size={size}
         step={step}
         value={value}

packages/core/src/components/Slider/Slider.types.ts

@@ -1,7 +1,13 @@
 import { BASE_SIZES } from "../../constants";
+import { DialogPosition } from "../Dialog";
+import { TypographyColor } from "../Typography";
 
 export type SliderColor = "primary" | "negative" | "positive";
 
+export type SliderLabelColor = Extract<TypographyColor, "primary" | "secondary">;
+
+export type SliderLabelPosition = Extract<DialogPosition, "top" | "bottom">;
+
 export type SliderSize = (typeof BASE_SIZES)[keyof typeof BASE_SIZES];
 
 export type InfixKind = "prefix" | "postfix";

packages/core/src/components/Slider/SliderBase/SliderThumb.module.scss

@@ -15,7 +15,7 @@
 
 .dragging {
   cursor: grabbing !important;
-  transform: translate(-50%, -50%) scale(1.33, 1.33);
+  transform: translate(-50%, -50%) scale(1.15, 1.15);
   transform-origin: center center;
   transition: transform var(--motion-productive-long) var(--motion-timing-enter);
   box-shadow: var(--box-shadow-small);
@@ -62,8 +62,8 @@
 }
 
 .medium {
-  height: 24px;
-  width: 24px;
+  height: 20px;
+  width: 20px;
 }
 
 .large {
@@ -72,12 +72,27 @@
 }
 
 .label {
-  bottom: calc(100% + 8px);
   left: 50%;
   max-width: 50px;
   overflow: hidden;
   position: absolute;
   text-overflow: ellipsis;
   transform: translate(-50%, 0);
   white-space: nowrap;
+
+  &.positionTop {
+    bottom: calc(100% + 8px);
+  }
+
+  &.positionBottom {
+    top: calc(100% + 8px);
+  }
+
+  &.colorPrimary {
+    color: var(--primary-text-color);
+  }
+
+  &.colorSecondary {
+    color: var(--secondary-text-color);
+  }
 }

packages/core/src/components/Slider/SliderBase/SliderThumb.tsx

@@ -8,6 +8,7 @@ import cx from "classnames";
 import styles from "./SliderThumb.module.scss";
 import { getStyle } from "../../../helpers/typesciptCssModulesHelper";
 import { SliderColor, SliderSize } from "../Slider.types";
+import { camelCase } from "lodash-es";
 
 export interface SliderThumbProps extends VibeComponentProps {
   /**
@@ -34,7 +35,18 @@ const SliderThumb: FC<SliderThumbProps> = ({ className, index = 0, onMove = NOOP
   const { max, min, ranged, value: valueOrValues, valueText: valueOrValuesText } = useSliderSelection();
   const value = ranged ? (valueOrValues as unknown as number[])[index] : (valueOrValues as number);
   const valueText = ranged ? (valueOrValuesText as unknown as string[])[index] : (valueOrValuesText as string);
-  const { active, ariaLabel, ariaLabelledby, disabled, dragging, focused, shapeTestId, showValue } = useSliderUi();
+  const {
+    active,
+    ariaLabel,
+    ariaLabelledby,
+    disabled,
+    dragging,
+    focused,
+    shapeTestId,
+    showValue,
+    valueLabelPosition,
+    valueLabelColor
+  } = useSliderUi();
   const { setActive, setFocused, setDragging } = useSliderActions();
   const ref = useRef(null);
 
@@ -108,7 +120,17 @@ const SliderThumb: FC<SliderThumbProps> = ({ className, index = 0, onMove = NOOP
         style={{ left: `${position}%` }}
         tabIndex={disabled ? -1 : 0}
       >
-        {showValue && <label className={styles.label}>{valueText}</label>}
+        {showValue && (
+          <label
+            className={cx(
+              styles.label,
+              getStyle(styles, camelCase("color-" + valueLabelColor)),
+              getStyle(styles, camelCase("position-" + valueLabelPosition))
+            )}
+          >
+            {valueText}
+          </label>
+        )}
       </div>
     </Tooltip>
   );

packages/core/src/components/Slider/SliderConstants.ts

@@ -1,6 +1,6 @@
 import { IconType } from "../Icon";
 import { ReactElement } from "react";
-import { SliderSize, SliderColor as SliderColorType } from "./Slider.types";
+import { SliderSize, SliderColor as SliderColorType, SliderLabelPosition, SliderLabelColor } from "./Slider.types";
 
 export const BEM_PREFIX = "monday";
 
@@ -47,6 +47,8 @@ export type SliderContextUI = {
   size: SliderSize;
   shapeTestId: (subElement: string) => string;
   showValue: boolean;
+  valueLabelPosition: SliderLabelPosition;
+  valueLabelColor: SliderLabelColor;
 };
 
 export type SliderContextActions = {

packages/core/src/components/Slider/SliderContext.tsx

@@ -49,6 +49,8 @@ export function SliderProvider({
   onChange,
   ranged,
   showValue,
+  valueLabelPosition,
+  valueLabelColor,
   size,
   step,
   value,
@@ -69,8 +71,34 @@ export function SliderProvider({
   const [dragging, setDragging, getDragging] = useDragging();
 
   const uiContextValue: SliderContextUI = useMemo(
-    () => ({ active, ariaLabel, ariaLabelledby, color, disabled, dragging, focused, size, shapeTestId, showValue }),
-    [active, ariaLabel, ariaLabelledby, color, disabled, dragging, focused, size, shapeTestId, showValue]
+    () => ({
+      active,
+      ariaLabel,
+      ariaLabelledby,
+      color,
+      disabled,
+      dragging,
+      focused,
+      size,
+      shapeTestId,
+      showValue,
+      valueLabelPosition,
+      valueLabelColor
+    }),
+    [
+      active,
+      ariaLabel,
+      ariaLabelledby,
+      color,
+      disabled,
+      dragging,
+      focused,
+      size,
+      shapeTestId,
+      showValue,
+      valueLabelPosition,
+      valueLabelColor
+    ]
   );
 
   const selectionContextValue: SliderContextSelection = useMemo(

packages/core/src/components/Slider/__tests__/__snapshots__/Slider-non-ranged.test.js.snap

@@ -223,7 +223,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           20%
 +           18%
@@ -261,7 +261,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           20%
 +           22%
@@ -299,7 +299,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           20%
 +           10%
@@ -337,7 +337,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           20%
 +           40%
@@ -375,7 +375,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           20%
 +           40%

packages/core/src/components/Slider/__tests__/__snapshots__/Slider-ranged.test.js.snap

@@ -347,7 +347,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           25%
 +           23%
@@ -386,7 +386,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           65%
 +           67%
@@ -425,7 +425,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           65%
 +           55%
@@ -462,7 +462,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           25%
 +           45%
@@ -508,7 +508,7 @@ Snapshot Diff:
           tabindex="0"
         >
           <label
-            class="label"
+            class="label colorPrimary positionTop"
           >
 -           25%
 +           45%

packages/core/src/components/Slider/__tests__/__snapshots__/Slider.snapshot.test.js.snap

@@ -261,7 +261,7 @@ Snapshot Diff:
 -       />
 +       >
 +         <label
-+           class="label"
++           class="label colorPrimary positionTop"
 +         >
 +           0%
 +         </label>