Improve scroll locking (#1449)

* Improve scroll locking when masked

* Fix cart css

* Fix cart item editor height

* Fix snapshot

* Fix checkbox styles in Safari

* Add min-height for braintree

* Scroll address form on checkbox change

* Remove billing form affix

* Fix page layout when masked

* Simplify CSS inheritance in checkout form

* Add max-height to checkout forms

packages/peregrine/lib/hooks/useScrollLock.js

@@ -0,0 +1,16 @@
+import { useLayoutEffect } from 'react';
+
+/**
+ * A [React Hook]{@link https://reactjs.org/docs/hooks-intro.html} that sets
+ * an attribute on the document element indicating that scrolling should be
+ * locked. This is performed with a layout effect (before paint).
+ *
+ * @kind function
+ *
+ * @param {Boolean} locked Whether scrolling should be locked.
+ */
+export const useScrollLock = locked => {
+    useLayoutEffect(() => {
+        document.documentElement.dataset.scrollLock = locked || '';
+    }, [locked]);
+};

packages/peregrine/lib/index.js

@@ -11,6 +11,7 @@ export { useQuery } from './hooks/useQuery';
 export { useQueryResult } from './hooks/useQueryResult';
 export { useRestApi } from './hooks/useRestApi';
 export { useRestResponse } from './hooks/useRestResponse';
+export { useScrollLock } from './hooks/useScrollLock';
 export { useSearchParam } from './hooks/useSearchParam';
 export {
     WindowSizeContextProvider,

packages/venia-concept/src/components/Checkbox/checkbox.css

@@ -24,6 +24,7 @@
 }
 
 .input {
+    background: none;
     border: 1px solid rgb(var(--venia-text));
     border-radius: 2px;
     display: inline-flex;

packages/venia-concept/src/components/Checkout/__tests__/__snapshots__/cart.spec.js.snap

@@ -4,50 +4,46 @@ exports[`renders a Cart component 1`] = `
 <div
   className="root"
 >
-  <div
-    className="footer"
+  <button
+    className="root_highPriority"
+    disabled={false}
+    onClick={[MockFunction]}
+    type="button"
   >
-    <button
-      className="root_highPriority"
-      disabled={false}
-      onClick={[MockFunction]}
-      type="button"
+    <span
+      className="content"
     >
       <span
-        className="content"
+        className="root"
       >
-        <span
-          className="root"
+        <svg
+          fill="none"
+          height={16}
+          stroke="currentColor"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+          viewBox="0 0 24 24"
+          width={16}
+          xmlns="http://www.w3.org/2000/svg"
         >
-          <svg
-            fill="none"
-            height={16}
-            stroke="currentColor"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="2"
-            viewBox="0 0 24 24"
-            width={16}
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect
-              height="11"
-              rx="2"
-              ry="2"
-              width="18"
-              x="3"
-              y="11"
-            />
-            <path
-              d="M7 11V7a5 5 0 0 1 10 0v4"
-            />
-          </svg>
-        </span>
-        <span>
-          Checkout
-        </span>
+          <rect
+            height="11"
+            rx="2"
+            ry="2"
+            width="18"
+            x="3"
+            y="11"
+          />
+          <path
+            d="M7 11V7a5 5 0 0 1 10 0v4"
+          />
+        </svg>
       </span>
-    </button>
-  </div>
+      <span>
+        Checkout
+      </span>
+    </span>
+  </button>
 </div>
 `;

packages/venia-concept/src/components/Checkout/__tests__/__snapshots__/paymentsForm.spec.js.snap

@@ -501,6 +501,7 @@ exports[`renders billing address fields if addresses_same checkbox unchecked 1`]
         />
       </div>
     </div>
+    <span />
   </div>
   <div
     className="footer"

packages/venia-concept/src/components/Checkout/addressForm.css

@@ -1,24 +1,16 @@
 .root {
 }
 
-.body {
-    composes: body from './form.css';
-    grid-gap: 0.5rem;
-    padding: 0 1.5rem;
+.heading {
+    composes: heading from './flow.css';
 }
 
-.footer {
-    composes: footer from './form.css';
+.body {
+    composes: body from './flow.css';
 }
 
-.heading {
-    font-size: 0.875rem;
-    font-weight: 600;
-    grid-column-end: span 2;
-    line-height: 1rem;
-    padding: 0.75rem 0;
-    text-align: center;
-    text-transform: uppercase;
+.footer {
+    composes: footer from './flow.css';
 }
 
 /* fields */

packages/venia-concept/src/components/Checkout/cart.js

@@ -13,9 +13,7 @@ const Cart = props => {
 
     return (
         <div className={classes.root}>
-            <div className={classes.footer}>
-                <CheckoutButton disabled={disabled} onClick={beginCheckout} />
-            </div>
+            <CheckoutButton disabled={disabled} onClick={beginCheckout} />
         </div>
     );
 };

packages/venia-concept/src/components/Checkout/flow.css

@@ -1,17 +1,34 @@
 .root {
-    --flow-footer-height: 5.5rem;
     position: relative;
 }
 
+.heading {
+    background-color: white;
+    font-size: 0.875rem;
+    font-weight: 600;
+    grid-column-end: span 2;
+    line-height: 1rem;
+    padding: 1.5rem 0 1.25rem;
+    text-align: center;
+    text-transform: uppercase;
+    top: 0;
+    z-index: 1;
+}
+
 .body {
+    align-content: start;
     animation-duration: 224ms;
     animation-iteration-count: 1;
     animation-name: enter;
     background-color: white;
-    bottom: var(--flow-footer-height);
+    bottom: 5rem;
     box-shadow: 0 -1px rgb(var(--venia-border));
     display: grid;
+    grid-gap: 0.5rem;
     left: 0;
+    max-height: calc(100vh - 8.5rem);
+    overflow: auto;
+    padding: 0 1.5rem;
     position: absolute;
     right: 0;
 }
@@ -23,11 +40,9 @@
     grid-auto-columns: min-content;
     grid-auto-flow: column;
     grid-gap: 0.75rem;
-    height: var(--flow-footer-height);
+    height: 5rem;
     justify-content: center;
     justify-items: center;
-    margin: 0 1.5rem;
-    padding: 1.5rem 0 1rem;
     position: relative;
 }
 

packages/venia-concept/src/components/Checkout/form.css

@@ -3,6 +3,8 @@
 
 .body {
     composes: body from './flow.css';
+    grid-gap: 0;
+    padding: 0;
 }
 
 .footer {

packages/venia-concept/src/components/Checkout/paymentsForm.css

@@ -1,30 +1,17 @@
 .root {
 }
 
-.body {
-    composes: body from './form.css';
-    grid-gap: 0.5rem;
-    height: calc(
-        var(--minicart-height) - var(--flow-footer-height) -
-            var(--minicart-footer-padding-bottom)
-    );
-    overflow-y: scroll;
-    padding: 0 1.5rem;
-    grid-auto-rows: max-content;
+.heading {
+    composes: heading from './flow.css';
 }
 
-.footer {
-    composes: footer from './form.css';
+.body {
+    composes: body from './flow.css';
+    height: 30rem;
 }
 
-.heading {
-    font-size: 0.875rem;
-    font-weight: 600;
-    grid-column-end: span 2;
-    line-height: 1rem;
-    padding: 0.75rem 0;
-    text-align: center;
-    text-transform: uppercase;
+.footer {
+    composes: footer from './flow.css';
 }
 
 .button {
@@ -64,6 +51,10 @@
     grid-column-end: span 2;
 }
 
+.braintree {
+    min-height: 356px;
+}
+
 .validation {
     color: rgb(var(--venia-error));
     font-size: 0.8125rem;
@@ -85,3 +76,7 @@
 [data-braintree-id='upper-container'] {
     z-index: unset;
 }
+
+:global .braintree-placeholder {
+    display: none;
+}

packages/venia-concept/src/components/Checkout/paymentsFormItems.js

@@ -1,4 +1,4 @@
-import React, { useCallback, Fragment } from 'react';
+import React, { Fragment, useCallback, useEffect, useRef } from 'react';
 import { useFormState } from 'informed';
 import { array, bool, func, shape, string } from 'prop-types';
 
@@ -37,8 +37,10 @@ const PaymentsFormItems = props => {
     // If they resolve it or we move away from informed we can probably get some
     // extra performance.
     const formState = useFormState();
+    const anchorRef = useRef(null);
+    const addressDiffers = formState.values.addresses_same === false;
 
-    const billingAddressFields = !formState.values.addresses_same ? (
+    const billingAddressFields = addressDiffers ? (
         <Fragment>
             <div className={classes.firstname}>
                 <Field label="First Name">
@@ -116,6 +118,7 @@ const PaymentsFormItems = props => {
                     />
                 </Field>
             </div>
+            <span ref={anchorRef} />
         </Fragment>
     ) : null;
 
@@ -159,6 +162,19 @@ const PaymentsFormItems = props => {
         [formState.values, setIsSubmitting, submit]
     );
 
+    // When the address checkbox is unchecked, additional fields are rendered.
+    // This causes the form to grow, and potentially to overflow, so the new
+    // fields may go unnoticed. To reveal them, we scroll them into view.
+    useEffect(() => {
+        if (addressDiffers) {
+            const { current: element } = anchorRef;
+
+            if (element instanceof HTMLElement) {
+                element.scrollIntoView({ behavior: 'smooth' });
+            }
+        }
+    }, [addressDiffers]);
+
     return (
         <Fragment>
             <div className={classes.body}>

packages/venia-concept/src/components/Checkout/shippingForm.css

@@ -1,24 +1,16 @@
 .root {
 }
 
-.body {
-    composes: body from './form.css';
-    grid-gap: 0.5rem;
-    padding: 0 1.5rem;
+.heading {
+    composes: heading from './flow.css';
 }
 
-.footer {
-    composes: footer from './form.css';
+.body {
+    composes: body from './flow.css';
 }
 
-.heading {
-    font-size: 0.875rem;
-    font-weight: 600;
-    grid-column-end: span 2;
-    line-height: 1rem;
-    padding: 0.75rem 0;
-    text-align: center;
-    text-transform: uppercase;
+.footer {
+    composes: footer from './flow.css';
 }
 
 /* fields */

packages/venia-concept/src/components/Main/main.css

@@ -7,8 +7,6 @@
 
 .root_masked {
     composes: root;
-    height: 100vh;
-    overflow: hidden;
 }
 
 .page {