fix: make textinput style guide compliant

fix: correct input spacing fix: correct label color fix: correct input width fix: move formik stuff out of base TextInput
2020-01-20 17:04:42 +00:00 · 2020-01-20 17:04:42 +00:00 · a4532793f3
commit a4532793f3
parent 7b59e36cb4
7 changed files with 153 additions and 76 deletions
--- a/new-lamassu-admin/src/components/inputs/base/TextInput.js
+++ b/new-lamassu-admin/src/components/inputs/base/TextInput.js
@ -1,20 +1,24 @@
+import React, { memo } from 'react'
+import classnames from 'classnames'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import TextField from '@material-ui/core/TextField'
 import { makeStyles } from '@material-ui/core/styles'
-import React, { memo } from 'react'

 import {
  fontColor,
+  offColor,
+  secondaryColor,
  inputFontSize,
  inputFontSizeLg,
  inputFontWeight
-} from '../../../styling/variables'
+} from 'src/styling/variables'

 const useStyles = makeStyles({
  inputRoot: {
    fontSize: inputFontSize,
    color: fontColor,
-    fontWeight: inputFontWeight
+    fontWeight: inputFontWeight,
+    paddingLeft: 4
  },
  inputRootLg: {
    fontSize: inputFontSizeLg,
@ -22,7 +26,43 @@ const useStyles = makeStyles({
    fontWeight: inputFontWeight
  },
  labelRoot: {
-    color: fontColor
+    color: fontColor,
+    paddingLeft: 4
+  },
+  root: {
+    '& .MuiInput-underline:before': {
+      borderBottom: [[2, 'solid', fontColor]]
+    },
+    '& .Mui-focused': {
+      color: fontColor
+    },
+    '& input': {
+      paddingTop: 4,
+      paddingBottom: 3
+    },
+    '& .MuiInputBase-input': {
+      width: 282
+    },
+    '& .MuiInputBase-inputMultiline': {
+      width: 500,
+      paddingRight: 20
+    }
+  },
+  empty: {
+    '& .MuiInputLabel-root:not(.MuiFormLabel-filled):not(.MuiInputLabel-shrink)': {
+      color: offColor
+    },
+    '& .MuiInputLabel-formControl:not(.MuiInputLabel-shrink)': {
+      top: -2
+    }
+  },
+  filled: {
+    '& .MuiInput-underline:before': {
+      borderBottomColor: secondaryColor
+    },
+    '& .MuiInput-underline:hover:not(.Mui-disabled)::before': {
+      borderBottomColor: secondaryColor
+    }
  }
 })

@ -32,22 +72,29 @@ const TextInput = memo(
    onChange,
    onBlur,
    value,
-    touched,
-    errors,
+    error,
    suffix,
    large,
+    className,
    ...props
  }) => {
    const classes = useStyles()

+    const classNames = {
+      [className]: true,
+      [classes.filled]: !error && value,
+      [classes.empty]: !value || value === ''
+    }
+
    return (
      <TextField
        id={name}
        onChange={onChange}
        onBlur={onBlur}
-        error={!!(touched[name] && errors[name])}
+        error={error}
        value={value}
        classes={{ root: classes.root }}
+        className={classnames(classNames)}
        InputProps={{
          className: large ? classes.inputRootLg : classes.inputRoot,
          endAdornment: suffix ? (
--- a/new-lamassu-admin/src/components/inputs/formik/RadioGroup.js
+++ b/new-lamassu-admin/src/components/inputs/formik/RadioGroup.js
@ -9,7 +9,8 @@ const styles = {
  label: {
    height: 16,
    lineHeight: '16px',
-    margin: [[0, 0, 4, 0]]
+    margin: [[0, 0, 4, 0]],
+    paddingLeft: 3
  }
 }

--- a/new-lamassu-admin/src/components/inputs/formik/TextInput.js
+++ b/new-lamassu-admin/src/components/inputs/formik/TextInput.js
@ -6,14 +6,15 @@ const TextInputFormik = memo(({ ...props }) => {
  const { name, onChange, onBlur, value } = props.field
  const { touched, errors } = props.form

+  const error = !!(touched[name] && errors[name])
+
  return (
    <TextInput
      name={name}
      onChange={onChange}
      onBlur={onBlur}
      value={value}
-      touched={touched}
-      errors={errors}
+      error={error}
      {...props}
    />
  )
--- a/new-lamassu-admin/src/components/inputs/formik/TextInput.styles.js
+++ b/new-lamassu-admin/src/components/inputs/formik/TextInput.styles.js
@ -1,4 +1,9 @@
-import { fontColor, offColor } from 'src/styling/variables'
+import {
+  fontColor,
+  offColor,
+  inputFontSize,
+  inputFontWeight
+} from 'src/styling/variables'
 import typographyStyles from 'src/components/typography/styles'

 const { info3 } = typographyStyles
@ -7,7 +12,10 @@ const styles = {
  masked: {
    position: 'absolute',
    bottom: 5,
-    color: fontColor
+    left: 4,
+    color: fontColor,
+    fontSize: inputFontSize,
+    fontWeight: inputFontWeight
  },
  secretSpan: {
    extend: info3,
--- a/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
@ -30,7 +30,7 @@ const fieldStyles = {
    position: 'relative',
    width: 280,
    height: 46,
-    padding: [[0, 4, 4, 4]]
+    padding: [[0, 4, 4, 0]]
  },
  notEditing: {
    display: 'flex',
@ -38,10 +38,12 @@ const fieldStyles = {
    '& > p:first-child': {
      height: 16,
      lineHeight: '16px',
-      margin: [[0, 0, 4, 0]]
+      paddingLeft: 3,
+      margin: [[0, 0, 5, 0]]
    },
    '& > p:last-child': {
-      margin: 0
+      margin: 0,
+      paddingLeft: 4
    }
  }
 }
@ -57,27 +59,25 @@ const Field = ({ editing, field, displayValue, ...props }) => {
  }

  return (
-    <>
-      <div className={classnames(classNames)}>
-        {!editing && (
-          <>
-            <Label1>{field.label}</Label1>
-            <Info3>{displayValue(field.value)}</Info3>
-          </>
-        )}
-        {editing && (
-          <FormikField
-            id={field.name}
-            name={field.name}
-            component={field.component}
-            placeholder={field.placeholder}
-            type={field.type}
-            label={field.label}
-            {...props}
-          />
-        )}
-      </div>
-    </>
+    <div className={classnames(classNames)}>
+      {!editing && (
+        <>
+          <Label1>{field.label}</Label1>
+          <Info3>{displayValue(field.value)}</Info3>
+        </>
+      )}
+      {editing && (
+        <FormikField
+          id={field.name}
+          name={field.name}
+          component={field.component}
+          placeholder={field.placeholder}
+          type={field.type}
+          label={field.label}
+          {...props}
+        />
+      )}
+    </div>
  )
 }

@ -115,7 +115,7 @@ const ContactInfo = () => {

  useQuery(GET_CONFIG, {
    onCompleted: data => {
-      const operatorInfo = data.config
+      const { operatorInfo } = data.config
      setInfo(operatorInfo ?? {})
    }
  })
@ -178,41 +178,58 @@ const ContactInfo = () => {

  const displayTextValue = value => value

+  const form = {
+    initialValues: {
+      infoCardEnabled: findValue('infoCardEnabled'),
+      fullName: findValue('fullName'),
+      phoneNumber: info.phoneNumber ?? '',
+      email: findValue('email'),
+      website: findValue('website'),
+      companyNumber: findValue('companyNumber')
+    },
+    validationSchema: Yup.object().shape({
+      fullName: Yup.string()
+        .max(100, 'Too long')
+        .required(),
+      phoneNumber: Yup.string()
+        .matches(mask, { excludeEmptyString: true })
+        .max(100, 'Too long')
+        .required(),
+      email: Yup.string()
+        .email('Please enter a valid email address')
+        .max(100, 'Too long')
+        .required(),
+      website: Yup.string()
+        .url('Please enter a valid url')
+        .max(100, 'Too long')
+        .required(),
+      companyNumber: Yup.string()
+        .max(30, 'Too long')
+        .required()
+    })
+  }
+
  return (
    <>
      <div className={classes.header}>
        <Info2>Contact information</Info2>
        {!editing && (
-          <button onClick={() => setEditing(true)}>
-            <EditIcon />
-          </button>
+          <div>
+            <button onClick={() => setEditing(true)}>
+              <EditIcon />
+            </button>
+          </div>
        )}
      </div>
      <div className={classes.section}>
        <Formik
-          initialValues={{
-            infoCardEnabled: findValue('infoCardEnabled'),
-            fullName: findValue('fullName'),
-            phoneNumber: info.phoneNumber ?? '',
-            email: findValue('email'),
-            website: findValue('website'),
-            companyNumber: findValue('companyNumber')
-          }}
-          validationSchema={Yup.object().shape({
-            fullName: Yup.string().max(100, 'Too long'),
-            phoneNumber: Yup.string()
-              .matches(mask, { excludeEmptyString: true })
-              .max(100, 'Too long'),
-            email: Yup.string()
-              .email('Please enter a valid email address')
-              .max(100, 'Too long'),
-            website: Yup.string()
-              .url('Please enter a valid url')
-              .max(100, 'Too long'),
-            companyNumber: Yup.string().max(30, 'Too long')
-          })}
-          onSubmit={values => {
-            save(values)
+          enableReinitialize
+          initialValues={form.initialValues}
+          validationSchema={form.validationSchema}
+          onSubmit={values => save(values)}
+          onReset={(values, bag) => {
+            setEditing(false)
+            setError(null)
          }}>
          <Form>
            <div className={classnames(classes.row, classes.radioButtonsRow)}>
@ -270,12 +287,7 @@ const ContactInfo = () => {
                  <Link color="primary" type="submit">
                    Save
                  </Link>
-                  <Link
-                    color="secondary"
-                    onClick={() => {
-                      setEditing(false)
-                      setError(null)
-                    }}>
+                  <Link color="secondary" type="reset">
                    Cancel
                  </Link>
                  {error && (
--- a/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
+++ b/new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
@ -3,11 +3,16 @@ import { offColor } from 'src/styling/variables'
 const styles = {
  header: {
    display: 'flex',
-    '& > button': {
-      border: 'none',
-      backgroundColor: 'transparent',
+    '& > p': {
+      marginTop: 0
+    },
+    '& > div': {
      marginLeft: 20,
-      cursor: 'pointer'
+      '& > button': {
+        border: 'none',
+        backgroundColor: 'transparent',
+        cursor: 'pointer'
+      }
    }
  },
  section: {
@ -20,6 +25,7 @@ const contactInfoStyles = {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: 28,
+    width: 600,
    '&:last-child': {
      marginBottom: 0
    }
@ -35,11 +41,13 @@ const contactInfoStyles = {
    }
  },
  radioButtonsRow: {
-    height: 60
+    height: 60,
+    marginBottom: 14
  },
  radioButtons: {
    display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    paddingLeft: 4
  },
  submit: {
    justifyContent: 'flex-start',
--- a/new-lamassu-admin/src/styling/variables.js
+++ b/new-lamassu-admin/src/styling/variables.js
@ -78,7 +78,7 @@ if (version === 8) {
 }

 const smallestFontSize = fontSize5
-const inputFontSize = fontSize4
+const inputFontSize = fontSize3
 const inputFontSizeLg = fontSize1
 const inputFontWeight = 500
 const inputFontFamily = fontSecondary