detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
44 stars 13 forks source link

Dropdown menu med fejl, kan overflow ind i chevron #255

Open VirtualSatai opened 5 days ago

VirtualSatai commented 5 days ago

Bekskriv fejlen (Describe the bug)

Hvis en dropdown har fejl ("form-error") så har feltet ikke korrekt padding-right, og derfor kan tekst overflowe forkert: image

Det skyldes at reglen for form-error overskrifter padding:

.form-group.form-error>.form-input,
.form-group.form-error>.form-select,
.form-group.form-error>fieldset>.date-group .form-input,
.form-group.form-error>.date-picker .form-input,
.form-group.form-error>.form-input-wrapper>.form-input {
  border:2px solid #c00;
  padding:calc(8px - 2px) calc(16px - 2px)
}

Men ikke padding-right ordenligt på .form-select:

.form-select {
  /* ...*/
  padding:calc(8px - 1px) calc(16px - 1px);
  padding-right:32px;
  /* ...*/
}

Genskab fejlen (To Reproduce)

hav en dropdown mere længere indhold end der er plads, og lad den fejle validering.

Screenshots image

Sådan burde det fungere (Expected behavior) Der skal fortsat være padding-right selv ved fejl.

Desktop - udfyld venligst følgende (please complete the following information):

Smartphone - udfyld venligst følgende (please complete the following information):

Supplerende oplysninger (Additional context)

detfaellesdesignsystem commented 5 days ago

Hej @VirtualSatai Tak for din henvendelse. Vi har oprettet en sag på det.

Med venlig hilsen Det Fælles Designsystem