[Material][TextBox][PasswordBox] Add support for Label and Placeholder at the same time

[kazo0]

What would you like to be added:

Support for a Label as well as a PlaceholderText in TextBox controls. Right now we are using the PlaceholderText as the "Label" portion of the Material style. So, right now our Material style supports the Orange highlighted cases but we do not support the Red highlighted cases where we can have a PlaceholderText while still having a Label appear above

columns [common states]: normal, focused, hovered, error, disabled(not in screenshot)
rows ["text" states]:

• {label=Label, text=Input},
• {label=Label},
• {label=Label, placeholderText=Placeholder}

[agneszitte]

If we replace the Label term with the TextBox Header property to have a better idea in the Material M3 Figma File.
Following this:

• The Placeholder is not moving in any case, only the Header (aka Label for Material)
• Placeholder and Text (Input) keep the same behavior as what we have for the default Windows TextBox behavior
• If there is no Header, we will have the same default Windows TextBox behavior
• If there is a Header, it will move up every time, with or without a Placeholder
  • Without a Placeholder, the Header moves up and it will be empty underneath until some text is entered
    → →
  • With a Placeholder, the Header moves up and shows the Placeholder underneath until some text is entered
    → →

(see the video below for a visual example of the Android Text Field using Material M3)

Text.Field.Test.mp4

For reference, with the default Windows TextBox behavior:

[kazo0]

@NVLudwig fyi ^ this may mean some changes to the figma file

[kazo0]

I believe @NVLudwig is thinking it would be difficult to have the component behave in a Figma document to only have a Placeholder appear after the text has been focused

As it stands now, I believe our Material styles don't react to the Focus state do they @Xiaoy312 / @agneszitte ? For the most part, I believe I've only ever seen the Placeholder "appearing" after the Label has animated upwards in that reference app that this video is from. In the real, world you usually just get a blank field after the Label has moved:

plus I don't think I see that combination in the official M3 Google Figma, right?

but I do agree having the Placeholder appear after the Label has moved is more difficult. The scenario I see it being useful is say we have a TextBox with the Label as "Phone Number", then when the field is focused, the "Phone Number" slides up and you are left with a placeholder of something like "(###) ###-####" to show the expected format. Or something like "Birthday" and "MM/DD/YYYY"

[agneszitte]

@kazo0, @NVLudwig, @Xiaoy312
It is the same behavior when testing the Compose Material Catalog from Google

Google.Material.M3.Text.Field.sample.mp4

[eriklimakc]

In Material M2 page there's an example that shows Placeholder appearing after focus.

@kazo0 There's a VisualState for focus in TextBox.xaml we could use if we're following this behavior.

[NVLudwig]

⇅

I slightly prefer the originally agreed version where Placeholders are visible before the user interacts with the TextBox unless there was a previous input. Because It sets the expectation for the user before the field is focused and it's more likely that they will have read the instructions before typing (many people still look down at the keyboard while typing).

This could also work for me (with a cursor in the second case)

My only real blocker is having the label travel to the top of the box and mask the Outline because I don't think we can support it in Figma (@SMarengere any ideas?)

[kazo0]

The masking of the outline isn't done on the Uno.Material side either so we shouldn't have to worry about it right now.

@agneszitte Is it going to be more difficult to have the Header and the Placeholder visible at the same time instead of the Placeholder only becoming visible on focus. Remember that right now we currently don't have this Focus state in Material so its out of scope for this particular feature. Here we just want to deal with display Header/Placeholder and what the visual states should be when there is no input text versus when there is input text. We can tackle the Focus state issue later

[eriklimakc]

We could move the animation from from NotEmpty VisualState to Focused VisualState. It would be something like:

<VisualState x:Name="Focused">
	<VisualState.Setters>
		<Setter Target="PlaceholderElement.Foreground"
				Value="{ThemeResource PrimaryBrush}" />
		<Setter Target="NormalBorder.Height"
				Value="2" />
		<Setter Target="NormalBorder.Fill"
				Value="{ThemeResource PrimaryBrush}" />
				
		<!--Set Placeholder to Visible-->
              <Setter Target="RealPlaceholderElement.Visibility"
				Value="Visible" />
	</VisualState.Setters>
	<Storyboard>

		<DoubleAnimation Storyboard.TargetName="FocusedBorder_ScaleTransform"
							Storyboard.TargetProperty="ScaleX"
							Duration="{StaticResource MaterialAnimationDuration}"
							EasingFunction="{StaticResource MaterialEaseInOutFunction}"
							To="1" />
							
               <!-- Header Animation Moved from NotEmpty VisualState-->
		<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
							Storyboard.TargetProperty="TranslateY"
							Duration="{StaticResource MaterialTextBoxAnimationDuration}"
							EasingFunction="{StaticResource MaterialEaseInOutFunction}"
							To="-11" />
		<!-- ContentElement TranslateY value changing depending if there is a Header or not -->
		<DoubleAnimation Storyboard.TargetName="ContentElement_CompositeTransform"
							Storyboard.TargetProperty="TranslateY"
							Duration="{StaticResource MaterialAnimationDuration}"
							EasingFunction="{StaticResource MaterialEaseInOutFunction}"
							To="{Binding Header, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource EmptyToCompositeTransformTranslateY}, TargetNullValue=0, FallbackValue=0}" />
		<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
							Storyboard.TargetProperty="ScaleX"
							Duration="{StaticResource MaterialTextBoxAnimationDuration}"
							EasingFunction="{StaticResource MaterialEaseInOutFunction}"
							To="0.7" />
		<DoubleAnimation Storyboard.TargetName="PlaceholderElement_CompositeTransform"
							Storyboard.TargetProperty="ScaleY"
							Duration="{StaticResource MaterialTextBoxAnimationDuration}"
							EasingFunction="{StaticResource MaterialEaseInOutFunction}"
							To="0.7" />
	</Storyboard>
