-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[$500] Press highlight on a field in expense details overlaps with error message weirdly #34944
Comments
Triggered auto assignment to @JmillsExpensify ( |
Job added to Upwork: https://www.upwork.com/jobs/~01b61739c3e4f7859e |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel ( |
ProposalPlease re-state the problem that we are trying to solve in this issue.Press highlight on a field in expense details overlaps with error message weirdly What is the root cause of that problem?In the App/src/components/ViolationMessages.tsx Line 15 in 9c552ab
What changes do you think we should make in order to solve the problem?We should remove margin top. ResultResult with no negative margin: Result with children prop and updating some stylings: What alternative solutions did you explore? (Optional)
|
ProposalPlease re-state the problem that we are trying to solve in this issue.Highlighted area doesn't include the full row when there's an error message What is the root cause of that problem?The highlight style doesn't grow into full row when there's an error message. What changes do you think we should make in order to solve the problem?We should update the styling to flex the highlighted area based on the content, inccluding the error message What alternative solutions did you explore? (Optional) |
Proposal UpdatedIncluded more alternative options. |
Proposal UpdatedIncluded results screenshots & permalink. |
ProposalPlease re-state the problem that we are trying to solve in this issue.overlaps the error message weirdly What is the root cause of that problem?We have a negative margin here so the expense details overlaps the error violation message App/src/components/ViolationMessages.tsx Line 15 in 9c552ab
What changes do you think we should make in order to solve the problem?The reason for the negative margin is to decrease the space between the error and the menu description. But I think we can decrease the padding vertical of the menu description by adding Ref: #32594 (comment) App/src/components/ViolationMessages.tsx Line 15 in 9c552ab
What alternative solutions did you explore? (Optional)We can combine the violation message with line break and pass this into |
ProposalPlease re-state the problem that we are trying to solve in this issue.Error message out of hover frame What is the root cause of that problem?Inside MoneyRequestView we are displaying the error message via App/src/components/ReportActionItem/MoneyRequestView.js Lines 335 to 348 in 0bdbfbb
So when the hover/press effect change the color of the background, the zone where the message is displayed will not be effected. And because What changes do you think we should make in order to solve the problem?The App/src/components/MenuItem.tsx Lines 589 to 596 in 0bdbfbb
App/src/components/MenuItem.tsx Lines 134 to 138 in 0bdbfbb
We should pass the violation message throw it and remove <MenuItemWithTopDescription
description={translate('common.category')}
// ...
// we can use error or errorText
+ errorText="Error!" // will put violation message here mapped
/>
- {canUseViolations && <ViolationMessages violations={getViolationsForField('category')} />} Picking the righ props and code perfection can be discussed throw PR. What alternative solutions did you explore?Edit MenuItem to that props |
It's being fixed in #34303 |
Yeah |
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: 1.4.29-0
Reproducible in staging?: y
Reproducible in production?: y
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: @luacmartins
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1705808584924989
Action Performed:
Precondition : Have some violation rules for the expenses in the OD
Expected Result:
There should be no overlapping.
Actual Result:
overlaps the error message weirdly
Workaround:
Can the user still use Expensify without this being fixed? Have you informed them of the workaround?
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
View all open jobs on GitHub
Upwork Automation - Do Not Edit
The text was updated successfully, but these errors were encountered: