Skip to content

[HOLD for payment 2024-07-22] Expensify Card - Blue outline does not wrap the user row properly when navigating via Tab #44871

Description

@lanitochka17

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: 9.0.4-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: N/A
Issue reported by: Applaus - Internal Team

Action Performed:

  1. Go to staging.new.expensify.com
  2. Go to workspace settings > More features
  3. Enable Expensify Card
  4. Navigate through user list via Tab key

Expected Result:

The blue outline will wrap the user row properly

Actual Result:

The blue outline does not wrap the user row properly

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

Add any screenshot/video evidence

Bug6533320_1720115230094.20240705_014356.mp4

View all open jobs on GitHub

Activity

  1. added
    DeployBlockerCashThis issue or pull request should block deployment
    DeployBlockerIndicates it should block deploying the API
    on Jul 4, 2024
  2. melvin-bot commented on Jul 4, 2024

    @melvin-bot

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

  3. github-actions commented on Jul 4, 2024

    @github-actions
    Contributor

    👋 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.
  4. lanitochka17 commented on Jul 4, 2024

    @lanitochka17
    Author

    @puneetlath FYI 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

  5. removed
    DeployBlockerCashThis issue or pull request should block deployment
    DeployBlockerIndicates it should block deploying the API
    on Jul 4, 2024
  6. tgolen commented on Jul 4, 2024

    @tgolen
    Contributor

    I am demoting this one since it doesn't impact the user and tab navigation is not a mainline flow.

  7. neonbhai commented on Jul 4, 2024

    @neonbhai
    Contributor

    roposal

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

    Expensify Card - Blue outline does not wrap the user row properly when navigating via Tab

    What is the root cause of that problem?

    We have incorrectly configured the styles on WorkspaceCardListRow:

    return (
    <View style={[styles.flexRow, styles.highlightBG, styles.mh5, styles.mb3, styles.gap5, styles.br3, styles.p4, style]}>
    <View style={[styles.flexRow, styles.flex5, styles.gap3, styles.alignItemsCenter]}>

    We need to update these, so that blue border is applied correctly.

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

    We should have styles.selectionListPressableItemWrapper as the wrapping styles on the Pressable here

    We should update the view styles here

    <View style={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter, style]}>

    We should update the contentContainerStyle as styles.mb3 for the OfflineWithFeedback here

    We will do other small adjustments to clean up the styles.

    Branch here

    Result

    Screen.Recording.2024-07-05.at.2.56.00.AM.mov
  8. 9 remaining items

  9. added
    ReviewingHas a PR in review
    and removed on Jul 5, 2024
  10. allgandalf commented on Jul 10, 2024

    @allgandalf
    Contributor

    We can close this one out @mountiny , the PR was deployed to production, no payment here

  11. added
    Awaiting PaymentAuto-added when associated PR is deployed to production
    and removed on Jul 15, 2024
  12. changed the title [-]Expensify Card - Blue outline does not wrap the user row properly when navigating via Tab[/-] [+][HOLD for payment 2024-07-22] Expensify Card - Blue outline does not wrap the user row properly when navigating via Tab[/+] on Jul 15, 2024
  13. melvin-bot commented on Jul 15, 2024

    @melvin-bot

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

  14. melvin-bot commented on Jul 15, 2024

    @melvin-bot

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

    If no regressions arise, payment will be issued on 2024-07-22. 🎊

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions