Ga naar hoofdinhoud

DSO Toolkit v81.0.0 💃

· 3 minuten leestijd
Chris van der Leij
Chris van der Leij
DSO Toolkit Maintainer
Eric Tamminga
Eric Tamminga
DSO Toolkit Maintainer
Thomas Rijsewijk
Thomas Rijsewijk
DSO Toolkit Product Owner & Architect

Deze release bevat BREAKING changes voor de volgende componenten:

  • Date Picker (Legacy)
  • Icon (HTML/CSS implementatie)
  • Document Component
  • Ozon Content

Deze release bevat een deprecation voor de volgende componenten:

  • Badge (HTML/CSS implementatie)
  • Progress Indicator (HTML/CSS implementatie)

Date Picker (Legacy)​

Het component Date Picker (Legacy) is in 🦕 Release 78.1.0 deprecated. In deze release is dit component verwijderd.

❌

<dso-date-picker-legacy></dso-date-picker-legacy>

Icon (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Icon is in 🦕 Release 78.1.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad​

Gebruik de Core implementatie van Icon.

❌
<svg class="di di-user">
  <use href="#user"></use>
</svg>

✅
<dso-icon icon="user"></dso-icon>

Document Component​

Het Event dsoOzonContentAnchorClick is vervangen door dsoOzonContentClick. (Zie ook de BREAKING change aan het component Ozon Content in deze release).

Ozon Content​

De Ozon Content dsoAnchorClick event handler is komen te vervallen. Het gedrag van deze event handler is ondergebracht in dsoClick. Daarnaast is de event handler dsoClick uitgebreid met de nieuwe link types IntIoRef en IntRef.

Er is geen uitgestippeld migratiepad. Hoogstwaarschijnlijk wil je als high-level afnemer gebruik maken van Document Component. Ozon Content kan gezien worden als een "Low Level component".

STOP elementen IntRef werden voorheen geparsed tot <a href="#<waarde-van-ref-attribuut>">. De waarde in het href attribuut wordt nu gegenereerd via de urlResolver. Dit maakt het mogelijk om de gegenereerde URL aan te passen.

Onderstaande voorbeeld implementatie geeft het oude gedrag. Dit wordt niet aangeraden en staat er slechts ter verduidelijking. Het is de bedoeling dat de urlResolver dezelfde functie teruggeeft als die de click handler in de router zet.

function urlResolver(
  name: "ExtIoRef" | "ExtRef" | "IntIoRef" | "IntRef",
  attribute: "ref",
  value: string | null,
  element: Element,
): string {
  if (name === "IntRef" && value) {
    return `#${value}`;
  }

  // [..]
}

Badge (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Badge is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Badge.

❌
<span class="dso-badge badge-attention">Attention</span>

✅
<dso-badge status="attention">Attention</dso-badge>

Progress Indicator (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Progress Indicator is deprecated. In een toekomstige BREAKING release zal dit component verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Progress Indicator.

❌
<div class="dso-progress-indicator dso-medium">
  <span class="dso-progress-indicator-spinner" role="progressbar" aria-labelledby="progress-indicator-label"></span>
  <span id="progress-indicator-label" class="dso-progress-indicator-label">
    Resultaten laden: een moment geduld alstublieft.
  </span>
</div>

✅
<dso-progress-indicator size="medium"></dso-progress-indicator>