Add form component styling

This commit is contained in:
David Craig 2016-04-21 14:49:27 +12:00 committed by Ingo Schommer
parent 58036cd156
commit 1ad6730b9e
4 changed files with 14 additions and 4 deletions

View File

@ -5,7 +5,7 @@ class GridFieldTable extends SilverStripeComponent {
render() { render() {
return ( return (
<div className="container-fluid grid-field"> <div className="grid-field">
<table className="table table-hover grid-field__table"> <table className="table table-hover grid-field__table">
<thead>{this.generateHeader()}</thead> <thead>{this.generateHeader()}</thead>
<tbody>{this.generateRows()}</tbody> <tbody>{this.generateRows()}</tbody>

View File

@ -18,14 +18,18 @@ class Form extends SilverStripeComponent {
} }
render() { render() {
const props = Object.assign({ onSubmit: this.handleSubmit }, this.props.attributes); const defaultFormProps = {
className: 'container-fluid form-component',
onSubmit: this.handleSubmit,
};
const formProps = Object.assign({}, this.props.attributes, defaultFormProps);
const fields = this.props.mapFieldsToComponents(this.props.fields); const fields = this.props.mapFieldsToComponents(this.props.fields);
const actions = this.props.mapActionsToComponents(this.props.actions); const actions = this.props.mapActionsToComponents(this.props.actions);
return ( return (
<form {...props}> <form {...formProps}>
{fields && {fields &&
<fieldset className="form-group"> <fieldset>
{fields} {fields}
</fieldset> </fieldset>
} }

View File

@ -0,0 +1,4 @@
.form-component {
padding-top: $spacer-y;
padding-bottom: $spacer-y;
}

View File

@ -34,6 +34,8 @@
@import "../components/HiddenField/HiddenField"; @import "../components/HiddenField/HiddenField";
@import "../components/Label/Label"; @import "../components/Label/Label";
@import "../components/Preview/Preview"; @import "../components/Preview/Preview";
@import "../components/NorthHeader/NorthHeader";
@import "../components/Form/Form";
// Layout and sections // Layout and sections
@import "layout"; @import "layout";