From 26c4ceddaae09fa4fa4873f092c924274498c5da Mon Sep 17 00:00:00 2001
From: Salem Ghoweri <me@salemghoweri.com>
Date: Tue, 12 Nov 2019 22:27:14 -0500
Subject: [PATCH] fix: uikit fixes and minor CSS updates intended for the
 v5.3.0 release

---
 .../uikit-workshop/src/sass/pattern-lab.scss  |   5 +-
 .../sass/scss/04-components/_breadcrumbs.scss |   3 +-
 .../scss/04-components/_pattern-info.scss     |  27 +++--
 .../src/scripts/components/pl-nav/pl-nav.js   | 114 ++----------------
 .../src/scripts/components/pl-nav/pl-nav.scss |   2 +
 .../lit-components/pl-button/pl-button.scss   |   4 +
 .../lit-components/pl-drawer/pl-drawer.scss   |   1 +
 .../lit-components/pl-header/pl-header.scss   |   1 +
 .../lit-components/pl-logo/pl-logo.scss       |   2 +-
 .../pl-toggle-layout/pl-toggle-layout.scss    |   6 +-
 .../pl-tools-menu/pl-tools-menu.scss          |   2 +-
 .../pl-viewport-size-list.scss                |   2 +
 .../pl-viewport/pl-viewport.scss              |  45 ++++---
 .../src/scripts/patternlab-pattern.js         |   3 +
 14 files changed, 75 insertions(+), 142 deletions(-)

diff --git a/packages/uikit-workshop/src/sass/pattern-lab.scss b/packages/uikit-workshop/src/sass/pattern-lab.scss
index 959529f50..93b6c9613 100755
--- a/packages/uikit-workshop/src/sass/pattern-lab.scss
+++ b/packages/uikit-workshop/src/sass/pattern-lab.scss
@@ -43,7 +43,6 @@
 /*------------------------------------*\
     #COMPONENTS
 \*------------------------------------*/
-
 @import '../scripts/components/pl-nav/pl-nav.scss';
 @import '../scripts/components/pl-search/pl-search.scss';
 @import '../scripts/components/pl-tooltip/pl-tooltip.scss';
@@ -112,6 +111,10 @@
   }
 }
 
+.pl-c-body {
+  overflow: hidden;
+}
+
 .pl-c-main {
   overflow: hidden;
   max-width: 100vw;
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss
index 794fac486..02ff2d5ab 100644
--- a/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss
+++ b/packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss
@@ -12,7 +12,7 @@
   margin-bottom: 0.5rem;
   display: flex;
   font-size: $pl-font-size-sm;
-  color: currentColor;
+  color: inherit;
   text-transform: capitalize;
 }
 
