chore: slider: address pr feedback by updating track color to track s…

…tatus
EightfoldAI · Feb 8, 2023 · 0f237ca · 0f237ca
1 parent f055cab
commit 0f237ca
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 90 deletions.
diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx
@@ -1,10 +1,9 @@
 import React, { useRef, useState } from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Slider, SliderSize, SliderTrackColor } from './';
+import { Slider, SliderSize, SliderTrackStatus } from './';
 import { Stack } from '../Stack';
 import { Col, Row } from '../Grid';
 import { PrimaryButton } from '../Button';
-import { IconName, IconSize } from '../Icon';
 import { useArgs } from '@storybook/client-api';
 import { ConfigProvider } from '../ConfigProvider';
 
@@ -915,23 +914,23 @@ const Data_Active_Story: ComponentStory<typeof Slider> = (args) => {
       updateArgs({
         ...args,
         marks: updateMarks(targetSlidingValue),
-        trackColor: SliderTrackColor.Red,
+        trackStatus: SliderTrackStatus.Error,
         value: [targetSlidingValue, persistedUpperValue],
       });
     } else if (targetSlidingValue === benchmarkValue) {
       setTransientSlidingValues([targetSlidingValue, persistedUpperValue]);
       updateArgs({
         ...args,
         marks: updateMarks(targetSlidingValue, benchmarkValue),
-        trackColor: SliderTrackColor.Red,
+        trackStatus: SliderTrackStatus.Error,
         value: [targetSlidingValue, persistedUpperValue],
       });
     } else if (targetSlidingValue === persistedUpperValue) {
       setTransientSlidingValues([targetSlidingValue, persistedUpperValue]);
       updateArgs({
         ...args,
         marks: updateMarks(targetSlidingValue, null, persistedUpperValue),
-        trackColor: SliderTrackColor.Green,
+        trackStatus: SliderTrackStatus.Success,
         value: [targetSlidingValue, persistedUpperValue],
       });
     } else {
@@ -942,7 +941,7 @@ const Data_Active_Story: ComponentStory<typeof Slider> = (args) => {
       updateArgs({
         ...args,
         marks: updateMarks(targetSlidingValue),
-        trackColor: SliderTrackColor.Green,
+        trackStatus: SliderTrackStatus.Success,
         value: [persistedUpperValue, targetSlidingValue],
       });
     }
@@ -1189,7 +1188,7 @@ Data_Inactive.args = {
   readOnly: true,
   showLabels: true,
   showMarkers: true,
-  trackColor: SliderTrackColor.Green,
+  trackStatus: SliderTrackStatus.Success,
   type: 'data',
   value: [1, 3],
 };
@@ -1221,7 +1220,7 @@ Data_Active.args = {
   readOnly: true,
   showLabels: true,
   showMarkers: true,
-  trackColor: SliderTrackColor.Red,
+  trackStatus: SliderTrackStatus.Error,
   type: 'data',
   value: [1, 3],
 };
diff --git a/src/components/Slider/Slider.test.tsx b/src/components/Slider/Slider.test.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import MatchMediaMock from 'jest-matchmedia-mock';
+import { Slider, SliderTrackStatus } from './';
 import { render, fireEvent } from '@testing-library/react';
 
-import { Slider, SliderTrackColor } from './';
-
 Enzyme.configure({ adapter: new Adapter() });
 
 let matchMedia: any;
@@ -278,24 +277,24 @@ describe('Slider', () => {
     ).toBe('30');
   });
 
