Ga naar hoofdinhoud

DSO Toolkit v83.0.0 🏝️

· 3 minuten leestijd
Eric Tamminga
Eric Tamminga
DSO Toolkit Maintainer

Deze release bevat BREAKING changes voor de volgende componenten:

  • Progress Bar
  • Document List (HTML/CSS component)
  • Progress Indicator (HTML/CSS implementatie)
  • Card (HTML/CSS implementatie)

In deze release is het volgende component deprecated:

  • Dropdown Menu: (HTML/CSS implementatie)

Progress Bar​

In 🍇 Release 78.0.0 is het component Progress Bar deprecated. Dit component bleek niet meer in gebruik te zijn. In deze release is dit component verwijderd.

HTML/CSS implemenatie​

❌
<div class="progress">
  <span
    class="progress-bar"
    role="progressbar"
    aria-labelledby="progress-bar-label"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
  >
    <span style="width: 60%"></span>
  </span>
  <span id="progress-bar-label">Genereren export: nog ongeveer 4 minuten.</span>
</div>

Core implementatie​

❌ <dso-progress-bar progress="60">Genereren export: nog ongeveer 4 minuten.</dso-progress-bar>

Document List​

Het HTML/CSS component Document List werd niet meer gebruikt. Daarom hebben we het in deze release verwijderd.

Progress Indicator (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Progress Indicator is in 💃 Release 81.0.0 deprecated. In deze release is deze implementatie verwijderd.

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>

Card (HTML/CSS implementatie)​

De HTML/CSS implementatie van het component Card is in 🍟 Release 80.0.0 deprecated. In deze release is deze implementatie verwijderd.

Migratiepad​

Gebruik de Core implementatie van Card.

❌
<div class="dso-card">
  <div class="dso-card-container">
    <div class="dso-card-heading">
      <a href="#">
        <h2>
          <span id="card-title">Omgevingsplan Nieuwegein</span>
          <!-- START DEPRECATED --><svg class="di di-chevron-right">
            <use href="#chevron-right"></use></svg
          ><!-- END DEPRECATED -->
        </h2>
      </a>
    </div>
    <div class="dso-rich-content"><p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p></div>
  </div>
</div>

✅
<dso-card href="#">
  <h2 slot="heading" id="card-title">Omgevingsplan Nieuwegein</h2>
  <div class="dso-rich-content" slot="content">
    <p>Gemeente Nieuwegein informeert haar burgers graag over de Omgevingswet.</p>
  </div>
</dso-card>

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

Migratiepad​

Gebruik de Core implementatie van Dropdown Menu.

❌
<div class="dso-dropdown-menu dso-open">
  <button type="button" id="0d47f401-0f17-4192-9dc7-10ecb5b1beee" class="dso-secondary">
    <span>Opties</span>
  </button>
  <div class="dso-dropdown-options" role="menu" aria-labelledby="0d47f401-0f17-4192-9dc7-10ecb5b1beee">
    <ul role="group" aria-labelledby="">
      <li role="none">
        <button type="button" role="menuitem">Bewerken</button>
      </li>
      <li role="none">
        <button type="button" role="menuitem">Verwijderen</button>
      </li>
    </ul>
  </div>
</div>

✅
<dso-dropdown-menu dropdown-align="left">
  <button type="button" id="6120c29d-e6d6-493c-b020-e2f77afe32de" class="dso-secondary" slot="toggle">
    <span>Opties</span>
  </button>
  <div class="dso-dropdown-options" aria-labelledby="6120c29d-e6d6-493c-b020-e2f77afe32de">
    <ul>
      <li>
        <button type="button">Bewerken</button>
      </li>
      <li>
        <button type="button">Verwijderen</button>
      </li>
    </ul>
  </div>
</dso-dropdown-menu>