Merge pull request #1097 from pattern-lab/fix/uikit-bug-fixes

Follow-up UIKit Fixes

Author: sghoweri

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;

packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss

@@ -73,7 +73,7 @@
 @mixin accordionPanel() {
   overflow: hidden;
   max-height: 0;
-  transition: max-height $pl-animate-quick ease-out;
+  transition: all $pl-animate-quick ease-out;
 
   /**
   * Active styles for when the accordion panel is open

packages/uikit-workshop/src/sass/scss/04-components/_breadcrumbs.scss

@@ -12,14 +12,15 @@
   margin-bottom: 0.5rem;
   display: flex;
   font-size: $pl-font-size-sm;
-  color: currentColor;
+  color: inherit;
   text-transform: capitalize;
 }
 
 /**
  * Breadcrumb Item
  */
 .pl-c-breadcrumb__item {
+  color: inherit;
   &:after {
     content: '\25b6';
     opacity: 0.4;

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: 0; // prevent panel from collapsing in height (especially on smaller screens like iPhone)
   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;

packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss

@@ -67,6 +67,7 @@
 
 .pl-c-tabs__header {
   position: sticky;
+  z-index: 1; // fix for Safari for iOS sticky header appearing to be below the scrollable content
   top: 0px;
   border-top: 1px solid #ddd;
   margin-left: calc(-0.5rem - 1px);

packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss

@@ -45,20 +45,6 @@
     }
   }
 
-  /**
-     * All Nav links inside of subnav dropdown
-     */
-
-  /**
-    * Last sublist item
-    */
-  .pl-c-nav__sublist > .pl-c-nav__item:last-child .pl-c-nav__link {
-    @media all and (min-width: $pl-bp-med) {
-      border-bottom-left-radius: $pl-border-radius-med;
-      border-bottom-right-radius: $pl-border-radius-med;
-    }
-  }
-
   /**
      * Size input
      */

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);
       }
     }
@@ -294,6 +293,14 @@ class Nav extends BaseComponent {
         this.navAccordionPanels.forEach(panel => {
           panel.classList.remove('pl-is-active');
         });
+      } else if (this.layoutMode === 'vertical' && window.innerWidth <= 670) {
+        this.navContainer.classList.remove('pl-is-active');
+        this.navAccordionTriggers.forEach(trigger => {
+          trigger.classList.remove('pl-is-active');
+        });
+        this.navAccordionPanels.forEach(panel => {
+          panel.classList.remove('pl-is-active');
+        });
       } else {
         this.navContainer.classList.remove('pl-is-active');
       }
@@ -326,24 +333,13 @@ 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');
+        this.previousActiveLinks.push(activeLink.parentNode);
       }
 
       const parentDropdown = activeLink.closest('.pl-js-acc-panel');
@@ -359,8 +355,8 @@ class Nav extends BaseComponent {
             ) &&
             shouldAutoOpenNav
           ) {
-            this.previousActiveLinks.push(parentDropdown.previousSibling);
             parentDropdown.previousSibling.classList.add('pl-is-active');
+            this.previousActiveLinks.push(parentDropdown.previousSibling);
             parentDropdownTrigger = parentDropdown.previousSibling.querySelector(
               '.pl-js-acc-handle'
             );
@@ -372,31 +368,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 +396,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() {