[TextField] Separate TextFieldHint into separate internal component.

[newoga]

This is one of the tasks in #2555. It seeks to simplify the TextField.jsx component by extracting the hint text and its styling logic into its own separate internal component.

Note: I saw this if condition on lines L252-254 that applies a line height to the hint text if a height property is found on the custom root style that is provided. This has not been accounted for, and am wondering if we really want to properly support changing heights of TextFields. If so, we should probably do it differently.

[oliviertassinari]

am wondering if we really want to properly support changing heights of TextFields

I don't think so. But I think that we should support various font size.

[oliviertassinari]

Looks like a typo.
When we have the choice between hidden, show and visible, I would personally go for show.
I also think that show is what it was chosen in some other component.

[newoga]

Yup good catch, and I'll change it to show. I just remembered we did underlineShow in that other pull request, so I'll make it show here.

[newoga]

I don't think so. But I think that we should support various font size.

@oliviertassinari The TextField component still has a hintStyle prop where they can customize both font-size and line-height, however that extra code was detecting whether or not you specified a height on the rootStyle that changed the hintStyle for you. I feel like that coupling could be confusing to users and am not a huge fan of that approach but I could reimplement it.

[oliviertassinari]

I feel like that coupling could be confusing to users and am not a huge fan of that approach

I agree. I hope that we can use the css inheritance of the font size to let people change the font size.
But this feature is tricky to implement. Here is an attend to do so #2039.
I guess that it's not supported by the material spec, where the height of the TextField seems fixed (not linked to the font size neither to the line height).

[newoga]

Mmm, that pull request is interesting. I haven't experimented much with the css em/rem stuff thoughtwould be interesting to get something like that working.

I guess that it's not supported by the material spec, where the height of the TextField seems fixed (not linked to the font size neither to the line height)

Agree with you here too.

[oliviertassinari]

@subjectix I'm ok with this PR. Feel free to merge 👍

[alitaheri]

@newoga Nice job 👍 👍 Thanks 🎉

[newoga]

Thanks!