[PAID] [$250] Group - ‘Next’ button size is not consistent with ‘Start group’ button size

[izarutskaya]

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

---

Version Number: v1.4.63-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Click on ‘FAB’ > Start chat
2. Select multiple users > Click on ‘Next’ button

Expected Result:

‘Next’ button size should be consistent with ‘Start group’ button size

Actual Result:

‘Next’ button size is not consistent with ‘Start group’ button size

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6453281_1713425264788.Screen_Recording_2024-04-18_at_10.08.48_in_the_morning.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0197f31924a9d6b4b1
• Upwork Job ID: 1781111202163744768
• Last Price Increase: 2024-04-19
• Automatic offers:
• neonbhai | Contributor | 0

[melvin-bot]

Triggered auto assignment to @puneetlath (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

Triggered auto assignment to @strepanier03 (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.

[github-actions]

👋 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:

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

[izarutskaya]

@strepanier03 I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #vip-vsb.

[izarutskaya]

Production

bandicam.2024-04-18.14-53-11-021.mp4

[neonbhai]

Proposal

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

Group - ‘Next’ button size is not consistent with ‘Start group’ button size

What is the root cause of that problem?

This happens as the Start Chat page passes custom footer to render Next button, which is normal sized:

App/src/pages/NewChatPage.tsx

Lines 266 to 271 in 9b839f4

	<Button
	success
	text={translate('common.next')}
	onPress={createGroup}
	pressOnEnter
	/>

Wheres on New Chat Confirm Page we use the SelectionList to render the Start Group button, which by default creates a large button:

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 622 to 630 in 9b839f4

	<Button
	success
	large
	style={[styles.w100]}
	text={confirmButtonText || translate('common.confirm')}
	onPress={onConfirm}
	pressOnEnter
	enterKeyEventListenerPriority={1}
	/>

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

We can:

• Increase the size of the Next button by:

  • passing large as prop to the button component in NewChatPage.tsx here
    

    App/src/pages/NewChatPage.tsx

    Lines 266 to 271 in 9b839f4

    	<Button
    	success
    	text={translate('common.next')}
    	onPress={createGroup}
    	pressOnEnter
    	/>

• Decrease the size of the Start Group button by:

  • Passing a custom footer button to the SelectionList here:
    

    App/src/pages/NewChatConfirmPage.tsx

    Lines 150 to 159 in 9b839f4

    	<SelectionList
    	canSelectMultiple
    	sections={[{title: translate('common.members'), data: sections}]}
    	ListItem={InviteMemberListItem}
    	onSelectRow={unselectOption}
    	showConfirmButton={selectedOptions.length > 1}
    	confirmButtonText={translate('newChatPage.startGroup')}
    	onConfirm={selectedOptions.length > 1 ? createGroup : undefined}
    	shouldHideListOnInitialRender={false}
    	/>

  • Add a prop to SelectionList to control button size here:
    

    App/src/components/SelectionList/BaseSelectionList.tsx

    Lines 622 to 624 in 9b839f4

    	<Button
    	success
    	large

[strepanier03]

I don't think this needs to be a deploy blocker, what do you think @puneetlath.

---

Looks like there's a pretty noticeable pixel difference.

[marcaaron]

I agree. I'm gonna add this to the polish pile for Group Chats. @puneetlath I can take this off your hands if you'd like.

[puneetlath]

Works for me!

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

📣 @neonbhai 🎉 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 📖

[marcaaron]

@strepanier03 Just a heads up that someone ended up fixing this issue in another PR so we can follow the process here.

[melvin-bot]

This issue has not been updated in over 15 days. @strepanier03, @marcaaron, @neonbhai, @thesahindia eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[thesahindia]

@strepanier03 Just a heads up that someone ended up fixing this issue in another PR so we can follow the process here.

Bump @strepanier03

[strepanier03]

Thank you, taking a look now.

[strepanier03]

All done, paid and contract closed for @neonbhai. Thanks for pinging me!