Omkeren fontweight description list

[jmassink]

Describe the issue

Wij zouden graag een description list willen hebben, waarbij de titels bold zijn en de details normal. Zie screenshots. Momenteel hebben we dit geimplememteerd met inline styling.

Daarnaast is de titel / detail ratio 1 op 3. Omdat we een breed scherm hebben, hebben we dit aangepast naar 1 op 4.

Checklist

• Optie om fontweight om te draaien (titel: bold, detail normal)
• Aanpassen van de ratio titel/detail

Screenshot

Huidige implementatie.

PS: we hebben ook styling in een van de velden. Daar vinden jullie ook vast iets van

code implementatie

                        <DescriptionList>
                            <DescriptionList.Term
                                style={{ fontWeight: 'bold' }}
                            >
                                Gaat naar school
                            </DescriptionList.Term>
                            <DescriptionList.Details
                                style={{ fontWeight: 'inherit' }}
                            >
                                Ja
                            </DescriptionList.Details>
                            <DescriptionList.Term
                                style={{ fontWeight: 'bold' }}
                            >
                                Schoolnaam
                            </DescriptionList.Term>
                            <DescriptionList.Details
                                style={{ fontWeight: 'inherit' }}
                            >
                                Duckstad College
                            </DescriptionList.Details>
                            <DescriptionList.Term
                                style={{ fontWeight: 'bold' }}
                            >
                                Is er sprake van verzuim?
                            </DescriptionList.Term>
                            <DescriptionList.Details
                                style={{ fontWeight: 'inherit' }}
                            >
                                Ja
                            </DescriptionList.Details>
                            <DescriptionList.Term
                                style={{ fontWeight: 'bold' }}
                            >
                                Aanvullende informatie
                            </DescriptionList.Term>
                            <DescriptionList.Details
                                style={{ fontWeight: 'inherit' }}
                            >
                                <RichTextView
                                    style={{ maxWidth: '50rem' }}
                                    richText={
                                        leefgebieden[1].content ?? NO_CONTENT
                                    }
                                />
                            </DescriptionList.Details>
                    </DescriptionList>

[VincentSmedinga]

Ha Jasper, dank voor je feedback!

Toevallig zijn we net al even bezig met de vormgeving van Description List – zie dit ticket in Jira.

Bold vs regular
Zo’n soort tabel met ‘label/value pairs’ is inderdaad een bekend patroon en wordt in diverse situaties gebruikt. In sommige lijkt het logischer de labels vetgedrukt te tonen, in andere juist de values. NL Design System onderscheidt bijvoorbeeld nog een Summary List dat hierop lijkt. Wel zien we dat nagenoeg alle gemeenten de labels vetgedrukt maken en de values niet. Goede kans dus dat dat binnenkort ook onze standaard wordt; of misschien dat we beide opties aanbieden.

Kolombreedtes
Het is inderdaad nog niet mogelijk om de verhouding tussen de kolombreedtes te bepalen. Dat is een logische feature; we gaan er iets voor bedenken.

Rijke inhoud van een waarde
De waarde van het veld ‘Algemene informatie’ is inderdaad vrij uitgebreid. Op zich mag dat en kan dat al – we gebruiken een <dd> en daarbinnen staat HTML allerlei elementen toe. Dus op zich is dit oké. Probeer wel in de gaten te houden dat de layout begrijpelijk blijft – al gok ik dat deze inhoud vooral om te testen is en dat wat in de applicatie zou verschijnen wat compacter is.

[VincentSmedinga]

Hee @jmassink met versie 0.13 kan dit allemaal, bijvoorbeeld zo:

<DescriptionList termsWidth="sm">
  <DescriptionList.Term>
    Gaat naar school
  </DescriptionList.Term>
  <DescriptionList.Description>
    Ja
  </DescriptionList.Description>
  …

• De termen zijn nu bold, beschrijvingen niet meer. We hebben er geen optie voor gemaakt; daar vonden we geen logische toepassing voor. Mede daardoor is zo’n ‘veld met styling’ geen probleem.
• Je kunt de kolombreedtes nu zetten met termsWidth. Jullie verhouding van 1 op 4 (ik neem aan dat je daar 25% / 75% mee bedoelt) haalde het niet; dat zou te weinig verschil met 33% / 67% geven. De sm small optie is 20% / 80%.
• Als je geen termsWidth opgeeft is die kolom automatisch zo breed als de breedste term en komen de beschrijvingen er dicht achteraan. Dat is wellicht de mooiste optie. Met meerdere losse lijsten onder elkaar is het wel beter overal dezelfde breedte te kiezen.
• .Details is nu .Description geworden.
• Check de andere breaking changes van deze release in Slack of op GitHub.

[jmassink]

@VincentSmedinga
Dankjewel voor het bijwerken en de update. Ik zal dit doorgeven aan het team dat ze dit kunnen aanpassen.

PS: Vanaf volgende week ben ik de nieuwe PO van het Opdrachten Team. Daarmee vervang ik Yom Schutte en ben ik dus ook niet mee werkzaam voor Team Salmagundi

[VincentSmedinga]

@jmassink Graag gedaan. En gefeliciteerd!
We helpen je ook in het Opdrachten Team graag het design system te gebruiken 💪🏼