From ccf9d376080fbbb0d3c725d923bda07d129e068a Mon Sep 17 00:00:00 2001
From: Aaron Panchal <aaron.panchal@appfolio.com>
Date: Wed, 1 Mar 2017 12:56:33 -0800
Subject: [PATCH 1/3] ap - right-align FormRow labels on large viewports

---
 src/components/FormRow.js       | 4 ++--
 test/components/FormRow.spec.js | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/FormRow.js b/src/components/FormRow.js
index 24f395bcd..7f1b5f61e 100644
--- a/src/components/FormRow.js
+++ b/src/components/FormRow.js
@@ -48,9 +48,9 @@ const FormRow = props => {
 
   return (
     <FormGroup row color={rowColor}>
-      <Label for={id} sm={3} size={size}>
+      <Label for={id} sm={3} size={size} className="text-sm-right">
         {label}
-        {required && label ? <span className="text-danger"> *</span> : null}
+        {required && label ? <span className="text-danger">&nbsp;*</span> : null}
       </Label>
       <Col sm={9}>
         <InputElement
diff --git a/test/components/FormRow.spec.js b/test/components/FormRow.spec.js
index 0f3062a55..d048e6290 100644
--- a/test/components/FormRow.spec.js
+++ b/test/components/FormRow.spec.js
@@ -65,8 +65,10 @@ describe('<FormRow />', () => {
 
     it('should show a star', () => {
       const label = component.find(Label);
-      assert.equal(label.render().text(), 'First Name *');
-      assert.equal(label.find('span').hasClass('text-danger'), true);
+      const star = label.find('span');
+
+      assert.equal(star.hasClass('text-danger'), true);
+      assert.equal(star.text(), ' *');
     });
   });
 

From 2a2ccccd9752004e4a6940e75d9e7e2c7e448bbf Mon Sep 17 00:00:00 2001
From: Aaron Panchal <aaron.panchal@appfolio.com>
Date: Tue, 7 Mar 2017 10:34:58 -0800
Subject: [PATCH 2/3] ap - add stacked prop to FormRow

---
 src/components/FormRow.js       | 16 ++++++++++++----
 stories/Forms.js                |  1 +
 test/components/FormRow.spec.js | 22 ++++++++++++++++++++--
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/FormRow.js b/src/components/FormRow.js
index 7f1b5f61e..694791b8b 100644
--- a/src/components/FormRow.js
+++ b/src/components/FormRow.js
@@ -38,6 +38,7 @@ const FormRow = props => {
     type,
     children,
     inline,
+    stacked,
     ...attributes
   } = props;
 
@@ -46,13 +47,18 @@ const FormRow = props => {
   const [baseFeedback, childFeedback] = parseFeedback(feedback);
   const rowColor = color || state || (baseFeedback && 'danger');
 
+  const labelWidth = stacked ? 12 : 3;
+  const labelAlignment = stacked ? '' : 'text-sm-right';
+
+  const inputContainerWidth = stacked ? 12 : 9;
+
   return (
     <FormGroup row color={rowColor}>
-      <Label for={id} sm={3} size={size} className="text-sm-right">
+      <Label for={id} sm={labelWidth} size={size} className={labelAlignment}>
         {label}
         {required && label ? <span className="text-danger">&nbsp;*</span> : null}
       </Label>
-      <Col sm={9}>
+      <Col sm={inputContainerWidth}>
         <InputElement
           id={id}
           size={size}
@@ -82,7 +88,8 @@ FormRow.propTypes = {
     React.PropTypes.element,
     React.PropTypes.func
   ]),
-  inline: React.PropTypes.bool
+  inline: React.PropTypes.bool,
+  stacked: React.PropTypes.bool
 };
 
 FormRow.defaultProps = {
@@ -91,7 +98,8 @@ FormRow.defaultProps = {
   feedback: '',
   required: false,
   type: 'text',
-  inline: false
+  inline: false,
+  stacked: false
 };
 
 export default FormRow;
diff --git a/stories/Forms.js b/stories/Forms.js
index 7d8f1615e..607aa55ca 100644
--- a/stories/Forms.js
+++ b/stories/Forms.js
@@ -23,6 +23,7 @@ storiesOf('Forms', module)
         label={text('label', 'Select a Movie')}
         color={select('color', ['', 'success', 'warning', 'danger'], 'danger')}
         feedback={text('feedback', 'You must select a movie')}
+        stacked={boolean('stacked', false)}
         name="live-input"
       >
         <FormChoice />
diff --git a/test/components/FormRow.spec.js b/test/components/FormRow.spec.js
index d048e6290..e702c1984 100644
--- a/test/components/FormRow.spec.js
+++ b/test/components/FormRow.spec.js
@@ -22,12 +22,12 @@ describe('<FormRow />', () => {
       assert.equal(label.prop('for'), 'someID');
       assert.equal(label.prop('size'), 'sm');
       assert.equal(label.prop('sm'), 3);
+      assert.equal(label.prop('className'), 'text-sm-right');
       assert.equal(label.render().text(), 'First Name');
     });
 
     it('should wrap the input in a column', () => {
-      const col = component.find(Col);
-      assert.equal(col.length, 1);
+      const col = component.find(Col).first();
       assert.equal(col.prop('sm'), 9);
     });
 
@@ -170,4 +170,22 @@ describe('<FormRow />', () => {
       assert.equal(component.find(Custom).length, 1);
     });
   });
+
+  describe('stacked', () => {
+    const component = shallow(
+      <FormRow label="First Name" stacked />
+    );
+
+    it('should have a full-width label', () => {
+      const label = component.find(Label);
+      assert.equal(label.prop('sm'), 12);
+      assert.equal(label.render().text(), 'First Name');
+      assert.equal(label.prop('className'), '');
+    });
+
+    it('should make input full-width', () => {
+      const col = component.find(Col).first();
+      assert.equal(col.prop('sm'), 12);
+    });
+  });
 });

