DSO Toolkit v100.0.0 💯

Deze release bevat BREAKING changes voor de volgende componenten:

• Document Component
• Info (HTML/CSS implementatie)
• List
• Tooltip

Document Component

Een Omgevingsdocument kan meer dan 5 niveaus diep zijn. Voorheen ondersteunde het Document Component enkel de heading-niveaus h2 tot en met h6. De prop heading is daarom vervangen door heading-level, die een numeriek niveau accepteert zonder bovengrens.

Bij een niveau tot en met 6 wordt een native heading-element (<h2> … <h6>) gerenderd. Bij een niveau groter dan 6 wordt een <div role="heading" aria-level="*"> gerenderd, omdat HTML geen native heading-elementen voorbij <h6> kent. Zo blijft de documentstructuur correct toegankelijk voor hulpsoftware.

Migratiepad

Vervang de prop heading door heading-level en geef het niveau als getal op in plaats van als tagnaam.

❌
<dso-document-component heading="h2">...</dso-document-component>
✅
<dso-document-component heading-level="2">...</dso-document-component>

Info (HTML/CSS implementatie)

De HTML/CSS implementatie van het component Info is in 🏴󠁧󠁢󠁳󠁣󠁴󠁿 97.0.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad

Gebruik het Core component Info.

❌
<div class="dso-info">
  <div class="dso-rich-content">...</div>
  <button type="button" class="">
    <span class="sr-only">Sluiten</span>
  </button>
</div>

✅
<dso-info fixed="" active="">
  <div class="dso-rich-content">...</div>
</dso-info>

List

De selector ol.dso-list-ordered-action in het HTML/CSS-component List is in 🧱 Release 91.0.0 deprecated. In deze release is deze selector verwijderd.

Migratiepad

Gebruik de ol.dso-action-list selector van de List.

❌
<ol class="dso-list-ordered-action">
  <li>...</li>
</ol>

✅
<ol class="dso-action-list">
  <li>...</li>
</ol>

Tooltip

In deze release is het component Tooltip verwijderd. Tooltip hebben we eerder in 🐻 Release 73.2.0 deprecated. In de blogpost van 🧱 Release 91.0.0 brachten we de deprecation van Tooltip nogmaals onder de aandacht.

In de blogpost van 🐻 Release 73.2.0 schreven we: "In een van de komende releases zal Tooltip worden vervangen door verbeterde alternatieven, zoals het nieuwe Icon Button component of vernieuwde varianten van het Toggletip component."

De verbeterde alternatieven zijn inmiddels via een aantal releases beschikbaar gekomen:

• In 🌯 Release 79.1.0 hebben we het component Icon Button geïntroduceerd.
• In 🤧 Release 88.0.0 hebben we het component Info Button uitgebreid met ondersteuning voor Toggletip functionaliteit.
• In 🦡 Release 90.1.0 hebben we het component Badge uitgebreid met ondersteuning voor toggletip functionaliteit.

Migratiepad

❌
<button type="button" aria-describedby="40990d71-60c2-46d2-9822-e619f4783e74">
  <span>Hover or focus me</span>
  <dso-tooltip position="right" id="40990d71-60c2-46d2-9822-e619f4783e74"> Ik sta "right" </dso-tooltip>
</button>

❌
<button type="button" aria-describedby="92fdc476-3588-4c97-80b5-d42289d00184">
  <span>Hover or focus me</span>
</button>
<dso-tooltip position="bottom" id="92fdc476-3588-4c97-80b5-d42289d00184"> Ik sta "bottom" </dso-tooltip>

✅
<dso-icon-button variant="map | secondary | tertiary" label="Toelichting bij vraag" icon="trash"></dso-icon-button>

✅
<dso-info-button label="Toelichting bij vraag">
  <div slot="toggletip">
    <div class="dso-rich-content">...</div>
  </div>
</dso-info-button>

✅
<dso-badge>
  <div slot="toggletip">
    <div class="dso-rich-content">...</div>
  </div>
</dso-badge>