-
Notifications
You must be signed in to change notification settings - Fork 3k
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
Fix TextLink
text wrapping
#6113
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.
Works well for me, just one detail, left a comment.
<Text | ||
style={[styles.link, ...additionalStyles]} | ||
accessibilityRole="link" | ||
href={props.href} |
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.
href
doesn't seem to be a prop of our Text component, I think it should be removed. We pass those props down to the react-native
Text component, but that component doesn't use href
either (https://reactnative.dev/docs/text#props)
Update: ignore my comment. I can see that it still have some effect. Hovering a Text
with href
will make it show the url in the bottom corner of the page as it ends up being used as the <a href="...">
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 good to me! Tested on web and Android.
🚀 Deployed to staging by @aldo-expensify in version: 1.1.11-4 🚀
|
Accessibility issue Focus is not trapped within the dialogue Attachment: 2021-11-02.20-49-44.online-video-cutter.com.mp4 |
🚀 Deployed to production by @yuwenmemon in version: 1.1.12-3 🚀
|
Previously, we assumed that
TextLink
components behaved likeText
components–i.e. if the text exceeds with the width of the container, it should wrap. However, this wasn't happening because we were using aPressable
internally forTextLink
components, which was causing some strange behavior with howTextLink
components were displaying when used in-line with other text.This fixes
TextLink
to useText
under the hood. It gets rid of the ability for us to apply additional styles on hover/press.Before
After
Fixed Issues
$ #6078
Tests
edit_content.diff
in your App directory with the following:QA Steps
Test Account:
janeil21@mbakingzl.com
asdfASDF00
Tested On
Screenshots
Web
Mobile Web
Desktop
iOS
Android