scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 01:25:52 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
Format validation; redo of PR 3116
This commit is contained in:
Benjamin Wheeler 2019-07-18 12:45:53 -04:00 committed by GitHub
commit 5a175bc1af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/formik-forms/formik-input.jsx
View file

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

5
src/components/forms/row.scss
View file

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

3
src/components/join-flow/join-flow-steps.jsx
View file

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