Merge pull request #3133 from benjiwheeler/retry-join-flow-format-validation

Format validation; redo of PR 3116

src/components/formik-forms/formik-input.jsx

@@ -11,9 +11,10 @@ require('../forms/row.scss');
 const FormikInput = ({
     className,
     error,
+    validationClassName,
     ...props
 }) => (
-    <div className="col-sm-9 row">
+    <div className="col-sm-9 row row-with-tooltip">
         <Field
             className={classNames(
                 'input',
@@ -22,7 +23,10 @@ const FormikInput = ({
             {...props}
         />
         {error && (
-            <ValidationMessage message={error} />
+            <ValidationMessage
+                className={validationClassName}
+                message={error}
+            />
         )}
     </div>
 );
@@ -31,7 +35,8 @@ const FormikInput = ({
 FormikInput.propTypes = {
     className: PropTypes.string,
     error: PropTypes.string,
-    type: PropTypes.string
+    type: PropTypes.string,
+    validationClassName: PropTypes.string
 };
 
 module.exports = FormikInput;

src/components/forms/row.scss

@@ -21,6 +21,11 @@
     }
 }
 
+/* allow elements such as validation errors to position relative to this row */
+.row-with-tooltip {
+    position: relative;
+}
+
 .row-label {
     margin-bottom: .75rem;
     line-height: 1.7rem;

src/components/join-flow/join-flow-steps.jsx

@@ -10,6 +10,8 @@ const validate = require('../../lib/validate');
 const FormikInput = require('../../components/formik-forms/formik-input.jsx');
 const JoinFlowStep = require('./join-flow-step.jsx');
 
+require('./join-flow-steps.scss');
+
 /*
  * Username step
  */
@@ -127,6 +129,7 @@ class UsernameStep extends React.Component {
                                     id="username"
                                     name="username"
                                     validate={this.validateUsernameIfPresent}
+                                    validationClassName="validation-full-width-input"
                                     onBlur={() => validateField('username')} // eslint-disable-line react/jsx-no-bind
                                 />
                                 <div className="join-flow-password-section">