add cancel callback to forms

packages/nova-base-components/lib/comments/list/CommentEdit.jsx

@@ -6,15 +6,16 @@ class CommentEdit extends Component {
 
   render() {
     return (
-      <div className="comment-edit">
+      <div className="comment-edit-form">
         <NovaForm 
           collection={Comments}
           document={this.props.comment}
           currentUser={this.context.currentUser}
           methodName="comments.edit"
           successCallback={this.props.successCallback}
+          layout="elementOnly"
+          cancelCallback={this.props.cancelCallback}
         />
-        <a className="comment-edit-cancel" onClick={this.props.cancelCallback}>Cancel</a>
       </div>
     )
   }

packages/nova-base-components/lib/comments/list/CommentList.jsx

@@ -6,20 +6,20 @@ const CommentList = ({results, currentUser, hasMore, ready, count, totalCount, l
   
   if (!!results.length) {
     return (
-      <div className="comment-list">
+      <div className="comments-list">
         {results.map(comment => <CommentNode comment={comment} key={comment._id} currentUser={currentUser}/>)}
         {hasMore ? (ready ? <LoadMore loadMore={loadMore} count={count} totalCount={totalCount} /> : <Loading/>) : <NoMorePosts/>}
       </div>
     )
   } else if (!ready) {
     return (
-      <div className="comment-list">
+      <div className="comments-list">
         <Loading/>
       </div>
     )
   } else {
     return (
-      <div className="comment-list">
+      <div className="comments-list">
         <p>No comments to display.</p>
       </div>
     )  

packages/nova-base-components/lib/comments/list/CommentNew.jsx

@@ -25,8 +25,9 @@ class CommentNew extends Component {
           prefilledProps={prefilledProps}
           successCallback={this.props.successCallback}
           labelFunction={(fieldName)=>Telescope.utils.getFieldLabel(fieldName, Comments)}
+          layout="elementOnly"
+          cancelCallback={this.props.type === "reply" ? this.props.cancelCallback : null}
         />
-        {this.props.type === "reply" ? <a className="comment-edit-cancel" onClick={this.props.cancelCallback}>Cancel</a> : null}
       </div>
     )
   }

packages/nova-base-components/lib/posts/PostEditForm.jsx

@@ -44,7 +44,7 @@ class PostEditForm extends Component{
             collection: Posts,
             currentUser: this.context.currentUser,
             methodName: "posts.edit",
-            labelFunction: (fieldName)=>Telescope.utils.getFieldLabel(fieldName, Posts)
+            labelFunction: fieldName => Telescope.utils.getFieldLabel(fieldName, Posts)
           }}
         />
         <hr/>

packages/nova-base-styles/lib/stylesheets/_comments.scss

@@ -8,6 +8,10 @@
   margin-bottom: $vmargin;
 }
 
+.comments-list{
+  margin-bottom: $vmargin;
+}
+
 .comment-node .comment-node, .comment-reply{
   border-left: 10px $lightest-border solid;
   padding-left: $hmargin;
@@ -47,11 +51,12 @@
 }
 
 .comment-edit-form, .comment-new-form{
-  .form-group{
+  .input-body{
     margin-bottom: $hmargin;
   }
-  .control-label{
-    display: none;
+  .form-cancel{
+    display: inline-block;
+    margin-left: $hmargin;
   }
 }
 
@@ -67,4 +72,4 @@
   a{
     display: block;
   }
-}
+}

packages/nova-forms/README.md

@@ -117,6 +117,10 @@ A callback called on method success.
 
 A callback called on method failure.
 
+###### `cancelCallback()`
+
+If provided, will show a "cancel" link next to the form's submit button. 
+
 ###### `methodName`
 
 The name of the Meteor method to call.

packages/nova-forms/lib/NovaForm.jsx

@@ -220,9 +220,10 @@ class NovaForm extends Component{
       // add name, label, and type properties
       let field = {
         name: fieldName,
-        label: (typeof fieldSchema.labelFunction === "function") ? fieldSchema.labelFunction(fieldName) : fieldName,
+        label: (typeof this.props.labelFunction === "function") ? this.props.labelFunction(fieldName) : fieldName,
         type: fieldSchema.type,
-        control: fieldSchema.control
+        control: fieldSchema.control,
+        layout: this.props.layout
       }
 
       // add value
@@ -244,10 +245,16 @@ class NovaForm extends Component{
 
     return (
       <div className={"document-"+this.getFormType()}>
-        <Formsy.Form onSubmit={this.submitForm} disabled={this.state.disabled} ref="form" onChange={this.updateState}>
+        <Formsy.Form 
+          onSubmit={this.submitForm} 
+          disabled={this.state.disabled} 
+          ref="form" 
+          onChange={this.updateState} 
+        >
           {this.renderErrors()}
           {fields.map(field => <FormComponent key={field.name} {...field} />)}
           <Button type="submit" bsStyle="primary">Submit</Button>
+          {this.props.cancelCallback ? <a className="form-cancel" onClick={this.props.cancelCallback}>Cancel</a> : null}
         </Formsy.Form>
       </div>
     )
@@ -264,7 +271,13 @@ NovaForm.propTypes = {
   errorCallback: React.PropTypes.func,
   methodName: React.PropTypes.string,
   labelFunction: React.PropTypes.func,
-  prefilledProps: React.PropTypes.object
+  prefilledProps: React.PropTypes.object,
+  layout: React.PropTypes.string,
+  cancelCallback: React.PropTypes.func
+}
+
+NovaForm.defaultPropTypes = {
+  layout: "horizontal"
 }
 
 NovaForm.contextTypes = {