[HOLD for payment 2023-10-05] [$500] Web – Request Money – “Show more” button is not highlighted on hover or when the cursor is moved

[m-natarajan]

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

---

Action Performed:

1. Click FAB (Plus sign).
2. Click " Request Money ".
3. Enter amount and click “Next”.
4. Select the user to proceed
5. Notice the “Show more” button is not highlighted on hover or when the cursor is moved

Expected Result:

Down arrow (chevron) should highlighted on hover

Actual Result:

Down arrow (chevron) does not highlighted on hover

Workaround:

Unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.56-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
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
Notes/Photos/Videos: Any additional supporting documentation

1.mp4

Recording.382.mp4

Expensify/Expensify Issue URL:
Issue reported by: @usmantariq96
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1691225374193429

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01152fc4f180cf9e07
• Upwork Job ID: 1699608422610767872
• Last Price Increase: 2023-09-07
• Automatic offers:
• ntdiary | Reviewer | 26734890
• suneox | Contributor | 26734891

[namhihi237]

Proposal

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

The down arrow (chevron) should be highlighted on the hover

What is the root cause of that problem?

We are using Button component here, but we do not pass the shouldUseDefaultHover props

App/src/components/MoneyRequestConfirmationList.js

Lines 394 to 402 in dd0d98f

	<Button
	small
	onPress={toggleShowAllFields}
	text={translate('common.showMore')}
	shouldShowRightIcon
	iconRight={Expensicons.DownArrow}
	iconFill={themeColors.icon}
	style={styles.mh0}
	/>

In addition, I also found a similar problem with the Add stop button. I think we should fix it here because they are similar.

App/src/components/DistanceRequest.js

Lines 228 to 235 in d63ea05

	<Button
	small
	icon={Expensicons.Plus}
	onPress={() => Transaction.addStop(iou.transactionID)}
	text={translate('distance.addStop')}
	isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
	innerStyles={[styles.ph10]}
	/>

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

We can replace Button with something like here:

<PressableWithFeedback
  onPress={toggleShowAllFields}
  nativeID="showMoreButton"
  accessibilityLabel="showMoreButton"
  style={[styles.button, styles.buttonSmall]}
>
  {({ hovered, pressed }) => (
    <View style={[ styles.justifyContentBetween, styles.justifyContentCenter, styles.alignItemsCenter, styles.flexRow]}>
      <Text style={styles.buttonSmallText}>{translate("common.showMore")}</Text>
      <View style={[styles.ml1, styles.pointerEventsAuto]}>
        <Icon
          src={Expensicons.DownArrow}
          fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
          small
        />
      </View>
    </View>
  )}
</PressableWithFeedback>;

What alternative solutions did you explore? (Optional)

1. In addition, we can adjust the Button component by adding a check prop to have a hover effect for the icon and implement
   hover logic the same as above.
2. We can add shouldUseDefaultHover in Show more and Add stop.

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[suneox]

Proposal

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

The down arrow (chevron) should be highlighted on the hover

What is the root cause of that problem?

The button missing props shouldUseDefaultHover at

App/src/components/MoneyRequestConfirmationList.js

Lines 394 to 402 in dd0d98f

	<Button
	small
	onPress={toggleShowAllFields}
	text={translate('common.showMore')}
	shouldShowRightIcon
	iconRight={Expensicons.DownArrow}
	iconFill={themeColors.icon}
	style={styles.mh0}
	/>

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

Add a prop shouldUseDefaultHover to this button

                    <Button
                        small
                        onPress={toggleShouldExpandFields}
                        text={translate('common.showMore')}
                        shouldShowRightIcon
                        iconRight={Expensicons.DownArrow}
                        iconFill={themeColors.icon}
                        style={styles.mh0}
+                       shouldUseDefaultHover
                    />

and another case, I have found at

App/src/components/SelectionList/BaseSelectionList.js

Lines 391 to 398 in 911fe99

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

App/src/components/AvatarCropModal/AvatarCropModal.js

Lines 423 to 428 in 911fe99

	<Button
	medium
	icon={Expensicons.Rotate}
	iconFill={themeColors.inverse}
	iconStyles={[styles.mr0]}
	onPress={rotateImage}

App/src/components/DistanceRequest.js

Lines 228 to 235 in d63ea05

	<Button
	small
	icon={Expensicons.Plus}
	onPress={() => Transaction.addStop(iou.transactionID)}
	text={translate('distance.addStop')}
	isDisabled={numberOfWaypoints === MAX_WAYPOINTS}
	innerStyles={[styles.ph10]}
	/>

App/src/components/PDFView/PDFPasswordForm.js

Lines 134 to 141 in 911fe99

	<Button
	// Keep focus on the TextInput effectively keeping keyboard open
	onMouseDown={(e) => e.preventDefault()}
	text={translate('common.confirm')}
	onPress={submitPassword}
	style={styles.mt4}
	isLoading={shouldShowLoadingIndicator}
	pressOnEnter

What alternative solutions did you explore? (Optional)

1. Change shouldUseDefaultHover on the button component to true to avoid missing for a new feature. To make sure this change does not affect to current feature we will change all current code using Button without prop shouldUseDefaultHover to false on this list

Exclude PDFPasswordForm, AvatarCropModal, DistanceRequest, BaseSelectionList

2. If your design system forces the state of the icon should be changed when hovering over the button, we can update the button rendering to

    render() {
        return (
            <PressableWithFeedback
                .....
                hoverDimmingValue={1}
            >
+               {({hovered, pressed}) => (
+                   <>
+                       {this.renderContent({hovered, pressed})}
+                       {this.props.isLoading && (
+                           <ActivityIndicator
+                               color={this.props.success || this.props.danger ? themeColors.textLight : themeColors.text}
+                               style={[styles.pAbsolute, styles.l0, styles.r0]}
+                           />
+                       )}
+                   </>
+               )}
            </PressableWithFeedback>
        );
    }

and update renderContent to

    renderContent({hovered, pressed}) {
        if (this.props.children) {
            return this.props.children;
        }
        .....

        if (this.props.icon || this.props.shouldShowRightIcon) {
            return (
                <View style={[styles.justifyContentBetween, styles.flexRow]}>
                    <View style={[styles.alignItemsCenter, styles.flexRow, styles.flexShrink1]}>
                        {this.props.icon && (
                            <View style={[styles.mr1, ...this.props.iconStyles]}>
                                <Icon
                                    src={this.props.icon}
-                                   fill={this.props.iconFill}
+                                   fill={this.props.iconFill || StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
                                    small={this.props.small}
                                />
                            </View>
                        )}
                        {textComponent}
                    </View>
                    {this.props.shouldShowRightIcon && (
                        <View style={[styles.justifyContentCenter, styles.ml1, ...this.props.iconRightStyles]}>
                            <Icon
                                src={this.props.iconRight}
-                               fill={this.props.iconFill}
+                               fill={this.props.iconFill || StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
                                small={this.props.small}
                            />
                        </View>
                    )}
                </View>
            );
        }

        return textComponent;
    }

we have to check the current prop this.props.iconFill change to this.props.iconFill || StyleUtils.getIconFillColor(getButtonState(hovered, pressed)) to avoid affecting to current implement

Proposal

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

Web – Request Money – Down arrow (chevron) is not highlighted on hover or when the cursor is moved on the “Show more” button.

What is the root cause of that problem?

We didn't set the prop in Button component so that the down arrow (chevron) should be highlighted on the hover.

App/src/components/MoneyRequestConfirmationList.js

Lines 364 to 372 in 999ed93

	<Button
	small
	onPress={toggleShowAllFields}
	text={translate('common.showMore')}
	shouldShowRightIcon
	iconRight={Expensicons.DownArrow}
	iconFill={themeColors.icon}
	style={styles.mh0}
	/>

Also, even if we set the prop on the Button component, there is no code to update the color of the down arrow (chevron), so only the Show more button is highlighted, but not the down arrow (chevron).

App/src/components/Button/index.js

Lines 241 to 249 in 999ed93

	{this.props.shouldShowRightIcon && (
	<View style={[styles.justifyContentCenter, styles.ml1, ...this.props.iconRightStyles]}>
	<Icon
	src={this.props.iconRight}
	fill={this.props.iconFill}
	small={this.props.small}
	/>
	</View>
	)}

This is the root cause of this issue.

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

To solve this problem we should add a prop to the Button component and then add the code to update the down arrow (chevron)'s color on hover.

We can do it like this:

1. Add a prop to the Button component.

              <Button
                  small
                  onPress={toggleShowAllFields}
                  text={translate('common.showMore')}
                  shouldShowRightIcon
                  iconRight={Expensicons.DownArrow}
-                 iconFill={themeColors.icon}
                  style={styles.mh0}
+                 shouldUseDefaultHover
              />

2. Add a new state variable here:

              constructor(props) {
                  super(props);

+                 this.state = {
+                     isHovered: false,
+                 };

                  this.renderContent = this.renderContent.bind(this);
+                 this.handleHoverIn = this.handleHoverIn.bind(this);
+                 this.handleHoverOut = this.handleHoverOut.bind(this);
              }

3. Create handleHoverIn and handleHoverOut functions to manage the hover state:

              handleHoverIn() {
                  this.setState({isHovered: true});
              }
              
              handleHoverOut() {
                  this.setState({isHovered: false});
              }

4. Pass these functions to the PressableWithFeedback component in here:

              <PressableWithFeedback
                  ref={this.props.forwardedRef}
                  onPress={(e) => {
                      // existing code...
                  }}
+                 onHoverIn={this.handleHoverIn}
+                 onHoverOut={this.handleHoverOut}
                  // other props...
              >

5. Finally, change the fill color of the IconRight based on the isHovered state in the renderContent function:

            {this.props.shouldShowRightIcon && (
                <View style={[styles.justifyContentCenter, styles.ml1, ...this.props.iconRightStyles]}>
                    <Icon
                        src={this.props.iconRight}
                        fill={this.state.isHovered ? themeColors.iconHovered : this.props.iconFill}
                        small={this.props.small}
                    />
                </View>
            )}

What alternative solutions did you explore? (Optional)

[melvin-bot]

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

[JmillsExpensify]

Hmm, I don't think this is a bug. We don't highlight the chevron on hoover for a pill. Right @shawnborton @trjExpensify? I think we should close though getting a second opinion.

[suneox]

@JmillsExpensify The icon maybe doesn't highlight so how about button should be highlight

[trjExpensify]

Hm yeah, if anything, the button should probably be highlighted on hover like the confirmation button does. Not super passionate though, @JmillsExpensify.

[shawnborton]

I don't know that the chevron needs to change color in this instance. We're showing it as a button and not as an option row. However, that "Show more" button should behave exactly like our standard "Default" buttons which means it would get a slight color change on hover and on press. cc @dannymcclain

So I would say this bug report is incorrect (well, not even a bug report but rather a design inconsistency request) so no payouts here, but we could spin up an issue to make sure it has the hover state or ask whoever implemented it to go back and make the change?