fix: update height for text container #19653
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
melvin-bot
bot
requested review from
amyevans and
rushatgabhane
and removed request for
a team
|
@amyevans @rushatgabhane One of you needs to copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
Reviewer Checklist
Screenshots/VideosWebScreen.Recording.2023-05-30.at.21.23.08.movMobile Web - ChromeWhatsApp.Video.2023-05-30.at.21.28.57.mp4Mobile Web - SafariScreen.Recording.2023-05-30.at.21.24.26.movDesktop
iOSScreen.Recording.2023-05-30.at.21.20.33.movAndroidWhatsApp.Video.2023-05-30.at.21.28.55.mp4 |
src/components/MagicCodeInput.js
Outdated
| <View | ||
| style={[ | ||
| styles.textInputContainer, | ||
| {height: styles.magicCodeInputContainer.minHeight - styles.textInputContainer.borderBottomWidth}, |
There was a problem hiding this comment.
@dukenv0307 inline styles are not allowed. Could you please create a util function for it.
Thanks!
App/contributingGuides/STYLING.md
Line 3 in 12d2f3c
There was a problem hiding this comment.
@rushatgabhane Because this style only applies to a single-use component. So I think we should define it in component as the guideline
## When to Create a New Style
If we need some minimal set of styling rules applied to a single-use component then it's almost always better to use an array of helper styles rather than create an entirely new style if it will only be used once. Resist the urge to create a new style for every new element added to a screen. There is a very good chance the style we are adding is a "single-use" style.
// Bad - Since we only use this style once in this component
const TextWithPadding = props => (
<Text style={styles.textWithPadding}>
{props.children}
</Text>
);
// Good
const TextWithPadding = props => (
<Text
style={[
styles.p5,
styles.noWrap,
]}
>
{props.children}
</Text>
);
There was a problem hiding this comment.
@dukenv0307 good point! But it only applies when we're creating a custom style using the existing styles, and no math is involved.
But I'm suggesting to create a function that returns a style in StyleUtils file
Because I don't think we do that anywhere in the code {height: x}
There was a problem hiding this comment.
@rushatgabhane Thanks, Just updated
amyevans
approved these changes
May 30, 2023
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
37 tasks
|
🚀 Deployed to staging by https://github.com/amyevans in version: 1.3.21-0 🚀
|
|
QA Steps
Devices:
|
6 tasks
|
🚀 Deployed to production by https://github.com/AndrewGable in version: 1.3.21-2 🚀
|
6 tasks
6 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Details
We need to make sure the dash is included in the TextInput height so that when the TextInput is fully visible, the dash will also be visible.
Fixed Issues
$ #19387
PROPOSAL: #19387 (comment)
Tests
Offline tests
QA Steps
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)myBool && <MyComponent />.src/languages/*files and using the translation methodWaiting for Copylabel for a copy review on the original GH to get the correct copy.STYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)/** comment above it */thisproperly so there are no scoping issues (i.e. foronClick={this.submit}the methodthis.submitshould be bound tothisin the constructor)thisare necessary to be bound (i.e. avoidthis.submit = this.submit.bind(this);ifthis.submitis never passed to a component event handler likeonClick)StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG))Avataris modified, I verified thatAvataris working as expected in all cases)ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Web
Mobile Web - Chrome
348465459_6234288053355215_7671907135518787479_n.mp4
Mobile Web - Safari
Screen.Recording.2023-05-26.at.10.59.32.mov
Desktop
iOS
Uploading Screen-Recording-2023-05-26-at-10.55.57.mp4…
Android
Screen.Recording.2023-05-26.at.11.34.14.mov