Ga naar hoofdinhoud

DSO Toolkit v62.26.0 ๐Ÿงฒ

ยท Een minuut leestijd
Eric Tamminga
DSO Toolkit Maintainer

Breaking changeโ€‹

In deze release is de ondersteuning voor Angular 15 komen te vervallen. Vanaf deze release ondersteunt DSO Toolkit Angular versies 16, 17 en 18.

DSO Toolkit v62.22.0 ๐Ÿธ

ยท 2 minuten leestijd
Eric Tamminga
DSO Toolkit Maintainer

In deze release zijn twee nieuwe features aan het Logo component toegevoegd, die op zich niet breaking zijn, maar toch een toelichting behoeven.

Voorheen kon een afnemer van het Logo component een anchor om het Logo component plaatsen om zo routering binnen de afnemende applicatie te faciliteren.

Markup voor deze situatie ziet er ongeveer zo uit:

<a href="/">
<dso-logo label="Regels op de kaart"></dso-logo>
</a>

In deze release is het Logo component uitgebreid met 2 nieuwe properties: logoUrl en labelUrl.

logoUrlโ€‹

Indien de afnemer aan het Logo component de property logoUrl meegeeft, dan zal het Logo component een anchor met href zetten rondom het beeldmerk en het woordmerk. Wanneer een gebruiker deze link aanklikt dan zal het Logo component het custom event dsoLogoClick uitsturen.

labelUrlโ€‹

Indien de afnemer aan het Logo component de property labelUrl meegeeft, dan zal het Logo component een anchor met href zetten rondom het label. Voorwaarde is dan ook dat de property label is gezet. De property labelUrl zonder property label zal door het Logo component worden genegereerd. Wanneer een gebruiker deze link aanklikt dan zal het Logo component het custom event dsoLabelClick uitsturen.

De markup voor deze nieuwe mogelijkheden van het Logo component ziet er zo uit:

<dso-logo logo-url="/" label="Regels op de kaart" label-url="regels-op-de-kaart"></dso-logo>

Bekijk de nieuwe mogelijkheden in de storybook van het Logo component: https://storybook.dso-toolkit.nl/master/?path=/story/core-logo--with-logourl-and-label-and-labelurl

DSO Toolkit v62.19.0 ๐Ÿช–

ยท Een minuut leestijd
Hans Grimm
DSO Toolkit Maintainer

In deze release is een bug in de Modal opgelost waardoor in sommige gevallen de modal in een viewport onder 768px breedte verdween.

De CSS-code die een deel van de markup op display: none zette, is verwijderd, en de HTML body detecteert nu automatisch of een modal is geopend:

Oud:

body.dso-modal-open {
@media screen and (min-width: media-query-breakpoints.$screen-sm-min) {
overflow: hidden;
}

@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {
.container,
dso-banner,
.dso-banner {
display: none;
}
}
}

Nieuw:

body:has(dialog[open]),
body:has(dso-modal.hydrated) {
// block scrolling of the body when a dialog is open
overflow: hidden;
}

Het is bij de html/css-versie van de Modal dus niet meer nodig om de class dso-modal-open te zetten; de :has()-pseudoclass, sinds kort breed ondersteund, zorgt automatisch dat het scrollgedrag 'achter' de modal wordt uitgezet.

DSO Toolkit v62.0.0 ๐ŸŽค

ยท 2 minuten leestijd
Thomas Rijsewijk
DSO Toolkit Product Owner & Architect

In deze release is een regressie bug in de Date Picker opgelost die in v60.0.0 is geintroduceerd.

Date Pickerโ€‹

Het change event dsoDateChange van <dso-date-picker> moet de value als dd-mm-jjjj emitten. In versie v60.0.0 is dit per abuis jjjj-mm-dd geworden. In #2391 is dit opgelost en is de output format weer dd-mm-jjjj.

Tegelijkertijd hebben we #2380 Date Picker: Bij handmatige invoer van datum buiten min/max, geen event met error opgelost. Dit betekent dat event.error weer klopt. Met de komst van <input type="date"> in het Web Component is dit ook een erg beperkte API gebleven. Daarom hebben we de API uitgebreid met het validatieobject van de browser validity: ValidityState.

export interface DatePickerChangeEvent {
component: "dso-date-picker";
originalEvent: Event;
value: string;
valueAsDate: Date | undefined;
error?: "required" | "min-range" | "max-range" | "invalid";

// Nieuw
validity: ValidityState;
}

Selectableโ€‹

Het SelectableChangeEvent was voorheen een alias voor Event. Dit was verwarrend en we hebben dit gelijkgetrokken met de overige events:

// โŒ Oud
interface SelectableChangeEvent extends Event {}

// โœ… Nieuw
export interface SelectableChangeEvent {
originalEvent: Event;
checked: boolean;
}

Voor het รฉรฉn-op-รฉรฉn migratiepad geldt dat het vorige DsoSelectableCustomEvent<SelectableChangeEvent>.detail object nu op DsoSelectableCustomEvent<SelectableChangeEvent>.detail.originalEvent staat:

event.detail === event.detail.originalEvent;

Voor de afnemers die de checked state willen weten kunnen ook gebruik maken van DsoSelectableCustomEvent<SelectableChangeEvent>.detail.checked:

event.detail.target.checked === event.detail.checked;

DSO Toolkit v61.0.0 ๐Ÿš’

ยท 3 minuten leestijd
Anneke Sinnema
DSO Toolkit Maintainer

๐Ÿšจ Breaking release! We hebben een nieuw component erbij: het logo! Je kunt nu door middel van dit component gemakkelijk een smal logo in de header plaatsen. Om te laten zien hoe dat werkt hebben we het header component in Storybook ook aangepast. De wijzigingen in het logo maken dit een breaking change.

In de oude situatie gaf je รฉรฉn of twee statische afbeeldingen door aan het header component. Een afbeelding voor het logo (een afbeelding van het beeldmerk en het woordmerk) en een afbeelding met daarin de applicatienaam.

In het component laden we nu alleen het beeldmerk als afbeelding in (als inline SVG), en komen het woordmerk, de 'ribbon' en de applicatienaam terug als tekst. Dit maakt het gebruik van het logo flexibeler en toegankelijker, en bovendien konden we het bepaald gewenst responsive gedrag meegeven.

Vanaf nu kun je op deze manier het logo tonen in je applicatie:

<dso-logo label="Regels op de kaart" ribbon="beta"></dso-logo>

De applicatienaam geven we mee als label op het dso-logo component. Dit label is optioneel.

Het 'beta' blokje dat in deze fase op het logo staat kan worden ingezet door het logo component het attribuut ribbon mee te geven met de gewenste tekst. Zo kunnen we het logo straks ook gebruiken om visueel te communiceren dat we bijvoorbeeld op de pre- of acceptatie omgeving zijn. Ook dit attribuut is optioneel.

Afgesproken is om voor voornoemde gebruik steeds de prefix van de omgeving te gebruiken:

Naam omgevingRibbon tekst
int-omgeving"int"
kta-omgeving"kta"
pfm-omgeving"pfm"
pre-omgeving"pre"
dmo-omgeving"dmo"
pro-omgevinggeen ribbon

Opgelet: de header verandert ookโ€‹

Om het logo in het header component te plaatsen en goed te laten zien, is ook het header component aangepast. Er is nu geen sub-logo slot meer.

โŒ
<dso-header>
<div slot="logo">
<img alt="Omgevingsloket" src="LOGO" />
</div>
<img slot="sub-logo" alt="Regels op de kaart" src="LABEL" />
</dso-header>

โœ…
<dso-header>
<div slot="logo">
<dso-logo label="Regels op de kaart" ribbon="beta"></dso-logo>
</div>
</dso-header>

Responsive gedragโ€‹

Het nieuwe logo component wordt zo breed als nodig, maar als er niet genoeg ruimte is krimpt het vanzelf.

Op beeldschermen waar er genoeg ruimte is om het hoofdmenu volledig te tonen, ziet de bezoeker het beeldmerk, de tekst 'Omgevingsloket' met een beta ribbon, en de applicatienaam. In dit geval de tekst 'Maatregelen op maat'.

Als het scherm minder breed is, bijvoorbeeld bij tablets, verdwijnt de tekst Omgevingsloket en wordt alleen de applicatienaam Maatregelen op maat getoond. Deze tekst lijnt uit met een knop waarmee het menu kan worden geopend.

Op kleine telefoons waar de applicatienaam niet op รฉรฉn regel past, wordt de tekst vanzelf verdeeld over twee regels. De tekst blijft verticaal gecentreerd uitgelijnd ten opzichte van het logo.

DSO Toolkit v60.0.0

ยท 2 minuten leestijd
Thomas Rijsewijk
DSO Toolkit Product Owner & Architect

Viewer Gridโ€‹

In #2161 hebben we ondersteuning voor de VDK layout gemaakt. Tegelijkertijd hebben we het component stateless gemaakt, in lijn met onze visie op stateful vs. stateless components.

Dit betekent dat afnemers van het Viewer Grid met de VRK layout ook werk moeten verzetten.

Statelessโ€‹

Voorheen was de breedte van het linkerpaneel onderdeel van de interne state. Nu moet de afnemer dit bijhouden. Hetzelfde geldt voor de "responsive tab view".

Hierdoor is de property initialMainSize komen te vervallen.

Interfacesโ€‹

OudNieuwOpmerkingen
MainSizeViewerGridMainSize
ViewerGridChangeSizeEvent.stageViewerGridChangeSizeAnimationEndEventDeze property is verplaatst naar een eigen event DsoViewerGridCustomEvent<ViewerGridChangeSizeAnimationEndEvent>
ViewerGridChangeSizeEvent.previousSizeViewerGridChangeSizeEvent.currentSize
ViewerGridChangeSizeEvent.currentSizeViewerGridChangeSizeEvent.nextSize

APIโ€‹

Bovenstaande opmerkingen komen enigszins in onderstaande markup voorschriften samen. Dit is exclusief de nieuwe functionaliteit die is ontwikkeld voor VDK.

โŒ
<dso-viewer-grid
[initialMainSize]="'medium'"
(dsoMainSizeChange)="$event.detail.stage === 'end' && resizeMap()"
></dso-viewer-grid>

โœ…
<dso-viewer-grid
[mainSize]="mainSize"
(dsoMainSizeChange)="mainSize = $event.detail.nextSize"
[activeTab]="activeTab"
(dsoActiveTabSwitch)="activeTab = $event.detail.tab"
(dsoMainSizeChangeAnimationEnd)="resizeMap()"
></dso-viewer-grid>

Date Pickerโ€‹

In #2226 zijn de maatwerk routines in Date Picker vervangen door de browser native <input type="date">. Dit gaat alleen over de implementatie van het Web Component. Dit betekent iets minder invloed maar veel betere toegankelijkheid.

Propertiesโ€‹

De volgende properties zijn komen te vervallen:

PropertyMigratie
directionGeen: Is met browser native control niet meer van toepassing.
roleGeen: Is met browser native control niet meer van toepassing.
show()Geen: Is met browser native control niet meer van toepassing.
hide()Geen: Is met browser native control niet meer van toepassing.
setFocus()<dso-date-picker dso-autofocus>

Interfaces hernoemdโ€‹

De interfaces van de Date Picker waren onterecht geprefixed met Dso.

OudNieuw
DsoDatePickerChangeEventDatePickerChangeEvent
DsoDatePickerFocusEventDatePickerFocusEvent
DsoDatePickerKeyboardEventDatePickerKeyboardEvent
DsoDatePickerDirectionโŒ Verwijderd

DSO Toolkit v59.0.0

ยท 2 minuten leestijd
Anneke Sinnema
DSO Toolkit Maintainer
Thomas Rijsewijk
DSO Toolkit Product Owner & Architect

In deze breaking release zijn de API's van Banner, Tooltip en Ozon Content aangepast.

In deze breaking release hebben we de legacy CSS selector voor Banner verwijderd. Deze is sinds v22.0.0 deprecated.

Het migratiepad is gebruik maken van de namespaced CSS selector: dso-banner.

โŒ
<div class="banner"></div>

โœ…
<div class="dso-banner"></div>

Tooltipโ€‹

Zoals in 58.0.0 aangekondigd, is de HTML/CSS implementatie van Tooltip verwijderd. Zie de blogpost van versie 58.0.0 voor de onderbouwing.

Het migratiepad omvat het gebruik van het Web Component.

Migratie naar Web Componentโ€‹

โŒ
<div class="tooltip fade in top|right|bottom|left" aria-hidden="true">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">LABEL</div>
</div>

โœ…
<dso-tooltip position="POSITION" descriptive>
LABEL
</dso-tooltip>

Ozon Contentโ€‹

Een deel van de functionaliteit van dit component is verhuisd naar Document Component.

