Skip to content
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

Merge TextInputWithPrefix into TextInput #7937

Merged
merged 30 commits into from
Mar 4, 2022

Conversation

parasharrajat
Copy link
Member

@parasharrajat parasharrajat commented Feb 28, 2022

Details

  • TextInputWithPrefix

Fixed Issues

$ #6584
$ #7308

Tests

  • Verify that no errors appear in the JS console

PR Review Checklist

Contributor (PR Author) Checklist

  • I made sure to pull main before submitting my PR for review
  • I linked the correct issue in the ### Fixed Issues section above
  • I wrote clear testing steps that cover the changes made in this PR
    • I clearly indicated the environment tests should be run in (Staging vs Production)
  • I wrote testing steps that cover success & fail scenarios (if applicable)
  • I ran the tests & they passed on all platforms
  • I included screenshots or videos for tests on all platforms
  • I verified there are no console errors related to changes in this PR
  • I followed proper code patterns (see Reviewing the code)
    • I added comments when the code was not self explanatory
    • I put all copy / text shown in the product in all src/languages/* files (if applicable)
    • I followed proper naming convention for platform-specific files (if applicable)
    • I followed style guidelines (in Styling.md) for all style edits I made
  • I followed the guidelines as stated in the Review Guidelines

PR Reviewer Checklist

  • I verified the Author pulled main before submitting the PR
  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the testing environment is mentioned in the test steps
  • I verified testing steps cover success & fail scenarios (if applicable)
  • I verified tests pass on all platforms & I tested again on all platforms
  • I checked that screenshots or videos are included for tests on all platforms
  • I verified there are no console errors related to changes in this PR
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified comments were added when the code was not self explanatory
    • I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
    • I verified proper naming convention for platform-specific files was followed (if applicable)
    • I verified style guidelines were followed
  • I verified that this PR follows the guidelines as stated in the Review Guidelines

QA Steps

  1. Open NewRoom page on All plaforms.
  2. Check that you are able to operate the Prefixed new room input.
  3. Go to ReportSettingsPage and try to rename.
  4. Check a few other pages which as normal text input and observe that design on those input should not change.
  • Verify that no errors appear in the JS console

Tested On

  • Web
  • Mobile Web
  • Desktop
  • iOS
  • Android

Screenshots

Web | Desktop

image
image

Mobile Web

image

iOS

image

Android

image
image

@parasharrajat parasharrajat changed the title Merge TextInputWithPrefix into TextInput [WIP] Merge TextInputWithPrefix into TextInput Feb 28, 2022
@parasharrajat parasharrajat marked this pull request as ready for review February 28, 2022 20:47
@parasharrajat parasharrajat requested a review from a team as a code owner February 28, 2022 20:47
@MelvinBot MelvinBot removed the request for review from a team February 28, 2022 20:47
@parasharrajat
Copy link
Member Author

@shawnborton Could you please review the design here?

@shawnborton
Copy link
Contributor

I think it looks pretty good, but there is a faint highlight of the second input. Can we get rid of that?

Could we also slightly reduce the gap between the # and the name? In my mockup I think I have it at 4px.

@parasharrajat
Copy link
Member Author

parasharrajat commented Feb 28, 2022

@shawnborton All settled now. But did you notice the save button?
image

@shawnborton
Copy link
Contributor

Nice, looks great to me!

@puneetlath
Copy link
Contributor

Should the save button be the same height as the input box?

@shawnborton
Copy link
Contributor

I agree with you Puneet but I think that might be a separate issue from this one?

@puneetlath
Copy link
Contributor

Ah ok got it! @parasharrajat let's make sure to report that.

@puneetlath
Copy link
Contributor

Or if it's just this one button, let's just fix it as part of this PR and add $250 extra for it.

@parasharrajat
Copy link
Member Author

Updated

@rushatgabhane
Copy link
Member

rushatgabhane commented Mar 2, 2022

PR Reviewer Checklist

  • I verified the Author pulled main before submitting the PR
  • I verified the correct issue is linked in the ### Fixed Issues section above
  • I verified testing steps are clear and they cover the changes made in this PR
    • I verified the testing environment is mentioned in the test steps
  • I verified testing steps cover success & fail scenarios (if applicable)
  • I verified tests pass on all platforms & I tested again on all platforms
  • I checked that screenshots or videos are included for tests on all platforms
  • I verified there are no console errors related to changes in this PR
  • I verified proper code patterns were followed (see Reviewing the code)
    • I verified comments were added when the code was not self explanatory
    • I verified any copy / text shown in the product was added in all src/languages/* files (if applicable)
    • I verified proper naming convention for platform-specific files was followed (if applicable)
    • I verified style guidelines were followed
  • I verified that this PR follows the guidelines as stated in the Review Guidelines

@rushatgabhane
Copy link
Member

rushatgabhane commented Mar 2, 2022

@parasharrajat could you help me with navigating to the room's settings page?

I'm getting this error on

  1. Create new room
  2. Click on room details
  3. Settings

image

@parasharrajat
Copy link
Member Author

This is not caused by my changes. I think refreshing the page should fix this one.

@rushatgabhane
Copy link
Member

This is not caused by my changes

Yep

I tried clean build, hard refresh, clean local storage etc.
I'm not able to access this page on main either.

@parasharrajat
Copy link
Member Author

You can open the old rooms' setting page to test it.

@rushatgabhane
Copy link
Member

rushatgabhane commented Mar 2, 2022

Thanks, but that didn't help. I'll ask about this on slack

@rushatgabhane
Copy link
Member

@parasharrajat I'm not able to modify the room name in RoomSettingsPage

@parasharrajat
Copy link
Member Author

Any steps?

@rushatgabhane
Copy link
Member

rushatgabhane commented Mar 2, 2022

I'm not able to modify the room name in RoomSettingsPage

Sorry, my bad. I was testing the default rooms (#announce and #admin) which aren't editable.

rushatgabhane
rushatgabhane previously approved these changes Mar 2, 2022
Copy link
Member

@rushatgabhane rushatgabhane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@puneetlath LGTM! 🎉️

@parasharrajat
Copy link
Member Author

The last PR is ready. Waiting for this one to be merged.

@parasharrajat
Copy link
Member Author

@puneetlath before you leave, Could you please review this? Thanks.


this.state = {
isFocused: false,
labelTranslateY: new Animated.Value(activeLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y),
labelScale: new Animated.Value(activeLabel ? styleConst.ACTIVE_LABEL_SCALE : styleConst.INACTIVE_LABEL_SCALE),
passwordHidden: props.secureTextEntry,
textInputWidth: 0,
prefixWidth: 20,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should this be a constant?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, actually 0 should be fine here.

Copy link
Member

@rushatgabhane rushatgabhane Mar 4, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@parasharrajat why not 0?
When the prefix is of more than one character, width 20 will be wrong.

And we're calculating the correct width onLayout anyway

@@ -404,6 +404,16 @@ function parseStyleAsArray(styleParam) {
return _.isArray(styleParam) ? styleParam : [styleParam];
}

/**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we add a description to this function as to why it exists. It's pretty unclear what the purpose of this is on its own.

@parasharrajat
Copy link
Member Author

@puneetlath @rushatgabhane Updated.

Copy link
Member

@rushatgabhane rushatgabhane left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@puneetlath LGTM!

@puneetlath puneetlath merged commit d4ed740 into Expensify:main Mar 4, 2022
@OSBotify
Copy link
Contributor

OSBotify commented Mar 4, 2022

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

@OSBotify
Copy link
Contributor

🚀 Deployed to staging by @puneetlath in version: 1.1.42-0 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@OSBotify
Copy link
Contributor

🚀 Deployed to production by @chiragsalian in version: 1.1.42-6 🚀

platform result
🤖 android 🤖 success ✅
🖥 desktop 🖥 success ✅
🍎 iOS 🍎 success ✅
🕸 web 🕸 success ✅

@parasharrajat parasharrajat deleted the textinput-prefix branch November 20, 2023 13:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants