Ga naar hoofdinhoud

DSO Toolkit v56.0.0

· 2 minuten leestijd
Thomas Rijsewijk

De vorige breaking release is nog niet afgekoeld of er ligt alweer een nieuwe breaking release op de plank. Hoewel v55.0.0 alleen formeel een breaking release was (er ging niets stuk), zal dat voor afnemers van Accordion, Annotation Button, Annotation Output, Expandable en Expandable Heading wel het geval zijn.

Accordion​

Zoals in de vorige blogpost aangekondigd hebben wij onze visie op State en toolkitcomponenten herzien. De Web Component implementatie van Accordion is het eerste component wat we bijwerken naar deze nieuwe visie.

De HTML/CSS implementatie van Accordion heeft geen changes.

API changes​

  • De property status is hernoemd naar statusExplanation. De werking is ongewijzigd.
  • De property state is hernoemd naar status. De werking is ongewijzigd.

De events dsoToggleSection en dsoToggleSectionAnimationEnd zitten niet meer op Accordion maar zijn verhuisd naar de Accordion Section en zijn hernoemd naar dsoToggleClick en dsoAnimationEnd.

Met het verwijderen van interne state is de property allowMultipleOpen obsolete geraakt. Deze property is dus ook verwijderd.

Geen interne state​

De interne state van de Accordion is verwijderd. Dit betekent dat afnemers meer moeten aansluiten. Het voordeel is dat afnemers meer invloed op de Accordion hebben en dat de Accordion volledig opgaat in de state van de applicatie.

Helper functie scrollIntoView().​

Op het AccordionSectionAnimationEndEvent object staat een helperfunctie scrollIntoView(). De afnemer kan deze aanroepen om de Accordion Section in beeld te scrollen.

Annotation Button​

Dit component is stateless gemaakt. De afnemer moet zorg dragen voor state management. Bij het tonen van Annotation Output moet ook dit component open="true" krijgen.

<dso-annotation-button [...] open>[...]</dso-annotation-button>

Annotation Output​

Het event dsoToggle is hernoemd naar dsoClose. Daarnaast is dit component stateless gemaakt. Dit betekent dat de content van dit element pas toont als open="true" is gezet:

<dso-annotation-output [...] open>[...]</dso-annotation-output>

Expandable​

Het named slot "expandable-content" is omgezet naar een nameless slot:

❌
<dso-expandable>
  <div slot="expandable-content">
    [...]
  </div>
</div>

✅
<dso-expandable>
  <div>
    [...]
  </div>
</div>

Expandable Heading​

Dit component is komen te vervallen met de komst van Document Component.