Lab 15 / four surfaces, one idea
Overlays are where a design system usually goes soft. Four things get built that look alike, nobody can say which is which, and within a year there is a fifth. So this lab settles the boundary first and the appearance second.
All four share the principle already running through the platform. The command bar echoes its parse. The form counts its outstanding conditions. The gate states its headroom. An overlay does the same: it shows the consequence of the decision while the decision is still reversible. A dialog shows what will change, a confirm shows what will be lost, a toast shows what happened and offers the way back.
01 / the boundary
A dialog blocks because it asks a question with consequences, and answering it while scrolling something else is how a wrong number gets entered. A sheet does not block because the record behind it is the reference material: somebody editing a billing address is reading the rest of the profile while they do it. If a surface would be better if you could still see what is behind it, it is a sheet. If it would be worse, it is a dialog.
Popovers, from Lab 05: the filter, views and columns menus. They are anchored to their trigger, dismiss on any outside click, and never carry a decision with money in it. Nothing new here, but naming them stops somebody reaching for a dialog to hold a tick list.
02 / dialog
Recording a payment is the most common money action on the platform, and until now the person doing it had to know the gate arithmetic in their head. The consequence band recomputes live as the amount changes, so the decision is made looking at its own result.
The hatched green segment is the payment being added, drawn on the same meter the booking page shows, so it is the same picture in both places. The struck-through $1,600.00 is the value that is about to stop being true, which is the cheapest possible way to say "this is a change and here is what it was". And the sentence about the next item is the only one a person actually needs, because "can I issue the flight now" is the reason they are recording the payment at all.
03 / sheet
436 pixels, from the right, at the panel duration of 180ms. It never dims the page, because dimming would defeat the reason it is a sheet. It edits one section and it says which section in its title, so a sheet is never a second form page in disguise.
The field is dashed and dimmed with its reason underneath, using the disabled treatment from Lab 08 rather than a new one. A sheet is where a person discovers what they may not change, and the discovery has to happen in the sheet rather than after pressing save, because a save that fails on a rule nobody mentioned is the most annoying event in software.
04 / confirm
A confirm is not a dialog with a scary colour. It is the surface for something that cannot be undone, and its job is to replace the word "sure?" with an arithmetic. Cancelling this booking costs a real number, and the person clicking should see that number rather than be asked to be brave.
Cancel a booking, archive a customer with live trips, revoke a credit release, and delete a tenant. Four actions. Everywhere else a confirm is one button, because typing a reference for something recoverable trains people to type references without reading, which destroys the protection on the four that need it.
Every other primary action is solid ink. Red is spent here and on the exposure tick and on a margin below its floor, and nowhere else, so the three times it appears it still means something.
05 / toast
Bottom left, above the pager, clear of the primary action which lives top right and clear of the right rail. Five seconds, one line, and an Undo whenever an undo genuinely exists. When it does not, the toast says what to do instead rather than offering a button that lies.
Done, and reversible
Done, and not reversible, so it does not pretend
Failed, so it stays until dismissed
Already happened is a toast, irreversible is a confirm, one decision is a dialog, editing a section behind it is a sheet. A fifth surface is a design failure, not a new requirement.
A dialog shows what will change, computed live. A confirm shows what will be lost, in money. A toast shows what happened and where. None of them asks a person to guess.
The record behind it is why it is a sheet. Dimming it turns a sheet into a badly placed dialog.
An Undo button that opens a support ticket is worse than no button. Where the action cannot be reversed the toast offers the place to look instead.
Success fades after five seconds because the change is visible on the page behind it. A failure has nothing behind it to see, so it waits to be read and dismissed.
A half-typed payment amount must survive a stray click on the page behind it. Popovers are the exception because they hold no input worth losing.
Two, then the marketplace composer