Concreet betekent dit:

  • De property deleted bestaat niet meer.
  • De property interactive bestaat niet meer.
  • Het event dsoClick met bijbehorend event model OzonContentClick bestaat niet meer.
  • Het model OzonContentAnchorClick van het event dsoAnchorClick is hernoemd naar OzonContentAnchorClickEvent
  • De slots prefix en suffix zijn verwijderd.

Er is geen uitgestippeld migratiepad. Hoogstwaarschijnlijk wil je als high-level afnemer gebruik maken van Document Component. Ozon Content kan gezien worden als een "Low Level component".

DSO Toolkit v58.0.0

ยท 3 minuten leestijd
Thomas Rijsewijk
DSO Toolkit Product Owner & Architect

Een spiksplinternieuwe Modal is de oorzaak van deze breaking release! Daarnaast zijn er wat kleine (maar breaking) changes voor het Viewer Grid.

Verder hebben we van het Tooltip component de HTML/CSS implementatie deprecated. In sprint 27.6 verwijderen we de code. Tot die tijd werkt het component ongewijzigd.

Modal heeft het HTML5 element dialog geadopteerd en ondersteunt nu ook een fullscreen modus.

HTML/CSS component .dso-modalโ€‹

Het root element waar de class .dso-modal is vanaf nu een dialog. Voor afnemers van het HTML/CSS component moet het dialog nog worden geactiveerd met HTMLDialogElement.showModal().

Fullscreenโ€‹

De modifier class .dso-fullscreen zorgt voor volledige scherm weergave:

<dialog class="dso-modal dso-fullscreen"></dialog>

Web Component <dso-modal>โ€‹

Fullscreenโ€‹

Het attribute [fullscreen] zorgt voor volledige scherm weergave:

<dso-modal fullscreen></dso-modal>

Return Focus (returnFocus)โ€‹

Het HTML5 element dialog heeft ingebouwde functionaliteit die dit vervangt. Zo wordt bij het sluiten van een dialog de focus teruggezet naar het element wat focus had bij het openen van dialog.

Het migratiepad geeft geen alternatieve oplossing. Het nieuwe inzicht is dat we die overlaten aan de user agent. Dit betekent dat de afnemer het gebruik van returnFocus moet verwijderen.

Initial Focus (initialFocus)โ€‹

Dit wordt nu met het autofocus attribuut geregeld. Zet dit attribuut op het interactieve element in de Modal. Als er geen autofocus attribuut is, zet dialog de focus standaard op het eerste focusable element binnen de dialog.

โŒ
<dso-modal initial-focus="#mijn-knop">
<button type="button" class="dso-primary" id="mijn-knop">
<span>Klik!</span>
</button>
</dso-modal>

โœ…
<dso-modal>
<button type="button" class="dso-primary" autofocus>
<span>Klik!</span>
</button>
</dso-modal>

De ModalController voor Angular en de ModalRef voor React zijn met dialog niet meer nodig en dus verwijderd.

Migratiepad: Maak direct <dso-dialog> of <DsoDialog> waar nodig. De nieuwe top-layer zorgt ervoor dat je zelfs meerdere Modals tegelijkertijd kan openen.

Viewer Gridโ€‹

Bij een functionele uitbreiding kwamen er bij de events wat inconsistenties naar voren.

BreakingEventOud modelNieuw model
JaDsoCloseOverlayDsoViewerGridCustomEvent<MouseEvent | KeyboardEvent>DsoViewerGridCustomEvent<ViewerGridCloseOverlayEvent>
DsoFilterpanelApplyDsoViewerGridCustomEvent<FilterpanelEvent>DsoViewerGridCustomEvent<ViewerGridFilterpanelApplyEvent>
DsoFilterpanelCancelDsoViewerGridCustomEvent<FilterpanelEvent>DsoViewerGridCustomEvent<ViewerGridFilterpanelCancelEvent>

(De *CustomEvent modellen zijn aliassen voor CustomEvent met een typed .target element.)

export interface ViewerGridCloseOverlayEvent {
originalEvent: MouseEvent | Event;
}

export interface ViewerGridFilterpanelCancelEvent {
originalEvent: MouseEvent | Event;
}

export interface ViewerGridFilterpanelApplyEvent {
originalEvent: MouseEvent | Event;
}

Dit betekent dat bij DsoCloseOverlay het originele event niet meer op DsoViewerGridCustomEvent.detail zit, maar op DsoViewerGridCustomEvent.detail.originalEvent. De andere twee changes zijn geen breaking changes per se, maar de naam van het model is gewijzigd.

