Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[Woo POS] Fix shadow clipping #12588

Draft
wants to merge 3 commits into
base: trunk
Choose a base branch
from
Draft

[Woo POS] Fix shadow clipping #12588

wants to merge 3 commits into from

Conversation

backwardstruck
Copy link
Contributor

@backwardstruck backwardstruck commented Sep 11, 2024 •
edited
Loading

Closes:

Closes: #12575

Description

Addresses the visual issue where the shadow at the top of the extended above the intended area. The shadow for the bottom of the LazyColumn was being applied within a Box and rotated, causing it to spill over.

Steps to reproduce

  1. Add a bunch of items to the POS cart.
  2. Scroll the list of products in the cart and observe the shadow at the top of the list.
  3. As discussed, "Top shadow for the cart list should be clipped (cut off or restricted) at the top, so it doesn’t extend beyond the intended area."
  4. Similarly, for the product list itself, scroll it down a bit.
  5. Observe that "This shadow also needs to be clipped at the top." is now fixed.

Testing information

  • Devices Used: tablet emulator.
  • Edge Cases:
    • Checked with a varying number of items.
    • Ensured shadows appear and disappear correctly based on scroll position.

Images/gif

Before:

Screenshot_20240917_162810

After:

Screenshot_20240917_162940

  • I have considered if this change warrants release notes and have added them to RELEASE-NOTES.txt if necessary. Use the "[Internal]" label for non-user-facing changes.

Reviewer (or Author, in the case of optional code reviews):

Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement:

  • The PR is small and has a clear, single focus, or a valid explanation is provided in the description. If needed, please request to split it into smaller PRs.
  • Ensure Adequate Unit Test Coverage: The changes are reasonably covered by unit tests or an explanation is provided in the PR description.
  • Manual Testing: The author listed all the tests they ran, including smoke tests when needed (e.g., for refactorings). The reviewer confirmed that the PR works as expected on big (tablet) and small (phone) in case of UI changes, and no regressions are added.

@backwardstruck
When withBottomShadow is set to true, the showBottomShadow logic trig…
fabd517 
…gers the addition of a shadow to the bottom of the LazyColumn. However, because this shadow is applied within the Box and flipped, it might be extending or spilling over in an unintended way, visually affecting both the top and bottom of the component.
@dangermattic
Copy link
Collaborator

1 Message
📖 This PR is still a Draft: some checks will be skipped.

Generated by 🚫 Danger

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Sep 11, 2024 •
edited
Loading

📲 You can test the changes from this Pull Request in WooCommerce-Wear Android by scanning the QR code below to install the corresponding build.
App Name WooCommerce-Wear Android
Platform⌚️ Wear OS
FlavorJalapeno
Build TypeDebug
Commitc778eb9
Direct Downloadwoocommerce-wear-prototype-build-pr12588-c778eb9.apk

@wpmobilebot
Copy link
Collaborator

wpmobilebot commented Sep 11, 2024 •
edited
Loading

📲 You can test the changes from this Pull Request in WooCommerce Android by scanning the QR code below to install the corresponding build.

App Name WooCommerce Android
Platform📱 Mobile
FlavorJalapeno
Build TypeDebug
Commitc778eb9
Direct Downloadwoocommerce-prototype-build-pr12588-c778eb9.apk

@codecov-commenter
Copy link

codecov-commenter commented Sep 11, 2024 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 40.61%. Comparing base (1c2cc6c) to head (c778eb9).
Report is 81 commits behind head on trunk.

Additional details and impacted files 
@@            Coverage Diff            @@
##              trunk   #12588   +/-   ##
=========================================
  Coverage     40.61%   40.61%           
  Complexity     5680     5680           
=========================================
  Files          1229     1229           
  Lines         69123    69123           
  Branches       9573     9573           
=========================================
  Hits          28074    28074           
  Misses        38466    38466           
  Partials       2583     2583

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@backwardstruck backwardstruck mentioned this pull request Sep 17, 2024
Open
@backwardstruck backwardstruck added category: design Layout and style elements in the UI or user interface, including color and animations. feature: point of sale POS project labels Sep 17, 2024
@backwardstruck backwardstruck added this to the 20.5 milestone Sep 17, 2024
@backwardstruck backwardstruck added the status: do not merge Dependent on another PR, ready for review but not ready for merge. label Sep 17, 2024
@wpmobilebot wpmobilebot modified the milestones: 20.5, 20.6 Sep 20, 2024
@wpmobilebot
Copy link
Collaborator

Version 20.5 has now entered code-freeze, so the milestone of this PR has been updated to 20.6.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
category: design Layout and style elements in the UI or user interface, including color and animations. feature: point of sale POS project status: do not merge Dependent on another PR, ready for review but not ready for merge.
Projects
None yet
Milestone
20.6
Development

Successfully merging this pull request may close these issues.

[Woo POS] Fix clipping issues
4 participants
@backwardstruck @dangermattic @wpmobilebot @codecov-commenter