Fix regressions found by cypress tests

packages/app/components/ui/form/Checkbox.tsx

@@ -7,11 +7,13 @@ import { omit } from 'app/functions';
 import styles from './form.scss';
 import FormInputComponent from './FormInputComponent';
 
-export default class Checkbox extends FormInputComponent<{
-  color: Color;
-  skin: Skin;
-  label: string | MessageDescriptor;
-}> {
+export default class Checkbox extends FormInputComponent<
+  React.InputHTMLAttributes<HTMLInputElement> & {
+    color: Color;
+    skin: Skin;
+    label: string | MessageDescriptor | React.ReactElement;
+  }
+> {
   static defaultProps = {
     color: COLOR_GREEN,
     skin: SKIN_DARK,
@@ -23,7 +25,7 @@ export default class Checkbox extends FormInputComponent<{
     const { color, skin } = this.props;
     let { label } = this.props;
 
-    label = this.formatMessage(label);
+    label = React.isValidElement(label) ? label : this.formatMessage(label);
 
     const props = omit(this.props, ['color', 'skin', 'label']);
 

packages/app/components/ui/form/FormInputComponent.tsx

@@ -3,8 +3,9 @@ import { MessageDescriptor } from 'react-intl';
 
 import FormComponent from './FormComponent';
 import FormError from './FormError';
+import { ValidationError } from './FormModel';
 
-type Error = string | MessageDescriptor;
+type Error = ValidationError | MessageDescriptor;
 
 export default class FormInputComponent<P, S = {}> extends FormComponent<
   P & {

packages/app/components/ui/form/FormModel.ts

@@ -2,7 +2,7 @@ import FormInputComponent from './FormInputComponent';
 
 type LoadingListener = (isLoading: boolean) => void;
 
-type ValidationError =
+export type ValidationError =
   | string
   | {
       type: string;
@@ -37,10 +37,20 @@ export default class FormModel {
    *
    * @returns {object} - ref and name props for component
    */
-  bindField(name: string) {
+  bindField(
+    name: string,
+  ): {
+    name: string;
+    ref: (el: any) => void;
+    error?: ValidationError;
+  } {
     this.fields[name] = {};
 
-    const props: { [key: string]: any } = {
+    const props: {
+      name: string;
+      ref: (el: any) => void;
+      error?: ValidationError;
+    } = {
       name,
       ref: (el: FormInputComponent<any> | null) => {
         if (el) {
@@ -55,8 +65,10 @@ export default class FormModel {
       },
     };
 
-    if (this.renderErrors && this.getError(name)) {
-      props.error = this.getError(name);
+    const error = this.getError(name);
+
+    if (this.renderErrors && error) {
+      props.error = error;
     }
 
     return props;

packages/app/components/ui/form/Input.tsx

@@ -19,7 +19,6 @@ export default class Input extends FormInputComponent<
     disabled: boolean;
     label?: string | MessageDescriptor;
     placeholder?: string | MessageDescriptor;
-    error?: string | { type: string; payload: string };
     icon?: string;
     copy?: boolean;
   },

packages/app/components/ui/form/TextArea.tsx

@@ -20,7 +20,6 @@ export default class TextArea extends FormInputComponent<
   {
     placeholder?: string | MessageDescriptor;
     label?: string | MessageDescriptor;
-    error?: string;
     skin: Skin;
     color: Color;
   } & TextareaAutosizeProps &