From 69dad2ac95c3d56a0cef6ab6a628b4e38a14a626 Mon Sep 17 00:00:00 2001
From: cyril lopez <cyril.lpz@gmail.com>
Date: Thu, 15 Feb 2018 15:46:25 +0100
Subject: [PATCH] Refacto Input library scss

---
 .../components/InputAddonWithErrors/index.js   |  5 +++--
 .../InputAddonWithErrors/styles.scss           |  4 ----
 .../InputCheckboxWithErrors/index.js           |  5 +++--
 .../InputCheckboxWithErrors/styles.scss        |  4 ----
 .../components/InputDateWithErrors/index.js    |  5 +++--
 .../components/InputDateWithErrors/styles.scss |  4 ----
 .../components/InputEmailWithErrors/index.js   |  7 ++++---
 .../InputEmailWithErrors/styles.scss           |  6 +-----
 .../components/InputFileWithErrors/index.js    |  7 ++++---
 .../components/InputFileWithErrors/styles.scss |  6 +-----
 .../components/InputNumberWithErrors/index.js  |  7 ++++---
 .../InputNumberWithErrors/styles.scss          |  6 +-----
 .../InputPasswordWithErrors/index.js           | 15 ++++++++++++---
 .../InputPasswordWithErrors/styles.scss        |  2 +-
 .../components/InputSearchWithErrors/index.js  |  5 +++--
 .../InputSearchWithErrors/styles.scss          |  4 ----
 .../components/InputSelectWithErrors/index.js  |  4 ++--
 .../InputSelectWithErrors/styles.scss          |  2 +-
 .../lib/src/components/InputSpacer/index.js    | 14 ++++++++++++++
 .../lib/src/components/InputSpacer/styles.scss |  3 +++
 .../lib/src/components/InputText/index.js      |  2 +-
 .../lib/src/components/InputText/styles.scss   |  2 +-
 .../InputTextAreaWithErrors/index.js           |  7 ++++---
 .../InputTextAreaWithErrors/styles.scss        |  4 ++--
 .../components/InputTextWithErrors/index.js    |  5 +++--
 .../components/InputTextWithErrors/styles.scss |  6 +-----
 .../components/InputToggleWithErrors/index.js  |  5 +++--
 .../InputToggleWithErrors/styles.scss          |  6 +-----
 .../lib/src/components/InputsIndex/index.js    | 18 ++----------------
 .../lib/src/components/Label/index.js          |  2 +-
 .../lib/src/components/Label/styles.scss       |  2 +-
 31 files changed, 80 insertions(+), 94 deletions(-)
 create mode 100644 packages/strapi-helper-plugin/lib/src/components/InputSpacer/index.js
 create mode 100644 packages/strapi-helper-plugin/lib/src/components/InputSpacer/styles.scss

