Material: Temporary Issue: MTextField

[mohpor]

@danieldahan I think we need a fresh issue to talk about the new TextField

I have started to test on it and I will update tis post as we go to inform you about the situation.

Issues:

• [x] Placeholder And title label doesn't respect the text alignment of the TextField. (Remember the TextView issue?)

• [x] Cannot set the highlight color for PlaceholderLabel

  Thoughts:

• The animation is much smoother now.

[danieldahan]

Excellent, I will make an update for this: _Placeholder And title label doesn't respect the text alignment of the TextField._

[danieldahan]

@mohpor In regards to the textAlign, the states as I see it are:

• Align text in the alignment preferred. Placeholder should respect this.
• When text is in the input field, the placeholder should animate to the same position as the text alignment.

[danieldahan]

@mohpor TextField latest documentation. This is where I will be posting the documentation for the reworked components as we progress through Material.

[zgosalvez]

@danieldahan My notes:

• I'm surprised that you removed clearButton. I guess I'll have to implement that myself. Was using it for default clearing, and for toggling password visibility.
• dividerColor isn't customisable? Its default color MaterialColor.darkText.dividers which is only appropriate on a light background.
• dividerColor doesn't match detailColor when detail is set. E.g. the divider color is still the same as the placeholder while my detail is red, showing an error.
• What's the ideal height for this component? _Distances_ are no longer accessible. How are the other elements spaced in relation to MTextField? In placeholderEditingDidbeginAnimation() the placeholder label is moved to y = -21, where did -21 come from?

[danieldahan]

So the interface is kept simple at the moment so we can discuss it before release. The clearButton name actually conflicted with the internal clearButton private property. So it should be kept, with a more appropriate name. The sizes will be accessible in the end, once the defaults are confirmed. The colour changing will be added in a more appropriate way, rather than what was confusing in some cases. I'll be back at my computer in an hour to finish it up and release, which I will resubmit for testing to you guys. So this is a chance to get some much appreciated input in.

[danieldahan]

-21, the 21 value is the intrinsic size of the text field, which a size of 16 font, would be enclosed in.

[zgosalvez]

Curious, how did you compute for the intrinsic size? Also, I think you should add 8, to include the spacing between the label and input texts.

[danieldahan]

If you use AutoLayout, it defaults to the intrinsic content size. So add a text field using autolayout, then call the layoutIfNeeded method and then call the intrinsicContentSize method, and print its value.

[zgosalvez]

Oh so that's intrinsic size. How I do it, and more accurate (correct me if I'm wrong)...

1. Create a label on the storyboard
2. Set desired font
3. Add leading and top constraints
4. Update Frames
5. Check the height of the Label

It appears that the height of the label is also the same as the height of its intrinsic size. In my case 19.

Edit
I realised you said _add a text field_, so instead of adding a label, I added a text field and followed my steps again. Still arrived at 19, when using borderStyle = .None.

[danieldahan]

Could be more accurate, they both rely on autolayout, and the leading and trailing could affect it. This is why the new releases will go through the community process to ensure the best product :) I'll be working on the textfield in 20 mins, so feel free to add input.

[danieldahan]

Ah, the border would add 1px to height on top and bottom equaling 21. Could be the difference. I don't remember if I set that value.

[zgosalvez]

The reasons why I decided to create the extension (see https://github.com/CosmicMind/Material/issues/336) are:

• Easier for me to reuse setting Material specs for my project
• More importantly, our users had a difficulty tapping the text field and clear button. Setting the whole text field to 80 made it easier for them. Something to consider since you're rewriting the class.

[danieldahan]

Hey guys, I updated the TextField documentation and the MTextField. I only need to add the clearButton, and update the animation to adjust correctly with the alignment when different from .Left. That said, I have not seen the behavior of the animation anywhere for the alignment that @mohpor mentioned. Would you be able to state the different cases I should consider. Thank you!

I pushed my latest changes to dev.

[mohpor]

@danieldahan I didn't totally got what you meant, the text alignment is clear enough I guess and the animation I just mentioned to be smoother now.
Could you elaborate on your last comment?

[danieldahan]

Let's say when you have textAlignment = .Center, the animation of the placeholder should move above and be as well equal to center. I am only confirming as it is the last piece and I couldn't find anywhere in Material Design spec this situation.

[mohpor]

Oh, well, in that case, I recently read the material guideline, although it doean't mention the text alignment, but it definetly mentions the support for right-to-left.
That being said, I guess this should be handled using either actual RTL layouts or using semantics on the text fileds.
IMHO, providing the text alignment for title and placeholder would help on a wider range of needs, but you are the boss, you should decide on the compromise we have to make here.

[danieldahan]

@mohpor We will make it work, I wanted to confirm the spec, that was it :)

[mohpor]

Cool.

On Apr 29, 2016, 23:02 +0430, Daniel [email protected], wrote:

