#Dialog title overflow
calm trail
Dialog title overflow
woeful mist
I am unsure. It would fix the issue, but it will remove content.
calm trail
Don't really see an issue with making the standard header wrap tbh https://github.com/home-assistant/frontend/pull/29877
tidal star
Title should stay truncated.
The title must stay minimal.
In that case : "Target parameter beoing removed" is enough because the context is in the second line.
deft hare
But wouldnt it still be better to wrap than to truncate in case it isnt?
I agree the title should be shorter
calm trail
Yeah this feels more like a best practice than a hard lock. If anything we should add a limit on issues in core for these cases to avoid it. But even then I think this title is fine
blazing river
better to wrap. consider localized titles, they can get long af.
tidal star
The problem is that in encourage long title...
And it brokes the icon alignments
It's a common pattern to use ellispsis in some places (list item in dropdown, header, tile card...). If we start adding wrapping everywhere, it like add inconsistency everywhere depending on the content.
woeful mist
Our intention is to keep the title as short that it doesn't need to truncate. I see the bug issue here that we are not in control of all titles (repairs for example). And then you are on mobile and you cannot read the repair title. I would see this as last way out to wrap but it should be always avoided to have that long title.
tidal star
For repairs why not is we don't have clear guidelines on the title. But for everywhere, it strongly disagree.
Guidelines for dialog : https://design.home-assistant.io/#components/ha-dialogs
A best practice is to always use a title, even if it is optional by Material guidelines.
People mainly read the title and a button. Put the most important information in those two.
Try to avoid user generated content in the title, this could make the title unreadably long.
If users become unsure, they read the description. Make sure this explains what will happen.
Strive for minimalism.
The current problem is that the title is user generated (by core maintainer)
woeful mist
At more-info users are maybe annoyed by the long wrapped title and begin to rename their stuff? 🙂
calm trail
UGC is the exception here
tidal star
The current issue is : "the subtitle is overlayed by the title.". Before, we had ellipsis so we should fix it that way. Otherwise, we should ask design team.
woeful mist
yeah makes sense. Then for now just fix truncation.
deft hare
Im fine with both, in the end, I think we need to wrap, as important content we don’t have control over might get truncated 🤷🏻♂️
tidal star
For this dialog why not, but wrapping for all dialog because we have an issue with repair, I don't agree
deft hare
But we should encourage dev to use short names
calm trail
The design guidelines are for devs, we should encourage this like bram said, but when it comes to UGC I dont think limits should be in place. Also translations as mentioned before are less in our control. All we can really do is make sure the en.json file is sound.
Pinged the product team
blazing river
The problem is that in encourage long title...
That's a separate issue, I feel. If devs don't understand the need to keep titles short, the users shouldn't take the hit for it.
bleak sky
UI shouldn't break even if we permit long names. Having the title try to always display the full title is certainly not the way.
There should be enough space in the title to display all of the data. Thats why we permit only 3 icons in the actions of the dialog.
Dialog title header was already re-designed to move some of the context to a second line that previously was just part of one header title.
That said, Apple handles this like this ... 🤷♂️
BUT! Their second line is not for context, they display entity status.
blazing river
yeah again, UI should be permissive, specs should be strict
bleak sky
So you'd put a character limit on the entity name?
blazing river
well, I don't know where the best place would be, that's out of scope for a UI control. all I'm saying is, the frontend isn't the right place to put constraints like these.
ellipsis is an acceptable solve for stuff that can never go multiline (menu items and table headers for example) but beyond that, I think it's healthy to ensure that text can overflow in a controlled manner
bleak sky
I'd see a use for ellipsis + tooltip to view the full name here. We could even think of a middle-elipsis since most of the time the end part of a long entity name is the unique one
blazing river
no tooltips on mobile tho 🙁
again, it's not clear to me who we're serving by truncating the title.
certainly not the user, since no matter which strategy we employ, we might cut relevant info
that said, I don't think people would be rioting in the streets if they saw a title with an ellipsis
just the occasional gh issue
bleak sky
Yeah if it's too long or we cut it off, it should be a signal to try to fix the long name
blazing river
right, but the user isn't always in control of that, right?
bleak sky
All entities can be renamed
bleak sky
Yep
blazing river
so like, the real constraints should come from upstream; long entity names are going to be a hassle in several places. but in context of a dialog component, I think the title should not have constraints.
be liberal in what you accept, etc etc however that saying goes
I will say though, that the title is almost never a good place to put critical details, so this whole conversation does start from a weird place
anything critical should probably be put in a readable, copy-able place
bleak sky
Yes exactly, the titles content is incorrect in this example
blazing river
this won't be fixed by just chopping the title, though, it'll be fixed by people making better UI decisions 🙂
bleak sky
It should be short and concise. The current content of the title should be the content of the dialog body
blazing river
absolutely
bleak sky
So a guideline for defining the title
blazing river
anw, my advice is, design the dialog component to be tolerant of kludgy UI, and go after the people who make kludgy UIs 🙂 spare the users
tidal star
That said, Apple handles this like this ... 🤷♂️
This header is awful 😂
bleak sky
We'd say "give guidelines" not go after 😉
Btw. we do use ellipsis in the general dialog now
tidal star
Yeah in all dialogs
bleak sky
Atleast in this flavor of the header title
tidal star
I don't know why it's not like that for repair
bleak sky
It's a different header, right?
tidal star
Yeah I think because of technical constraint but we should align that
calm trail
I think repair is just the standard ha-dialog-header component
So is the more info dialog
Maybe theres some css overrides here
Yeah its a custom setup in more info
bleak sky
Let's wrap it to new line, but when using dialogs the title shouldn't have body-style text in it. That would be a guideline either we define or a developer tests if it fits in the available space.
calm trail
Current PR good in terms of design then?
Fully agree on the guideline over forced approach
blazing river
this is an excellent use of automated testing, btw
"PR not approved, long-ass title in dialog. do better."
woeful mist
No I think repair is something completely custom. I did this when I started as one of my first tasks
So I think when you just align repairs subheader it's fine
bleak sky
But then it will truncate and you won't be able to read the "message" in the title... which is too long and we cannot fix it in this PR.
woeful mist
So we need a ha-dialog-header option to not truncate,
bleak sky
I'm kinda torn on this to be frank 🙂
It's not perfect, but lets aim for where we want to go and not where we are - so we want the titles to be short and concise. Letting text wrap has less chance of this to not happen again, that why I'd be for putting ellipsis in each header title, showing a tooltip on desktop as a helper in edge-cases. And as @blazing river mentioned, devs should also consider this when creating and testing translations.
For mobile, repairs don't have all of the most important context in the header title (thank god!) so the body of the dialog still have the critical information.
Does that sound good?
tidal star
For your screenshot : "Unknown entities used: Specific Tag Action" should become "Unknown entities used"
Because "Specific Tag Action" is the context and it's already part of the content.
tidal star
yes of course