Merge pull request #411 from appfolio/correctHMFRow

gt - Add className to HMFRow
appfolio · May 30, 2018 · 13128ad · 13128ad
2 parents d314c13 + 8fb1e08
commit 13128ad
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/src/components/HasManyFieldsRow.d.ts b/src/components/HasManyFieldsRow.d.ts
@@ -2,10 +2,11 @@ import * as React from 'react';
 
 interface HasManyFieldsRowProps {
   children: (JSX.Element | string) | (JSX.Element | string)[];
+  className?: string;
   onDelete?: React.MouseEventHandler<any>;
   disabled?: boolean;
-  disabledReason: (JSX.Element | string) | (JSX.Element | string)[];
-  disabledReasonPlacement: string;
+  disabledReason?: (JSX.Element | string) | (JSX.Element | string)[];
+  disabledReasonPlacement?: string;
 }
 declare class HasManyFieldsRow extends React.Component<HasManyFieldsRowProps, {}> { }
 export default HasManyFieldsRow;
diff --git a/src/components/HasManyFieldsRow.js b/src/components/HasManyFieldsRow.js
@@ -1,5 +1,6 @@
 import noop from 'lodash.noop';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import React from 'react';
 import Button from './Button';
 import ConfirmationButton from './ConfirmationButton';
@@ -17,6 +18,7 @@ function getID() {
 export default class HasManyFieldsRow extends React.Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
+    className: PropTypes.string,
     disabled: PropTypes.bool,
     disabledReason: PropTypes.node,
     disabledReasonPlacement: PropTypes.string,
@@ -36,15 +38,17 @@ export default class HasManyFieldsRow extends React.Component {
   render() {
     const {
       children,
+      className,
       disabledReason,
       onDelete,
       disabled,
       disabledReasonPlacement
     } = this.props;
 
+    const classNames = classnames('mb-3', className);
     // The `disabled ? <Button> : <ConfirmationButton>` code works around Tooltips not show on `disabled` elements:
     return (
-      <Row className="mb-3" noGutters>
+      <Row className={classNames} noGutters>
         <Col>{children}</Col>
         <Col xs="auto" className="pl-3 d-flex">
           {disabled ? (

diff --git a/stories/HasManyFields.js b/stories/HasManyFields.js
@@ -21,7 +21,7 @@ const items = [
 ];
 
 storiesOf('HasManyFields', module)
-  .addWithInfo('Row Wrapper', () =>
+  .addWithInfo('Row Wrapper', () => (
     <HasManyFieldsRow
       onDelete={action('onDelete')}
       disabled={boolean('disabled', false)}
@@ -32,13 +32,13 @@ storiesOf('HasManyFields', module)
         defaultValue="I can put an input (or whatever else) inside a HasManyFieldsRow"
       />
     </HasManyFieldsRow>
-  )
-  .addWithInfo('Add Item Button', () =>
+  ))
+  .addWithInfo('Add Item Button', () => (
     <HasManyFieldsAdd onClick={action('onClick')}>
       Button Label Content
     </HasManyFieldsAdd>
-  )
-  .addWithInfo('Full Example', () =>
+  ))
+  .addWithInfo('Full Example', () => (
     <HasManyFields
       defaultValue={items}
       template={AddressInput}
@@ -50,4 +50,4 @@ storiesOf('HasManyFields', module)
       onUpdate={action('hasManyFields onUpdate')}
       onChange={action('hasManyFields onChange')}
     />
-  );
+  ));