Merge pull request #425 from reactioncommerce/feat-kieckhafer-addMinMaxToTextInput

feat: add number type and number related  props to TextInput

Author: machikoyasuda

package/src/components/Checkbox/v1/Checkbox.js

@@ -8,12 +8,12 @@ const StyledDiv = styled.div`
   margin-bottom: ${applyTheme("Checkbox.verticalSpacing")};
 `;
 
-/* eslint-disable max-len */
+
 /* eslint-disable quotes */
 // credit https://fontawesome.com/icons/check?style=solid
 const checkboxIconSVG = (props) => encodeURIComponent(`<svg aria-hidden='true' role='img' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='${applyTheme("Checkbox.iconColor")(props)}' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'></path></svg>`);
 /* eslint-enable quotes */
-/* eslint-enable max-len */
+
 
 // Opacity: 0 hides the default input and position: absolute removes it
 // from the flow so that it doesn't push the styled checkbox to the right.

package/src/components/TextInput/v1/TextInput.js

@@ -259,10 +259,18 @@ class TextInput extends Component {
      * Enable to make the input read only / disabled, disabled by default
      */
     isReadOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+    /**
+     * Maximum value for input when type === number
+     */
+    max: PropTypes.number,
     /**
      * Max amount of characters allowed in input
      */
     maxLength: PropTypes.number,
+    /**
+     * Minimum value for input when type === number
+     */
+    min: PropTypes.number,
     /**
      * Input name
      */
@@ -300,9 +308,13 @@ class TextInput extends Component {
      */
     shouldTrimValue: PropTypes.bool,
     /**
-     * The HTML input type for the text input, the input only supports "email", "password", "text", "url" defaults to "text"
+     * Increment value when type === number
+     */
+    step: PropTypes.string,
+    /**
+     * The HTML input type for the text input, the input only supports "email", "number", "password", "text", "url" defaults to "text"
      */
-    type: PropTypes.oneOf(["email", "password", "text", "url"]),
+    type: PropTypes.oneOf(["email", "number", "password", "text", "url"]),
     /**
      * Prepopulate the input's value
      */
@@ -555,10 +567,13 @@ class TextInput extends Component {
       id,
       isOnDarkBackground,
       isReadOnly,
+      max,
       maxLength,
+      min,
       name,
       placeholder,
       shouldAllowLineBreaks,
+      step,
       type
     } = this.props;
     const { isButtonFocused, isInputFocused, value } = this.state;
@@ -575,13 +590,16 @@ class TextInput extends Component {
             hasBeenValidated={hasBeenValidated}
             id={id}
             isOnDarkBackground={isOnDarkBackground}
+            max={max}
             maxLength={maxLength}
+            min={min}
             name={name}
             onBlur={this.onInputBlur}
             onChange={this.onChange}
             onFocus={this.onInputFocus}
             placeholder={placeholder}
             readOnly={isReadOnly}
+            step={step}
             value={value}
           />
           {this.showClearButton() ? this.renderClearButton() : null}
@@ -604,14 +622,17 @@ class TextInput extends Component {
           hasBeenValidated={hasBeenValidated}
           id={id}
           isOnDarkBackground={isOnDarkBackground}
+          max={max}
           maxLength={maxLength}
+          min={min}
           name={name}
           onBlur={this.onInputBlur}
           onChange={this.onChange}
           onFocus={this.onInputFocus}
           onKeyPress={this.onKeyPress}
           placeholder={placeholder}
           readOnly={isReadOnly}
+          step={step}
           type={type}
           value={value}
         />

package/src/components/TextInput/v1/TextInput.md

@@ -31,6 +31,31 @@ To enable the multi-line text input, pass the `shouldAllowLineBreaks` prop.
 </div>
 ```
 
+#### Number
+To enable the number type text input, use the `type="number"`.
+
+```jsx
+<div style={{ width: "50%" }}>
+  <TextInput name="example" placeholder="0.00" type="number"/>
+</div>
+```
+
+To set minimum or maximum values allowed, set the `min` and `max` props.
+
+```jsx
+<div style={{ width: "50%" }}>
+  <TextInput name="example" placeholder="0.00" max={10.00} min={0} type="number"/>
+</div>
+```
+
+To set the increment the input arrows will use, set the `step` prop.
+
+```jsx
+<div style={{ width: "50%" }}>
+  <TextInput name="example" placeholder="0.00" max={10.00} min={0} step="0.01" type="number"/>
+</div>
+```
+
 ### Styles
 
 By default, text inputs are white with dark text on grey backgrounds.