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
statusis hernoemd naarstatusExplanation. De werking is ongewijzigd. - De property
stateis hernoemd naarstatus. 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.