Support placeholder in TextField [155482676]

WAI

Feature Request

Status Update

No update yet.

Description

ni...@google.com

created issue #1

May 1, 2020 05:18PM

Currently higher level components like FilledTextField offer a placeholder slot, but foundation's TextField does not. Would we consider adding this?

Comments

si...@google.com <si...@google.com> #2May 25, 2020 07:40PM

Reassigned to so...@google.com.

There is a report about it in kotlinlang Slack: https://kotlinlang.slack.com/archives/C01D6HTPATV/p1706005056105739

lp...@google.com <lp...@google.com> #3May 26, 2020 01:18PM

Thanks for the report!

so...@google.com <so...@google.com> #4May 26, 2020 01:34PM

The release notes documentation has been edited to clarify this change in behavior for line height.

To support non-standard text sizes, we encourage users to follow the Material design system and use a different type scale rather than changing the font size directly. Alternatively, users can overwrite the line height like so: style = LocalTextStyle.current.copy(lineHeight = TextUnit.Unspecified), or create a custom Typography entirely.

si...@google.com <si...@google.com> #5May 26, 2020 03:17PM

deleted

ni...@google.com <ni...@google.com> #6Jun 1, 2020 08:46PM

In my case, I have multiple font sizes in the same Text (using SpanStyle in AnnotatedString). There are legitimate reasons for this. For example, when combining Chinese and English (phonetic) together (for language-learning purposes).

ma...@google.com <ma...@google.com> #7Jun 2, 2020 10:06AM

My 5 cents: I don't feel strongly about either of two sides, to be honest. I think we need to observe more and make a decision later.

I'm strongly against PlusOneFeature components in foundaiton, so I don't think PlaceholderTextField is a good component to have.

However, Nick's concerns make total sense to me, so I imagine we could end up with some placeholder api in foundation, but I'm not sure what is it now.

Anastasia, let's keep an eye on what we have in MaterialTextFields and maybe it will make sense to extract some placeholder functionality to the foundation version

si...@google.com <si...@google.com> #8Jun 2, 2020 04:20PM

I have ~strong opinions but I agree that we can observe more.

PlaceholderTextField sounds like a good idea, increases the API surface to manage. If we can have TextFieldPlaceholder in a way that you still need to add a TextField inside without carrying all the parameters of TextField, that makes more sense to me.

TextFieldPlaceHolder(placeholder api, content = TextField())

instead of

PlaceHolderTextField(placeholder api, all the TextField arguments...)

si...@google.com <si...@google.com> #9Jun 5, 2020 07:38PM

another note: PlaceHolderTextField is a good idea and I do not know if it would be enough? Once this hurdle goes away will it be icons as well? Or a need of many other features in FilledTextField leaking back to TextField? That is what I am scared of :)

lp...@google.com <lp...@google.com> #10Jun 5, 2020 07:50PM

My first question here is actually less about where this API should live, but what actually is a placeholder.

I'm not sure I agree that it depends upon design system; I can see many users wanting a simple placeholder that appears when no text is entered and disappears otherwise. Correctly implementing could be complex to correctly synchronize alignment, lines height, cursor etc. I see the benefit of having this in a library function that we can update etc.

Appearing / dissapearing already implies some UX - will there be a transition? If so, what is the transition? Can developers customize it?

Similarly for positioning, padding from the sides, size, etc. There is no non-Material answer here, we will need some numbers so it can actually be implemented.

This is also IMO a problem with the core / foundation level text fields, it's impossible to build such a component without some UI, and developers are routinely confused by how 'ugly' the foundation level component is, and how it doesn't support Material features.

We had similar problems before discussing the default minimum width for a TextField, again, unavoidable given that TextField by design occupies space on screen, but it causes a lot of confusion as there is not really a consistent / correct answer here without referring to a specific design system. I have the same concerns here with placeholder, and I think avoiding these problems / confusion between API layers is a good idea.

so...@google.com <so...@google.com> #11Jun 8, 2020 01:35PM

+1 to Louis' point above.

Back to the idea of PlaceholderTextField, I personally don't see it as a way forward. One thing is when you have it as a sample that shows a way to add a placeholder to the TextField. And developers can iterate on this example and add opinionated placeholders to their custom text fields.

But as Matvei mentioned, "PlusOneFeature components in foundation" is not a good idea. Imagine we added a placeholder (even if we figured out some UI for it) and solved that particular problem. Later developers come and say that they need to put an icon to the text field. Should we create a more complex text field similar to MD text fields? Or should we create a StartIconTextField?

si...@google.com <si...@google.com> #12Jun 10, 2020 07:40PM

Status: Won't Fix (Intended Behavior)

looks like we have an agreement that placeholder should not be in foundation. will close the ticket. Nick, please feel free to reopen.

ap...@google.com <ap...@google.com> #13Jul 16, 2020 06:08PM

Project: platform/frameworks/support
Branch: androidx-master-dev

commit 790b311b6a6e73928d808e8cef04d8f48026e9fb
Author: Matvei Malkov <malkov@google.com>
Date: Wed Jul 15 14:09:37 2020

Rename material.FilledTextField to material.TextField and foundation.TextField to foundation.BaseTextField with experimental marker.

Per design doc, per many discussions and per study feedback it became clear that it's a good idea to give the hottest name to the thing people want the most: ready-to-use material TextField, while also leaving this name for other design systems to utilise if they don't follow material.

I've done this renaming, but we haven't decided on the future of 3 overloads just yet. therefore all 3 stay for now, but I marked foundation.BaseTextField as experimental as it might (not must) potentially go away.

According deprecation annotations were added to the old APIs

Relnote: "Material FilledTextField was renamed to TextField and foundational TextField was renamed to BaseTextField to make simplest desired API easy to discover and use"

Bug: 155482676
Test: fixed, should pass
Change-Id: Ia62420a7a2231c02b6874a9a2867bf786a397ed3

M compose/compose-runtime/samples/src/main/java/androidx/compose/samples/ModelSamples.kt
M compose/compose-runtime/samples/src/main/java/androidx/compose/samples/MutableStateListSamples.kt
M compose/compose-runtime/samples/src/main/java/androidx/compose/samples/MutableStateMapSample.kt
M ui/integration-tests/demos/src/main/java/androidx/ui/demos/DemoFilter.kt
M ui/ui-core/integration-tests/ui-core-demos/build.gradle
M ui/ui-core/integration-tests/ui-core-demos/src/main/java/androidx/ui/core/demos/PopupDemo.kt
M ui/ui-core/integration-tests/ui-core-demos/src/main/java/androidx/ui/core/demos/autofill/ExplicitAutofillTypesDemo.kt
M ui/ui-foundation/api/0.1.0-dev16.txt
M ui/ui-foundation/api/current.txt
M ui/ui-foundation/api/public_plus_experimental_0.1.0-dev16.txt
M ui/ui-foundation/api/public_plus_experimental_current.txt
M ui/ui-foundation/api/restricted_0.1.0-dev16.txt
M ui/ui-foundation/api/restricted_current.txt
M ui/ui-foundation/samples/src/main/java/androidx/ui/foundation/samples/TextFieldSample.kt
M ui/ui-foundation/src/androidAndroidTest/kotlin/androidx/ui/foundation/SoftwareKeyboardTest.kt
M ui/ui-foundation/src/androidAndroidTest/kotlin/androidx/ui/foundation/TextFieldCursorTest.kt
M ui/ui-foundation/src/androidAndroidTest/kotlin/androidx/ui/foundation/TextFieldOnValueChangeTextFieldValueTest.kt
M ui/ui-foundation/src/androidAndroidTest/kotlin/androidx/ui/foundation/TextFieldTest.kt
M ui/ui-foundation/src/commonMain/kotlin/androidx/ui/foundation/BaseTextField.kt
A ui/ui-foundation/src/commonMain/kotlin/androidx/ui/foundation/ExperimentalFoundationApi.kt
M ui/ui-material/api/0.1.0-dev16.txt
M ui/ui-material/api/current.txt
M ui/ui-material/api/public_plus_experimental_0.1.0-dev16.txt
M ui/ui-material/api/public_plus_experimental_current.txt
M ui/ui-material/api/restricted_0.1.0-dev16.txt
M ui/ui-material/api/restricted_current.txt
M ui/ui-material/integration-tests/material-demos/src/main/java/androidx/ui/material/demos/MaterialTextField.kt
M ui/ui-material/samples/src/main/java/androidx/ui/material/samples/TextFieldSamples.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/FilledTextFieldTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/TextFieldScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/TextFieldTest.kt
M ui/ui-material/src/main/java/androidx/ui/material/TextField.kt
M ui/ui-material/src/main/java/androidx/ui/material/TextFieldImpl.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/TextActionsTest.kt
M ui/ui-text/integration-tests/ui-text-compose-demos/build.gradle
M ui/ui-text/integration-tests/ui-text-compose-demos/src/main/java/androidx/ui/text/demos/ComposeInputField.kt
M ui/ui-text/integration-tests/ui-text-compose-demos/src/main/java/androidx/ui/text/demos/ComposeInputFieldFocusTransition.kt
M ui/ui-text/integration-tests/ui-text-compose-demos/src/main/java/androidx/ui/text/demos/ComposeInputFieldTrickyUseCase.kt
M ui/ui-text/integration-tests/ui-text-compose-demos/src/main/java/androidx/ui/text/demos/ComposeVariousInputField.kt
M ui/ui-text/integration-tests/ui-text-compose-demos/src/main/java/androidx/ui/text/demos/TailFollowingTextField.kt
M ui/ui-text/integration-tests/ui-text-compose-demos/src/main/java/androidx/ui/text/demos/TextFieldWIthScroller.kt

https://android-review.googlesource.com/1363519

ma...@google.com <ma...@google.com> #14Jul 17, 2020 10:40AM

Renamed FilledTextField to TextField, so the most hot traffic name will be easy to reach and it will have placeholders / label / etc