diff --git a/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js
index 396a156aba..446b3264f5 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/index.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputAddon from 'components/InputAddon';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -93,7 +94,7 @@ class InputAddonWithErrors extends React.Component { // eslint-disable-line reac
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/styles.scss
index 0853bdc84d..7d411c4e71 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputAddonWithErrors/styles.scss
@@ -3,7 +3,3 @@
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js
index 54e28570f9..f32bcb28e6 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/index.js
@@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import { includes, isEmpty, isObject, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isObject, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -15,6 +15,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputCheckbox from 'components/InputCheckbox';
+import InputSpacer from 'components/InputSpacer';
 
 import styles from './styles.scss';
 
@@ -70,7 +71,7 @@ class InputCheckboxWithErrors extends React.Component {
     const handleBlur = onBlur ? onBlur : () => {};
     let inputTitle = '';
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss
index 29ccc32e0d..04c86505b7 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputCheckboxWithErrors/styles.scss
@@ -4,10 +4,6 @@
   font-family: 'Lato';
 }
 
-.spacer {
-  height: .5rem;
-}
-
 .inputCheckboxDescriptionContainer {
   width: 150%;
   margin-top: .2rem;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js
index aa35a6dc21..fe246afe45 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/index.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { get, includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { get, isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputDate from 'components/InputDate';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -92,7 +93,7 @@ class InputDateWithErrors extends React.Component { // eslint-disable-line react
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/styles.scss
index f36433c878..d065c583df 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputDateWithErrors/styles.scss
@@ -30,7 +30,3 @@
     }
   }
 }
-
-.spacer {
-  height: .5rem;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js
index 8e7903a30c..c1e539a262 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/index.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputEmail from 'components/InputEmail';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -90,7 +91,7 @@ class InputEmailWithErrors extends React.Component { // eslint-disable-line reac
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
@@ -98,7 +99,7 @@ class InputEmailWithErrors extends React.Component { // eslint-disable-line reac
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerEmail,
           this.props.customBootstrapClass,
           !isEmpty(this.props.className) && this.props.className,
         )}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/styles.scss
index f94650a966..38659a43e5 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputEmailWithErrors/styles.scss
@@ -1,9 +1,5 @@
-.container {
+.containerEmail {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/index.js
index 4ef7523248..d9d8a804f0 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/index.js
@@ -13,6 +13,7 @@ import { isEmpty } from 'lodash';
 import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputFile from 'components/InputFile';
+import InputSpacer from 'components/InputSpacer';
 
 import styles from './styles.scss';
 
@@ -35,9 +36,9 @@ class InputFileWithErrors extends React.Component {
       value,
     } = this.props;
 
-    const labelClass = labelClassName === '' ? styles.label : labelClassName;
-    const spacer = isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
-  
+    const labelClass = labelClassName === '' ? styles.labelFile : labelClassName;
+    const spacer = isEmpty(inputDescription) ? <InputSpacer /> : <div />;
+
     return (
       <div
         className={cn(
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/styles.scss
index 619ee6a34c..ffc7af41ad 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputFileWithErrors/styles.scss
@@ -4,10 +4,6 @@
   font-size: 1.3rem;
 }
 
-.label {
+.labelFile {
   margin-bottom: 9px;
 }
-
-.spacer {
-  height: 1.4rem;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js
index 9c4007f2a2..598b7ad27e 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -8,6 +8,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputNumber from 'components/InputNumber';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -86,7 +87,7 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
@@ -94,7 +95,7 @@ class InputNumberWithErrors extends React.Component { // eslint-disable-line rea
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerInputNumber,
           customBootstrapClass,
           !isEmpty(className) && className,
         )}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/styles.scss
index f94650a966..4229003c4d 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputNumberWithErrors/styles.scss
@@ -1,9 +1,5 @@
-.container {
+.containerInputNumber {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js
index 1b2235a5a2..b77ca23f83 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/index.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputPassword from 'components/InputPassword';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -71,6 +72,7 @@ class InputPasswordWithErrors extends React.Component {
       errorsClassName,
       errorsStyle,
       inputClassName,
+      inputDescription,
       inputDescriptionClassName,
       inputDescriptionStyle,
       inputStyle,
@@ -87,9 +89,15 @@ class InputPasswordWithErrors extends React.Component {
     } = this.props;
     const handleBlur = isFunction(this.props.onBlur) ? this.props.onBlur : this.handleBlur;
 
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
+
+    if (!noErrorsDescription && !isEmpty(this.state.errors)) {
+      spacer = <div />;
+    }
+
     return (
       <div className={cn(
-          styles.container,
+          styles.containerInputPassword,
           this.props.customBootstrapClass,
           !isEmpty(this.props.className) && this.props.className,
         )}
@@ -118,7 +126,7 @@ class InputPasswordWithErrors extends React.Component {
         />
         <InputDescription
           className={inputDescriptionClassName}
-          message={this.props.inputDescription}
+          message={inputDescription}
           style={inputDescriptionStyle}
         />
         <InputErrors
@@ -126,6 +134,7 @@ class InputPasswordWithErrors extends React.Component {
           errors={!noErrorsDescription && this.state.errors || []}
           style={errorsStyle}
         />
+        {spacer}
       </div>
     );
   }
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/styles.scss
index 5d8578e7d5..b868e050b8 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputPasswordWithErrors/styles.scss
@@ -1,4 +1,4 @@
-.container {
+.containerInputPassword {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js
index 81c734f4b8..e5250e2db8 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/index.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -14,6 +14,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputSearch from 'components/InputSearch';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -90,7 +91,7 @@ class InputSearchWithErrors extends React.Component { // eslint-disable-line rea
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss
index 64c5d42fe9..bd2a348806 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputSearchWithErrors/styles.scss
@@ -3,7 +3,3 @@
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/index.js
index d6c142cd1b..e633057f4a 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/index.js
@@ -6,7 +6,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -67,7 +67,7 @@ class InputSelectWithErrors extends React.Component {
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerSelect,
           customBootstrapClass,
           !isEmpty(className) && className,
         )}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/styles.scss
index 5d8578e7d5..78d03cf481 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputSelectWithErrors/styles.scss
@@ -1,4 +1,4 @@
-.container {
+.containerSelect {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSpacer/index.js b/packages/strapi-helper-plugin/lib/src/components/InputSpacer/index.js
new file mode 100644
index 0000000000..27d3ee1af3
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/InputSpacer/index.js
@@ -0,0 +1,14 @@
+/**
+ *
+ * InputSpacer
+ *
+ */
+
+import React from 'react';
+import styles from './styles.scss';
+
+function InputSpacer() {
+  return <div className={styles.spacerInput} />;
+}
+
+export default InputSpacer;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputSpacer/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputSpacer/styles.scss
new file mode 100644
index 0000000000..06ce41bc66
--- /dev/null
+++ b/packages/strapi-helper-plugin/lib/src/components/InputSpacer/styles.scss
@@ -0,0 +1,3 @@
+.spacerInput {
+  height: .5rem;
+}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputText/index.js b/packages/strapi-helper-plugin/lib/src/components/InputText/index.js
index a6fb9b33d0..cb9182600d 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputText/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputText/index.js
@@ -13,7 +13,7 @@ function InputText(props) {
         <input
           autoFocus={props.autoFocus}
           className={cn(
-            styles.input,
+            styles.textInput,
             'form-control',
             !props.deactivateErrorHighlight && props.error && 'is-invalid',
             !isEmpty(props.className) && props.className,
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputText/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputText/styles.scss
index 2d64a09287..4a30c12c8a 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputText/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputText/styles.scss
@@ -1,4 +1,4 @@
-.input {
+.textInput {
   height: 3.4rem;
   margin-top: .9rem;
   padding-left: 1rem;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js
index 1183bba0c2..a2f59dcc5c 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction, mapKeys, reject } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -8,6 +8,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputTextArea from 'components/InputTextArea';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -86,7 +87,7 @@ class InputTextAreaWithErrors extends React.Component { // eslint-disable-line r
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
@@ -94,7 +95,7 @@ class InputTextAreaWithErrors extends React.Component { // eslint-disable-line r
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerTextArea,
           customBootstrapClass,
           !isEmpty(className) && className,
         )}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/styles.scss
index f0cc91a18d..efc097e070 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputTextAreaWithErrors/styles.scss
@@ -1,5 +1,5 @@
-.container {
+.containerTextArea {
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
-  font-family: 'Lato';  
+  font-family: 'Lato';
 }
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
index 9cf9e6bcef..d657734db5 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { includes, isEmpty, isFunction } from 'lodash';
+import { isEmpty, isFunction } from 'lodash';
 import cn from 'classnames';
 
 // Design
@@ -8,6 +8,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputText from 'components/InputText';
+import InputSpacer from 'components/InputSpacer';
 
 // Utils
 import validateInput from 'utils/inputsValidations';
@@ -86,7 +87,7 @@ class InputTextWithErrors extends React.Component { // eslint-disable-line react
     } = this.props;
     const handleBlur = isFunction(onBlur) ? onBlur : this.handleBlur;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/styles.scss
index f94650a966..da60c76f76 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputTextWithErrors/styles.scss
@@ -1,9 +1,5 @@
-.container {
+.containerText {
   min-width: 200px;
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
-
-.spacer {
-  height: .5rem;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/index.js b/packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/index.js
index ef05c133ee..974f1ba8cb 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/index.js
@@ -13,6 +13,7 @@ import Label from 'components/Label';
 import InputDescription from 'components/InputDescription';
 import InputErrors from 'components/InputErrors';
 import InputToggle from 'components/InputToggle';
+import InputSpacer from 'components/InputSpacer';
 
 import styles from './styles.scss';
 
@@ -61,7 +62,7 @@ class InputToggleWithErrors extends React.Component {
       value,
     } = this.props;
 
-    let spacer = !isEmpty(inputDescription) ? <div className={styles.spacer} /> : <div />;
+    let spacer = !isEmpty(inputDescription) ? <InputSpacer /> : <div />;
 
     if (!noErrorsDescription && !isEmpty(this.state.errors)) {
       spacer = <div />;
@@ -69,7 +70,7 @@ class InputToggleWithErrors extends React.Component {
 
     return (
       <div className={cn(
-          styles.container,
+          styles.containerToggleErrors,
           customBootstrapClass,
           !isEmpty(className) && className,
         )}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/styles.scss b/packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/styles.scss
index da7136b777..9072bc8d80 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputToggleWithErrors/styles.scss
@@ -1,4 +1,4 @@
-.container {
+.containerToggleErrors {
   margin-bottom: 1.5rem;
   font-size: 1.3rem;
 }
@@ -7,7 +7,3 @@
   margin-bottom: 0 !important;
   font-weight: 500 !important;
 }
-
-.spacer {
-  height: .5rem;
-}
diff --git a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
index 8da0d937cf..28fc321d09 100644
--- a/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/InputsIndex/index.js
@@ -10,7 +10,7 @@ import { isEmpty } from 'lodash';
 // Design
 import InputAddonWithErrors from 'components/InputAddonWithErrors';
 import InputCheckboxWithErrors from 'components/InputCheckboxWithErrors';
-import InputDateWithErrors from 'components/InputDateWithErrors';
+// import InputDateWithErrors from 'components/InputDateWithErrors';
 import InputEmailWithErrors from 'components/InputEmailWithErrors';
 import InputFileWithErrors from 'components/InputFileWithErrors';
 import InputNumberWithErrors from 'components/InputNumberWithErrors';
@@ -26,7 +26,7 @@ const DefaultInputError = ({ type }) => <div>Your input type: <b>{type}</b> does
 const inputs = {
   addon: InputAddonWithErrors,
   checkbox: InputCheckboxWithErrors,
-  date: InputDateWithErrors,
+  // date: InputDateWithErrors,
   email: InputEmailWithErrors,
   file: InputFileWithErrors,
   number: InputNumberWithErrors,
@@ -60,17 +60,3 @@ InputsIndex.propTypes = {
 };
 
 export default InputsIndex;
-export {
-  InputAddonWithErrors,
-  InputCheckboxWithErrors,
-  InputDateWithErrors,
-  InputEmailWithErrors,
-  InputFileWithErrors,
-  InputNumberWithErrors,
-  InputPasswordWithErrors,
-  InputSearchWithErrors,
-  InputSelectWithErrors,
-  InputTextWithErrors,
-  InputTextAreaWithErrors,
-  InputToggleWithErrors,
-};
diff --git a/packages/strapi-helper-plugin/lib/src/components/Label/index.js b/packages/strapi-helper-plugin/lib/src/components/Label/index.js
index 29a1f9c637..0dbc702102 100644
--- a/packages/strapi-helper-plugin/lib/src/components/Label/index.js
+++ b/packages/strapi-helper-plugin/lib/src/components/Label/index.js
@@ -23,7 +23,7 @@ function Label(props) {
 
   return (
     <label
-      className={cn(styles.label, props.className)}
+      className={cn(styles.labelCompo, props.className)}
       htmlFor={props.htmlFor}
       style={props.style}
     >
diff --git a/packages/strapi-helper-plugin/lib/src/components/Label/styles.scss b/packages/strapi-helper-plugin/lib/src/components/Label/styles.scss
index eea081e65d..02290032a8 100644
--- a/packages/strapi-helper-plugin/lib/src/components/Label/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/Label/styles.scss
@@ -1,4 +1,4 @@
-.label {
+.labelCompo {
   margin-bottom: 0;
   font-weight: 500;
 }