New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
[TextField] Move character counter to bottom of multiline text input. #992
Conversation
馃憢 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven鈥檛 already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack. |
496b21e
to
e1651aa
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks fantastic to me (including with text-only resize!). Thank you @emarchak! 馃帀
988a77d
to
010225f
Compare
@tmlayton While it looks better as the initial state, in the GIF the pill covers up some of the text that you're writing. Users will have to add a line break to see what words they're typing. That seems to me to be a net negative change, and it wouldn't be appropriate for our use case as we have a text limit of @elliejeon what are your thoughts on this? |
I agree with @emarchak , text being covered by the counter is not the best experience. |
It is not that it looks better, adding a second line is a visual breaking change and could potentially break a consumer鈥檚 layout. I don鈥檛 like that it covers text either, but was trying to solve without JS. @sarahill @ry5n thoughts on this? If we are okay with the change in initial visual state (being a minimum of 2 lines) then feel free to revert my commit. |
I don鈥檛 think we should cover the user鈥檚 input with the count. It鈥檚 definitely important to minimize breaking visual and interaction changes (though we don鈥檛 treat them as strictly as breaking API changes). In this case I鈥檓 comfortable with the change because if the developer is choosing a multiline field, they should be taking into account the field being able to grow vertically. (The only counter-example I can think of is if they鈥檝e also specified a maxlength, but given how recent this feature is, I think the risk is probably low.) Based on the images, it looks like the field remains on one line for non-multiline fields, and multiline fields with a counter are always at least 2 lines. I鈥檓 OK with this 馃憤 |
Good point. I didn't think to consider that! Given the above discussion, I'm going to revert @tmlayton's commit and then merge this in when the build passes. Thanks to everyone for your input. 馃檹 @ry5n -- The non-multiline version still remains a single line and we use the standard browser behaviour to let the users navigate left and right on the input fo the text. For visibility, here's what it looks like when I type out text into an empty field: |
010225f
to
a0b2f0f
Compare
馃帀 Thanks for your contribution to Polaris React! |
Thanks for this @emarchak! |
WHY are these changes introduced?
Resolves #986
Follow up on #709, we found that having the character count on the same row in a multiline textField caused strange wrapping on narrow inputs. This PR uses
flex-wrap: wrap;
on multiline fields to move the counter to the bottom of the input so we take up vertical instead of horizontal space.WHAT is this pull request doing?
Before
After
How to 馃帺
馃枼 Local development instructions
馃棐 General tophatting guidelines
馃搫 Changelog guidelines
Copy-paste this code in
playground/Playground.tsx
:馃帺 checklist