Skip to content

Commit

Permalink
Allow NumberInput and NumberField to have the step prop set to "any" (#…
Browse files Browse the repository at this point in the history 
…1645)

* feat(number-input): add support for any step

* chore: generate read me

* chore: generate changeset

* chore(number-fields): document usage of step prop
  • Loading branch information
@islam3zzat
islam3zzat authored Nov 2, 2020
1 parent 7897ced commit 2348623
Show file tree
Hide file tree
Showing 8 changed files with 32 additions and 7 deletions.
6 changes: 6 additions & 0 deletions .changeset/poor-pens-sit.md
View file
Original file line number Diff line number Diff line change
@@ -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"
2 changes: 1 addition & 1 deletion packages/components/fields/number-field/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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` | `<number\|enum>` | | | Value is used as `step` property on input field.<br /> Use the value `any` for inputs which accept an unpredictable amount of decimals. |
| `title` | `<string\|node>` | ✅ | | 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` | `<string\|node>` | | | Provides a description for the title. |
Expand Down
6 changes: 4 additions & 2 deletions packages/components/fields/number-field/src/number-field.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
* <br />
* 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
/**
Expand Down
8 changes: 7 additions & 1 deletion packages/components/fields/number-field/src/number-field.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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={
Expand Down
2 changes: 2 additions & 0 deletions packages/components/inputs/checkbox-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@

## Description

An input component that works as checkbox input.

## Installation

```
Expand Down
2 changes: 1 addition & 1 deletion packages/components/inputs/number-input/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default Example;
| `value` | `<string\|number>` | ✅ | | 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` | `<number\|enum>` | | | Value is used as `step` property on input field<br /> 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.<br /> Signature: `(event) => void` |
| `onBlur` | `func` | | | Called when input is blurred<br /> Signature: `(event) => void` |
| `onFocus` | `func` | | | Called when input is focused<br /> Signature: `(event) => void` |
Expand Down
4 changes: 3 additions & 1 deletion packages/components/inputs/number-input/src/number-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,10 @@ NumberInput.propTypes = {
max: PropTypes.number,
/**
* Value is used as `step` property on input field
* <br />
* 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.
* <br />
Expand Down
9 changes: 8 additions & 1 deletion packages/components/inputs/number-input/src/number-input.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -19,6 +25,7 @@ storiesOf('Components|Inputs', module)
const min = text('min', '');
const max = text('max', '');
const step = text('step', '');

return (
<Section>
<Value
Expand All @@ -35,7 +42,7 @@ storiesOf('Components|Inputs', module)
onBlur={action('onBlur')}
min={min.trim() === '' ? undefined : parseInt(min, 10)}
max={max.trim() === '' ? undefined : parseInt(max, 10)}
step={step.trim() === '' ? undefined : parseFloat(step, 10)}
step={getStepValue(step)}
isAutofocussed={boolean('isAutofocussed', false)}
isDisabled={boolean('isDisabled', false)}
isReadOnly={boolean('isReadOnly', false)}
Expand Down

1 comment on commit 2348623

@vercel
Copy link

@vercel vercel bot commented on 2348623 Nov 2, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.