search

SpareBank1 / designsystem

SpareBank 1's design system and component library.
https://design.sparebank1.no
MIT License
105 stars 83 forks source link

ffe-context-message: Close icon renders on top of text #916

Closed fossecode closed 4 years ago

fossecode commented 4 years ago

Which package is this issue related to? ffe-context-message

Describe your issue image

What is the expected behavior? The close icon and the text should not overlap

What is the actual behavior? The close icon overlaps the text

Relates to #693

steffenz commented 4 years ago

Hei! Har sett litt på dette nå, og er ikke helt sikkert på hvordan vi bør løse det. Jeg får ikke gjenprodusert ditt eksempel, så om du eventuelt kunne lagt ved kode og litt informasjon om miljø hadde det vært veldig fint. Ettersom komponentene er på NPM kan du jo eventuelt vurdere å bruke en CodeSandbox eller lignende også.

Det jeg imidlertid ser (og kjenner til fra før) er at veldig lange ord ikke nødvendigvis gir linjeskift. Det er jo ikke noe alternativ å skjule dette, så i tilfellet tror jeg vi må bruke noe sånn som word-break: break-all i CSS (eventuelt overflow-wrap ). Det kan kanskje gi noen utilsiktede konsekvenser, så jeg er usikker på om vi skal gjøre det i pakka, eller om det er best at du gjør det i din løsning :thinking: Hva tror du?

Ellers synes jeg denne artikkelen var veldig god på å forklare problematikken. Som de der sier er jo word-break: break-all ei "slegge" som på sett og vis "løser" problemet. Men det føles ikke helt bra.