From 0c30e4c1b1702d9da71bf3d1969957cd05e374c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Matall=C3=ADn?= Date: Thu, 18 Jan 2024 20:10:04 +0100 Subject: [PATCH 1/2] [RangeSlider] Add magic tone --- .../RangeSlider/RangeSlider.stories.tsx | 21 +++++++++++++++ .../DualThumb/DualThumb.module.scss | 26 +++++++++++++++++++ .../components/DualThumb/DualThumb.tsx | 4 ++- .../SingleThumb/SingleThumb.module.scss | 11 ++++++++ .../components/SingleThumb/SingleThumb.tsx | 4 ++- .../src/components/RangeSlider/types.ts | 2 ++ 6 files changed, 66 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/RangeSlider/RangeSlider.stories.tsx b/polaris-react/src/components/RangeSlider/RangeSlider.stories.tsx index 489e7a6569f..507434fd852 100644 --- a/polaris-react/src/components/RangeSlider/RangeSlider.stories.tsx +++ b/polaris-react/src/components/RangeSlider/RangeSlider.stories.tsx @@ -31,6 +31,27 @@ export function Default() { ); } +export function Magic() { + const [rangeValue, setRangeValue] = useState(32); + + const handleRangeSliderChange = useCallback( + (value) => setRangeValue(value), + [], + ); + + return ( + + + + ); +} + export function WithMinAndMax() { const [rangeValue, setRangeValue] = useState(0); diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss index fb8346cadb4..165ec863f48 100644 --- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss +++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.module.scss @@ -72,6 +72,24 @@ $range-wrapper: 28px; // stylelint-enable } + .toneMagic & { + // stylelint-disable -- Polaris component custom properties + --pc-dual-thumb-selected-range: var(--p-color-bg-fill-magic); + --pc-dual-thumb-gradient-colors: var(--pc-dual-thumb-unselected-range) 0%, + var(--pc-dual-thumb-unselected-range) + var(--pc-range-slider-progress-lower), + var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-lower), + var(--pc-dual-thumb-selected-range) var(--pc-range-slider-progress-upper), + var(--pc-dual-thumb-unselected-range) + var(--pc-range-slider-progress-upper), + var(--pc-dual-thumb-unselected-range) 100%; + background-image: linear-gradient( + to right, + var(--pc-dual-thumb-gradient-colors) + ); + // stylelint-enable + } + .disabled & { background: var(--p-color-border-disabled) none; } @@ -127,6 +145,14 @@ $range-wrapper: 28px; var(--p-color-bg-fill-critical) ); } + + .toneMagic & { + border-color: var(--p-color-bg-fill-magic); + background: linear-gradient( + var(--p-color-bg-fill-magic), + var(--p-color-bg-fill-magic) + ); + } } $range-output-size: 32px; diff --git a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx index 645ea86821c..54ef84ecd3d 100644 --- a/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx +++ b/polaris-react/src/components/RangeSlider/components/DualThumb/DualThumb.tsx @@ -1,7 +1,7 @@ import React, {Component, createRef} from 'react'; import {debounce} from '../../../../utilities/debounce'; -import {classNames} from '../../../../utilities/css'; +import {classNames, variationName} from '../../../../utilities/css'; import {FeaturesContext} from '../../../../utilities/features'; import type {RangeSliderProps, DualValue} from '../../types'; import {Labelled, labelID} from '../../../Labelled'; @@ -137,6 +137,7 @@ export class DualThumb extends Component { labelAction, labelHidden, helpText, + tone, } = this.props; const {value} = this.state; @@ -157,6 +158,7 @@ export class DualThumb extends Component { styles.TrackWrapper, error && styles.error, disabled && styles.disabled, + tone && styles[variationName('tone', tone)], ); const thumbLowerClassName = classNames( diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss index e85ebdd7c75..657cd6c31bf 100644 --- a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss +++ b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.module.scss @@ -219,6 +219,17 @@ } } + .toneMagic & { + // stylelint-disable -- Polaris component custom properties + --pc-single-thumb-progress-lower: var(--p-color-bg-fill-magic); + + @include range-thumb-selectors { + border-color: var(--p-color-bg-fill-magic); + background: var(--p-color-bg-fill-magic); + } + // stylelint-enable + } + .disabled & { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include range-track-selectors { diff --git a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx index 3a39ed696b3..9da76129477 100644 --- a/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx +++ b/polaris-react/src/components/RangeSlider/components/SingleThumb/SingleThumb.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {classNames} from '../../../../utilities/css'; +import {classNames, variationName} from '../../../../utilities/css'; import {clamp} from '../../../../utilities/clamp'; import {Labelled, helpTextID} from '../../../Labelled'; import {Text} from '../../../Text'; @@ -36,6 +36,7 @@ export function SingleThumb(props: SingleThumbProps) { step, onBlur, onFocus, + tone, } = props; const clampedValue = clamp(value, min, max); const describedBy: string[] = []; @@ -82,6 +83,7 @@ export function SingleThumb(props: SingleThumbProps) { sharedStyles.RangeSlider, error && styles.error, disabled && styles.disabled, + tone && styles[variationName('tone', tone)], ); /* eslint-disable @shopify/react-require-autocomplete */ diff --git a/polaris-react/src/components/RangeSlider/types.ts b/polaris-react/src/components/RangeSlider/types.ts index 87fbfee18f2..af96869f01e 100644 --- a/polaris-react/src/components/RangeSlider/types.ts +++ b/polaris-react/src/components/RangeSlider/types.ts @@ -40,4 +40,6 @@ export interface RangeSliderProps { onFocus?(): void; /** Callback when focus is removed */ onBlur?(): void; + /** Indicates the tone of the range input */ + tone?: 'magic'; } From 80277266eb5c0456473c4225de8e9863565e7754 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carlos=20Matall=C3=ADn?= Date: Thu, 18 Jan 2024 20:10:55 +0100 Subject: [PATCH 2/2] Changeset --- .changeset/slow-eagles-walk.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/slow-eagles-walk.md diff --git a/.changeset/slow-eagles-walk.md b/.changeset/slow-eagles-walk.md new file mode 100644 index 00000000000..4025598b418 --- /dev/null +++ b/.changeset/slow-eagles-walk.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +- Added `tone` prop with `magic` value to `RangeSlider`