feat(forms): Adds children to Forms (#497)

packages/forms/src/Form.js

@@ -153,6 +153,7 @@ class Form extends React.Component {
 					this.form = c;
 				}}
 			>
+				{this.props.children}
 				<div className={this.props.buttonBlockClass}>
 					{renderActions(this.props.actions, this.handleActionClick)}
 				</div>
@@ -189,6 +190,7 @@ Form.propTypes = {
 	handleAction: PropTypes.func,
 	widgets: PropTypes.object,
 	formContext: PropTypes.func,
+	children: PropTypes.element,
 };
 
 Form.defaultProps = {

packages/forms/src/Form.test.js

@@ -256,6 +256,17 @@ describe('<Form/>', () => {
 		});
 	});
 
+	describe('children', () => {
+		it('should render children', () => {
+			wrapper = shallow(
+				<Form data={data} onSubmit={onSubmit}>
+					<h1>test</h1>
+				</Form>
+			);
+			expect(wrapper.find('h1')).toBeDefined();
+		});
+	});
+
 	describe('actions', () => {
 		it('should render default actions when no actions specified', () => {
 			// when

packages/forms/stories/index.js

@@ -242,3 +242,28 @@ decoratedStories.add('Custom widget', () => {
 		/>
 	);
 });
+
+decoratedStories.add('Form Children', () => {
+	const schema = {
+		jsonSchema: {
+			title: 'Form with children',
+			type: 'object',
+			properties: {
+				test: {
+					title: 'Test title',
+					type: 'string',
+				},
+			},
+		},
+		uiSchema: {},
+		properties: {
+			test: 'test',
+		},
+	};
+	return (
+		<Form data={schema} onSubmit={action('SUBMIT')}>
+			<h1>Child</h1>
+			<p>This is an inner child in the form</p>
+		</Form>
+	);
+});