Fix MiniCart Interaction Blocking #2547

supernova-at · 2020-07-10T17:36:36Z

Description

When closed, the MiniCart was blocking interactions on the page behind it.
This PR moves the MiniCart offscreen when it is closed to avoid this behavior.

Alternative solutions:

We purposefully don't want to unmount / remount it.
Since we're animating visibility we can't switch to using display either because CSS can't animate the display property

Related Issue

Closes PWA-743 / #2546 .

Acceptance

Verification Stakeholders

Specification

Verification Steps

Go to a Product Detail Page (PDP)
Open the MiniCart
Take note of page elements that it covers (color swatches most likely)
Close the MiniCart
Verify that you can interact with the elements an open MiniCart covers up

Screenshots / Screen Captures (if appropriate)

Checklist

I have added tests to cover my changes, if necessary.

I have updated the documentation accordingly, if necessary.

supernova-at · 2020-07-10T17:44:40Z

packages/venia-ui/lib/components/MiniCart/miniCart.css

@@ -11,6 +11,7 @@
    visibility: hidden;

    /* It animates to being closed. */
+    transform: scale(0);
    transition-duration: 192ms;
    transition-timing-function: var(--venia-global-anim-out);
    transition-property: opacity, visibility;


Note that transform is purposefully omitted from the transition-property: we don't want to animate the growing and shrinking.

Wasn't there supposed to be a little bit of translation going on here, though? I'd swear we had something like transform: translate3d(0, -0.5rem, 0).

edit: the translation I'm thinking of is on a child element, not this one, so ignore the above.

Anyway, generally I'd like to leave transform on the table for animation without known bugs waiting to happen if it's used. Could we just use positioning (left: 100vw) or something?

PWAStudioBot · 2020-07-10T17:51:42Z

	Fails
🚫	A version label is required. A maintainer must add one.

	Messages
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Associated JIRA tickets: PWA-743.

Generated by 🚫 dangerJS against 14fa251

jimbo · 2020-07-10T17:54:49Z

packages/venia-ui/lib/components/MiniCart/miniCart.css

@@ -11,6 +11,7 @@
    visibility: hidden;

    /* It animates to being closed. */
+    transform: scale(0);
    transition-duration: 192ms;
    transition-timing-function: var(--venia-global-anim-out);
    transition-property: opacity, visibility;


Wasn't there supposed to be a little bit of translation going on here, though? I'd swear we had something like transform: translate3d(0, -0.5rem, 0).

edit: the translation I'm thinking of is on a child element, not this one, so ignore the above.

Anyway, generally I'd like to leave transform on the table for animation without known bugs waiting to happen if it's used. Could we just use positioning (left: 100vw) or something?

devops-pwa-codebuild · 2020-07-10T17:58:59Z

Performance Test Results

The following fails have been reported by WebpageTest. These numbers indicates a possible performance issue with the PR which requires further manual testing to validate.

https://pr-2547.pwa-venia.com : LH Performance Expected 0.85 Actual 0.52, LH Best Practices Expected 1 Actual 0.92, WPT Cache Expected 90 Actual 83.333333333333
https://pr-2547.pwa-venia.com/venia-tops.html : LH Performance Expected 0.75 Actual 0.36, LH Best Practices Expected 1 Actual 0.92
https://pr-2547.pwa-venia.com/valeria-two-layer-tank.html : LH Performance Expected 0.8 Actual 0.41, LH Accessibility Expected 0.9 Actual 0.89, LH Best Practices Expected 1 Actual 0.92, WPT Cache Expected 65 Actual 50

dpatil-magento · 2020-07-14T17:26:46Z

@supernova-at MFTF test failed again on one scenario. Able to reproduce locally too.

Set browser width to 1280px.
Add 2 configurable products to cart
Go to Cart page and observe Proceed to Checkout button.

Issue - Middle portion of button is not clickable because mini cart image swatch overlapping it mostly.

jimbo · 2020-07-14T20:45:37Z

packages/venia-ui/lib/components/MiniCart/miniCart.css

@@ -49,7 +49,7 @@
    overflow: hidden;
    padding: 1rem;
    position: fixed;
-    right: 0.5rem;
+    right: -100vw;


Hmm, this doesn't feel like the solution. I think the problem here is that both .root and .contents have position: fixed, which is relative to the viewport. The latter should probably have position: absolute, so that it's relative to the former. That way, when the parent moves offscreen, it'll take the child with it.

.root position: fixed .contents position: absolute

Awesome, thanks. Resolved in c9812fd.

…cart_block

Shrink MiniCart when it is closed

9283d06

m2-community-project bot added this to Ready for Review in Pull Request Progress Jul 10, 2020

supernova-at commented Jul 10, 2020

View reviewed changes

m2-community-project bot assigned supernova-at Jul 10, 2020

m2-community-project bot moved this from Ready for Review to Review in Progress in Pull Request Progress Jul 10, 2020

