@hamster141095

Опишите правильно структуру FormInput по БЭМ?

Что не так с этим input? Пишут, что не по бэму...

<div class="form-input">
  <label for="username" class="label form-input__label">User name</label>
  <div class="form-input__inner">
    <input class="input input_notification_error" id="username" placeholder="" type="email" />
    <svg
     SVG
    </svg>
  </div>
  <label for="username" class="label form-input__label label_notification_error"
    >Something goes wrong</label
  >
</div>


Компонент на React
const FormInput: React.FC<IFormInput> = ({ id, type, placeholder = '', labelText, errorText }) => {
  return (
    <Wrapper className="form-input">
      <Label htmlFor={id} labelText={labelText} className="form-input__label" />

      <Wrapper className="form-input__inner">
        <Input type={type} isError={!!errorText} placeholder={placeholder} id={id} />
        {errorText && <Icon color={ColorType.error} name={IconName.inputError} />}
      </Wrapper>

      {errorText && (
        <Label htmlFor={id} isError errorText={errorText} className="form-input__label" />
      )}
    </Wrapper>
  );
};


Стили
@import '../../../styles/variables';

.form-input {
  max-width: 354px;

  &__label {
    margin-bottom: 4px;

    &.label_notification_error {
      margin: 4px 0px 0px 20px;
    }
  }

  &__inner {
    position: relative;

    & svg {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translate(0, -50%);
    }
  }
}
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 1
Realetive
@Realetive
MODX Ambassador России, самозванный БЭМ-евангелист
С HTML всё ок (если нет возможности задать CSS-класс , то всё ок), JSX не смотрел, а в CSS смутила вот эта строка:

&.label_notification_error {
  margin: 4px 0px 0px 20px;
}


Смешиваются стили .form-input__label и label_notification_error. Эту проблему решит каскад:

.form-input {
  &__label {
    margin-bottom: 4px;
  }
}

.label {
  &_notification_error {
    margin: 4px 0px 0px 20px;
  }
}


Если же такой margin нужен только у этой конкретной формы — или вынести его в инлайн-стили, или сделать отдельный модификатор, но для .form-input__label (например,
.form-input_view_super-form-with-notification-margin .form-input__label_notification_error {
  margin: 4px 0px 0px 20px
}
)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы