Merge pull request #258 from rdjpalmer/input-field-flexibility

Stop `<InputField />` strictly requiring children
appearhere · Apr 27, 2017 · 64c2b95 · 64c2b95
2 parents 1c3cb13 + d94b341
commit 64c2b95
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/components/Form/InputField/InputField.js b/components/Form/InputField/InputField.js
@@ -26,7 +26,7 @@ export default class InputField extends Component {
     meta: PropTypes.node,
     label: PropTypes.node,
     description: PropTypes.node,
-    children: PropTypes.element.isRequired,
+    children: PropTypes.element,
     error: PropTypes.node,
     valueReplay: PropTypes.node,
     required: PropTypes.bool,
@@ -92,20 +92,22 @@ export default class InputField extends Component {
             { description }
           </Description>
         ) }
-        <InputWrapper
-          { ...sharedProps }
-          classNames={ classNames.inputWrapper }
-        >
-          { cloneElement(children, {
-            ...rest,
-            ...sharedProps,
-            ref: (c) => { this.input = c; },
-            name: id,
-            id,
-            required,
-            'aria-describedby': descriptionId,
-          }) }
-        </InputWrapper>
+        { children && (
+          <InputWrapper
+            { ...sharedProps }
+            classNames={ classNames.inputWrapper }
+          >
+            { cloneElement(children, {
+              ...rest,
+              ...sharedProps,
+              ref: (c) => { this.input = c; },
+              name: id,
+              id,
+              required,
+              'aria-describedby': descriptionId,
+            }) }
+          </InputWrapper>
+        ) }
       </Element>
     );
   }

diff --git a/components/Form/InputField/InputField.story.js b/components/Form/InputField/InputField.story.js
@@ -46,6 +46,13 @@ const WrappedSelect = () => (
 );
 
 stories
+  .add('Simple', () => (
+    <InputField
+      id="0"
+      label="Appearing date"
+      valueReplay="31 Mar"
+    />
+  ))
   .add('CheckboxGroup', () => {
     const value = array('Value(s)', ['1'], ',');