m2-community-project bot added the Progress: review label Jul 10, 2020

sirugh previously approved these changes Jul 10, 2020

View reviewed changes

m2-community-project bot assigned sirugh Jul 10, 2020

m2-community-project bot moved this from Review in Progress to Reviewer Approved in Pull Request Progress Jul 10, 2020

m2-community-project bot added Progress: approved and removed Progress: review labels Jul 10, 2020

PWAStudioBot added the pkg:venia-ui label Jul 10, 2020

jimbo suggested changes Jul 10, 2020

View reviewed changes

m2-community-project bot assigned jimbo Jul 10, 2020

m2-community-project bot moved this from Reviewer Approved to Changes Requested in Pull Request Progress Jul 10, 2020

m2-community-project bot added Progress: changes requested and removed Progress: approved labels Jul 10, 2020

Switches to using left instead of scale

7dc4fe6

supernova-at dismissed sirugh’s stale review via 7dc4fe6 July 10, 2020 18:08

revanth0212 previously approved these changes Jul 13, 2020

View reviewed changes

m2-community-project bot assigned revanth0212 Jul 13, 2020

m2-community-project bot moved this from Changes Requested to Reviewer Approved in Pull Request Progress Jul 13, 2020

m2-community-project bot added Progress: approved and removed Progress: changes requested labels Jul 13, 2020

sirugh mentioned this pull request Jul 13, 2020

[bug]: Minicart container is preventing filters to be used on category pages #2546

Closed

8 tasks

jimbo previously approved these changes Jul 13, 2020

View reviewed changes

supernova-at and others added 2 commits July 14, 2020 08:47

Merge branch 'develop' into supernova/743_minicart_block

e2fc230

Merge branch 'develop' into supernova/743_minicart_block

ca0d59f

Positions MiniCart contents container offscreen as well

59485e7

supernova-at dismissed stale reviews from jimbo and revanth0212 via 59485e7 July 14, 2020 17:45

revanth0212 previously approved these changes Jul 14, 2020

View reviewed changes

jimbo suggested changes Jul 14, 2020

View reviewed changes

dpatil-magento mentioned this pull request Jul 15, 2020

Update MFTF to latest magento/pwa-tests#44

Merged

supernova-at added 2 commits July 15, 2020 11:10

Changes contents to position absolute

c9812fd

Merge remote-tracking branch 'origin/develop' into supernova/743_mini…

14fa251

…cart_block

supernova-at dismissed revanth0212’s stale review via 14fa251 July 15, 2020 16:47

jimbo approved these changes Jul 15, 2020

View reviewed changes

sirugh self-requested a review July 15, 2020 18:21

sirugh approved these changes Jul 15, 2020

View reviewed changes

dpatil-magento merged commit 935141a into develop Jul 15, 2020

dpatil-magento deleted the supernova/743_minicart_block branch July 15, 2020 19:10

m2-community-project bot moved this from Reviewer Approved to Done in Pull Request Progress Jul 15, 2020

m2-community-project bot removed the Progress: approved label Jul 15, 2020

dpatil-magento mentioned this pull request Jul 16, 2020

Mini Cart V2 / Shopping Bag header component. #2509

Merged

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix MiniCart Interaction Blocking #2547

Fix MiniCart Interaction Blocking #2547

supernova-at commented Jul 10, 2020 •

edited

supernova-at Jul 10, 2020 •

edited

jimbo Jul 10, 2020 •

edited

PWAStudioBot commented Jul 10, 2020 •

edited

jimbo Jul 10, 2020 •

edited

devops-pwa-codebuild commented Jul 10, 2020 •

edited

dpatil-magento commented Jul 14, 2020

jimbo Jul 14, 2020

supernova-at Jul 15, 2020

Fix MiniCart Interaction Blocking #2547

Fix MiniCart Interaction Blocking #2547

Conversation

supernova-at commented Jul 10, 2020 • edited

Description

Related Issue

Acceptance

Verification Stakeholders

Specification

Verification Steps

Screenshots / Screen Captures (if appropriate)

Checklist

supernova-at Jul 10, 2020 • edited

Choose a reason for hiding this comment

jimbo Jul 10, 2020 • edited

Choose a reason for hiding this comment

PWAStudioBot commented Jul 10, 2020 • edited

jimbo Jul 10, 2020 • edited

Choose a reason for hiding this comment

devops-pwa-codebuild commented Jul 10, 2020 • edited

dpatil-magento commented Jul 14, 2020

jimbo Jul 14, 2020

Choose a reason for hiding this comment

supernova-at Jul 15, 2020

Choose a reason for hiding this comment

supernova-at commented Jul 10, 2020 •

edited

supernova-at Jul 10, 2020 •

edited

jimbo Jul 10, 2020 •

edited

PWAStudioBot commented Jul 10, 2020 •

edited

jimbo Jul 10, 2020 •

edited

devops-pwa-codebuild commented Jul 10, 2020 •

edited