From 25d62ec757d181224542393761e675d82b2febfd Mon Sep 17 00:00:00 2001 From: Abbey Hart <abbeyhrt@gmail.com> Date: Fri, 31 Jan 2020 16:13:03 -0600 Subject: [PATCH 1/2] fix(slider): change prop to stepMultiplier and deprecate stepuliplier --- .../src/components/Slider/Slider-story.js | 6 ++--- .../react/src/components/Slider/Slider.js | 27 ++++++++++++++++--- 2 files changed, 26 insertions(+), 7 deletions(-) diff --git a/packages/react/src/components/Slider/Slider-story.js b/packages/react/src/components/Slider/Slider-story.js index 4c8ac16a1b6b..4755004463ce 100644 --- a/packages/react/src/components/Slider/Slider-story.js +++ b/packages/react/src/components/Slider/Slider-story.js @@ -28,9 +28,9 @@ const props = () => ({ min: number('The minimum value (min)', 0), max: number('The maximum value (max)', 100), step: number('The step (step)', 1), - stepMuliplier: number( - 'The step factor for Shift+arrow keys (stepMuliplier)', - 4 + stepMultiplier: number( + 'The step factor for Shift+arrow keys (stepMultiplier)', + 5 ), labelText: text('Label text (labelText)', 'Slider Label'), minLabel: text('Label for minimum value (minLabel)', ''), diff --git a/packages/react/src/components/Slider/Slider.js b/packages/react/src/components/Slider/Slider.js index a484476c8581..d7cdc3883431 100644 --- a/packages/react/src/components/Slider/Slider.js +++ b/packages/react/src/components/Slider/Slider.js @@ -9,6 +9,7 @@ import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import { settings } from 'carbon-components'; +import deprecate from '../../prop-types/deprecate'; const { prefix } = settings; @@ -87,7 +88,16 @@ export default class Slider extends PureComponent { * A value determining how much the value should increase/decrease by Shift+arrow keys, * which will be `(max - min) / stepMuliplier`. */ - stepMuliplier: PropTypes.number, + stepMuliplier: deprecate( + PropTypes.number, + ' The `stepMuliplier` prop has been deprecated in favor of `stepMultiplier`. It will be removed in the next major release.' + ), + + /** + * A value determining how much the value should increase/decrease by Shift+arrow keys, + * which will be `(max - min) / stepMultiplier`. + */ + stepMultiplier: PropTypes.number, /** * The child nodes. @@ -123,7 +133,7 @@ export default class Slider extends PureComponent { static defaultProps = { hideTextInput: false, step: 1, - stepMuliplier: 4, + stepMultiplier: 4, disabled: false, minLabel: '', maxLabel: '', @@ -204,7 +214,7 @@ export default class Slider extends PureComponent { }; calcValue = (evt, prevState, props) => { - const { min, max, step, stepMuliplier } = props; + const { min, max, step, stepMuliplier, stepMultiplier } = props; const { value } = prevState; @@ -227,7 +237,15 @@ export default class Slider extends PureComponent { 39: 1, // increasing }[evt.which]; - if (direction !== undefined) { + if (stepMultiplier && direction !== undefined) { + const multiplier = + evt.shiftKey === true ? range / step / stepMultiplier : 1; + const stepMultiplied = step * multiplier; + const stepSize = (stepMultiplied / range) * 100; + left = valuePercentage + stepSize * direction; + newValue = Number(value) + stepMultiplied * direction; + } + if (stepMuliplier && direction !== undefined) { const multiplier = evt.shiftKey === true ? range / step / stepMuliplier : 1; const stepMultiplied = step * multiplier; @@ -366,6 +384,7 @@ export default class Slider extends PureComponent { labelText, step, stepMuliplier, // eslint-disable-line no-unused-vars + stepMultiplier, // eslint-disable-line no-unused-vars inputType, required, disabled, From a37f0a9113c7e2a13e35dafa97fb5086aa9e4927 Mon Sep 17 00:00:00 2001 From: Abbey Hart <abbeyhrt@gmail.com> Date: Mon, 3 Feb 2020 11:19:58 -0600 Subject: [PATCH 2/2] fix(slider): adjust how to support stepMuliplier --- packages/react/src/components/Slider/Slider.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/packages/react/src/components/Slider/Slider.js b/packages/react/src/components/Slider/Slider.js index d7cdc3883431..3d62b5aa8af4 100644 --- a/packages/react/src/components/Slider/Slider.js +++ b/packages/react/src/components/Slider/Slider.js @@ -237,17 +237,11 @@ export default class Slider extends PureComponent { 39: 1, // increasing }[evt.which]; - if (stepMultiplier && direction !== undefined) { - const multiplier = - evt.shiftKey === true ? range / step / stepMultiplier : 1; - const stepMultiplied = step * multiplier; - const stepSize = (stepMultiplied / range) * 100; - left = valuePercentage + stepSize * direction; - newValue = Number(value) + stepMultiplied * direction; - } - if (stepMuliplier && direction !== undefined) { + const multiplyStep = stepMuliplier || stepMultiplier; + + if (direction !== undefined) { const multiplier = - evt.shiftKey === true ? range / step / stepMuliplier : 1; + evt.shiftKey === true ? range / step / multiplyStep : 1; const stepMultiplied = step * multiplier; const stepSize = (stepMultiplied / range) * 100; left = valuePercentage + stepSize * direction;