Merge pull request #261 from puppetlabs/tasks/add-formfield-class

Add `innerClassName` prop to Form.Field

Author: vine77

packages/react-components/source/react/library/form/FormField.js

@@ -43,6 +43,8 @@ const propTypes = {
   onChange: PropTypes.func,
   /** Optional additional className */
   className: PropTypes.string,
+  /** Optional additional className for inner field */
+  innerClassName: PropTypes.string,
   /** Optional additional inline styles */
   style: PropTypes.shape({}),
   /** All additional props are propagated to the inner input elements. See each option for details. TODO: figure out how to get this set up in styleguidist */
@@ -62,6 +64,7 @@ const defaultProps = {
   inlineLabelWidth: null,
   onChange() {},
   className: '',
+  innerClassName: '',
   style: {},
 };
 
@@ -70,15 +73,16 @@ const defaultProps = {
  */
 export const formInputInterface = omit(
   [
-    'requiredFieldMessage',
-    'validateOnLoad',
-    'validator',
     'className',
     'description',
-    'style',
-    'labelType',
     'inline',
     'inlineLabelWidth',
+    'innerClassName',
+    'labelType',
+    'requiredFieldMessage',
+    'style',
+    'validateOnLoad',
+    'validator',
   ],
   propTypes,
 );
@@ -108,23 +112,24 @@ const getFieldStyle = (style, inlineLabelWidth, tabbed) => {
 
 const FormField = props => {
   const {
-    type,
-    name,
-    label,
-    labelType,
     className,
+    description,
+    error,
+    innerClassName,
     inline,
     inlineLabelWidth,
-    error,
-    description,
+    label,
+    labelType,
+    name,
     style,
+    type,
   } = props;
   const typeName = getTypeName(type);
   const tabbed = inline && (type === 'checkbox' || type === 'switch');
   const labelStyle = getLabelStyle(inlineLabelWidth, inline);
   const fieldStyle = getFieldStyle(style, inlineLabelWidth, tabbed);
 
-  const element = <FormFieldElement {...props} />;
+  const element = <FormFieldElement {...props} className={innerClassName} />;
 
   if (type === 'hidden') {
     return element;

packages/react-components/source/react/library/form/internal/FormFieldElement.js

@@ -51,11 +51,11 @@ const FormFieldElement = props => {
 
   const elementProps = omit(
     [
+      'description',
       'inline',
       'inlineLabelWidth',
+      'innerClassName',
       'labelType',
-      'description',
-      'className',
       'style',
       'requiredFieldMessage',
       'validateOnLoad',

packages/react-components/test/form/FormField.js

@@ -95,6 +95,14 @@ describe('<FormField />', () => {
     );
   });
 
+  it('applies an innerClassName to the inner input element', () => {
+    expect(
+      mount(<FormField {...requiredProps} innerClassName="hello-world" />).find(
+        Input,
+      ),
+    ).to.have.prop('className', 'hello-world');
+  });
+
   it('renders an Input for all Input supported types', () => {
     INPUT_SUPPORTED_TYPES.forEach(type => {
       expect(