App: [HOLD for payment 2022-05-20] [$500] Refactor StatePicker to be compatible with Form
With the implementation of our new Form component we need to refactor StatePicker to be Form compatible. Here are the changes that need to be made:
- An optional
isFormInputprop. - If
isFormInputistrue, require ainputIDprop. Use getInputIDPropTypes to enforce this propType rule. - Add an optional
shouldSaveDraftprop. Defaults tofalse. - Make the
valueprop optional. - In the input’s
onBlurmethod, callprops.onBlur(). - Rename the input’s
onChangemethod toonInputChange. - In the input’s
onInputChangemethod (or equivalent e.g. onTextChange, etc), callprops.onInputChange(). - Remove the
hasErrorprop. - Add an optional
errorTextprop. Defaults to an empty string. - Update the error message to display if
errorTextis truthy. - Update the inline error display style so it is left aligned with the label and input value. See example image for TextInput:
- Make sure that
props.refis attached to the appropriate DOM node. This could involve forwarding the ref to a child component. This is important so we can callref.focus(). - Add the input to the test Form stories and make sure that it works. You can check this by running
npm run storybookand testing the component in the example form. - Remove any unused code.
There’s an example of a refactor to TextInput in this PR.
About this issue
- Original URL
- State: closed
- Created 2 years ago
- Comments: 48 (41 by maintainers)
The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.57-17 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:
If no regressions arise, payment will be issued on 2022-05-20. 🎊
PR raised @parasharrajat
Hey @jayeshmangwani! Sure, feel free to pick it up and submit a PR. I’ll re-add the labels and re-assign the relevant people to this issue. Thanks for the interest and picking this up.
@MitchExpensify Please disregard my comment above about removing this job. We are making it External again and @jayeshmangwani will work on this.
The holding PR is merged! We can start working on this 🎉
@MitchExpensify Done.
Paid @jayeshmangwani , thank you very much!
Sure I am applying
@jayeshmangwani Can you apply to this Upwork Job please? I had to abandon the original job so we’ll use this new posting to issue payment (invited you to the new job @parasharrajat)
Ok Great. @jayeshmangwani this is urgent so I am hoping that PR will be ready by Monday. Thanks for taking it up.
🎀 👀 🎀 C+ reviewed
📣 @parasharrajat You have been assigned to this job by @luacmartins! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑💻 Keep in mind: Code of Conduct | Contributing 📖
@luacmartins is there any chance it can be External again?
I saw this issue a few hours back and I was working on this and I have done all the changes that are mentioned I was testing these changes in the app, here are videos
[Form stories]
https://user-images.githubusercontent.com/35371050/164755723-0c8407b0-afe1-4e9b-9087-5f403dfa5ca7.mov
DebitCardPage Before Changes
https://user-images.githubusercontent.com/35371050/164756039-58e41b4c-756e-4d1b-9299-0948c837f0ec.mov
DebitCardPage After Changes
https://user-images.githubusercontent.com/35371050/164756113-2f24d044-68fd-4136-8b4a-44b6639d7c6a.mov
Not overdue, just became ready to work on
Looks like we’re holding on https://github.com/Expensify/App/issues/7535 before starting this
Good eye @rushatgabhane. We are already waiting for some issue @sig5 is having.
@sig5 @parasharrajat Before starting on this one, we need to first merge a PR for Refactor Picker right?
Sending it! @MitchExpensify could you please hire @sig5 ?