PrestaShop / prestashop-ui-kit

UI kit for PrestaShop Backoffice - A collection of styled components, based on Bootstrap 4
47 stars 29 forks source link

Enhancement: size of the invalid state #213

Open amaury-hanser opened 1 year ago

amaury-hanser commented 1 year ago

Hello,

I suggest to increase the font-size of the validation message. For now, the font-size compute to 10px.

It comes from the mixin @mixin ps-form-validation-state($state, $color) in scss/mixins/_forms.scss

@mixin ps-form-validation-state($state, $color) {
  .form-control.is-#{$state},
  .is-#{$state} {
    border-color: $color;

    &:focus {
      box-shadow: none;
    }
  }

  .#{$state}-feedback {
    margin-top: 0.3125rem;
    font-size: $font-size-xs;
    font-weight: $font-weight-bold;
    color: $color;
  }
}

The variable $font-size-xs is defined in scss/_variables.scss: The value is:

$font-size-xs: 0.625rem; // PS custom

What do you think about increasing the computed value to 12px instead?

prestascott commented 1 year ago

I agree with @amaury-hanser, 10px is very small and difficult to read for users. The minimum size is 14px but it's not the case in the back office. Size 12px seems to be good according to the back office.