-  test('should render green track color', () => {
+  test('should render success track color', () => {
     const { container: container1 } = render(
-      <Slider value={50} step={10} trackColor={SliderTrackColor.Green} />
+      <Slider value={50} step={10} trackStatus={SliderTrackStatus.Success} />
     );
-    expect(container1.getElementsByClassName('green')).toHaveLength(1);
+    expect(container1.getElementsByClassName('success')).toHaveLength(1);
   });
 
-  test('should render orange track color', () => {
+  test('should render warning track color', () => {
     const { container: container1 } = render(
-      <Slider value={50} step={10} trackColor={SliderTrackColor.Orange} />
+      <Slider value={50} step={10} trackStatus={SliderTrackStatus.Warning} />
     );
-    expect(container1.getElementsByClassName('orange')).toHaveLength(1);
+    expect(container1.getElementsByClassName('warning')).toHaveLength(1);
   });
 
-  test('should render red track color', () => {
+  test('should render error track color', () => {
     const { container: container1 } = render(
-      <Slider value={50} step={10} trackColor={SliderTrackColor.Red} />
+      <Slider value={50} step={10} trackStatus={SliderTrackStatus.Error} />
     );
-    expect(container1.getElementsByClassName('red')).toHaveLength(1);
+    expect(container1.getElementsByClassName('error')).toHaveLength(1);
   });
 });
diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx
@@ -28,7 +28,7 @@ import {
   SliderMarker,
   SliderProps,
   SliderSize,
-  SliderTrackColor,
+  SliderTrackStatus,
   SMALL_MARKER_OFFSET,
   SMALL_THUMB_DIAMETER,
   SMALL_THUMB_RADIUS,
@@ -111,7 +111,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
       step = 1,
       tooltipContent,
       tooltipProps,
-      trackColor,
+      trackStatus,
       type = 'default',
       value,
       valueLabel,
@@ -745,16 +745,18 @@ export const Slider: FC<SliderProps> = React.forwardRef(
                 className={mergeClasses([
                   styles.sliderTrack,
                   {
-                    [styles.green]:
-                      !!trackColor && trackColor === SliderTrackColor.Green,
+                    [styles.success]:
+                      !!trackStatus &&
+                      trackStatus === SliderTrackStatus.Success,
                   },
                   {
-                    [styles.orange]:
-                      !!trackColor && trackColor === SliderTrackColor.Orange,
+                    [styles.warning]:
+                      !!trackStatus &&
+                      trackStatus === SliderTrackStatus.Warning,
                   },
                   {
-                    [styles.red]:
-                      !!trackColor && trackColor === SliderTrackColor.Red,
+                    [styles.error]:
+                      !!trackStatus && trackStatus === SliderTrackStatus.Error,
                   },
                   {
                     [styles.sliderTrackOpacity]:
@@ -773,18 +775,18 @@ export const Slider: FC<SliderProps> = React.forwardRef(
                         className={mergeClasses(styles.railMarkerSegment, {
                           [styles.data]: type === 'data',
                           [styles.active]: isMarkerSegmentActive(mark.value),
-                          [styles.green]:
+                          [styles.success]:
                             isMarkerSegmentActive(mark.value) &&
-                            !!trackColor &&
-                            trackColor === SliderTrackColor.Green,
-                          [styles.orange]:
+                            !!trackStatus &&
+                            trackStatus === SliderTrackStatus.Success,
+                          [styles.warning]:
                             isMarkerSegmentActive(mark.value) &&
-                            !!trackColor &&
-                            trackColor === SliderTrackColor.Orange,
-                          [styles.red]:
+                            !!trackStatus &&
+                            trackStatus === SliderTrackStatus.Warning,
+                          [styles.error]:
                             isMarkerSegmentActive(mark.value) &&
-                            !!trackColor &&
-                            trackColor === SliderTrackColor.Red,
+                            !!trackStatus &&
+                            trackStatus === SliderTrackStatus.Error,
                           [styles.railMarkerSegmentHidden]:
                             index === markers.length - 1,
                           [styles.railMarkerSegmentOpacity]: !!hideTrack,
@@ -807,7 +809,7 @@ export const Slider: FC<SliderProps> = React.forwardRef(
                 classNames={dotClassNames}
                 marks={markList}
                 style={dotStyle}
-                trackColor={trackColor}
+                trackStatus={trackStatus}
                 type={type}
               />
               <Marks

diff --git a/src/components/Slider/Slider.types.ts b/src/components/Slider/Slider.types.ts
@@ -44,10 +44,10 @@ export enum SliderSize {
   Small = 'small',
 }
 
-export enum SliderTrackColor {
-  Green = 'green',
-  Orange = 'orange',
-  Red = 'red',
+export enum SliderTrackStatus {
+  Error = 'error',
+  Success = 'success',
+  Warning = 'warning',
 }
 
 export enum MarkerType {
@@ -133,10 +133,10 @@ export interface DotProps {
    */
   style?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
   /**
-   * The Slider track color.
-   * Options: green, orange, and red.
+   * The Slider track status.
+   * Options: success, warning, and error.
    */
-  trackColor?: SliderTrackColor;
+  trackStatus?: SliderTrackStatus;
   /**
    * The type of Slider.
    * @default 'default'
@@ -172,10 +172,10 @@ export interface StepsProps {
    */
   style?: React.CSSProperties | ((dotValue: number) => React.CSSProperties);
   /**
-   * The Slider track color.
-   * Options: green, orange, and red.
+   * The Slider track status.
+   * Options: success, warning, and error.
    */
-  trackColor?: SliderTrackColor;
+  trackStatus?: SliderTrackStatus;
   /**
    * The type of Slider.
    * @default 'default'
@@ -350,10 +350,10 @@ export interface SliderInputProps
    */
   tooltipProps?: Omit<TooltipProps, 'content'>;
   /**
-   * The Slider track color.
-   * Options: green, orange, and red.
+   * The Slider track status.
+   * Options: success, warning, and error.
    */
-  trackColor?: SliderTrackColor;
+  trackStatus?: SliderTrackStatus;
   /**
    * The type of Slider.
    * @default 'default'

diff --git a/src/components/Slider/Steps/Dot.tsx b/src/components/Slider/Steps/Dot.tsx
@@ -1,13 +1,20 @@
 import React from 'react';
 import SliderContext from '../Context';
-import { DotProps, SliderTrackColor } from '../Slider.types';
+import { DotProps, SliderTrackStatus } from '../Slider.types';
 import { getDirectionStyle } from '../Util';
 import { mergeClasses } from '../../../shared/utilities';
 
 import styles from '../slider.module.scss';
 
 export default function Dot(props: DotProps) {
-  const { activeStyle, classNames, style, trackColor, type, value } = props;
+  const {
+    activeStyle,
+    classNames,
+    style,
+    trackStatus: trackStatus,
+    type,
+    value,
+  } = props;
   const { min, max, direction, included, includedStart, includedEnd } =
     React.useContext(SliderContext);
 
@@ -34,14 +41,16 @@ export default function Dot(props: DotProps) {
           [styles.data]: type === 'data',
         },
         {
-          [styles.green]: !!trackColor && trackColor === SliderTrackColor.Green,
+          [styles.success]:
+            !!trackStatus && trackStatus === SliderTrackStatus.Success,
         },
         {
-          [styles.orange]:
-            !!trackColor && trackColor === SliderTrackColor.Orange,
+          [styles.warning]:
+            !!trackStatus && trackStatus === SliderTrackStatus.Warning,
         },
         {
-          [styles.red]: !!trackColor && trackColor === SliderTrackColor.Red,
+          [styles.error]:
+            !!trackStatus && trackStatus === SliderTrackStatus.Error,
         },
         { [styles.sliderDotActive]: active },
         classNames,

diff --git a/src/components/Slider/Steps/index.tsx b/src/components/Slider/Steps/index.tsx
@@ -6,7 +6,7 @@ import Dot from './Dot';
 import styles from '../slider.module.scss';
 
 export default function Steps(props: StepsProps) {
-  const { activeStyle, classNames, dots, marks, style, trackColor, type } =
+  const { activeStyle, classNames, dots, marks, style, trackStatus, type } =
     props;
   const { min, max, step } = React.useContext(SliderContext);
 
@@ -38,7 +38,7 @@ export default function Steps(props: StepsProps) {
           classNames={classNames}
           key={dotValue}
           style={style}
-          trackColor={trackColor}
+          trackStatus={trackStatus}
           type={type}
           value={dotValue}
         />

diff --git a/src/components/Slider/slider.module.scss b/src/components/Slider/slider.module.scss
@@ -73,16 +73,16 @@ $small-marker-top: 0;
         border-color: var(--slider-track-border-color);
         border-width: 2px;
 
-        &.green {
-          border-color: var(--slider-track-green-border-color);
+        &.success {
+          border-color: var(--slider-track-success-border-color);
         }
 
-        &.orange {
-          border-color: var(--slider-track-orange-border-color);
+        &.warning {
+          border-color: var(--slider-track-warning-border-color);
         }
 
-        &.red {
-          border-color: var(--slider-track-red-border-color);
+        &.error {
+          border-color: var(--slider-track-error-border-color);
         }
       }
     }
@@ -157,19 +157,19 @@ $small-marker-top: 0;
     background-color: var(--slider-track-background-color);
     border: 1px solid var(--slider-track-border-color);
 
-    &.green {
-      background-color: var(--slider-track-green-background-color);
-      border-color: var(--slider-track-green-border-color);
+    &.success {
+      background-color: var(--slider-track-success-background-color);
+      border-color: var(--slider-track-success-border-color);
     }
 
-    &.orange {
-      background-color: var(--slider-track-orange-background-color);
-      border-color: var(--slider-track-orange-border-color);
+    &.warning {
+      background-color: var(--slider-track-warning-background-color);
+      border-color: var(--slider-track-warning-border-color);
     }
 
-    &.red {
-      background-color: var(--slider-track-red-background-color);
-      border-color: var(--slider-track-red-border-color);
+    &.error {
+      background-color: var(--slider-track-error-background-color);
+      border-color: var(--slider-track-error-border-color);
     }
 
     &-opacity {
@@ -215,19 +215,19 @@ $small-marker-top: 0;
       background-color: var(--slider-track-background-color);
       border: 1px solid var(--slider-track-border-color);
 
-      &.green {
-        background-color: var(--slider-track-green-background-color);
-        border-color: var(--slider-track-green-border-color);
+      &.success {
+        background-color: var(--slider-track-success-background-color);
+        border-color: var(--slider-track-success-border-color);
       }
 
-      &.orange {
-        background-color: var(--slider-track-orange-background-color);
-        border-color: var(--slider-track-orange-border-color);
+      &.warning {
+        background-color: var(--slider-track-warning-background-color);
+        border-color: var(--slider-track-warning-border-color);
       }
 
-      &.red {
-        background-color: var(--slider-track-red-background-color);
-        border-color: var(--slider-track-red-border-color);
+      &.error {
+        background-color: var(--slider-track-error-background-color);
+        border-color: var(--slider-track-error-border-color);
       }
     }
   }