Merge pull request #640 from open-sausages/pulls/1/modal-citizen

ENHANCEMENT Use bootstrap modal footer, use our icon font for close icon

client/src/components/Form/Form.js

@@ -64,7 +64,7 @@ class Form extends Component {
         role="form"
       >
         {fields &&
-          <fieldset>
+          <fieldset {...this.props.fieldHolder}>
             {messages}
             {this.props.afterMessages}
 
@@ -73,7 +73,10 @@ class Form extends Component {
         }
 
         { actions && actions.length
-          ? <div className="btn-toolbar" role="group">{actions}</div>
+          ?
+            <div {...this.props.actionHolder}>
+              {actions}
+            </div>
           : null
         }
       </FormTag>
@@ -86,6 +89,13 @@ Form.propTypes = {
   setDOM: PropTypes.func,
   valid: PropTypes.bool,
   actions: PropTypes.array,
+  fieldHolder: PropTypes.shape({
+    className: PropTypes.string
+  }),
+  actionHolder: PropTypes.shape({
+    className: PropTypes.string
+  }),
+  extraClass: React.PropTypes.string,
   afterMessages: PropTypes.node,
   attributes: PropTypes.shape({
     action: PropTypes.string.isRequired,
@@ -110,6 +120,9 @@ Form.propTypes = {
 Form.defaultProps = {
   setDOM: () => null,
   formTag: 'form',
+  actionHolder: {
+    className: 'btn-toolbar'
+  }
 };
 
 export default Form;

client/src/components/Form/Form.scss

@@ -7,7 +7,7 @@
   flex-direction: column;
 
   > fieldset {
-    flex: 1;
+    flex: 1 1 auto;
     overflow-y: auto;
   }
 

client/src/components/FormBuilder/FormBuilder.js

@@ -312,6 +312,8 @@ class FormBuilder extends Component {
 
     const {
       asyncValidate,
+      fieldHolder,
+      actionHolder,
       onSubmitFail,
       onSubmitSuccess,
       shouldAsyncValidate,
@@ -328,7 +330,9 @@ class FormBuilder extends Component {
       form, // required as redux-form identifier
       afterMessages,
       fields: this.normalizeFields(schema.fields, state),
+      fieldHolder,
       actions: this.normalizeFields(schema.actions, state),
+      actionHolder,
       attributes,
       data: schema.data,
       initialValues: schemaFieldValues(schema, state),

client/src/components/FormBuilderModal/FormBuilderModal.js

@@ -1,8 +1,9 @@
 import React, { Component } from 'react';
 import i18n from 'i18n';
-import { Modal, ModalHeader, ModalBody } from 'reactstrap';
+import { Modal, ModalHeader } from 'reactstrap';
 import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
 import castStringToElement from 'lib/castStringToElement';
+import classnames from 'classnames';
 
 const noop = () => null;
 
@@ -27,6 +28,8 @@ class FormBuilderModal extends Component {
     }
     return (
       <FormBuilderLoader
+        fieldHolder={{ className: classnames('modal-body', this.props.bodyClassName) }}
+        actionHolder={{ className: 'modal-footer' }}
         autoFocus={this.props.autoFocus}
         schemaUrl={this.props.schemaUrl}
         onSubmit={this.handleSubmit}
@@ -150,12 +153,10 @@ class FormBuilderModal extends Component {
       return (
         <button
           type="button"
-          className="close form-builder-modal__close-button"
+          className="close modal__close-button"
           onClick={this.handleHide}
           aria-label={i18n._t('Admin.CLOSE', 'Close')}
-        >
-          <span aria-hidden="true">×</span>
-        </button>
+        />
       );
     }
 
@@ -175,11 +176,9 @@ class FormBuilderModal extends Component {
         size={this.props.size}
       >
         {this.renderHeader()}
-        <ModalBody className={this.props.bodyClassName}>
-          {response}
-          {form}
-          {this.props.children}
-        </ModalBody>
+        {response}
+        {form}
+        {this.props.children}
       </Modal>
     );
   }
@@ -212,6 +211,7 @@ FormBuilderModal.defaultProps = {
   onLoadingError: noop,
   isOpen: false,
   title: null,
+  modalClassName: 'form-builder-modal',
   responseClassGood: 'alert alert-success',
   responseClassBad: 'alert alert-danger',
 };

client/src/components/FormBuilderModal/FormBuilderModal.scss

@@ -1,18 +1,7 @@
-.form-builder-modal__close-button {
-  position: relative;
-  z-index: 2;
-  font-size: 28px;
-  height: 32px;
-  opacity: .5;
-  margin-top: 0;
-
-  span {
-    overflow: hidden;
-    display: block;
-    margin-top: -6px;
-  }
-
-  &:hover {
-    opacity: .7;
+.form-builder-modal {
+  .loading--form {
+    flex: 1 1 auto;
+    position: relative;
+    height: 200px;
   }
 }

client/src/components/Modal/Modal.scss

@@ -20,6 +20,13 @@
   border: 0;
 }
 
+.modal__dialog {
+  .form-group:last-of-type,
+  .form-group:last-of-type .form-group {
+    margin-bottom: 0;
+  }
+}
+
 .modal__dialog--scrollable {
   overflow: auto;
 }
@@ -34,20 +41,13 @@
   .close {
     position: relative;
     z-index: 2;
-    font-size: 28px;
     height: 32px;
-    opacity: .5;
+    opacity: 1;
     margin-top: 0;
     margin-right: -$panel-padding-x;
 
     span {
-      overflow: hidden;
-      display: block;
-      margin-top: -6px;
-    }
-
-    &:hover {
-      opacity: .7;
+      display: none;
     }
   }
 
@@ -59,20 +59,43 @@
   }
 }
 
-.modal-body {
-  min-height: 200px;
-  display: flex;
+.modal__close-button,
+.modal-header .close {
+  opacity: 1;
 
-  &>.form,
-  &>div {
-    flex: 1;
-    height: auto;
-    width: 100%;
+  // We can't insert our own classes into the header close button
+  // so manually add font icon styles
+  &::before {
+    content: "\44"; // font-icon-cancel
+    color: $body-color;
+    position: relative;
+    top: -.2em;
+    font-size: 22px; // btn-icon-xl
+    font-family: silverstripe;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    speak: none;
+    line-height: 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    transition: color $transition-speed-fast;
   }
 
-  &>.alert {
-    flex-grow: 0;
+  &:hover::before {
+    color: $link-hover-color;
   }
+
+  // Hide default modal close icon
+  span {
+    display: none;
+  }
+}
+
+.modal-footer {
+  justify-content: flex-start;
 }
 
 .modal__response {

client/src/containers/FormBuilderLoader/FormBuilderLoader.js

@@ -405,7 +405,7 @@ class FormBuilderLoader extends Component {
     // If the response from fetching the initial data
     // hasn't come back yet, don't render anything.
     if (!this.props.schema || !this.props.schema.schema || this.props.loading) {
-      return <Loading />;
+      return <Loading containerClass="loading--form flexbox-area-grow" />;
     }
 
     const props = Object.assign({}, this.props, {