DSO Toolkit v74.0.0 💈

Deze release bevat breaking changes voor de volgende componenten:

• Banner
• Modal
• Badge
• Label
• Viewer Grid

Banner

In deze release is in het component banner de prop status aangepast. De status danger is komen te vervallen. De status success is toegevoegd.

Web component

❌ < 74.0.0
<dso-banner status="danger"></dso-banner>

✅ >= 74.0.0
<dso-banner status="error"></dso-banner>

<dso-banner status="success"></dso-banner>

HTML/CSS component

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

✅ >= 74.0.0
<section role="alert" class="dso-banner alert-error dso-icon">
  <div class="dso-banner-inner">
    <div class="dso-rich-content">
      <!-- inhoud banner -->
    </div>
  </div>
</div>

<section role="alert" class="dso-banner alert-success dso-icon">
  <div class="dso-banner-inner">
    <div class="dso-rich-content">
      <!-- inhoud banner -->
    </div>
  </div>
</div>

Modal

In deze release is in het component modal de prop showCloseButton hernoemd naar closable die default op false staat. Het default gedrag van de Modal is veranderd. Voorheen waren alle Modals standaard sluitbaar, vanaf deze release zijn ze standaard niet-sluitbaar. Zie voor beide situaties onderstaand migratiepad: De DSO Toolkit maakt gebruik van StencilJS voor het maken van Web Components. Zij raden het gebruik van default properties en attributes met default value true. Dit was het laatste attribuut met een default value true.

Sluitbaar:

❌ < 74.0.0
<dso-modal></dso-modal>

✅ >= 74.0.0
<dso-modal closable></dso-modal>

Niet sluitbaar:

❌ < 74.0.0
<dso-modal show-close-button="false"></dso-modal>

✅ >= 74.0.0
<dso-modal></dso-modal>

Badge

In deze release is in het component badge de status danger verwijderd inclusief de styling die daarbij hoort. Als alternatief kan de status error worden gebruikt. Deze heeft dezelfde achtergrond en tekst kleur als de danger status. Daarnaast is de kleur aangepast van de info status. Deze heeft nu een donkerblauwe achtergrond en witte tekst.

Web component

❌ < 74.0.0
<dso-badge status="danger"></dso-badge>

✅ >= 74.0.0
<dso-badge status="error"></dso-badge>

HTML/CSS component

❌ < 74.0.0
<span class="dso-badge badge-danger">Badge text</span>

✅ >= 74.0.0
<span class="dso-badge badge-error">Badge text</span>

Label

In deze release is in het component Label de status danger verwijderd inclusief de styling die daarbij hoort. Als alternatief kan de status error worden gebruikt. Deze heeft dezelfde achtergrond en tekst kleur als de danger status. Daarnaast is er een filter status toegevoegd. Deze heeft nu een donkerblauwe linker border, lichtblauw achtergrond en witte tekst.

Web component

❌ < 74.0.0
<dso-label status="danger"></dso-label>

✅ >= 74.0.0
<dso-label status="error"></dso-label>

<dso-label status="filter"></dso-label>

HTML/CSS component

❌ < 74.0.0
<span class="dso-label dso-label-danger">Label</span>

✅ >= 74.0.0
<span class="dso-label dso-label-error">Label</span>

<span class="dso-label dso-label-filter">Label</span>

Viewer Grid

De property mode is komen te vervallen. Alle functionaliteit die gekoppeld was aan mode=“vrk” is verwijderd. Alle functionaliteit die gekoppeld was aan mode=“vdk” is nu de enig resterende functionaliteit. De events dsoMainSizeChange, dsoFilterpanelApply en dsoFilterpanelCancel worden niet meer ge-emit.

Daarnaast is de naamgeving van de properties filterpanel-title en filterpanel-open en het event dsoCloseFilterpanel gecorrigeerd: deze zijn nu filter-panel-title, filter-panel-open en dsoCloseFilterPanel geworden.

❌ < 74.0.0
<dso-viewer-grid
  mode="“vrk|vdk”"
  filterpanel-title="“...”"
  filterpanel-open
  (dsoMainSizeChange)="“...”"
  (dsoCloseFilterpanel)="“...”"
  (dsoFilterpanelApply)="“...”"
  (dsoFilterpanelCancel)="“...”"
  [...]
></dso-viewer-grid>

✅ >= 74.0.0
<dso-viewer-grid filter-panel-title="“...”" filter-panel-open (dsoCloseFilterPanel)="“...”" [...]></dso-viewer-grid>