From e0ea9e7c5283da6518f1942bd8958b53db6ba833 Mon Sep 17 00:00:00 2001
From: Alf Eaton <eaton.alf@gmail.com>
Date: Thu, 7 Sep 2017 13:25:34 +0100
Subject: [PATCH] Clean up ValidatedField
---
src/atoms/ValidatedField.js | 4 ++--
src/atoms/ValidatedField.local.scss | 22 ----------------------
src/atoms/ValidatedField.md | 4 ++--
3 files changed, 4 insertions(+), 26 deletions(-)
diff --git a/src/atoms/ValidatedField.js b/src/atoms/ValidatedField.js
index f0186d98a..32afa56c8 100644
--- a/src/atoms/ValidatedField.js
+++ b/src/atoms/ValidatedField.js
@@ -1,7 +1,7 @@
import React from 'react'
import classnames from 'classnames'
-import classes from './ValidatedField.local.scss'
import { Field } from 'redux-form'
+import classes from './ValidatedField.local.scss'
// TODO: pass ...props.input to children automatically?
@@ -9,7 +9,7 @@ const ValidatedField = ({ component, ...rest }) => (
<Field
{...rest}
component={({ meta, input }) => (
- <div>
+ <div className={classes.root}>
{component(input)}
<div className={classes.messages}>
diff --git a/src/atoms/ValidatedField.local.scss b/src/atoms/ValidatedField.local.scss
index 58eecfd09..feb7b74b3 100644
--- a/src/atoms/ValidatedField.local.scss
+++ b/src/atoms/ValidatedField.local.scss
@@ -1,25 +1,3 @@
-.root {
- display: flex;
- align-items: center;
- font-size: inherit;
-}
-
-input {
- font-size: inherit;
- border: 0 none;
- padding: 0;
- border-bottom: 1px dashed #aaa;
- font-family: "Vollkorn", serif;
-
- &:hover,
- &:focus {
- outline-style: none;
- box-shadow: none;
- border-color: transparent;
- border-bottom: 1px dashed var(--color-primary);
- }
-}
-
.messages {
// color: white;
margin-top: 10px;
diff --git a/src/atoms/ValidatedField.md b/src/atoms/ValidatedField.md
index b7a3472d0..78e3bd0b1 100644
--- a/src/atoms/ValidatedField.md
+++ b/src/atoms/ValidatedField.md
@@ -11,7 +11,7 @@ const ValidatedFieldForm = reduxForm({
<ValidatedFieldForm
name="error"
validate={() => 'Required'}
- component={input => <input {...input}/>}
+ component={input => <TextField {...input}/>}
/>
```
@@ -26,6 +26,6 @@ const ValidatedFieldForm = reduxForm({
<ValidatedFieldForm
name="warning"
warn={() => 'Expected'}
- component={input => <input {...input}/>}
+ component={input => <TextField {...input}/>}
/>
```
--
GitLab