Merge pull request #284 from appfolio/formRowUpdates

gt - Add className to FormRow
appfolio · Aug 22, 2017 · 8ce7cab · 8ce7cab
2 parents 24287d5 + 09b3435
commit 8ce7cab
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/src/components/FormRow.js b/src/components/FormRow.js
@@ -28,18 +28,19 @@ function parseFeedback(feedback) {
 
 const FormRow = props => {
   const {
-    id,
-    size,
-    label,
+    children,
     color,
-    state,
-    hint,
     feedback,
-    required,
-    type,
-    children,
+    hint,
+    id,
     inline,
+    label,
+    required,
+    rowClassName,
+    size,
     stacked,
+    state,
+    type,
     width,
     ...attributes
   } = props;
@@ -55,7 +56,11 @@ const FormRow = props => {
   const inputContainerWidth = stacked ? 12 : 9;
 
   return (
-    <FormGroup row color={rowColor}>
+    <FormGroup
+      row
+      className={rowClassName}
+      color={rowColor}
+    >
       {label && (
         <Label for={id} sm={labelWidth} size={size} className={labelAlignment}>
           {label}
@@ -91,6 +96,7 @@ FormRow.propTypes = {
     PropTypes.object
   ]),
   required: PropTypes.bool,
+  rowClassName: PropTypes.string,
   type: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.element,
@@ -102,13 +108,14 @@ FormRow.propTypes = {
 };
 
 FormRow.defaultProps = {
-  label: '',
-  hint: '',
   feedback: '',
-  required: false,
-  type: 'text',
+  hint: '',
   inline: false,
+  label: '',
+  required: false,
+  rowClassName: '',
   stacked: false,
+  type: 'text',
   width: { xs: 12 }
 };
 

diff --git a/test/components/FormRow.spec.js b/test/components/FormRow.spec.js
@@ -113,6 +113,13 @@ describe('<FormRow />', () => {
     });
   });
 
+  describe('with className', () => {
+    const component = shallow(
+      <FormRow label="First Name" rowClassName="balloob" />
+    );
+    assert(component.hasClass('balloob'));
+  });
+
   describe('with hint', () => {
     const component = shallow(
       <FormRow label="First Name" hint="hint" />