Merge pull request #9 from aerogear/nested-layout

Author: wtrocki

__tests__/NestField.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Card } from '@patternfly/react-core';
 import { AutoField, NestField } from 'uniforms-patternfly';
 
 import createContext from './_createContext';
@@ -46,8 +47,8 @@ test('<NestField> - renders custom content if given', () => {
   );
 
   expect(wrapper.find(AutoField)).toHaveLength(0);
-  expect(wrapper.find('article')).toHaveLength(1);
-  expect(wrapper.find('article').prop('data-test')).toBe('content');
+  expect(wrapper.find('article').at(1)).toHaveLength(1);
+  expect(wrapper.find('article').at(1).prop('data-test')).toBe('content');
 });
 
 test('<NestField> - renders a label', () => {
@@ -83,19 +84,19 @@ test('<NestField> - renders a wrapper with unknown props', () => {
 
   expect(
     wrapper
-      .find('div')
+      .find(Card)
       .at(0)
       .prop('data-x'),
   ).toBe('x');
   expect(
     wrapper
-      .find('div')
+      .find(Card)
       .at(0)
       .prop('data-y'),
   ).toBe('y');
   expect(
     wrapper
-      .find('div')
+      .find(Card)
       .at(0)
       .prop('data-z'),
   ).toBe('z');

src/NestField.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLProps } from 'react';
 import { connectField, joinName, injectName, filterDOMProps } from 'uniforms/es5';
+import { Card, CardBody } from '@patternfly/react-core';
 
 import AutoField from './AutoField';
 
@@ -27,16 +28,25 @@ const Nest = ({
 }: NestFieldProps) => {
 
   return (
-    <div
+    <Card
       {...filterDOMProps(props)}
     >
-      {label && <label>{label}</label>}
-      {children
-        ? injectName(name, children)
-        : fields?.map(key => (
-            <AutoField key={key} disabled={disabled} name={joinName(name, key)} {...itemProps} />
-          ))}
-    </div>
+      <CardBody>
+        {label && <label>{label}</label>}
+        {children
+          ? injectName(name, children)
+          : fields?.map(key => (
+              <>
+                <AutoField key={key} disabled={disabled} name={joinName(name, key)} {...itemProps} />
+                {/* 
+                  Not ideal to use a <br> tag, but a layout workaround that
+                  won't impact further nested fields
+                */}
+                <br />
+              </>
+        ))}
+      </CardBody>
+    </Card>
   );
 
 }