Workspace - Incorrect left padding for the button which has a left icon

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

Version Number: 1.3.87.0
Reproducible in staging?: y
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Pujan92
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697713080450809

Action Performed:

Open any screen which has a large button with left icon
Go to workspaces -> select any workspace -> Cards
Observe the left icon alignment for the button "Connect bank account"

Expected Result:

Left icon should not be much closer to the left border

Actual Result:

Left icon is closer to the left border

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

View all open jobs on GitHub

Proposal

Please re-state the problem that we are trying to solve in this issue.

Incorrect left padding for the button which has a left icon

What is the root cause of that problem?

We don’t have any additional left padding for left-icon of button.

App/src/components/Button/index.js

Line 236 in 279ce1b

What changes do you think we should make in order to solve the problem?

We can add additional left padding

<View style={[styles.mr1, this.props.large && styles.ml2, ...this.props.iconStyles]}>

App/src/components/Button/index.js

Line 236 in 279ce1b

What alternative solutions did you explore? (Optional)

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

@amyevans

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

Proposal

Please re-state the problem that we are trying to solve in this issue.

Incorrect left padding for the button which has a left icon

What is the root cause of that problem?

This is a regression from #29787. It changes the paddingLeft of the large button to 10.

What changes do you think we should make in order to solve the problem?

We should add a condition to set paddingLeft is 10 if the button doesn't have an icon to fix #29759, and 18 if yes.

buttonLarge: (hasIcon: Boolean) => ({
    borderRadius: variables.buttonBorderRadius,
    minHeight: variables.componentSizeLarge,
    paddingTop: 8,
    paddingRight: 10,
    paddingBottom: 8,
    paddingLeft: hasIcon ? 18 : 10,
    backgroundColor: theme.buttonDefaultBG,
}),

Change this LOC:

App/src/components/Button/index.js

Line 297 in ed59d4e

this.props.large ? styles.buttonLarge : undefined,

To:

this.props.large ? styles.buttonLarge(Boolean(this.props.icon)) : undefined,

@yh-0218

@yh-0218 go ahead and create a PR - let's resolve this quick

@narefyev91

~~@narefyev91, @yh-0218's solution won't fix #29759. That is the issue #29787 tried to fix.~~
I'm sorry. I didn't test his solution carefully.

The blocker is stemming from #29759 so I'll assign the original authors/reviewers

@narefyev91

Hi, @narefyev91 PR is ready for review. Please check.

@amyevans

Thanks for triaging this @amyevans!

Removed the DeployBlockerCash label as this is a minor visual bug.

Given that the fix for this is production and it was a regression and no payment is due, I'm going to close this one.

Navigation Menu

Repository navigation

Workspace - Incorrect left padding for the button which has a left icon #29967

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Workspace - Incorrect left padding for the button which has a left icon #29967

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

yh-0218 commented on Oct 19, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

OSBotify commented on Oct 19, 2023

melvin-bot commented on Oct 19, 2023

ginsuma commented on Oct 19, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

narefyev91 commented on Oct 19, 2023

ginsuma commented on Oct 19, 2023

amyevans commented on Oct 19, 2023

yh-0218 commented on Oct 19, 2023

cristipaval commented on Oct 19, 2023

cristipaval commented on Oct 19, 2023

cristipaval commented on Oct 27, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions