added modal footer

scm-ui-components/packages/ui-components/src/modals/ConfirmAlert.js

@@ -29,33 +29,40 @@ class ConfirmAlert extends React.Component<Props> {
   render() {
     const { title, message, buttons } = this.props;
 
-    const body= (
+    const body = <>{message}</>;
-      <>
+
-        {message}
+    const footer = (
-        <div className="buttons is-right">
+      <div className="field is-grouped">
-          {buttons.map((button, i) => (
+        {buttons.map((button, i) => (
-            <a className="button is-info is-right"
+          <p className="control">
-               key={i}
+            <a
-               onClick={() => this.handleClickButton(button)}
+              className="button is-info"
+              key={i}
+              onClick={() => this.handleClickButton(button)}
             >
               {button.label}
             </a>
-          ))}
+          </p>
-        </div>
+        ))}
-        </>
+      </div>
     );
 
-
     return (
-      <Modal title={title} closeFunction={() => this.close()} body={body} active={true}/>
+      <Modal
+        title={title}
+        closeFunction={() => this.close()}
+        body={body}
+        active={true}
+        footer={footer}
+      />
     );
   }
 }
 
 export function confirmAlert(properties: Props) {
   const root = document.getElementById("modalRoot");
-  if(root){
+  if (root) {
-    ReactDOM.render(<ConfirmAlert {...properties}/>, root);
+    ReactDOM.render(<ConfirmAlert {...properties} />, root);
   }
 }
 

scm-ui-components/packages/ui-components/src/modals/Modal.js

@@ -7,6 +7,7 @@ type Props = {
   title: string,
   closeFunction: () => void,
   body: any,
+  footer?: any,
   active: boolean,
   classes: any
 };
@@ -19,42 +20,35 @@ const styles = {
   }
 };
 
-
-
 class Modal extends React.Component<Props> {
-
   render() {
-    const { title, closeFunction, body, active, classes } = this.props;
+    const { title, closeFunction, body, footer, active, classes } = this.props;
 
     const isActive = active ? "is-active" : null;
 
+    let showFooter = null;
+    if (footer) {
+      showFooter = <footer className="modal-card-foot">{footer}</footer>;
+    }
+
     return (
-      <div className={classNames(
+      <div className={classNames("modal", isActive)}>
-        "modal",
-        isActive
-      )}>
         <div className="modal-background" />
         <div className={classNames("modal-card", classes.resize)}>
-
           <header className="modal-card-head">
-            <p className="modal-card-title">
+            <p className="modal-card-title">{title}</p>
-              {title}
-            </p>
             <button
               className="delete"
               aria-label="close"
               onClick={closeFunction}
             />
           </header>
-          <section className="modal-card-body">
+          <section className="modal-card-body">{body}</section>
-            {body}
+          {showFooter}
-          </section>
-
         </div>
       </div>
     );
   }
 }
 
-
 export default injectSheet(styles)(Modal);

scm-ui/styles/scm.scss

@@ -314,3 +314,10 @@ $fa-font-path: "webfonts";
     border-bottom: 1px solid #eee;
   }
 }
+
+// modal
+.modal {
+  .modal-card-foot {
+    justify-content: flex-end; // pulled-right
+  }
+}