feat: add YaruSearchField and YaruSearchTitleField

[Feichtmeier]

I thought it is time to find a sane default for searchfields and searchfields inside titlebars since this seems to become a common pattern in our apps.

This does not need to be the final result and should eventually be parameterized more but this could be a good start.

And in general with flutter, aynthing is changeable.

Opinions @madsrh @Jupi007 @jpnurmi @elioqoshi ?

SearchActive	SearchNotActive

[jpnurmi]

Did it somehow stretch the title bar or does it just look extra tall because of the macOS window controls?

[Feichtmeier]

I think I just hit CMD+ + and then in vscode even the flutter window increases its titlebar :)

this is how it looks on windows

the way the example is built I can't just put a scaffold as a page. its possible but I would need to edit aaaaaall page item pages which is kind of overkill for this PR

[Jupi007]

I really like it!

[madsrh]

I thought it is time to find a sane default for searchfields and searchfields inside titlebars since this seems to become a common pattern in our apps.

💪 Sounds like a good idea

Looks good but TBH I'm not a fan of the two background colors. Could you explain again why you want the icon to have a different background color? Is it clickable? I'm sorry this was mentioned elsewhere

[Feichtmeier]

yes its an icon button. when you click it the searchbar is layed under it (stack)

[madsrh]

yes its an icon button. when you click it the searchbar is layed under it (stack)

Makes sense. I couldn't tell from the screenshot 😅

[Feichtmeier]

need to improve docs and more parameters and make te search button available without the title so you can either have

all-in-one widget YaruSearchFieldTitle
or
YaruSearchField in the title plus YaruSearchButton elsewhere

also I want to finish the yaru size PR first then I can remove the constants here

[Feichtmeier]

Bildschirmaufzeichnung.vom.2023-07-24.17-38-14.webm

ok I think this is pretty good
yet modular enough I hope

if there is an onClear callback provided the suffix icon shows up with a clear button

the search field and button can be used either combiend in the title or separated

[jpnurmi]

I understand well why, but this looks mis-aligned when the search is not active. :)

[Feichtmeier]

yeah the example is stupid here because you would prbly not change the title in the text field 😸
I'll see if I can improve or parameterize the space between the title and the search icon

[Feichtmeier]

@jpnurmi thanks for the review will check later and fix

example is now a bit clearer and I added an alignment parameter for the title widget

[Feichtmeier]

Thanks @jpnurmi there were indeed some heavy issues 🙈

[jpnurmi]

A couple of remarks, feel free to ignore them if they are not relevant.

• There's something that makes it feel somehow... unlike Yaru. Perhaps the fully rounded corners? It's not necessarily bad, but no other search field looks like this on my desktop. :)
• The name "search field title" feels somehow backward. I'm not sure if "search title field" would sound any more natural but it would perhaps emphasize better that it's still a field, not just the title of a field.

[Feichtmeier]

Well, I could just add a border radius parameter and you guys choose what you like.
Personally I feel that those widgets need an iconic look because they fulfill a special purpose. They're not regular Text fields like in forms. (Not saying forms are not important)

I'll change the name! 😎👌

[Feichtmeier]

@jpnurmi renamed as requested plus added a radius parameter
you might ask 🤔 "why not BorderRadius?"
because the suffix icon has only the right edges rounded :)

example with kYaruButtonRadius from yaru.dart

[jpnurmi]

The search icon button is 35x35px whereas the clear icon button is 40x35px:

The clear button can be clicked even if the search field is empty. It's not immediately obvious that you need to click the search button again to close the search field. Perhaps the clear button could close the field if it's already empty?

Screencast.from.2023-07-26.08-18-49.webm

[Feichtmeier]

The search icon button is 35x35px whereas the clear icon button is 40x35px:

The clear button can be clicked even if the search field is empty. It's not immediately obvious that you need to click the search button again to close the search field. Perhaps the clear button could close the field if it's already empty?
Screencast.from.2023-07-26.08-18-49.webm

I would leave the logic when to enable the clear button via the callback to the user of the widget

I'll fix the clear button width

[Feichtmeier]

@jpnurmi nurmi

fixed width of the clear button

plus added a YaruSearchFieldStyle
filled, outlined, filledOutlined parameters
plus filledcolor and bordercolor (optional)

filled

outlined

filledoutlined

if you combined this the radius property you receive your desired heavy look

anything else?

[jpnurmi]

I still think the clear button should close an empty search field or at least become disabled if it doesn't have any effect. Also, the search field is left open forever even when it's empty and loses focus. It's not immediately obvious how to get rid of the field and return back to the normal title. Especially since the clear button is confusingly enabled yet does nothing... :) Should either YaruSearch(Title)Field or the example handle these cases?

[Feichtmeier]

@jpnurmi can I merge?

[jpnurmi]

LGTM 👍