[Refactor] Add getButtonStyles function to the Button component

[mountiny]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

This is a refactoring issue. No actions in UI involved.

As raised here by @marcaaron, the Button component has got more props over time which influence the styling of the Button. The inline ternaries are hard to follow and it is easy to get lost in them.

https://github.com/Expensify/Expensify.cash/blob/de03a02ecd2bd95e10b5aab50f3abadc8bb854a5/src/components/Button.js#L108-L127

Similarly the ternaries are used for the Text styles too:

https://github.com/Expensify/Expensify.cash/blob/de03a02ecd2bd95e10b5aab50f3abadc8bb854a5/src/components/Button.js#L84-L96

Expected Result:

We would like to refactor the Button component so we create separate functions to determine style of the OpacityView and Text: getButtonStyles(hovered, disabled, small, large, success, danger, shouldRemoveRightBorderRadius, shouldRemoveLeftBorderRadius, ...etc) and getTextStyle(small, large, success, danger, ...etc).

That will improve readability and maintainability as we will most likely need to add new props as the app development will continue.

Then we can either call the getButtonStyles function similarly as we get the additionalStyles here: https://github.com/Expensify/Expensify.cash/blob/de03a02ecd2bd95e10b5aab50f3abadc8bb854a5/src/components/Button.js#L72

Or we can call the getButtonStyles function inline in the OpacityView tag such that style={getButtonStyles(params)}

Same goes for the getTextStyles.

Actual Result:

Goals described above.

Workaround:

No workaround

Platform:

Where is this issue occurring?

Web ✔️
iOS ✔️
Android ✔️
Desktop App ✔️
Mobile Web ✔️

Version Number:
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @mateocole (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @laurenreidexpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[laurenreidexpensify]

swamped on allocations - can someone else triage this for me today? thanks

[MelvinBot]

Triggered auto assignment to @jboniface (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @joelbettner (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[jboniface]

i can't really assess this issue, moving it to engineering for triage

[marcaaron]

I agree this would be nice to do, but seems kind of low priority and has already been sitting for 28 days. Just going to close it for now.