[HOLD for payment 2024-10-14] [$250] Increase table row and decrease table row gap

[dubielzyk-expensify]

We recently decided to do some minor tweaks to our tables and would like that reflected in the product. The changes are as follows:

• Table rows should have a minimum height of 64px
• The gap/space between each table row should be reduced to 8px instead of 12px.

Screenshots (before left, after right)

This should apply to all tables (search, members, categories, tags, etc). cc @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021838357676436244247
• Upwork Job ID: 1838357676436244247
• Last Price Increase: 2024-09-23
• Automatic offers:
• ikevin127 | Reviewer | 104141061
• abzokhattab | Contributor | 104141064

Issue Owner

Current Issue Owner: @alexpensify

[melvin-bot]

Triggered auto assignment to @alexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-09-23 07:25:22 UTC.

Proposal

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

Increase table row and decrease table row gap

What is the root cause of that problem?

new feature

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

• to increase the gap between rows in the category table and the transactions rows in the search table, we need to modify the containerStyle to be styles.mb2 here and here
• and to set the min-height we can either add it as a new style in the pressableStyle prop of both, or we can modify the selectionListPressableItemWrapper to have minHeight: variables.optionRowHeight
• optional: to make the same effect in other tables we should do the same modifications in the list items components

Result

What alternative solutions did you explore? (Optional)

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-09-23 08:09:52 UTC.

Proposal

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

Increase table row and decrease table row gap

What is the root cause of that problem?

Right here the Categories Table list item had total height of 52px with padding top and bottom 16px including content which is not correct, we can increase the paddingVertical to 22px so the height will be 64px

App/src/components/SelectionList/TableListItem.tsx

Lines 45 to 49 in bbc0919

	<BaseListItem
	item={item}
	pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, item.cursorStyle]]}
	wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
	containerStyle={styles.mb3}

App/src/styles/index.ts

Lines 4639 to 4647 in bbc0919

	selectionListPressableItemWrapper: {
	alignItems: 'center',
	flexDirection: 'row',
	paddingHorizontal: 16,
	paddingVertical: 16,
	marginHorizontal: 20,
	backgroundColor: theme.highlightBG,
	borderRadius: 8,
	},

And for the gap here we use mb3 which is 12px containerStyle={styles.mb3} instead of mb2 (8px)

App/src/components/SelectionList/TableListItem.tsx

Lines 45 to 49 in bbc0919

	<BaseListItem
	item={item}
	pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, item.cursorStyle]]}
	wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
	containerStyle={styles.mb3}

App/src/components/SelectionList/Search/TransactionListItem.tsx

Lines 35 to 39 in bbc0919

	<BaseListItem
	item={item}
	pressableStyle={listItemPressableStyle}
	wrapperStyle={listItemWrapperStyle}
	containerStyle={[styles.mb3]}

App/src/components/SelectionList/Search/ReportListItem.tsx

Lines 123 to 127 in bbc0919

	<BaseListItem
	item={item}
	pressableStyle={listItemPressableStyle}
	wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
	containerStyle={[styles.mb3]}

App/src/components/SelectionList/ChatListItem.tsx

Lines 58 to 64 in bbc0919

	<BaseListItem
	item={item}
	pressableStyle={[
	[styles.selectionListPressableItemWrapper, styles.textAlignLeft, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, item.cursorStyle],
	]}
	wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone]}
	containerStyle={styles.mb3}

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

We can increase the padding vertical (top and bottom) to 22px so the total height will be 64px instead of 52px

App/src/styles/index.ts

Lines 4639 to 4647 in bbc0919

	selectionListPressableItemWrapper: {
	alignItems: 'center',
	flexDirection: 'row',
	paddingHorizontal: 16,
	paddingVertical: 16,
	marginHorizontal: 20,
	backgroundColor: theme.highlightBG,
	borderRadius: 8,
	},

And for mb3 containerStyle={styles.mb3} we can change to mb2 (8px) for gap space each item

What alternative solutions did you explore? (Optional)

[NJ-2020]

Proposal Updated

• Update permalink link code

[alexpensify]

@dubielzyk-expensify - are we ready to assign this as External or is there someone scheduled to work on this one?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021838357676436244247

[dubielzyk-expensify]

Nobody assigned. Added the label

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ikevin127 (External)

[NJ-2020]

Proposal Updated

• Small changes

[Gajendra-Gupta]

Proposal

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

Increase table row and decrease table row gap

What is the root cause of that problem?

new feature

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

For reducing the gap between rows need to change style containerStyle={styles.mb3} to
containerStyle={styles.mb2}

App/src/components/SelectionList/TableListItem.tsx

Lines 45 to 49 in bbc0919

	<BaseListItem
	item={item}
	pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive, item.cursorStyle]]}
	wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]}
	containerStyle={styles.mb3}

For increasing table row height need to change style

App/src/styles/index.ts

Lines 4639 to 4647 in bbc0919

	selectionListPressableItemWrapper: {
	alignItems: 'center',
	flexDirection: 'row',
	paddingHorizontal: 16,
	paddingVertical: 16,
	marginHorizontal: 20,
	backgroundColor: theme.highlightBG,
	borderRadius: 8,
	},

paddingVertical should be 16px to 22px so the style should be

selectionListPressableItemWrapper: { 
     alignItems: 'center', 
     flexDirection: 'row', 
     paddingHorizontal: 16, 
     paddingVertical: 22, 
     marginHorizontal: 20, 
     backgroundColor: theme.highlightBG, 
     borderRadius: 8, 
 },

What alternative solutions did you explore? (Optional)

[alexpensify]

@ikevin127 when you get a chance, can you please review these proposals? Thanks!

[ikevin127]

@abzokhattab's proposal looks good to me. The proposed solution fulfils the expectations of the issue requirements which mention setting a minimum height of 64px and decreasing the margin between items.

I was testing whether increasing the padding or setting minHeight is the best way to go here in terms of increasing the item's height and I couldn't find any downsides to any method, therefore I made the choice based on first come, first served, plus took in consideration the issue requirements which says:

Table rows should have a minimum height of 64px

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @mountiny, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @ikevin127 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @abzokhattab 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

[alexpensify]

Weekly Update: The PR is still in review

[alexpensify]

Update: waiting for this PR to go to production

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.45-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Increase table row and decrease table row gap #49904

If no regressions arise, payment will be issued on 2024-10-14. 🎊

For reference, here are some details about the assignees on this issue:

• @ikevin127 requires payment automatic offer (Reviewer)
• @abzokhattab requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ikevin127] The PR that introduced the bug has been identified. Link to the PR:
• [@ikevin127] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@ikevin127] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@ikevin127] Determine if we should create a regression test for this bug.
• [@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[ikevin127]

• [@ikevin127] The PR that introduced the bug has been identified. Link to the PR: Not caused by any offending PR as the issue was created to apply design modifications to existing UI.
• [@ikevin127] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A.
• [@ikevin127] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A.
• [@ikevin127] Determine if we should create a regression test for this bug.
• [@ikevin127] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

Regression Test Proposal

1. Create a new workspace.
2. Submit a few expenses.
3. Open the search page and ensure that the height of each row is >= 64px and the gaps between the rows are 8px.
4. Go to the workspace settings.
5. Validate that the rows (including skeleton rows) in the tables for "Members," "Tags," "Categories," and "Report Fields" have the same height and gap as mentioned in point 3.

Do we agree 👍 or 👎.

[alexpensify]

Payouts due: 2024-10-14

• Contributor: $250 @abzokhattab
• Reviewer: $250 @ikevin127

Upwork job is here. I've completed the payment process in Upwork.