From 0f237ca54a7fdffc8b5c0e20ef8a408d737b0c51 Mon Sep 17 00:00:00 2001 From: Dylan Kilgore Date: Tue, 7 Feb 2023 17:44:51 -0800 Subject: [PATCH] chore: slider: address pr feedback by updating track color to track status --- src/components/Slider/Slider.stories.tsx | 15 ++++---- src/components/Slider/Slider.test.tsx | 21 +++++------ src/components/Slider/Slider.tsx | 38 ++++++++++--------- src/components/Slider/Slider.types.ts | 26 ++++++------- src/components/Slider/Steps/Dot.tsx | 21 ++++++++--- src/components/Slider/Steps/index.tsx | 4 +- src/components/Slider/slider.module.scss | 48 ++++++++++++------------ src/octuple.ts | 4 +- src/styles/themes/_default-theme.scss | 12 +++--- 9 files changed, 99 insertions(+), 90 deletions(-) diff --git a/src/components/Slider/Slider.stories.tsx b/src/components/Slider/Slider.stories.tsx index ab177653a..5546489c2 100644 --- 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,7 +914,7 @@ const Data_Active_Story: ComponentStory = (args) => { updateArgs({ ...args, marks: updateMarks(targetSlidingValue), - trackColor: SliderTrackColor.Red, + trackStatus: SliderTrackStatus.Error, value: [targetSlidingValue, persistedUpperValue], }); } else if (targetSlidingValue === benchmarkValue) { @@ -923,7 +922,7 @@ const Data_Active_Story: ComponentStory = (args) => { updateArgs({ ...args, marks: updateMarks(targetSlidingValue, benchmarkValue), - trackColor: SliderTrackColor.Red, + trackStatus: SliderTrackStatus.Error, value: [targetSlidingValue, persistedUpperValue], }); } else if (targetSlidingValue === persistedUpperValue) { @@ -931,7 +930,7 @@ const Data_Active_Story: ComponentStory = (args) => { 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 = (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 index ce67b6e47..39b42a126 100644 --- 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( - + ); - 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( - + ); - 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( - + ); - 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 index 01c49fb41..47f287741 100644 --- 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 = React.forwardRef( step = 1, tooltipContent, tooltipProps, - trackColor, + trackStatus, type = 'default', value, valueLabel, @@ -745,16 +745,18 @@ export const Slider: FC = 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 = 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 = React.forwardRef( classNames={dotClassNames} marks={markList} style={dotStyle} - trackColor={trackColor} + trackStatus={trackStatus} type={type} /> 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; /** - * 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 index 3d94c156c..4bd827aec 100644 --- 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 index 84a09c2bc..8ee4ae5d2 100644 --- 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 index cb36378c5..9a11e8600 100644 --- 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); } } } diff --git a/src/octuple.ts b/src/octuple.ts index dd79f7658..697f13fa0 100644 --- a/src/octuple.ts +++ b/src/octuple.ts @@ -113,7 +113,7 @@ import { Slider, SliderMarks, SliderSize, - SliderTrackColor, + SliderTrackStatus, } from './components/Slider'; import { SnackbarContainer, Snackbar, snack } from './components/Snackbar'; @@ -301,7 +301,7 @@ export { Slider, SliderMarks, SliderSize, - SliderTrackColor, + SliderTrackStatus, snack, Snackbar, SnackbarContainer, diff --git a/src/styles/themes/_default-theme.scss b/src/styles/themes/_default-theme.scss index 725a56dca..d23fd364d 100644 --- a/src/styles/themes/_default-theme.scss +++ b/src/styles/themes/_default-theme.scss @@ -715,12 +715,12 @@ --slider-thumb-color: var(--accent-color-20); --slider-track-background-color: var(--primary-color-60); --slider-track-border-color: var(--primary-color-60); - --slider-track-green-background-color: var(--green-color-30); - --slider-track-green-border-color: var(--green-color-60); - --slider-track-orange-background-color: var(--orange-color-30); - --slider-track-orange-border-color: var(--orange-color-60); - --slider-track-red-background-color: var(--red-color-30); - --slider-track-red-border-color: var(--red-color-60); + --slider-track-success-background-color: var(--green-color-30); + --slider-track-success-border-color: var(--green-color-60); + --slider-track-warning-background-color: var(--orange-color-30); + --slider-track-warning-border-color: var(--orange-color-60); + --slider-track-error-background-color: var(--red-color-30); + --slider-track-error-border-color: var(--red-color-60); --slider-value-text-color: var(--text-secondary-color); // ------ Slider theme ------ }