@mohpor(https://github.com/mohpor)We will make it work, I wanted to confirm the spec, that was it :)

—
You are receiving this because you were mentioned.
Reply to this email directly orview it on GitHub(https://github.com/CosmicMind/Material/issues/342#issuecomment-215840765)

[danieldahan]

I am going to support language detection. Working it out now @mohpor

[mohpor]

Great.
It will line up with Material Design Guidelines and everyone should be clear on them.

P.S.: In regards to the announcement you've had the other day, about making it the standard library for Material Design for iOS, I guess we need a roadmap to (among many other things) be clear on how strict we're going to make this library in regards to Material Design Guidelines. Granted, it is essential to follow the guidelines the best we could, but I think we need to see how far it can go before it gets weird for developers to not have some basic UX/UI features they have with any given component. For example, the TextField component is something iOS developers always felt free to implement the way they felt was ok, are we going to let them have that much control? or they have to compromise either the library or their design? (hell of a P.S.!)

[danieldahan]

I really want everyone to have as much flexibility as possible. That was actually one of the issues with the current TextField implementation. It was blocking the original clearButton and developers couldn't use it out of the box. So minimal additions to reach as close to the standard with the ability to continue the creativity. That's my thinking.

[danieldahan]

@mohpor So I have one last bit to add, which is rotation support. For RTL, I decided on the initial release of this component to support TextAlignment. As for RTL, I want to investigate it further with the different iOS versions to add a great solution with documentation. That can come on the next iteration. I think with supporting TextAlignment, .Left, .Center, .Right, people can offer RTL with a little effort in their app. Once I push the code, I will be going to sleep, and hopefully you can test the TextFields for any last modifications, before we release it. As well, to suggest anything in the documentation TextField, which mind you will grow as this is worked on more. The docs is really to set the tone of the type of documentation to come.

[mohpor]

Wilco.

[mohpor]

One last thing, divider doesn't have an ActiveColor property, is it intentional? if so, shouldn't it follow the placeholder's active color principles?

[danieldahan]

Yes, currently, divider takes the placeholderActiveColor value when the TextField is in focus. From my understanding, that is the MD concept. Any suggestions?

[mohpor]

I think that's good enough. But the documentation should be clear on this.

[danieldahan]

This is what it says currently, "The divider defaults to black with an alpha of 0.12. When in focus, it is the same color as the placeholder focus color."

[mohpor]

Lots of developers (me included) may land on this library without having a solid understanding or knowledge of MD, keeping that in mind will help them.

[mohpor]

Oh! see, I was looking for this info under PlaceholderActiveColor for some reasons! My bad.

[danieldahan]

No worries. Keep note of these things. We can easily add an optional dividerActiveColor to override the default behavior, which will accommodate all needs. That should actually be the case. Also, a task to add the clearButton, but this time, I am going to add a boolean, which indicates, clearButtonModeExtended that allows for the clearButton to automatically be handled. This way the default clear is available, and the MD clearButton. The clear button is enabled with clearButtonMode, so the Extended is a logical progression.

I am not married to the wording of the Extended, just an idea of the terminology.

[danieldahan]

okay, I am going to add rotation tomorrow with the final changes. I am burnt out. Have a good night, and I appreciate the help. Tomorrow this will be launched and then we can tackle the rest. Thanks again!

[danieldahan]

@mohpor I fixed the rotation, added a visibility button enabler, added a clear button enabler, without causing conflicts with the internal clearButton :)

Want to test it out before release? I am going to document it tonight.

[mohpor]

Sorry about the delay. I sure will!

[danieldahan]

@mohpor Please pull from development again. I just updated it. As well, I am wrapping up the last part of documentation here, TextField.

[mohpor]

It's worth mentioning that the MTextField is TextField now. (Took me at least couple of pod updates to get that!)

[danieldahan]

Oh sorry, yes. Apologies for that.

[mohpor]

I'm still testing it... Meanwhile:

As per our previous conversation, it's great to see that TextField totally adheres to MD principles and guidelines, but some flexibility could help. e.g. Detail label's position is too far away from the original text field for my taste (I know it is completely in accord with MD guidelines). I have a proposal. The proportional technique MD has suggested could be applied to this situation as well. Something like the SpacingPreset I have seen on other components. It could be great if we could have denser or more dispersed text fields. text field could layout it's placeholder, divider and detail label based on a spacing preset (which obviously is pre-set to MD's guideline). Just a simple idea, we should debate on it.

Another thing I missed is the way we could have two different values for Placeholder and title label (MD's name is Hint). I guess we should compromise either the smooth animation or this feature? I know it is not defined in MD, but it was nice all I'm saying.

P.S.: How about a Gitter room for the Material iOS to talk about stuff like this?

[danieldahan]

This is now resolved and being prepared for release. Thank you!

[posaninagendra]

@danieldahan so this is not yet released in the lastest cocoa pods version?

[posaninagendra]

Hey @danieldahan

I'm just curious, It's been almost 10 days since the library has been updated. When can we have the changes related to Text Field in the latest build through Cocoa Pods?

[posaninagendra]

Actually, we wanted to move the library to the latest version to use the updated depth in card views, but since the Text Field titleLabel has caused the problem so we rolled back to a previous version where is was working. Since you have fixed those issues, we can make use of card view depth as well, if you could release the new Text Field implementation in the latest build.

[danieldahan]

Hi, sorry for any delay. The TextField is now released in 1.40.0.

[posaninagendra]

Thank you very much @danieldahan 👍