DSO Toolkit v58.0.0
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
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>
Modal Factories
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.
| Breaking | Event | Oud model | Nieuw model |
|---|---|---|---|
| Ja | DsoCloseOverlay | DsoViewerGridCustomEvent<MouseEvent | KeyboardEvent> | DsoViewerGridCustomEvent<ViewerGridCloseOverlayEvent> |
| DsoFilterpanelApply | DsoViewerGridCustomEvent<FilterpanelEvent> | DsoViewerGridCustomEvent<ViewerGridFilterpanelApplyEvent> | |
| DsoFilterpanelCancel | DsoViewerGridCustomEvent<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>
| Functionaliteit | HTML/CSS | Web 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> |