fix(Input): fix size prop (#662)

Deprecated size prop on input. Use bsSize going forward. Closes #660
reactstrap · Oct 30, 2017 · cc2bd13 · cc2bd13
1 parent 839419e
commit cc2bd13
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 9 deletions.
diff --git a/docs/lib/Components/FormPage.js b/docs/lib/Components/FormPage.js
@@ -53,6 +53,7 @@ export default class FormPage extends React.Component {
   // type can be things like text, password, (typical input types) as well as select and textarea, providing children as you normally would to those.
   type: PropTypes.string,
   size: PropTypes.string,
+  bsSize: PropTypes.string,
   state: deprecated(PropTypes.string, 'Please use the prop "valid"'),
   valid: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),

diff --git a/docs/lib/examples/InputGridSizing.js b/docs/lib/examples/InputGridSizing.js
@@ -8,7 +8,7 @@ export default class Example extends React.Component {
         <FormGroup row>
           <Label for="exampleEmail" sm={2} size="lg">Email</Label>
           <Col sm={10}>
-            <Input type="email" name="email" id="exampleEmail" placeholder="lg" size="lg" />
+            <Input type="email" name="email" id="exampleEmail" placeholder="lg" bsSize="lg" />
           </Col>
         </FormGroup>
         <FormGroup row>

diff --git a/docs/lib/examples/InputSizing.js b/docs/lib/examples/InputSizing.js
@@ -5,16 +5,16 @@ export default class Example extends React.Component {
   render() {
     return (
       <Form>
-        <Input placeholder="lg" size="lg" />
+        <Input placeholder="lg" bsSize="lg" />
         <Input placeholder="default" />
-        <Input placeholder="sm" size="sm" />
-        <Input type="select" size="lg">
+        <Input placeholder="sm" bsSize="sm" />
+        <Input type="select" bsSize="lg">
           <option>Large Select</option>
         </Input>
         <Input type="select">
           <option>Default Select</option>
         </Input>
-        <Input type="select" size="sm">
+        <Input type="select" bsSize="sm">
           <option>Small Select</option>
         </Input>
       </Form>

diff --git a/src/Input.js b/src/Input.js
@@ -3,12 +3,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { mapToCssModules, deprecated } from './utils';
+import { mapToCssModules, deprecated, warnOnce } from './utils';
 
 const propTypes = {
   children: PropTypes.node,
   type: PropTypes.string,
   size: PropTypes.string,
+  bsSize: PropTypes.string,
   state: deprecated(PropTypes.string, 'Please use the prop "valid"'),
   valid: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
@@ -31,7 +32,7 @@ class Input extends React.Component {
       className,
       cssModule,
       type,
-      size,
+      bsSize,
       state,
       valid,
       tag,
@@ -43,6 +44,7 @@ class Input extends React.Component {
     } = this.props;
 
     const checkInput = ['radio', 'checkbox'].indexOf(type) > -1;
+    const isNotaNumber = new RegExp('\\D', 'g');
 
     const fileInput = type === 'file';
     const textareaInput = type === 'textarea';
@@ -72,11 +74,17 @@ class Input extends React.Component {
       }
     }
 
+    if (attributes.size && isNotaNumber.test(attributes.size)) {
+      warnOnce('Please use the prop "bsSize" instead of the "size" to bootstrap\'s input sizing.');
+      bsSize = attributes.size;
+      delete attributes.size;
+    }
+
     const classes = mapToCssModules(classNames(
       className,
       valid === false && 'is-invalid',
       valid && 'is-valid',
-      size ? `form-control-${size}` : false,
+      bsSize ? `form-control-${bsSize}` : false,
       formControlClass
     ), cssModule);
 

diff --git a/src/__tests__/Input.spec.js b/src/__tests__/Input.spec.js
@@ -94,12 +94,26 @@ describe('Input', () => {
     expect(wrapper.hasClass('is-valid')).toBe(true);
   });
 
-  it('should render with "form-control-${size}" class when size is provided', () => {
+  it('should render with "form-control-${size}" class when size is "lg" or "sm"', () => {
     const wrapper = shallow(<Input size="lg" />);
 
     expect(wrapper.hasClass('form-control-lg')).toBe(true);
   });
 
+  it('should render with "form-control" class when size is nor "lg" nor "sm"', () => {
+    const wrapper = shallow(<Input size="5" />);
+
+    expect(wrapper.hasClass('form-control-sm')).toBe(false);
+    expect(wrapper.hasClass('form-control-lg')).toBe(false);
+    expect(wrapper.hasClass('form-control')).toBe(true);
+  });
+
+  it('should render with "form-control-${bsSize}" class when bsSize is provided', () => {
+    const wrapper = shallow(<Input bsSize="sm" />);
+
+    expect(wrapper.hasClass('form-control-sm')).toBe(true);
+  });
+
   it('should render with "form-control" class by default', () => {
     const wrapper = shallow(<Input />);