More label form validation

frontend/src/css/core/colors.css

@@ -58,7 +58,7 @@
 
 /* error */
 
-.text-error,
+.text-error, :local(.text-error),
 .text-error-hover:hover {
   color: var(--error-color);
 }

frontend/src/questions/containers/EditLabels.jsx

@@ -54,14 +54,14 @@ export default class EditLabels extends Component {
                 <div className="wrapper wrapper--trim">
                     <div className={S.header}>Labels</div>
                 </div>
-                <LabelEditorForm onSubmit={saveLabel} initialValues={{ icon: colors.normal.blue, name: "" }} submitButtonText={"Create Label"} className="wrapper wrapper--trim"/>
+                <LabelEditorForm labels={labels} onSubmit={saveLabel} initialValues={{ icon: colors.normal.blue, name: "" }} submitButtonText={"Create Label"} className="wrapper wrapper--trim"/>
                 { labels.length > 0 ?
                     <div className="wrapper wrapper--trim">
                         <ul className={S.list}>
                         { labels.map(label =>
                             editingLabelId === label.id ?
                                 <li key={label.id} className={S.labelEditing}>
-                                    <LabelEditorForm formKey={String(label.id)} className="flex-full" onSubmit={saveLabel} initialValues={label} submitButtonText={"Update Label"}/>
+                                    <LabelEditorForm labels={labels} formKey={String(label.id)} className="flex-full" onSubmit={saveLabel} initialValues={label} submitButtonText={"Update Label"}/>
                                     <a className={" text-grey-1 text-grey-4-hover ml2"} onClick={() => editLabel(null)}>Cancel</a>
                                 </li>
                             :

frontend/src/questions/containers/LabelEditorForm.css

 :local(.form) {
-    composes: flex align-center flex-no-shrink from "style";
+    composes: flex flex-no-shrink from "style";
 }
 
-:local(.nameInput) {
+:local(.nameContainer) {
     composes: flex-full from "style";
     composes: mx1 from "style";
+}
+
+:local(.nameInput) {
+    composes: flex-full from "style";
+    display: block;
+    width: 100%;
 
     font-size: 18px;
     padding-top: 8px;
@@ -14,3 +20,7 @@
 :local(.invalid) {
     composes: border-error from "style";
 }
+
+:local(.errorMessage) {
+    composes: px1 pt1 text-bold text-error from "style";
+}

frontend/src/questions/containers/LabelEditorForm.jsx

@@ -17,9 +17,9 @@ import _ from "underscore";
     validate: (values, props) => {
         const errors = {};
         if (!values.name) {
-            errors.name = "Name is required";
+            errors.name = "A label name is required";
         } else if (_.findWhere(props.labels, { slug: slugify(values.name) })) {
-            errors.name = "Name must be unique";
+            errors.name = "A label with this name already exists";
         }
         if (!values.icon) {
             errors.icon = "Icon is required";
@@ -43,7 +43,10 @@ export default class LabelEditorForm extends Component {
         return (
             <form className={cx(className, S.form)} onSubmit={handleSubmit}>
                 <LabelIconPicker {...icon} />
-                <input className={cx(S.nameInput, "input", { [S.invalid]: nameInvalid })} type="text" placeholder="Name" {...name}/>
+                <div className={S.nameContainer}>
+                    <input className={cx(S.nameInput, "input", { [S.invalid]: nameInvalid })} type="text" placeholder="Name" {...name}/>
+                    { nameInvalid && name.error && <div className={S.errorMessage}>{name.error}</div> }
+                </div>
                 <button className={cx("Button", { "disabled": invalid, "Button--primary": !invalid })} type="submit">{submitButtonText}</button>
             </form>
         );