From 002e00b7b74f145813f344959afceab450ce1511 Mon Sep 17 00:00:00 2001
From: Aaron Panchal <aaron.panchal@appfolio.com>
Date: Tue, 7 Mar 2017 13:59:14 -0800
Subject: [PATCH 3/3] ap - add customizable width for inputs in FormRows

---
 src/components/FormRow.js       | 31 +++++++++++++++++++------------
 stories/Forms.js                | 13 +++++++++++++
 test/components/FormRow.spec.js | 21 +++++++++++++++++++--
 3 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/src/components/FormRow.js b/src/components/FormRow.js
index 694791b8b..2c31e1102 100644
--- a/src/components/FormRow.js
+++ b/src/components/FormRow.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormGroup, Input, Label, Col, FormFeedback, FormText } from 'reactstrap';
+import { FormGroup, Input, Label, Col, Row, FormFeedback, FormText } from 'reactstrap';
 
 import CheckboxInput from './CheckboxInput';
 import RadioInput from './RadioInput';
@@ -39,6 +39,7 @@ const FormRow = props => {
     children,
     inline,
     stacked,
+    width,
     ...attributes
   } = props;
 
@@ -59,15 +60,19 @@ const FormRow = props => {
         {required && label ? <span className="text-danger">&nbsp;*</span> : null}
       </Label>
       <Col sm={inputContainerWidth}>
-        <InputElement
-          id={id}
-          size={size}
-          state={rowColor}
-          type={type}
-          children={React.Children.map(children, child => React.cloneElement(child, { type }))}
-          {...attributes}
-          {...childFeedback}
-        />
+        <Row>
+          <Col {...width} >
+            <InputElement
+              id={id}
+              size={size}
+              state={rowColor}
+              type={type}
+              children={React.Children.map(children, child => React.cloneElement(child, { type }))}
+              {...attributes}
+              {...childFeedback}
+            />
+          </Col>
+        </Row>
         {hint ? <FormText color="muted" children={hint} /> : null}
         {baseFeedback ? <FormFeedback children={baseFeedback} /> : null}
       </Col>
@@ -89,7 +94,8 @@ FormRow.propTypes = {
     React.PropTypes.func
   ]),
   inline: React.PropTypes.bool,
-  stacked: React.PropTypes.bool
+  stacked: React.PropTypes.bool,
+  width: React.PropTypes.object
 };
 
 FormRow.defaultProps = {
@@ -99,7 +105,8 @@ FormRow.defaultProps = {
   required: false,
   type: 'text',
   inline: false,
-  stacked: false
+  stacked: false,
+  width: { xs: 12 }
 };
 
 export default FormRow;
diff --git a/stories/Forms.js b/stories/Forms.js
index 607aa55ca..c52ff1d25 100644
--- a/stories/Forms.js
+++ b/stories/Forms.js
@@ -15,6 +15,12 @@ const formData = {
   }
 };
 
+const colKnobOptions = {
+  range: true,
+  min: 0,
+  max: 12
+};
+
 storiesOf('Forms', module)
   .addWithInfo('Live example', () => (
     <div>
@@ -24,6 +30,13 @@ storiesOf('Forms', module)
         color={select('color', ['', 'success', 'warning', 'danger'], 'danger')}
         feedback={text('feedback', 'You must select a movie')}
         stacked={boolean('stacked', false)}
+        width={{
+          xs: number('xs width', 12, colKnobOptions),
+          sm: number('sm width', 12, colKnobOptions),
+          md: number('md width', 12, colKnobOptions),
+          lg: number('lg width', 12, colKnobOptions),
+          xl: number('xl width', 12, colKnobOptions )
+        }}
         name="live-input"
       >
         <FormChoice />
diff --git a/test/components/FormRow.spec.js b/test/components/FormRow.spec.js
index e702c1984..3016baa99 100644
--- a/test/components/FormRow.spec.js
+++ b/test/components/FormRow.spec.js
@@ -27,7 +27,7 @@ describe('<FormRow />', () => {
     });
 
     it('should wrap the input in a column', () => {
-      const col = component.find(Col).first();
+      const col = component.find(Col).at(0);
       assert.equal(col.prop('sm'), 9);
     });
 
@@ -56,6 +56,11 @@ describe('<FormRow />', () => {
       assert.equal(component.prop('color'), 'warning');
       assert.equal(component.find(Input).prop('state'), 'warning');
     });
+
+    it('should have an inner column width of 12', () => {
+      const col = component.find(Col).at(1); // inner column
+      assert.equal(col.prop('xs'), 12);
+    });
   });
 
   describe('when required', () => {
@@ -184,8 +189,20 @@ describe('<FormRow />', () => {
     });
 
     it('should make input full-width', () => {
-      const col = component.find(Col).first();
+      const col = component.find(Col).at(0);
       assert.equal(col.prop('sm'), 12);
     });
   });
+
+  describe('with custom width', () => {
+    const component = shallow(
+      <FormRow label="First Name" width={{ xs: 6, sm: 7 }} />
+    );
+
+    it('should set the inner column width', () => {
+      const col = component.find(Col).at(1); // inner column
+      assert.equal(col.prop('xs'), 6);
+      assert.equal(col.prop('sm'), 7);
+    });
+  });
 });