enhancement
major
major
major
#29836
Design System wave 4a: dialog, window, drawer, snackbar and notice bar read the design system package
Continues #29821 (wave 3b). Wave 4 is split into two stacked PRs like wave 3: 4a overlays (this ticket), 4b app shell and layout containers (own ticket, so a release between the two merges does not close the ticket of the open one).
Problem
The overlays of the React view layer – TLDialog, TLDialogManager, TLWindow, TLDrawer, TLSnackbar, TLNoticeBar, TLOverlay – are styled by the old stylesheet tlReactControls.css (about 480 lines). The same jobs are done several times in different ways:
- A dialog is two layers: TLDialog brings backdrop, outside click and Escape, TLWindow brings role="dialog", the focus trap and the frame. TLPhotoCapture builds a third, full-screen dialog of its own without focus return.
- Three backdrops (blurred, plain, literal rgba(0,0,0,.85)), seven hand-built header buttons in 28, 32 and 40 px, the close cross drawn three times as inline SVG.
- Focus: the drawer copies half of useFocusTrap; several popups do not return the focus when they close. Escape is bound in three ways, EscapeToClose exists twice.
- Snackbar and notice bar color with literal #fff/`#000` and define their own --tlSnackbar-* variables; an error is announced politely there (status) but immediately in tl-alert (alert).
- Literal layers (1000, 50/49, 10) and durations (0.15–0.25 s).
Solution
Decisions in the package TopLogic/tl-design-system (docs/migration/altlast.md, "Konsolidierung", wave 4; spec follows). One dialog surface with scrim, header and footer in the package; header buttons as tl-button--icon with theme icons; one focus mode without trap for non-modal overlays; one dismiss hook for Escape and outside press; messages take color roles and the announcement rule of tl-alert; layers and durations from tokens. The server-side callers of ReactWindowControl stay unchanged.
Migration
- The CSS classes tlDialog*, tlWindow*, tlDrawer*, tlSnackbar*, tlNoticeBar*, tlOverlay* and tlPhotoCapture__overlay* no longer exist. Application stylesheets that target them must be rewritten against the package classes and attributes; the full old → new list is in the package (docs/migration/altlast.md, "Welle 4a").
- Opening and closing animations of dialogs: .tlDialog__backdrop--entering / --exiting become .tl-dialog[data-tl-state~="entering"] / ~="exiting". The package now ships a fade; an application overrides it with rules on the same state.
- --tlSnackbar-bg and --tlSnackbar-fg are gone; the snackbar is a tinted alert (data-tl-role).
- .tlOverlay__layer--<anchor> becomes .tl-overlay__layer--<anchor>.
- Visible: the snackbar is tinted instead of filled, the dialog scrim has no blur, header buttons are 24px, drawer sides are --start/`--end`; a notice bar is announced through a persistent live region (role=status, alert for errors).