From 2348623385bb9d4067f901bd353e78e98400e0e9 Mon Sep 17 00:00:00 2001 From: Islam farg Date: Mon, 2 Nov 2020 16:43:24 +0100 Subject: [PATCH] Allow NumberInput and NumberField to have the step prop set to "any" (#1645) * feat(number-input): add support for any step * chore: generate read me * chore: generate changeset * chore(number-fields): document usage of step prop --- .changeset/poor-pens-sit.md | 6 ++++++ packages/components/fields/number-field/README.md | 2 +- .../components/fields/number-field/src/number-field.js | 6 ++++-- .../fields/number-field/src/number-field.story.js | 8 +++++++- packages/components/inputs/checkbox-input/README.md | 2 ++ packages/components/inputs/number-input/README.md | 2 +- .../components/inputs/number-input/src/number-input.js | 4 +++- .../inputs/number-input/src/number-input.story.js | 9 ++++++++- 8 files changed, 32 insertions(+), 7 deletions(-) create mode 100644 .changeset/poor-pens-sit.md diff --git a/.changeset/poor-pens-sit.md b/.changeset/poor-pens-sit.md new file mode 100644 index 0000000000..7ce3fa6d2d --- /dev/null +++ b/.changeset/poor-pens-sit.md @@ -0,0 +1,6 @@ +--- +'@commercetools-uikit/number-field': patch +'@commercetools-uikit/number-input': patch +--- + +Allow NumberInput and NumberField to have the step prop set to "any" diff --git a/packages/components/fields/number-field/README.md b/packages/components/fields/number-field/README.md index ff5bc54a80..6c32a3a9f8 100644 --- a/packages/components/fields/number-field/README.md +++ b/packages/components/fields/number-field/README.md @@ -67,7 +67,7 @@ export default Example; | `placeholder` | `string` | | | Placeholder text for the input | | `min` | `number` | | | Value is used as `min` property on input field | | `max` | `number` | | | Value is used as `max` property on input field | -| `step` | `number` | | | Value is used as `step` property on input field | +| `step` | `` | | | Value is used as `step` property on input field.
Use the value `any` for inputs which accept an unpredictable amount of decimals. | | `title` | `` | ✅ | | Title of the label | | `hint` | `custom` | | | Hint for the label. Provides a supplementary but important information regarding the behaviour of the input (e.g warn about uniqueness of a field, when it can only be set once), whereas `description` can describe it in more depth. Can also receive a `hintIcon`. | | `description` | `` | | | Provides a description for the title. | diff --git a/packages/components/fields/number-field/src/number-field.js b/packages/components/fields/number-field/src/number-field.js index 2159937d90..65709d3ab8 100644 --- a/packages/components/fields/number-field/src/number-field.js +++ b/packages/components/fields/number-field/src/number-field.js @@ -108,9 +108,11 @@ class NumberField extends React.Component { */ max: PropTypes.number, /** - * Value is used as `step` property on input field + * Value is used as `step` property on input field. + *
+ * Use the value `any` for inputs which accept an unpredictable amount of decimals. */ - step: PropTypes.number, + step: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['any'])]), // LabelField /** diff --git a/packages/components/fields/number-field/src/number-field.story.js b/packages/components/fields/number-field/src/number-field.story.js index 6bb71da2e6..3eb03ad7a1 100644 --- a/packages/components/fields/number-field/src/number-field.story.js +++ b/packages/components/fields/number-field/src/number-field.story.js @@ -15,6 +15,12 @@ import Readme from '../README.md'; import * as icons from '../../../icons'; import NumberField from './number-field'; +const getStepValue = (step) => { + if (step.trim() === '') return undefined; + if (step === 'any') return step; + return parseFloat(step, 10); +}; + storiesOf('Components|Fields', module) .addDecorator(withKnobs) .addParameters({ @@ -69,7 +75,7 @@ storiesOf('Components|Fields', module) title={text('title', 'Age')} min={number('min')} max={number('max')} - step={number('step')} + step={getStepValue(text('step', ''))} hint={hint} description={text('description', '')} onInfoButtonClick={ diff --git a/packages/components/inputs/checkbox-input/README.md b/packages/components/inputs/checkbox-input/README.md index 029004aa52..6eb4acaf7c 100644 --- a/packages/components/inputs/checkbox-input/README.md +++ b/packages/components/inputs/checkbox-input/README.md @@ -5,6 +5,8 @@ ## Description +An input component that works as checkbox input. + ## Installation ``` diff --git a/packages/components/inputs/number-input/README.md b/packages/components/inputs/number-input/README.md index 3983b5097d..6328a0350e 100644 --- a/packages/components/inputs/number-input/README.md +++ b/packages/components/inputs/number-input/README.md @@ -57,7 +57,7 @@ export default Example; | `value` | `` | ✅ | | Value of the input component. | | `min` | `number` | | | Value is used as `min` property on input field | | `max` | `number` | | | Value is used as `max` property on input field | -| `step` | `number` | | | Value is used as `step` property on input field | +| `step` | `` | | | Value is used as `step` property on input field
Use the value `any` for inputs which accept an unpredictable amount of decimals. | | `onChange` | `custom` | | | Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
Signature: `(event) => void` | | `onBlur` | `func` | | | Called when input is blurred
Signature: `(event) => void` | | `onFocus` | `func` | | | Called when input is focused
Signature: `(event) => void` | diff --git a/packages/components/inputs/number-input/src/number-input.js b/packages/components/inputs/number-input/src/number-input.js index 4f600fb8cb..a9c90c87a4 100644 --- a/packages/components/inputs/number-input/src/number-input.js +++ b/packages/components/inputs/number-input/src/number-input.js @@ -63,8 +63,10 @@ NumberInput.propTypes = { max: PropTypes.number, /** * Value is used as `step` property on input field + *
+ * Use the value `any` for inputs which accept an unpredictable amount of decimals. */ - step: PropTypes.number, + step: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['any'])]), /** * Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value. *
diff --git a/packages/components/inputs/number-input/src/number-input.story.js b/packages/components/inputs/number-input/src/number-input.story.js index ba5e1411a4..53d45b6fa1 100644 --- a/packages/components/inputs/number-input/src/number-input.story.js +++ b/packages/components/inputs/number-input/src/number-input.story.js @@ -7,6 +7,12 @@ import Section from '../../../../../.storybook/decorators/section'; import Readme from '../README.md'; import NumberInput from './number-input'; +const getStepValue = (step) => { + if (step.trim() === '') return undefined; + if (step === 'any') return step; + return parseFloat(step, 10); +}; + storiesOf('Components|Inputs', module) .addDecorator(withKnobs) .addParameters({ @@ -19,6 +25,7 @@ storiesOf('Components|Inputs', module) const min = text('min', ''); const max = text('max', ''); const step = text('step', ''); + return (