fix: uikit fixes and minor CSS updates intended for the v5.3.0 release

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/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: 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;

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() {

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;

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;
 

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 > * {

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

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;
 

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,