scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-12 08:41:31 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

formik input can be made to appear inline

Browse source
This commit is contained in:
Ben Wheeler 2019-07-26 13:56:46 -04:00
parent bd83a282c5
commit 40c90e2d2e
2 changed files with 18 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,12 +5,14 @@ import {Field} from 'formik';
const ValidationMessage = require('../forms/validation-message.jsx'); const ValidationMessage = require('../forms/validation-message.jsx');
require('./forms.scss');
require('../forms/input.scss'); require('../forms/input.scss');
require('../forms/row.scss'); require('../forms/row.scss');
const FormikInput = ({ const FormikInput = ({
className, className,
error, error,
inline,
validationClassName, validationClassName,
wrapperClassName, wrapperClassName,
...props ...props
@ -43,9 +45,14 @@ const FormikInput = ({
FormikInput.propTypes = { FormikInput.propTypes = {
className: PropTypes.string, className: PropTypes.string,
error: PropTypes.string, error: PropTypes.string,
inline: PropTypes.bool,
type: PropTypes.string, type: PropTypes.string,
validationClassName: PropTypes.string validationClassName: PropTypes.string,
wrapperClassName: PropTypes.string wrapperClassName: PropTypes.string
}; };
FormikInput.defaultProps = {
inline: false
};
module.exports = FormikInput; module.exports = FormikInput;

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

@ -30,3 +30,13 @@
margin-bottom: .75rem; margin-bottom: .75rem;
line-height: 1.7rem; line-height: 1.7rem;
} }
.row-inline {
display: flex;
}
/* override margin-bottom so placing a label next to a radio button does not
mess up vertical alignment */
.row-inline label {
margin-bottom: 0;
}