Merge pull request #422 from appfolio/correctFormRowWidth

Correct FormRow and FormLabelGroup width
appfolio · Jun 19, 2018 · 2b80c81 · 2b80c81
2 parents ab2490a + a607e14
commit 2b80c81
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/src/components/Alert.js b/src/components/Alert.js
@@ -20,6 +20,7 @@ export default class AlertComponent extends React.Component {
   }
 
   static defaultProps = {
+    className: '',
     color: 'warning',
     dismissible: false,
     icon: false
@@ -35,23 +36,24 @@ export default class AlertComponent extends React.Component {
     };
   }
 
-  componentWillReceiveProps() {
-    this.setState({ visible: true });
-  }
-
   toggle = () => {
     this.setState({ visible: !this.state.visible });
   }
 
+  componentWillReceiveProps() {
+    this.setState({ visible: true });
+  }
+
   render() {
-    const { color, children, className, dismissible, icon } = this.props;
+    const { color, children, className, dismissible, icon, ...props } = this.props;
 
     return (
       <Alert
         color={color}
         isOpen={this.state.visible}
         toggle={dismissible ? this.toggle : null}
         className={className}
+        {...props}
       >
         <div className="d-flex align-items-start">
           {icon ? <Icon name={ICON_MAP[color]} size="lg" className="mr-3 mt-1" /> : null}

diff --git a/src/components/FormLabelGroup.js b/src/components/FormLabelGroup.js
@@ -26,7 +26,7 @@ const FormLabelGroup = (props) => {
   const rowColor = color || (feedback && 'danger');
   const labelWidth = stacked ? 12 : 3;
   const labelAlignment = stacked ? '' : 'text-sm-right';
-  const inputContainerWidth = stacked ? 12 : 9;
+  const inputContainerWidth = (stacked || !label) ? 12 : 9;
 
   return (
     <FormGroup row className={rowClassName} color={rowColor}>

diff --git a/src/components/FormRow.js b/src/components/FormRow.js
@@ -59,7 +59,7 @@ const FormRow = (props) => {
   const labelWidth = stacked ? 12 : 3;
   const labelAlignment = stacked ? '' : 'text-sm-right';
 
-  const inputContainerWidth = stacked ? 12 : 9;
+  const inputContainerWidth = (stacked || !label) ? 12 : 9;
 
   // TODO this should use FormLabelGroup vs duplicated code here:
   return (

diff --git a/test/components/FormLabelGroup.spec.js b/test/components/FormLabelGroup.spec.js
@@ -22,7 +22,7 @@ describe('<FormLabelGroup />', () => {
 
     it('should have an outer column for the row where the children are rendered', () => {
       const col = component.find(Col).at(0);
-      assert.equal(col.prop('sm'), 9);
+      assert.equal(col.prop('sm'), 12);
     });
 
     it('should have an inner column wrapping the children', () => {
@@ -75,6 +75,12 @@ describe('<FormLabelGroup />', () => {
       const star = label.find('Required');
       assert.equal(star.length, 1);
     });
+
+    it('should have an outer column for the row where the children are rendered', () => {
+      const component = shallow(<FormLabelGroup {...props} required>Hello World</FormLabelGroup>);
+      const col = component.find(Col).at(0);
+      assert.equal(col.prop('sm'), 9);
+    });
   });
 
   describe('with a node label', () => {