Ga naar hoofdinhoud

DSO Toolkit v94.0.0 🦈

· 2 minuten leestijd
Chris van der Leij
Chris van der Leij
DSO Toolkit Maintainer
Xiangju Zou
Xiangju Zou
DSO Toolkit Maintainer

Deze release bevat breaking changes voor het volgende component:

  • Modal (HTML/CSS implementatie)

Deze release bevat een deprecation voor de volgende componenten:

  • Card Grid (HTML/CSS implementatie)
  • Card List (HTML/CSS implementatie)

De HTML/CSS implementatie van het component Modal is in 🍔 Release 82.0.0 deprecated. In deze release is de HTML/CSS implementatie van het component Modal verwijderd.

Migratiepad​

Gebruik de Core implementatie van Modal.

❌
<dialog aria-modal="true" class="dso-modal" role="alertdialog" aria-labelledby="c7934734-e6aa-4d9c-a76c-32dde50fe078">
  <div class="dso-dialog" role="document">
    <div class="dso-header">
      <h2 id="c7934734-e6aa-4d9c-a76c-32dde50fe078">Verwijderen werkzaamheid</h2>
      <button type="button" class="dso-close">
        <span class="sr-only">Sluiten</span>
      </button>
    </div>
    <dso-scrollable>
      <div class="dso-body" tabindex="0">
        <p>
          U wilt de werkzaamheid <strong>Dakkapel plaatsen, vervangen of veranderen</strong> verwijderen. Uw antwoorden
          op de vragen worden dan ook verwijderd. Wilt u doorgaan?
        </p>
      </div>
    </dso-scrollable>
    <div class="dso-footer">
      <button type="button" class="dso-tertiary">
        <span>Annuleren</span>
      </button>
      <button type="button" class="dso-secondary">
        <span>Secundaire actie</span>
      </button>
      <button type="button" class="dso-primary">
        <span>Bevestigen</span>
      </button>
    </div>
  </div>
</dialog>

✅
<dso-modal dialog-role="alertdialog" modal-title="Verwijderen werkzaamheid" closable>
  <div slot="body">
    <p>
      U wilt de werkzaamheid <strong>Dakkapel plaatsen, vervangen of veranderen</strong> verwijderen. Uw antwoorden op
      de vragen worden dan ook verwijderd. Wilt u doorgaan?
    </p>
  </div>
  <div slot="footer">
    <button type="button" class="dso-tertiary">
      <span>Annuleren</span>
    </button>
    <button type="button" class="dso-secondary">
      <span>Secundaire actie</span>
    </button>
    <button type="button" class="dso-primary">
      <span>Bevestigen</span>
    </button>
  </div>
</dso-modal>

Card Grid (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Card Grid is deprecated. In een toekomstige BREAKING release zal de HTML/CSS implementatie verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Card Container.

❌
<div class="dso-card-grid">
  <dso-card href="#"></dso-card>
  [...]
</div>

✅
<dso-card-container mode="grid">
  <dso-card href="#">
  [...]
</dso-card-containe

Card List (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Card List is deprecated. In een toekomstige BREAKING release zal de HTML/CSS implementatie verwijderd worden.

Migratiepad​

Gebruik de Core implementatie van Card Container.

❌
<ul class="dso-card-list">
  <li>
    <dso-card></dso-card>
  </li>
  [...]
</ul>

✅
<dso-card-container mode="list">
  <li>
    <dso-card href="#">
  </li>
  [...]
</dso-card-container>