Redesign Error Inputs (#506)

Design error state of form fields
ZdruzenieSTROM · Dec 14, 2024 · 0ce47df · 0ce47df
1 parent bfa065a
commit 0ce47df
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 14 deletions.
diff --git a/src/components/FormItems/FormAutocomplete/FormAutocomplete.tsx b/src/components/FormItems/FormAutocomplete/FormAutocomplete.tsx
@@ -1,4 +1,4 @@
-import {Autocomplete, TextField, TextFieldProps} from '@mui/material'
+import {Autocomplete, TextField, TextFieldProps, Typography} from '@mui/material'
 import {Controller, ControllerProps, FieldPath, FieldValues} from 'react-hook-form'
 
 import {SelectOption} from '../FormSelect/FormSelect'
@@ -44,7 +44,14 @@ export const FormAutocomplete = <
               label={label}
               variant="outlined"
               fullWidth
-              helperText={error?.message}
+              error={!!error}
+              helperText={
+                error && (
+                  <Typography variant="body2" fontWeight={800}>
+                    {error.message}
+                  </Typography>
+                )
+              }
               focused={false}
             />
           )}

diff --git a/src/components/FormItems/FormCheckbox/FormCheckbox.tsx b/src/components/FormItems/FormCheckbox/FormCheckbox.tsx
@@ -1,4 +1,4 @@
-import {Checkbox, CheckboxProps, FormControl, FormControlLabel, FormHelperText} from '@mui/material'
+import {Checkbox, CheckboxProps, FormControl, FormControlLabel, FormHelperText, Typography} from '@mui/material'
 import {Controller, ControllerProps, FieldPath, FieldValues} from 'react-hook-form'
 
 import {formItemStyle} from '../styles'
@@ -27,7 +27,13 @@ export const FormCheckbox = <
           label={label}
           disabled={disabled}
         />
-        <FormHelperText>{error?.message}</FormHelperText>
+        {error && (
+          <FormHelperText>
+            <Typography variant="body2" fontWeight={800}>
+              {error.message}
+            </Typography>
+          </FormHelperText>
+        )}
       </FormControl>
     )}
   />

diff --git a/src/components/FormItems/FormInput/FormInput.tsx b/src/components/FormItems/FormInput/FormInput.tsx
@@ -1,4 +1,4 @@
-import {TextField, TextFieldProps} from '@mui/material'
+import {TextField, TextFieldProps, Typography} from '@mui/material'
 import {Controller, ControllerProps, FieldPath, FieldValues} from 'react-hook-form'
 
 import {formItemStyle} from '../styles'
@@ -29,7 +29,14 @@ export const FormInput = <
         type={type}
         variant="outlined"
         fullWidth
-        helperText={error?.message}
+        error={!!error}
+        helperText={
+          error && (
+            <Typography variant="body2" fontWeight={800}>
+              {error.message}
+            </Typography>
+          )
+        }
         focused={false}
         sx={formItemStyle}
         {...props}

diff --git a/src/components/FormItems/FormSelect/FormSelect.tsx b/src/components/FormItems/FormSelect/FormSelect.tsx
@@ -1,4 +1,4 @@
-import {MenuItem, TextField, TextFieldProps} from '@mui/material'
+import {MenuItem, TextField, TextFieldProps, Typography} from '@mui/material'
 import {Controller, ControllerProps, FieldPath, FieldValues} from 'react-hook-form'
 
 import {formItemStyle} from '../styles'
@@ -33,7 +33,14 @@ export const FormSelect = <
         variant="outlined"
         label={label}
         fullWidth
-        helperText={error?.message}
+        error={!!error}
+        helperText={
+          error && (
+            <Typography variant="body2" fontWeight={800}>
+              {error.message}
+            </Typography>
+          )
+        }
         focused={false}
         sx={formItemStyle}
       >

diff --git a/src/components/FormItems/styles.ts b/src/components/FormItems/styles.ts
@@ -1,7 +1,34 @@
 export const formItemStyle = {
-  '.MuiFormHelperText-contained': {color: 'black !important', fontWeight: 'bold', textTransform: 'uppercase'},
-  '.MuiInputLabel-root.MuiInputLabel-shrink': {color: 'black', fontWeight: 'bold'},
-  '.MuiInputLabel-root.MuiInputLabel-shrink.Mui-disabled': {color: 'rgba(0, 0, 0, 0.38)'},
-  '.MuiOutlinedInput-root': {borderRadius: 0},
-  '.MuiOutlinedInput-notchedOutline': {borderWidth: '5px', borderColor: 'black', fontWeight: 'bold'},
+  '.MuiFormHelperText-contained': {
+    color: 'black !important',
+    textTransform: 'uppercase',
+  },
+  '.MuiInputLabel-root.Mui-error': {
+    color: 'white',
+  },
+  '.MuiInputLabel-root.MuiInputLabel-shrink': {
+    color: 'black',
+    fontWeight: 'bold',
+    background: 'white',
+    padding: '0 10px 0 5px',
+    marginLeft: '-1px',
+  },
+  '.MuiInputLabel-root.MuiInputLabel-shrink.Mui-disabled': {
+    color: 'rgba(0, 0, 0, 0.38)',
+  },
+  '.MuiOutlinedInput-root': {
+    borderRadius: 0,
+  },
+  '.MuiOutlinedInput-root.Mui-error': {
+    color: 'white',
+    background: 'black',
+  },
+  '.MuiOutlinedInput-root.Mui-error .MuiOutlinedInput-notchedOutline': {
+    borderColor: 'black',
+  },
+  '.MuiOutlinedInput-notchedOutline': {
+    borderWidth: '5px',
+    borderColor: 'black',
+    fontWeight: 'bold',
+  },
 }
diff --git a/src/components/RegisterForm/RegisterForm.tsx b/src/components/RegisterForm/RegisterForm.tsx
@@ -213,7 +213,7 @@ export const RegisterForm: FC = () => {
           <SchoolSubForm control={control} watch={watch} setValue={setValue} gap={2} />
           <FormInput control={control} name="phone" label="telefón v tvare +421 ..." rules={phoneRule} />
           <FormInput control={control} name="parent_phone" label="telefón na rodiča" rules={phoneRule} />
-          <Typography variant="body2" fontWeight={800}>
+          <Typography variant="body2" fontWeight={800} mx={2} sx={{textTransform: 'uppercase'}}>
             * takto označené polia sú povinné
           </Typography>
           <Typography variant="body2">