</VisualState>

The result:

@agneszitte @kazo0 @NVLudwig

[agneszitte]

What do you mean by that @kazo0  ?

The TextBox control itself as a Focus state by default and we are already using it for the Border for example

Uno.Themes/src/library/Uno.Material/Styles/Controls/v2/TextBox.xaml

Line 137 in 6a2a2fa

<VisualState x:Name="Focused">

[kazo0]

@agneszitte No I meant we currently don't support the animation of the Label/Header when the field is focused. For right now, we only seem to be animating the label when text is entered

[agneszitte]

@agneszitte No I meant we currently don't support the animation of the Label/Header when the field is focused. For right now, we only seem to be animating the label when text is entered

@kazo0 I may be missing something here, but I don't think of a technical blocker for us to achieve the wanted behavior.
cf. a small test from @eriklimakc #974 (comment)

@NVLudwig with what you mentioned (cc @SMarengere)

We have a separate issue for the fact that the Label is not at the correct level for the TextBox Outline style, as right now, it is not done in the code also. And should be a separate concern in my opinion.
[Material][TextBox] Invalid Label translation after start typing [Outline]#895

[agneszitte]

@NVLudwig so for this part you mentioned

If we go the route you prefer, just note that:

1. We will go a different route than the Official Material M2/M3 Google samples or the Material M2 doc
   cf.

   • Above video using Google Compose Material Catalog App
   • @eriklimakc's comment

2. We will need to adjust the logic to have these specs instead:

   • Without Label/Placeholder, we will have a simple TextBox (matching Windows behavior)
   • With a Placeholder and no Label, we will have a simple TextBox (matching Windows behavior).
     We shouldn't move or animate the Placeholder in any case in my opinion, if we are still following a bit the guidelines and Material M3 Figma file.
   • If there is a Label:
     • Without a Placeholder, the Label moves up and it will be empty underneath until some text is entered
       → →
     • With a Placeholder, the Label does not move, it is already at the top and shows also the Placeholder underneath until some text is entered
       → →

---

So I will let you decide with @kazo0 what will be the final decision (cc @eriklimakc)

[eriklimakc]

So the final spec for this one would be:

1. When there are no placeholder or header: It will be a simple TextBox

2. When there is a placeholder but no header: It will display the placeholder in the "Normal" VisualState and it will disappear when a text is inputed

3. When there is header but no placeholder: It will display the Header aligned vertically in the center and it will animate upwards when the input is focused

4. When there are header and placeholder: It will display the Header aligned vertically in the center and when the TextBox is focused, the header will animate upwards and the Placeholder will become visible aligned vertically in the center until some text is inputed.

Agreed? @agneszitte @Xiaoy312 @kazo0 @NVLudwig

[agneszitte]

@NVLudwig / @kazo0 / @Xiaoy312
At the moment I noticed @eriklimakc implemented the Material TextBox behavior - #974 (comment)
(instead of the version Ludwig preferred related to the placeholder - #974 (comment))

You can test the outcome of his current draft PR here: https://salmon-rock-0cfebe70f-1014.eastus2.azurestaticapps.net/

@kazo0 / @NVLudwig As I said previously, I will let you decide what will be the final decision for the wanted behavior.

[NVLudwig]

@NVLudwig so for this part you mentioned If we go the route you prefer, just note that:

1. We will go a different route than the Official Material M2/M3 Google samples or the Material M2 doc
   cf.

   • Above video using Google Compose Material Catalog App
   • @eriklimakc's comment

2. We will need to adjust the logic to have these specs instead:

   • Without Label/Placeholder, we will have a simple TextBox (matching Windows behavior)

   • With a Placeholder and no Label, we will have a simple TextBox (matching Windows behavior).
     We shouldn't move or animate the Placeholder in any case in my opinion, if we are still following a bit the guidelines and Material M3 Figma file.

   • If there is a Label:

     • Without a Placeholder, the Label moves up and it will be empty underneath until some text is entered
       → →
     • With a Placeholder, the Label does not move, it is already at the top and shows also the Placeholder underneath until some text is entered
       → →

So I will let you decide with @kazo0 what will be the final decision (cc @eriklimakc)

This is the way. ↑

Only change I would recommend is: we don't absolutely need to add the case where a TextBox has a Placeholder but no label. If it's extra work to make it leave that one out please, else it's not a huge sin.

---

Reviewing the Figma File I noticed Placeholder is not longer in there, please correct this @SMarengere

[agneszitte]

@NVLudwig for the case where a TextBox has a Placeholder but no label it will behave like a usual TextBox (matching Windows behavior). Meaning the Placeholder will be visible inside until some text is entered. It is not extra work, it is already what is in place in general.

Remember that on the implementation:

• Placeholder will use the Placeholder property of the TextBox control
• Label will use the Header property of the TextBox control

[agneszitte]

Following @NVLudwig's request to have the other behavior, @eriklimakc I think it would be good to add some comments at the style level in the code to explicitly precise that we will go a different route than the Official Material M2/M3 Google samples & the Material doc regarding the fact that the Placeholder will always be visible.

cf. With a Placeholder, the Label does not move, it is already at the top and shows also the Placeholder underneath until some text is entered

[eriklimakc]

What happens when there's Header but no Placeholder? Should the Header animate upwards when focused or when starting to type?

@kazo0 @agneszitte @NVLudwig

[NVLudwig]

@eriklimakc
Yes on focus the the label should immediately move up and the cursor should bink on and empty text field when there is no placeholder.