Confirm Action Dialog Block for React

So you can see it without a click. On load the alert is a copy drawn in place over the editor: a native dialog element with the alertdialog role that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Publish button in the header opens the real Alert Dialog, modal, with its focus trap, Escape and focus on Cancel, and the copy stays closed until a reload. Both show the same ConfirmFields component and share the block's state, so a box ticked in the copy is ticked in the real one. In your app keep the Alert Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.

skip is block state. Tick the box and confirm, and the next press of Publish publishes at once, with a polite message saying it did so without asking. The foot's Ask again button turns the question back on, and pressing it while the question is already on says so instead of doing nothing silently. In your app store the choice per person, in your database or at least in localStorage, and show a way back to it in the account settings, since a hidden choice can't be undone.

Here it flips the drawn issue to Published, locks it, says "Published in this demo. Nothing sent." in the foot's polite status line, and turns the header's button into Undo publish, which puts the draft back. Nothing is published or sent. In your app call your server in confirm, keep the alert open with its busy state until it answers, and flip the issue on success; on failure keep the alert open and say what failed beside Publish. Offer Undo only for as long as your server really holds the send.

LISTS holds each list and its subscribers, and the total is the sum of them, so the count in the first line can't disagree with the lists under it. The send day is SENDS_ON, an ISO date written in UTC, so it reads the same on the server and in every visitor's time zone. Swap them for the lists and the schedule your server returns.

The real alert is named by its title and described by its sentence, and it opens with focus on Cancel, never on Publish, so a stray Enter backs out. Escape and Cancel close it and return focus to the Publish button; clicking outside does not close it, since an alert has to be answered. Cancel is the focus target through initialFocus. After a confirmed publish the button that opened the alert is gone, so about 300 ms later focus moves to Undo publish, the button that took its place. The copy shown on load moves no focus; Escape inside it, Cancel and Publish close it the same way.

Publishing moves the issue forward and can be undone, so its confirm is the block's one primary and the Shine Button; a confirm that deletes uses the destructive Button instead, as the confirm delete dialog does. On a phone the copy shown on load docks to the foot of the frame as a bottom sheet with Cancel and Publish side by side, and the list scrolls above them if the frame is short. The real alert keeps the Alert Dialog's own layout: a centred card as wide as the screen allows.