Anchored popovers for confirmations, renames and small forms

[timmo001]

Note

An agent wrote this from a working session with me. I've only given it a light review. The screenshots come from the concept branch.

I'm a developer, not a designer. This is my opinion on a vague concept, nothing more. Treat it as an ideas board that needs a lot of work from people in the field, not a proposal.

When a confirmation, a rename or a small form opens from a specific button, it could open as a popover next to that button instead of a centred dialog. On small screens it would be a bottom sheet, the same as adaptive dialogs today. Anything opened without a button, such as after a save, stays a dialog.

Concept branch: anchored-confirmations. What's in it, what needs deciding and the values still to turn into variables: ANCHORED_POPOVERS.md

Today and the proposal

Today	Proposed	Mobile

Proposed, dark

Confirmations

Delete a dashboard section (from the section menu)	Delete a grid connection

Example confirmation on another web client

Delete an individual device	Delete a dashboard resource

The energy confirmations only have a title, "Are you sure you want to remove this source?", which doesn't work as a heading. Like the other title-only examples, it now shows as a plain message.

Remove an apps repository	Remove a dropdown option (over a dialog)

I'm not sure popovers should open inside dialogs, like the dropdown option above. If they do, they should at least stay within the dialog's bounds.

Title-only confirmations as plain text

Some confirmations only have a title, like "Are you sure you want to remove this source?". In the popover, that title shows as the message, without a heading.

Short	Long, grows before it wraps

Renames and small forms

Rename a trigger (from its menu)	Edit a card button (object selector)

What I have in mind for forms is a quick edit: one or two fields, like the rename. This edit form has more than that and doesn't work as a popover. A longer form like this should be a view of its own, not a popover or dialog stacked on top of the card editor.

The look

The popover in these screenshots reuses the dialog's surface: a 24px corner radius (--ha-border-radius-3xl), the dialog shadow and filled buttons. To me it feels too rounded for something this small and attached to a button, and a flatter popover, further from the Material look, might suit it better.

There's also a new design system in the works, which I'm not very familiar with. Its look would probably suit this idea better than what's in these screenshots.

Earlier work

This builds on earlier popover work:

• #51641: card features with actions (set date, set time, set value, run a script with fields) could show a popover instead of a full dialog. The issue notes that the original idea was a popover mode for more info, similar to the Apple Home controls. That would have needed more work and probably a new "mini more info", so it started with card features instead.
• #51650: added ha-adaptive-popover, used by the set date card feature. This concept builds on it.
• OpenHomeFoundation/ux-design#43: showing contextual actions in popover dialogs, for pickers with nothing to pick or a missing item.

---

Note

Again this is a very vague concept, it doesn't have a place in a PR yet so I threw it here for better advice and thoughts