From 53d3842089bba2d7ccdfba7598ff4cdfd1c43c38 Mon Sep 17 00:00:00 2001
From: Jeane Carlos <volbohel@gmail.com>
Date: Tue, 16 Jul 2019 14:03:50 -0700
Subject: [PATCH] =?UTF-8?q?Bug=201563741=20-=20Keeping=20body=20scroll=20s?=
 =?UTF-8?q?tatic,=20but=20welcome=20modal=20centered=20=E2=80=A6=20(#5162)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Bug 1563741 - Keeping body scroll static, but welcome modal centered and scrollable

* Keeping content background static and allowing modal to scroll up and down window

* css typo

* Fixing test cases by mocking getElementById

* Checking existence of header for the cases where props.document isn't passed down
---
 .../components/ModalOverlay/ModalOverlay.jsx      | 15 +++++++++++++++
 .../components/ModalOverlay/_ModalOverlay.scss    | 14 +++++++++++++-
 .../asrouter/templates/Trailhead/_Trailhead.scss  |  2 +-
 test/unit/asrouter/ModalOverlay.test.jsx          |  6 ++++++
 4 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx b/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx
index 47c496d81..fa1fe5e9f 100644
--- a/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx
+++ b/content-src/asrouter/components/ModalOverlay/ModalOverlay.jsx
@@ -19,11 +19,26 @@ export class ModalOverlayWrapper extends React.PureComponent {
   componentWillMount() {
     this.props.document.addEventListener("keydown", this.onKeyDown);
     this.props.document.body.classList.add("modal-open");
+    this.header = this.props.document.getElementById(
+      "header-asrouter-container"
+    );
+
+    if (this.header) {
+      this.header.classList.add("modal-scroll");
+      this.props.document.getElementById("root").classList.add("modal-height");
+    }
   }
 
   componentWillUnmount() {
     this.props.document.removeEventListener("keydown", this.onKeyDown);
     this.props.document.body.classList.remove("modal-open");
+
+    if (this.header) {
+      this.header.classList.remove("modal-scroll");
+      this.props.document
+        .getElementById("root")
+        .classList.remove("modal-height");
+    }
   }
 
   render() {
diff --git a/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss b/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
index 13f444172..97b9c21f4 100644
--- a/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
+++ b/content-src/asrouter/components/ModalOverlay/_ModalOverlay.scss
@@ -19,6 +19,19 @@
   }
 }
 
+.modal-scroll {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+
+.modal-height {
+  // "Welcome header" has 40px of padding and 36px font size that get neglected using position absolute
+  // causing this to visually collide with the newtab searchbar
+  padding-top: 80px;
+}
+
 .modalOverlayInner {
   width: 960px;
   position: fixed;
@@ -30,7 +43,6 @@
   display: none;
   z-index: 1101;
 
-
   // modal takes over entire screen
   @media(max-width: 960px) {
     width: 100%;
diff --git a/content-src/asrouter/templates/Trailhead/_Trailhead.scss b/content-src/asrouter/templates/Trailhead/_Trailhead.scss
index 3fedd5eff..9a6eb68db 100644
--- a/content-src/asrouter/templates/Trailhead/_Trailhead.scss
+++ b/content-src/asrouter/templates/Trailhead/_Trailhead.scss
@@ -401,7 +401,7 @@
 
 .inline-onboarding {
   &.activity-stream.welcome {
-    overflow-y: scroll;
+    overflow-y: hidden;
   }
 
   .modalOverlayInner {
diff --git a/test/unit/asrouter/ModalOverlay.test.jsx b/test/unit/asrouter/ModalOverlay.test.jsx
index c801c3e75..0e4a07cb4 100644
--- a/test/unit/asrouter/ModalOverlay.test.jsx
+++ b/test/unit/asrouter/ModalOverlay.test.jsx
@@ -5,12 +5,18 @@ import React from "react";
 describe("ModalOverlayWrapper", () => {
   let fakeDoc;
   let sandbox;
+  let header;
   beforeEach(() => {
     sandbox = sinon.createSandbox();
+    header = document.createElement("div");
+
     fakeDoc = {
       addEventListener: sandbox.stub(),
       removeEventListener: sandbox.stub(),
       body: { classList: { add: sandbox.stub(), remove: sandbox.stub() } },
+      getElementById() {
+        return header;
+      },
     };
   });
   afterEach(() => {