Refacto Input library scss

2025-09-25 08:19:07 +00:00 · 2018-02-15 15:46:25 +01:00 · 2018-02-15 15:46:25 +01:00 · 69dad2ac95
commit 69dad2ac95
parent 6aaa064822
31 changed files with 80 additions and 94 deletions
--- 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 />;
--- 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;
-}
--- 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 />;
--- 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;
--- 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 />;
--- 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;
-}
--- 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,
        )}
--- 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;
-}
--- 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(
--- 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;
-}
--- 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,
        )}
--- 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;
-}
--- 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>
    );
  }
--- 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;
--- 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 />;
--- 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;
-}
--- 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,
        )}
--- 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;
--- a/packages/strapi-helper-plugin/lib/src/components/InputSpacer/index.js
+++ 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;
--- a/packages/strapi-helper-plugin/lib/src/components/InputSpacer/styles.scss
+++ b/packages/strapi-helper-plugin/lib/src/components/InputSpacer/styles.scss
@ -0,0 +1,3 @@
+.spacerInput {
+  height: .5rem;
+}
--- 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,
--- 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;
--- 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,
        )}
--- 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';
 }
--- 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 />;
--- 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;
-}
--- 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,
        )}
--- 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;
-}
--- 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,
-};
--- 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}
    >
--- 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;
 }