feat: Introducing Header and Placeholder

[eriklimakc]

GitHub Issue: #974 #842

PR Type

What kind of change does this PR introduce?

• Feature

Description

Introducing Header as Label and Placeholder to TextBox.

The former PlaceholderText was replaced by Header and a new Placeholder was added. The goal is to reproduce the Material 3 Textbox behavior.

PR Checklist

Please check if your PR fulfills the following requirements:

• Commits must be following the Conventional Commits specification
• Tested UWP
• Tested iOS
• Tested Android
• Tested WASM
• Tested GTK
• Tested MacOS
• Contains No breaking changes

  If the pull request contains breaking changes, commit message must contain a detailed description of the action to take for the consumer of this library. As explained by the Conventional Commits specification

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[eriklimakc]

Windows

WASM

GTK

Gtk cursor seems to be a bit bugged

Android

Android Obs

It feels like Android TextBox Header and Placeholder are a bit below of the center when unfocused. Do you feel the same? Would we add a proper Margin/Padding/Alignment only for Android to fix it?

@kazo0 @agneszitte @Xiaoy312

[agneszitte]

While testing the azure static web link, seems that the icon is not properly aligned vertically

[eriklimakc]

While testing the azure static web link, seems that the icon is not properly aligned vertically

Thanks @agneszitte, will fix it ☺️

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[eriklimakc]

I'm having a problem with the TextBox cursor:

When I have Placeholder and Header the ContentElement_CompositeTransform.TranslateY (cursor position) has value of 8 which means the cursor is aligned with the Placeholder position like this:

But when I have only Header the cursor should start with the position 0, which means it would be aligned with the Header text and when I type something it would go down (position 8). But ContentElement_CompositeTransform.TranslateY (cursor position) is starting with value 8 already, like this:

When I type:

I can't find a way of check Text, PlaceholderText and Header at the same time to manipulate the cursor position as desired. Do you guys have any ideas?

I have pushed my changes.

@agneszitte @kazo0

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[agneszitte]

@eriklimakc I will pull your branch to take a look and help you fix this issue

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[agneszitte]

@eriklimakc I have pushed on your branch a commit to fix the MaterialFilledTextBoxStyle so it can follow the proper specs we agreed on for the related issue.

Here some things to note:

• The style follows the specs and works appropriately on Windows at the moment if I did not miss anything
  (I quickly added more samples so it is easy to test all the scenarios for MaterialFilledTextBoxStyle)
• I quickly tested the style on the other platforms and on specific cases we have some issues, so you will need to check them more closely. Since it works properly on Windows, the goal will be to determine what is not working on the Uno side.
• You will be able to use the same logic for the MaterialOutlinedTextBoxStyle
• Naming for the converter I added (+ related resources) will need to be adjusted for something better at the end if it will be the way to go for the final changes

(cc @kazo0)

[agneszitte]

@eriklimakc I have pushed on your branch a commit to fix the MaterialFilledTextBoxStyle so it can follow the proper specs we agreed on for the related issue.

Here some things to note:

• The style follows the specs and works appropriately on Windows at the moment if I did not miss anything
  (I quickly added more samples so it is easy to test all the scenarios for MaterialFilledTextBoxStyle)
• I quickly tested the style on the other platforms and on specific cases we have some issues, so you will need to check them more closely. Since it works properly on Windows, the goal will be to determine what is not working on the Uno side.
• You will be able to use the same logic for the MaterialOutlinedTextBoxStyle
• Naming for the converter I added (+ related resources) will need to be adjusted for something better at the end if it will be the way to go for the final changes

(cc @kazo0)

As an additional note, the converter is working fine on Windows but for the other platforms, the converter is only trigged once for each state. It seems like once it is triggered it won't trigger anymore for that state.

[agneszitte]

Related Issue for the Converter/VisualStates issue:
unoplatform/uno#12556

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[eriklimakc]

Regarding animations all seems to be working fine after unoplatform/uno#12556.

Only getting this behavior on non-windows platforms:

When TextBox is pressed and Placeholder/Text + Header is present they get back to the center and then animates to their right position:

TextBox.PnH.issue.mp4

[kazo0]

@eriklimakc what's the current status of this? Any remaining blockers?

[eriklimakc]

Regarding animations all seems to be working fine after #974.

Only getting this behavior on non-windows platforms:

When TextBox is pressed and Placeholder/Text + Header is present they get back to the center and then animates to their right position:

TextBox.PnH.issue.mp4

@kazo0, there is only this behavior on non-windows platforms that I mentioned above with the video.

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[eriklimakc]

Skia X Win

Apparently when the animation code is executed, the Text, Header, and Placeholder are quickly set to their default state and after that they are animated.

In order to test I replaced the animation code for Setters like below and we don't have that behavior.

<Setter Target="HeaderElement_CompositeTransform.TranslateY"
	Value="-11" />
<Setter Target="ContentElement_CompositeTransform.TranslateY"
	Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyToFocusedContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
<Setter Target="PlaceholderElement_CompositeTransform.TranslateY"
	Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyToFocusedContentCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
<Setter Target="HeaderElement_CompositeTransform.ScaleX"
	Value="0.7" />
<Setter Target="HeaderElement_CompositeTransform.ScaleY"
	Value="0.7" />

cc @Xiaoy312 @kazo0 @agneszitte

[Xiaoy312]

@eriklimakc re: #1014 (comment)
At a glance, this seems like an issue with the animation not picking up the current set/animated value as the starting point for the (start...end) animation. This is not probably not something we will fix here, but in uno.
Can you can open an issue in uno and @ me there.
Also, is this happening on other platforms as well, like ios/droid or wasm?

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net