feat: Introducing Header and Placeholder #1014

eriklimakc · 2023-05-30T15:24:41Z

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 · 2023-05-30T15:30:26Z

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

github-actions · 2023-05-30T15:33:39Z

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

eriklimakc · 2023-05-30T15:45:26Z

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 · 2023-05-30T19:46:46Z

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

eriklimakc · 2023-05-30T20:23:51Z

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

Thanks @agneszitte, will fix it ☺️

github-actions · 2023-06-01T17:03:17Z

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

eriklimakc · 2023-06-01T17:09:58Z

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 · 2023-06-02T12:59:38Z

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

agneszitte · 2023-06-02T13:50:54Z

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

github-actions · 2023-06-02T17:02:07Z

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

github-actions · 2023-06-06T00:47:04Z

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

agneszitte · 2023-06-06T00:53:51Z

@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 · 2023-06-06T13:38:36Z

@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 · 2023-06-06T18:55:18Z

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

github-actions · 2023-09-08T12:42:22Z

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

github-actions · 2023-09-08T13:45:46Z

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

github-actions · 2023-09-12T12:28:16Z

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

eriklimakc · 2023-09-12T13:15:57Z

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 · 2023-09-27T15:56:24Z

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

eriklimakc · 2023-09-28T11:52:01Z

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 · 2023-11-02T17:39:43Z

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

eriklimakc · 2023-11-03T10:47:41Z

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 · 2023-11-03T14:25:34Z

@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 · 2023-12-22T11:43:10Z

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

github-actions · 2024-05-15T13:02:06Z

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

github-actions · 2024-05-15T14:28:51Z

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

github-actions · 2024-05-23T11:29:06Z

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

… platforms need to be properly tested and namings adjusted)

github-actions · 2024-05-23T15:33:21Z

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

github-actions · 2024-05-23T15:35:18Z

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

src/library/Uno.Material/Converters/FromTextBoxEmptyStringToValueConverter.cs

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

Xiaoy312 · 2024-05-24T00:19:23Z

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

+	<um:FromTextBoxEmptyStringToValueConverter x:Key="PlaceholderContentCompositeTransformTranslateY"
+																						 HeaderAndPlaceholderValue="8"


any chance that you are using tab with a size of 2?

Not me, but the solution, apparently:

Uno.Themes/.editorconfig

Line 44 in 6b8beaa

indent_size = 2

I tried to follow the pattern:

github-actions · 2024-05-27T11:18:06Z

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

eriklimakc self-assigned this May 30, 2023

agneszitte mentioned this pull request May 30, 2023

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

Open

kazo0 mentioned this pull request Jun 5, 2023

refactor: Add lightweight styling resources for Material PasswordBox #1010

Merged

6 tasks

agneszitte linked an issue Jun 26, 2023 that may be closed by this pull request

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

Open

Xiaoy312 self-requested a review July 27, 2023 13:19

eriklimakc force-pushed the dev/ERLI/974-LabelAndPlaceholderTextbox branch from 88351a1 to 2b35be8 Compare September 8, 2023 12:37

eriklimakc force-pushed the dev/ERLI/974-LabelAndPlaceholderTextbox branch from 7daf3cd to 7c22d38 Compare November 2, 2023 17:36

This was referenced Apr 9, 2024

TextBox and PasswordBox Font styles are incorrect #1379

Open

fix: Use BodyLarge typography for TextBox Placholder #1383

Merged

mergify bot mentioned this pull request Apr 11, 2024

