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>