Tooltip: HTML/CSS implementatieโ€‹

Een toegankelijke tooltip is heel veel werk. Bij de HTML/CSS implementatie is het voornamelijk documentatie. Na de zoveelste bevinding hebben we besloten het Tooltip component te deprecaten ten gunste van de Web Component implementatie.

Migratie naar Web Componentโ€‹

โŒ
<div class="tooltip fade in top|right|bottom|left" aria-hidden="true">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">LABEL</div>
</div>

โœ…
<dso-tooltip position="POSITION" descriptive>
LABEL
</dso-tooltip>
FunctionaliteitHTML/CSSWeb Component
Root element<div class="tooltip fade in"><dso-tooltip>
Position<div class="tooltip fade in top|right|bottom|left"><dso-tooltip position="top|right|bottom|left"> (Default position: top)
Descriptive<div class="tooltip fade in" aria-hidden="true"><dso-tooltip descriptive>
Label<div class="tooltip fade in"><div class="tooltip-arrow">LABEL</div></div><dso-tooltip>LABEL</dso-tooltip>

DSO Toolkit v57.0.0

ยท 2 minuten leestijd
Thomas Rijsewijk
DSO Toolkit Product Owner & Architect

Dit is een breaking release vanwege de volgende issues:

Button: Legacy Bootstrap selectors verwijderenโ€‹

Lang lang geleden... Was de toolkit bovenop Bootstrap gebouwd. Bootstrap heeft ons een hoop gebracht, maar heeft ons ook in de weg gezeten. Zo'n 4 jaar geleden zijn wij begonnen met loskomen van Bootstrap. Dat is aardig gelukt en met dit issue zijn we er bijna.

Impactโ€‹

Deze change heeft impact op de volgende componenten:

  • Button: <button class="btn btn-primary">, <button class="btn btn-default">, <button class="btn btn-link">
  • Button Group. Alleen HTML/CSS implementatie: <div class="dso-btn-group">.
  • Alert. Alle implementaties: <div class="alert">, <dso-alert> en <DsoAlert>.

Buttonโ€‹

Met de "Legacy Bootstrap selectors" bedoelen we de volgende classes:

  • btn
  • btn-primary
  • btn-default
  • btn-link
  • btn-sm

DSO Toolkit versie 25.0.0 van 2 juli 2021 bevatte issue #856 waarmee we bovenstaande classes hebben omgezet naar de UX en toolkit classes dso-tertiary, dso-secondary en dso-tertiary. Sinds 2 jaar ontmoedigen we het gebruik van de Bootstrap basis classes.

Zie de volgende tabel hoe de classes gemigreerd worden.

โŒ Legacy Bootstrap selectorsโœ… DSO Toolkit selectors
.btn.btn-primary.dso-primary
.btn.btn-default.dso-secondary
.btn.btn-link.dso-tertiary
.btn-sm.dso-small
.btn-align.dso-align
โŒ
<button type="button" class="btn btn-primary btn-sm btn-align">
<span>Dit is een voorbeeld</span>
</button>

โœ…
<button type="button" class="dso-primary dso-small dso-align">
<span>Dit is een voorbeeld</span>
</button>

Button Groupโ€‹

Dit component had de root selector .dso-btn-group. Dat is nu .dso-button-group.

โŒ
<div class="dso-btn-group">
<button></button>
<button></button>
<button></button>
</div>

โœ…
<div class="dso-button-group">
<button></button>
<button></button>
<button></button>
</div>

Alertโ€‹

Het Alert component maakte alleen van de basis class btn gebruik. Deze class is vervangen door dso-alert-button:

Dit geldt voor alle implementaties!

โŒ
<div class="alert alert-success">
<!-- of <dso-alert status="success"> of <DsoAlert status="success"> -->
<div class="dso-rich-content">
<p>Succes!</p>
<button type="button" class="btn">
<span>Button</span>
</button>
</div>
</div>

โœ…
<div class="alert alert-success">
<div class="dso-rich-content">
<p>Succes!</p>
<button type="button" class="dso-alert-button">
<!-- ๐Ÿ‘† -->
<span>Button</span>
</button>
</div>
</div>

DSO Toolkit v56.0.0

ยท 2 minuten leestijd
Thomas Rijsewijk
DSO Toolkit Product Owner & Architect

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.