fix: Use BodyLarge typography for TextBox Placholder (backport #1383) #1388

Merged

eriklimakc force-pushed the dev/ERLI/974-LabelAndPlaceholderTextbox branch from 911fefe to a0854b5 Compare May 15, 2024 12:58

eriklimakc requested a review from agneszitte May 23, 2024 11:29

eriklimakc requested a review from kazo0 May 23, 2024 11:29

eriklimakc and others added 14 commits May 23, 2024 16:30

feat: Introducing Header and Placeholder

a845794

chore: Small refactor

40b4654

chore: Keeping Header and Placeholder visible when both present

64f07ef

chore: Fixing TextBox Icon position

a08baf1

chore: Changing TextBox Header and Placeholder behavior (WIP)

44a6b7d

fix: MaterialFilledTextBoxStyle to follow the specs on Windows (other…

de5203b

… platforms need to be properly tested and namings adjusted)

chore: Applying changes to MaterialOutlinedTextBoxStyle

fcf3cdf

chore: Fixing icon position

7780aac

chore: Adjusting icon position and TextBox size

56b708b

chore: Fixes after rebasing

632ffb4

chore: Update Uno packages

f916ea6

chore: Introducing Header lightweightstyling

980dc05

chore: Adjusting converters naming and samples

1ae18a0

chore: Uno stable version

6b8beaa

eriklimakc force-pushed the dev/ERLI/974-LabelAndPlaceholderTextbox branch from 96779c1 to 6b8beaa Compare May 23, 2024 15:32

Xiaoy312 reviewed May 24, 2024

View reviewed changes

chore: Add a more precise comment about TextBox behavior

2b7b445

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Introducing Header and Placeholder #1014

feat: Introducing Header and Placeholder #1014

eriklimakc commented May 30, 2023

github-actions bot commented May 30, 2023 •

edited by unfurl-links bot

github-actions bot commented May 30, 2023 •

edited by unfurl-links bot

eriklimakc commented May 30, 2023

agneszitte commented May 30, 2023

eriklimakc commented May 30, 2023

github-actions bot commented Jun 1, 2023 •

edited by unfurl-links bot

eriklimakc commented Jun 1, 2023

github-actions bot commented Jun 2, 2023 •

edited by unfurl-links bot

agneszitte commented Jun 2, 2023

github-actions bot commented Jun 2, 2023 •

edited by unfurl-links bot

github-actions bot commented Jun 6, 2023 •

edited by unfurl-links bot

agneszitte commented Jun 6, 2023 •

edited

agneszitte commented Jun 6, 2023 •

edited

agneszitte commented Jun 6, 2023

github-actions bot commented Sep 8, 2023 •

edited by unfurl-links bot

github-actions bot commented Sep 8, 2023 •

edited by unfurl-links bot

github-actions bot commented Sep 12, 2023 •

edited by unfurl-links bot

eriklimakc commented Sep 12, 2023 •

edited

kazo0 commented Sep 27, 2023

eriklimakc commented Sep 28, 2023

github-actions bot commented Nov 2, 2023

eriklimakc commented Nov 3, 2023

Xiaoy312 commented Nov 3, 2023

github-actions bot commented Dec 22, 2023

github-actions bot commented May 15, 2024

github-actions bot commented May 15, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

Xiaoy312 May 24, 2024

eriklimakc May 27, 2024

github-actions bot commented May 27, 2024

		<um:FromTextBoxEmptyStringToValueConverter x:Key="PlaceholderContentCompositeTransformTranslateY"
		HeaderAndPlaceholderValue="8"

feat: Introducing Header and Placeholder #1014

Are you sure you want to change the base?

feat: Introducing Header and Placeholder #1014

Conversation

eriklimakc commented May 30, 2023

PR Type

Description

PR Checklist

github-actions bot commented May 30, 2023 • edited by unfurl-links bot

github-actions bot commented May 30, 2023 • edited by unfurl-links bot

eriklimakc commented May 30, 2023

Windows

WASM

GTK

Android

Android Obs

agneszitte commented May 30, 2023

eriklimakc commented May 30, 2023

github-actions bot commented Jun 1, 2023 • edited by unfurl-links bot

eriklimakc commented Jun 1, 2023

github-actions bot commented Jun 2, 2023 • edited by unfurl-links bot

agneszitte commented Jun 2, 2023

github-actions bot commented Jun 2, 2023 • edited by unfurl-links bot

github-actions bot commented Jun 6, 2023 • edited by unfurl-links bot

agneszitte commented Jun 6, 2023 • edited

agneszitte commented Jun 6, 2023 • edited

agneszitte commented Jun 6, 2023

github-actions bot commented Sep 8, 2023 • edited by unfurl-links bot

github-actions bot commented Sep 8, 2023 • edited by unfurl-links bot

github-actions bot commented Sep 12, 2023 • edited by unfurl-links bot

eriklimakc commented Sep 12, 2023 • edited

kazo0 commented Sep 27, 2023

eriklimakc commented Sep 28, 2023

github-actions bot commented Nov 2, 2023

eriklimakc commented Nov 3, 2023

Skia X Win

Xiaoy312 commented Nov 3, 2023

github-actions bot commented Dec 22, 2023

github-actions bot commented May 15, 2024

github-actions bot commented May 15, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

github-actions bot commented May 23, 2024

Xiaoy312 May 24, 2024

Choose a reason for hiding this comment

eriklimakc May 27, 2024

Choose a reason for hiding this comment

github-actions bot commented May 27, 2024

github-actions bot commented May 30, 2023 •

edited by unfurl-links bot

github-actions bot commented May 30, 2023 •

edited by unfurl-links bot

github-actions bot commented Jun 1, 2023 •

edited by unfurl-links bot

github-actions bot commented Jun 2, 2023 •

edited by unfurl-links bot

github-actions bot commented Jun 2, 2023 •

edited by unfurl-links bot

github-actions bot commented Jun 6, 2023 •

edited by unfurl-links bot

agneszitte commented Jun 6, 2023 •

edited

agneszitte commented Jun 6, 2023 •

edited

github-actions bot commented Sep 8, 2023 •

edited by unfurl-links bot

github-actions bot commented Sep 8, 2023 •

edited by unfurl-links bot

github-actions bot commented Sep 12, 2023 •

edited by unfurl-links bot

eriklimakc commented Sep 12, 2023 •

edited