Legg til hvit farge-variant og andre design tweaks #1300
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
HeleneKassandra
force-pushed
the
add-white-message-box
branch
6 times, most recently
from
006e17c
to
8a88a19
Compare
Legger til en boolean prop som heter onColoredBg. Denne toggler en klasse som gir meldingsboksene en alternativ styling som har som mål å gi bedre kontrast på fargede bakgrunner. Per dags dato blir bakgrunnen på meldingsboksene hvit i lightmode, mens den forblir uforandret i darkmode - dette er pga manglende støtte for bakgrunnsfarger i darkmode. Er også noen endringer i nestingen av CSS
BREAKING CHANGE: endrer klasse hierarkiet ved å flytte type modifieren Små fargeendringer på meldingsboksene, samt en ny modifier klasse som gir meldingsboksene hvit bakgrunn i lightmode. Denne modifier-klassen brukes for å oppnå god nok kontrast i scenarioer der man tar i bruk meldingsboksene på fargede bakgrunner.
HeleneKassandra
force-pushed
the
add-white-message-box
branch
from
83c5a03
to
71fd39f
Compare
legger til eksempel som viser SystemInfoMessage, InfoMessage og ContentMessage med onColoredBg prop satt til true, for å vise hvordan den ser ut på farget bakgrunn. Fjerner contentmessage eksempler med ikon
HeleneKassandra
force-pushed
the
add-white-message-box
branch
2 times, most recently
from
4aed955
to
a5ca261
Compare
kwltrs
requested changes
Jan 12, 2022
| const ContextErrorMessage = props => { | ||
| const { alert, ...rest } = props; | ||
|
|
||
| return ( | ||
| <ContextMessage | ||
| messageType="error" | ||
| role={alert ? 'alert' : false} | ||
| icon={<UtropstegnIkon />} |
There was a problem hiding this comment.
Vet dette at vi har dette fra før. Synes dette er stygt. Er det enkelt å få det til at man kan slenge inn klassen og ikke en instans? F.eks
<ContextMessage icon={UtropstegnIkon} ..../>There was a problem hiding this comment.
Jeg tenkte det samme, men grunnen til at det er sånn er fordi brukere skal ha muligheten til å sende inn custom klasser til ikonet direkte, uten at det er en egen property. Vi går jo bort fra custom ikoner nå, men teknisk sett er det forsatt mulig hvis man bruker ContextMessage komponenten istedenfor ContextErrorMessage for eksempel, derfor jeg lot det bare være.
Er det noe vi ønsker å lage issue på?
…t bakgrunn Legger til en ny prop kalt onColoredBg, denne skrur på en versjon av systemmelding med hvit bakgrunn som fungerer bedre på fargede bakgrunner
små farge endringer for å sikre god nok kontrast. Legger også til en ny klasse som gir system meldinger hvit bakgrunn i lightmode. Denne brukes der man ønsker å bruke systemmelding på farget bakgrunn og sliter med å få god nok kontrast med "standard" varianten
BREAKING CHANGE: fjerner muligheten til å legge inn custom ikon og setter faste ikoner pr type Legger inn onColoredBg prop som skrur på styling til bruk på farget bakgrunn
… bakgrunn Små farge endringer, samt en ny modifier klasse som gir hvit bakgrunn i lightmode. Denne brukes for å oppnå god nok farge kontrast på fargede bakgrunner. Det er nå også ikoner uansett størrelse, så en del tilpasninger relatert til det
HeleneKassandra
force-pushed
the
add-white-message-box
branch
from
49bb2cb
to
c470f0a
Compare
kwltrs
approved these changes
Jan 18, 2022
andrea-sb1
approved these changes
Jan 24, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Beskrivelse
Legger til en variant av alle boksene med hvit bakgrunn i lightmode, denne skal brukes der man tar i bruk
boksene på farget bakgrunn, og man ikke oppnår god nok kontrast med standard versjonen.
I tillegg er det noen design endringer i noen av meldingsboks-typene, samt fargeendringer for å samkjøre alt med det som ligger i Figma.
ContextMessage
MessageBox
SystemMessage
Motivasjon og kontekst
Det har vært ett ønske om å få en variant som fungerer bedre på bruk på farget bakgrunn. Denne prosessen
førte også med seg noen andre visuelle endringer som ble tatt med i samme slengen. Endringene finnes også som en egen branch i Figma som merges inn samtidig som denne PR'en
Testing
Testet med å kjøre opp lokalt og sjekke ting opp mot component-overview.
Andre ting som må gjøres før denne kan merges
[ ] Merge i Figma
[x] Oppdatere dokumentasjon (PR er åpnet i Docs repo)