Popover support for adaptive dialog (test with more info)

[worthy kayak]

What are people's thoughts on this? Not really taking it much further than this right now, I might make the change to adaptive dialog avaliable though

Branch for anyone who want to play around with: https://github.com/home-assistant/frontend/tree/adaptive-dialog-popover

[plain spire]

cool 👍 I just think that all settings should stay in a dialog. So just the more info control should be a popover

[fierce mango]

how would the switch between more info and setting work then?

Dialog over the popover?

[worthy kayak]

Yeah thats where my "mini" more info idea came from

[fierce mango]

I don't see the issue with this experiment personally, but I would let a designer chip in

Or to rephrase: I love it

Ahh ok I see your point @plain spire

[worthy kayak]

Apple's design is mad. They have a dark ui below then the settings button at the bottom which looks misplaced, and a dialog which is full light mode 🤣

This is the concept I was thinking though yeah, header actions instead and a minified version of the more info UI

[fierce mango]

Still trying to find a way your initial experiement (With the settings and all inside the popover) could break..

Cause I still think it's super clean to have everything in a popover too.....

[white needle]

I think @hybrid osprey also pointed this out at the beginning - having focus targeted to the section

I personally like the popover idea until this

the biggest issue in HA is we have complex configurations with tons of texts and toggles, and they will be problematic if directed - for example what if I open a card at the bottom of my screen, I do need to scroll to see popover right?

its a messy problem

let me play with the branch

[worthy kayak]

Right now yes, it could be made to pick it's own direction. However if the screen is small enough (and is still large enough to be classed as desktop) it will require scrolling the page still

[white needle]

yeah, let me also play with the branch a bit

[pulsar whale]

I love it!

To make it a bit more "floating" I would suggest to place it not perfectly below the card. That Apple example does it great IMO.

[fierce mango]

Did you motice the small arrow Matthias?

Re-watch the video, the outline of the popover is like this

[white needle]

Ok got to test this!

It looked really broken for me, and I think I know why - we have 2 entity cards that are huge (= thought from the perspective of being on the centre):

• Lights
• Media

Other entity cards are also big but more or less fit, but with these 2 there is always guaranteed scoll, on a laptop in the top positions. And mine is pretty tall.

Here is a video so you can see me clicking around - there is almost a guaranteed scroll, even if the light card is in the first row. Its a demo instance so yeah some things are unavailable.

Sharing it in case its helpful, I don't know what would be a good idea besides redesigning the light entity card....

[pulsar whale]

I would keep it simple.

It just adds extra visual clutter without really helping. If it pops out of a card, it already makes it clear where it came from.

It also makes positioning way more annoying. You have to deal with screen edges, scrolling, and dynamic layouts, which gets messy fast.

And it makes the component less flexible. We also use this dialog outside of dashboards, so tying it to this pattern doesn’t really fit.

[radiant smelt]

This should be either a global thing, or not. I'm not sure I'd be willing to spend time thinking "where will the window popup on THIS screen vs dashboard"

[plain spire]

A needed scroll should be avoided always

[jaunty valve]

I wonder how Apple solved the need for scrolling (if they did at all). I don't use Apple Home but maybe someone who does can take a look. But I guess it's fairly common for popovers these days to kind of shift their position based on whether it can be shown completely.

[pulsar whale]

Apple centers it on the tile card. When there’s no space, it moves to the next best position.

[white needle]

yeah, we should try to achieve this 100%, our light cards are rarely going to fit naturally

[worthy kayak]

As a half revival of this, I've revisited the branch and instead of more info, which would take a lot more to be viable, started to add support to actionable card features starting with set date which would ususally be a full dialog prompt

https://github.com/home-assistant/frontend/pull/51650

https://github.com/home-assistant/frontend/issues/51641

[radiant smelt]

What entity do I need to use to show this feature 🤔

@worthy kayak

[worthy kayak]

I'm using an input_datetime helper with date mode set

[radiant smelt]

This would be an additional parameter to either show near the pressed button or not, correct ?

Or a global change to all adaptive dialogs?

Btw. there's a scrolling issue:

And I think I'd skipp the arrow. If the popover shows near the clicked item, thats enough affordance to understand the relation. We also don't have it in the target/entity picker, and we just removed it from tooltips.

[worthy kayak]

Yeah sort of, its based on the anchor position which is set via the show function in the button click handler

[radiant smelt]

You use the new CSS prop?

[worthy kayak]

Its a built in for wa popover but it can be removed I think