Use a custom Form Field component

packages/fether-ui/package.json

@@ -33,7 +33,9 @@
   "dependencies": {
     "react-blockies": "^1.3.0",
     "react-content-loader": "^3.1.2",
-    "react-tooltip": "^3.6.1"
+    "react-tooltip": "^3.6.1",
+    "semantic-ui-css": "^2.3.2",
+    "semantic-ui-react": "^0.81.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.0.0-beta.49",

packages/fether-ui/src/FormField/FormField.js → packages/fether-ui/src/Form/Field/Field.js

@@ -4,22 +4,29 @@
 // SPDX-License-Identifier: BSD-3-Clause
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { Popup } from 'semantic-ui-react';
+import 'semantic-ui-css/components/popup.min.css';
 
-export const FormField = ({
-  className,
-  input: inputComponent,
+export const Field = ({
+  as: T = 'input',
+  children,
+  input,
   label,
+  meta,
   ...otherProps
 }) => (
-  <div className={['form_field', className].join(' ')}>
+  <div className='form_field'>
     <label>{label}</label>
-    {inputComponent || <input {...otherProps} />}
+    <Popup
+      content={meta.error}
+      inverted
+      on='click'
+      open={!meta.pristine && !meta.valid && meta.touched}
+      position='top center'
+      size='mini'
+      trigger={<T {...input} {...otherProps} />}
+    />
+
+    {children}
   </div>
 );
-
-FormField.propTypes = {
-  className: PropTypes.string,
-  input: PropTypes.node,
-  label: PropTypes.string
-};

packages/fether-ui/src/FormField/index.js → packages/fether-ui/src/Form/Field/index.js

@@ -3,4 +3,4 @@
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
-export * from './FormField';
+export * from './Field';

packages/fether-ui/src/Form/Form.js

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import { Field } from './Field';
+import { Slider } from './Slider';
+
+export const Form = {
+  Field,
+  Slider
+};

packages/fether-ui/src/Form/Slider/Slider.js

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React from 'react';
+
+import { Field } from '../Field';
+
+export const Slider = ({
+  centerText,
+  input,
+  leftText,
+  rightText,
+  ...otherProps
+}) => (
+  <Field input={input} {...otherProps}>
+    <nav className='range-nav'>
+      <span className='range-nav_label'>{leftText}</span>
+      <span className='range-nav_value'>{centerText}</span>
+      <span className='range-nav_label'>{rightText}</span>
+    </nav>
+  </Field>
+);

packages/fether-ui/src/Form/Slider/index.js

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+export * from './Slider';

packages/fether-ui/src/Form/index.js

+// Copyright 2015-2018 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+export * from './Form';

packages/fether-ui/src/index.js

@@ -7,7 +7,7 @@ export * from './AccountCard';
 export * from './AccountHeader';
 export * from './AddressShort';
 export * from './Card';
-export * from './FormField';
+export * from './Form';
 export * from './Header';
 export * from './Placeholder';
 export * from './TokenCard';