-
Notifications
You must be signed in to change notification settings - Fork 565
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’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
workaround(android placeholders): make a workaround to not have android placeholders be cut-off #4833
Conversation
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.
Nice workaround! I'll give other people a chance to check it out but looks good to me.
I should also note that I spoke with Jonathan and showed it to him, and he approved it, and we can remove it once the PR on rn that fixes that is merged. |
# Conflicts: # src/lib/Components/Input/Input.tsx
Nice solution 🙌 this looks good to me, the only comment I had is about adding a changelog entry maybe, otherwise please feel free to merge |
Now that the new changelog flow is almost here, I'm kinda tired of the old conflicts. I don't want to spend another second fixing changelog conflicts anymore. I much prefer spending some time helping with the new flow if there's anything needed there. |
The type of this PR is: workaround
This PR resolves CX-1483
Description
I have added some docs in the code, but the main idea here is that ios handles long placeholders with ellipsis, and android doesn't, they are just cut-off. So instead, we now have a workaround where we can give an array of placeholders, from longest to shortest, and it will measure and use the longest string that fits in the TextInput, in our case the search field.
Here's how it looks:
https://user-images.githubusercontent.com/100233/119164903-cfb99f80-ba54-11eb-8c74-e60697573548.mov
First thing you will notice is the texts in red borders. These are the placeholders, longest to shortest. They are rendered and measured and their widths are underneath them.
Now notice on top, in the search field, the placeholder is the longest string because it fits. When the cancel button slides in, the placeholder becomes the second longest, without
galleries
.In smaller devices a shorter one will be used directly, and the smallest we can show is just
Search
.PR Checklist (tick all before merging)