@@ -20,6 +20,7 @@
  * Breadcrumb Item
  */
 .pl-c-breadcrumb__item {
+  color: inherit;
   &:after {
     content: '\25b6';
     opacity: 0.4;
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss
index 03616a62d..5b5450338 100644
--- a/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss
+++ b/packages/uikit-workshop/src/sass/scss/04-components/_pattern-info.scss
@@ -19,12 +19,13 @@
   .pl-c-pattern & {
     max-height: 30rem;
     overflow: scroll;
-    display: flex;
+    display: block;
     -webkit-overflow-scrolling: touch;
 
     @media all and (min-width: $pl-bp-large) {
       max-height: none;
       height: 18rem;
+      display: flex;
       flex-direction: row;
       overflow: visible;
     }
@@ -52,16 +53,19 @@
  *    Right side contains pattern code
  */
 .pl-c-pattern-info__panel {
-  padding: 1rem;
-  width: auto;
-  flex-shrink: 0;
+  padding: .5rem;
+  flex-shrink: 1;
   display: flex;
   flex-direction: column;
 
+  pl-drawer & {
+    padding: 1rem;
+  }
+
   @media all and (min-width: $pl-bp-large) {
     flex-basis: 50%;
     flex-grow: 1;
-    overflow: auto;
+    padding: 1.5rem;
   }
 }
 
@@ -77,7 +81,7 @@
   }
 
   @media all and (min-width: $pl-bp-xl) {
-    width: 55%;
+    min-width: 50%;
   }
 }
 
@@ -92,11 +96,14 @@
 .pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code,
 .pl-c-pattern-info__panel--code:first-child {
   flex-grow: 1;
-  flex-shrink: 1;
+  flex-shrink: 0; // so the code panel doesn't get chopped off accidently
+  min-width: 50%;
 }
 
-.pl-c-pattern-info__panel--code:first-child {
-  padding-top: 0;
+.pl-c-pattern-info__panel--info + .pl-c-pattern-info__panel--code {
+  @media all and (max-width: $pl-bp-large) {
+    padding-top: 0;
+  }
 }
 
 /**
@@ -111,7 +118,7 @@
  */
 .pl-c-pattern-info__title {
   font-size: 1.4rem !important;
-  font-weight: normal;
+  font-weight: bold;
   margin-top: 0;
   margin-bottom: 0;
   color: inherit;
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
index 4d2434725..f73ed913c 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.js
@@ -187,7 +187,6 @@ class Nav extends BaseComponent {
       e.target.closest('pl-toggle-layout') === null
     ) {
       if (this.layoutMode !== 'vertical' && window.innerWidth > 670) {
-        console.log('handlePageClick + cleaning up...');
         this.cleanupActiveNav(true);
       }
     }
@@ -326,24 +325,12 @@ class Nav extends BaseComponent {
       activeLink.classList.add('pl-is-active');
       this.previousActiveLinks.push(activeLink);
 
-      // handle overview links vs nested links
-      if (activeLink.classList.contains('pl-js-link-overview')) {
-        const childDropdownTrigger = activeLink.nextSibling;
-        const childDropdown = activeLink.parentNode.nextSibling;
-
-        if (childDropdown && shouldAutoOpenNav) {
-          if (childDropdown.tagName) {
-            childDropdown.classList.add('pl-is-active');
-            this.previousActiveLinks.push(childDropdown);
-          }
-        }
-
-        if (childDropdownTrigger && shouldAutoOpenNav) {
-          if (childDropdownTrigger.tagName) {
-            childDropdownTrigger.classList.add('pl-is-active');
-            this.previousActiveLinks.push(childDropdownTrigger);
-          }
-        }
+      if (
+        activeLink.parentNode.classList.contains(
+          'pl-c-nav__link--overview-wrapper'
+        )
+      ) {
+        activeLink.parentNode.classList.add('pl-is-active');
       }
 
       const parentDropdown = activeLink.closest('.pl-js-acc-panel');
@@ -372,31 +359,6 @@ class Nav extends BaseComponent {
           const grandparentDropdownTrigger =
             grandparentDropdown.previousSibling;
 
-          if (parentDropdown && shouldAutoOpenNav) {
-            parentDropdown.classList.add('pl-is-active');
-            this.previousActiveLinks.push(parentDropdown);
-          }
-
-          // don't auto-open
-          if (parentDropdownTrigger) {
-            if (
-              shouldAutoOpenNav === true ||
-              parentDropdownTrigger.classList.contains(
-                'pl-c-nav__link--title'
-              ) === false
-            ) {
-              parentDropdownTrigger.classList.add('pl-is-active');
-              this.previousActiveLinks.push(parentDropdownTrigger);
-            }
-          }
-
-          if (grandparentDropdown && shouldAutoOpenNav) {
-            if (shouldAutoOpenNav) {
-              grandparentDropdown.classList.add('pl-is-active');
-            }
-            this.previousActiveLinks.push(grandparentDropdown);
-          }
-
           if (grandparentDropdownTrigger && shouldAutoOpenNav) {
             if (shouldAutoOpenNav) {
               grandparentDropdownTrigger.classList.add('pl-is-active');
@@ -425,72 +387,12 @@ class Nav extends BaseComponent {
 
   toggleSpecialNavPanel(e) {
     const target = e.target;
-    const panel = target.parentNode.nextSibling;
-    const subnav = panel.parentNode.parentNode.classList.contains(
-      'pl-js-acc-panel'
-    );
-
-    if (!subnav) {
-      const navTriggers = document.querySelectorAll(
-        `.pl-js-acc-handle.pl-is-active`
-      );
-      const navPanels = document.querySelectorAll(
-        `.pl-js-acc-panel.pl-is-active`
-      );
-
-      navTriggers.forEach(navTrigger => {
-        if (navTrigger !== target) {
-          navTrigger.classList.remove('pl-is-active');
-        }
-      });
-
-      navPanels.forEach(navPanel => {
-        if (navPanel !== target) {
-          navPanel.classList.remove('pl-is-active');
-        }
-      });
-    }
-
-    if (target.classList.contains('pl-is-active')) {
-      target.classList.remove('pl-is-active');
-      panel.classList.remove('pl-is-active');
-    } else {
-      target.classList.add('pl-is-active');
-      panel.classList.add('pl-is-active');
-    }
+    target.parentNode.classList.toggle('pl-is-active');
   }
 
   toggleNavPanel(e) {
     const target = e.target;
-    const panel = target.nextSibling;
-    const subnav = target.parentNode.parentNode.classList.contains(
-      'pl-js-acc-panel'
-    );
-
-    if (!subnav) {
-      const navTriggers = document.querySelectorAll('.pl-js-acc-handle');
-      const navPanels = document.querySelectorAll('.pl-js-acc-panel');
-
-      navTriggers.forEach(navTrigger => {
-        if (navTrigger !== target) {
-          navTrigger.classList.remove('pl-is-active');
-        }
-      });
-
-      navPanels.forEach(navPanel => {
-        if (navPanel !== target) {
-          navPanel.classList.remove('pl-is-active');
-        }
-      });
-    }
-
-    if (target.classList.contains('pl-is-active')) {
-      target.classList.remove('pl-is-active');
-      panel.classList.remove('pl-is-active');
-    } else {
-      target.classList.add('pl-is-active');
-      panel.classList.add('pl-is-active');
-    }
+    target.classList.toggle('pl-is-active');
   }
 
   rendered() {
diff --git a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss
index 85c2fb5b1..b823b219d 100644
--- a/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss
+++ b/packages/uikit-workshop/src/scripts/components/pl-nav/pl-nav.scss
@@ -312,6 +312,7 @@ pl-nav {
     .pl-c-body--theme-sidebar & {
       border-width: 0;
       transform: none;
+      box-shadow: none;
     }
 
     .pl-c-body--theme-light & {
@@ -556,6 +557,7 @@ pl-nav {
 .pl-is-active + .pl-js-acc-panel {
   visibility: visible;
   max-height: none;
+  transform: translateY(0);
 
   .pl-c-body--theme-horizontal & {
     overflow: auto;
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss
index 2a7d5065a..176e1c76a 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-button/pl-button.scss
@@ -12,6 +12,10 @@ pl-button {
   @include buttonStyles;
 }
 
+.pl-c-button__text {
+  text-align: left;
+}
+
 .pl-c-button--medium {
   padding: 0.65rem 1rem;
 
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss
index 34cac9502..8357db166 100755
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss
@@ -62,6 +62,7 @@ pl-drawer {
   will-change: height;
   overflow: hidden;
   margin-top: calc(#{$pl-drawer-resizer-height * -1} + 1px);
+  padding-top: $pl-drawer-resizer-height;
 }
 
 .pl-c-drawer__wrapper > * {
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss
index 712c03030..9aeec3d62 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss
@@ -31,6 +31,7 @@ pl-header {
     .pl-c-body--theme-sidebar & {
       position: fixed;
       position: sticky;
+      overflow: auto;
     /**
       * Header
       * 1) Set width to sidebar width defined above
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss
index b1ae2493d..f5e975426 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-logo/pl-logo.scss
@@ -49,7 +49,7 @@ pl-logo {
 
 .pl-c-logo__img {
   display: block;
-  height: auto;
+  height: 100%; // fix to address scaling issue in ie 11 on windows 7
   max-width: 100%;
   max-height: 23px;
 
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss
index f9c6a9cab..b3596bd05 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-toggle-layout/pl-toggle-layout.scss
@@ -1,17 +1,13 @@
 @import '../../../sass/scss/core.scss';
 
 pl-toggle-layout {
-  display: none;
+  display: flex;
   align-self: center;
   justify-content: center;
   align-items: center;
   z-index: 10;
   width: 100%;
   cursor: pointer;
-
-  @media all and (min-width: $pl-bp-med) {
-    display: flex;
-  }
 }
 
 .pl-c-toggle-layout,
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.scss
index d445f8045..cb71721e6 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-tools-menu/pl-tools-menu.scss
@@ -28,7 +28,7 @@ pl-tools-menu {
   @include listReset();
   transform: translateY(-10px);
   position: absolute;
-  right: 4px;
+  right: 5px;
   z-index: 10; // make sure context dropdown z-index is higher than nav dropdown z-index
   width: 12rem;
   border-radius: 6px;
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss
index 2b74c6248..e4366fe08 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport-size-list/pl-viewport-size-list.scss
@@ -17,6 +17,7 @@ pl-viewport-sizes {
   margin: 0;
   padding: 0;
   overflow-x: auto;
+  padding: 0 0.25rem;
 
   @media all and (min-width: $pl-bp-med) {
     align-items: center;
@@ -36,6 +37,7 @@ pl-viewport-sizes {
  */
 .pl-c-size-list__action {
   @include buttonStyles;
+  display: inline-block; // workaround to fix valign issues in IE 11
   min-height: 35px;
   min-width: 0;
   padding-left: 0.35rem;
diff --git a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss
index 6feb8005a..7961f28db 100644
--- a/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss
+++ b/packages/uikit-workshop/src/scripts/lit-components/pl-viewport/pl-viewport.scss
@@ -11,11 +11,16 @@
 */
 
 $pl-resizer-width: 20px;
+$pl-viewport-bg: #F4F4F4;
+
+.pl-c-viewport-modal-wrapper {
+  background-color: $pl-viewport-bg;
+}
 
 pl-iframe {
   display: flex;
   flex-grow: 1;
-  background-color: $pl-color-white;
+  background-color: $pl-viewport-bg;
 }
 
 /**
@@ -76,7 +81,7 @@ pl-iframe {
   -webkit-overflow-scrolling: touch;
   min-width: 240px;
   max-width: 100vw;
-  background: white;
+  background: $pl-viewport-bg;
   padding-right: $pl-resizer-width;
   padding-left: $pl-resizer-width;
   // box-shadow: 0 3px 6px rgba(21,22,25,.16), 0 3px 6px rgba(21,22,25,.23);
@@ -118,8 +123,6 @@ pl-iframe {
   // padding-right: 10px;
   overflow: hidden;
   // border: 1px solid #CCC;
-  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 5px 0px;
-  margin: $pl-resizer-width 0;
   border-radius: 5px;
 
   &.is-ready {
@@ -174,24 +177,32 @@ pl-iframe {
   display: flex;
   justify-content: center;
   align-items: center;
-
-  &:hover:after,
-  &.is-resizing:after {
-    background-color: #F6F6F9;
-  }
+  transition: background .3s cubic-bezier(.25,.8,.25,1)!important;
+  cursor: ew-resize;
+  background-color: $pl-viewport-bg;
 
   &:after {
     content: '';
-    transition: .3s cubic-bezier(.25,.8,.25,1)!important;
-    cursor: ew-resize;
-    display: flex;
-    justify-content: center;
     height: 100%;
-    align-items: center;
-    position: fixed;
+    width: 100%;
+    left: 0;
+    opacity: 0;
     top: 0;
-    bottom: 0;
-    width: $pl-resizer-width;
+    position: absolute;
+    pointer-events: none;
+    display: block;
+    background-color: currentColor;
+    transition: .3s cubic-bezier(.25,.8,.25,1);
+  }
+
+  &.is-resizing:after,
+  &:hover:after {
+    opacity: 0.1;
+  }
+
+  &:focus:after,
+  &:active:after {
+    opacity: 0.2;
   }
 
   &:active {
diff --git a/packages/uikit-workshop/src/scripts/patternlab-pattern.js b/packages/uikit-workshop/src/scripts/patternlab-pattern.js
index a96aa1845..69e54dde4 100755
--- a/packages/uikit-workshop/src/scripts/patternlab-pattern.js
+++ b/packages/uikit-workshop/src/scripts/patternlab-pattern.js
@@ -1,4 +1,7 @@
 import 'regenerator-runtime/runtime';
+if (window.NodeList && !NodeList.prototype.forEach) {
+  NodeList.prototype.forEach = Array.prototype.forEach;
+}
 import '@pattern-lab/uikit-polyfills/platform/custom-event';
 import '@pattern-lab/uikit-polyfills/platform/symbol';
 import './components/modal-styleguide';