Ga naar hoofdinhoud

DSO Toolkit Next ๐Ÿ“œ

ยท 2 minuten leestijd
Eric Tamminga
DSO Toolkit Maintainer
Chris van der Leij
DSO Toolkit Maintainer

Deze release bevat breaking changes voor de volgende componenten:

  • Helpcenter Panel (Web Component).
  • Banner

Helpcenter Panelโ€‹

Het Helpcenter Panel (Core implementatie) werd niet gebruikt. Daarom hebben we het in deze release verwijderd.

โŒ <dso-helpcenter-panel ...></dso-helpcenter-panel>

De property noIcon is hernoemd naar icon.โ€‹

Stencil verbiedt het direct instellen van een prop-defaultwaarde op true in de @Prop()-decorator. In deze release is de prop noIcon, die default op true staat, hernoemd naar icon die default op false staat. Daarnaast is het webcomponent gelijk getrokken aan de HTML/CSS variant betreft het verbergen van het icon. Dat kan alleen wanneer de prop compact op true staat.

** Web component **

โŒ
<dso-banner status="danger">
โœ…
<dso-banner status="danger" icon></dso-banner
></dso-banner>

** HTML/CSS component **

โŒ
<section role="alert" class="dso-banner alert-danger">
<div class="dso-banner-inner">
<div class="dso-rich-content">
<!-- inhoud banner -->
</div>
</div>
</dso-banner>

โœ…
<section role="alert" class="dso-banner alert-danger dso-icon">
<div class="dso-banner-inner">
<div class="dso-rich-content">
<!-- inhoud banner -->
</div>
</div>
</dso-banner>

Legacy selectors voor grid-system zijn verwijderdโ€‹

In DSO Toolkit v67.2.0 ๐Ÿ‘น is van de HTML/CSS implementatie van Banner de HTML markup gewijzigd: de afhankelijkheid van het grid system is verwijderd. De "oude" markup werd nog ondersteund via de styling, maar die tijdelijke ondersteuning is in deze versie van DSO Toolkit verwijderd. Het gaat om de banner specieke styling; .container en de daarin geneste .col-sm-12.

โŒ
<section role="alert" class="dso-banner alert-danger">
<div class="container">
<div class="row">
<div class="col-sm-12">-content-</div>
</div>
</div>
</section>

โœ…
<section role="alert" class="dso-banner alert-danger">
<div class="dso-banner-inner">-content-</div>
</section>