refactor(SliderStep): use token instead for hardcoded value (#9651)

patternfly · Sep 20, 2023 · cfd927c · cfd927c
1 parent ff467ee
commit cfd927c
Showing 1 changed file with 2 additions and 1 deletion.
diff --git a/packages/react-core/src/components/Slider/SliderStep.tsx b/packages/react-core/src/components/Slider/SliderStep.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Slider/slider';
 import { css } from '@patternfly/react-styles';
+import sliderStepLeft from '@patternfly/react-tokens/dist/esm/c_slider__step_Left';
 
 export interface SliderStepProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Additional classes added to the slider step. */
@@ -26,7 +27,7 @@ export const SliderStep: React.FunctionComponent<SliderStepProps> = ({
   isActive = false,
   ...props
 }: SliderStepProps) => {
-  const style = { '--pf-v5-c-slider__step--Left': `${value}%` } as React.CSSProperties;
+  const style = { [sliderStepLeft.name]: `${value ? value : sliderStepLeft.value}%` } as React.CSSProperties;
   return (
     <div className={css(styles.sliderStep, isActive && styles.modifiers.active, className)} style={style} {...props}>
       {!isTickHidden && <div className={css(styles.sliderStepTick)} />}