boltdesignsystem · sghoweri · Oct 9, 2018 · Oct 9, 2018 · Oct 9, 2018 · Oct 9, 2018
diff --git a/apps/pattern-lab/src/index.js b/apps/pattern-lab/src/index.js
@@ -1,10 +1,10 @@
 import 'core-js/modules/es6.string.starts-with';
 import 'iframe-resizer/js/iframeResizer.contentWindow.min.js';
 
-// automatically remove the min-height default set to the body element when viewing PL pages from inside an iframe on the docs site.
+// automatically remove the min-height default set to the body element when viewing PL pages from inside an iframe on the docs site, but via a utility class
 window.iFrameResizer = {
   readyCallback() {
-    document.body.setAttribute('style', 'min-height: 0;');
+    document.body.classList.add('u-bolt-min-height-none');
   },
 };
 

diff --git a/packages/global/styles/04-elements/_elements-page.scss b/packages/global/styles/04-elements/_elements-page.scss
@@ -20,7 +20,6 @@ body {
 
   // help ensure short pages (those not using `.c-bolt-site`) are tall enough.  Super important when dealing with components with 
   // click event handlers on the body (and the body isn't automatically tall enough based on the content contained inside
-  min-height: 100vh;
   width: 100%;
   margin: 0;
   color: bolt-color(indigo, xdark);

diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json
@@ -70,6 +70,7 @@
     "access": "public"
   },
   "dependencies": {
+    "iframe-resizer": "^3.6.2",
     "@reach/visually-hidden": "^0.1.1",
     "@skatejs/renderer-preact": "^0.3.3",
     "@webcomponents/custom-elements": "^1.2.1",

diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html
@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html>
+<html class="pl-c-html">
 
 <head>
   <title id="title">Pattern Lab</title>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width" />
+  <meta name='viewport' content='initial-scale=1, width=device-width, viewport-fit=cover'>
   <meta name="theme-color" content="#ababab" />
-
   <link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
 
 </head>

diff --git a/packages/uikit-workshop/src/html/partials/modal.html b/packages/uikit-workshop/src/html/partials/modal.html
@@ -2,6 +2,8 @@
 <div class="pl-c-modal pl-js-modal">
     <div class="pl-c-modal__toolbar">
         <div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
+    </div>
+    <div class="pl-c-modal__content-wrapper">
         <div class="pl-c-modal__toolbar-controls">
             <button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
                 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
@@ -11,6 +13,6 @@
             </button>
             <pl-toggle-layout></pl-toggle-layout>
         </div>
+        <div class="pl-c-modal__content pl-js-modal-content"></div>
     </div>
-    <div class="pl-c-modal__content pl-js-modal-content"></div>
 </div>
diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss
@@ -101,9 +101,8 @@
   */
   &.pl-is-active {
     max-height: calc(100vh - #{$offset-top} - 1rem);
-    max-height: var(
-      calc(--pl-viewport-height - 1rem),
-      calc(100vh - #{$offset-top} - 1rem)
+    max-height: calc(
+      var(--pl-viewport-height, calc(100vh - #{$offset-top})) - 1rem
     ); /* [1] */
     overflow: auto;
     -webkit-overflow-scrolling: touch;

diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss
@@ -7,11 +7,13 @@
 * 1) These exist indepenedent of any project-specific styles
 * 2) Styled as IDs to avoid collisions with user <body> tag
 */
+.pl-c-html {
+  min-height: 100%;
+}
+
 .pl-c-body {
   margin: 0;
   padding: 0;
   -webkit-text-size-adjust: 100%;
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
+  display: flex; // Required for IE 11 to display overall PL layout correctly
 }
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_header.scss b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss
@@ -20,6 +20,11 @@
   color: $pl-color-gray-50;
   font-family: $pl-font;
   font-size: $pl-font-size-sm;
+
+  @supports(padding: max(0px)) {
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
 }
 
 /**

diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss b/packages/uikit-workshop/src/sass/scss/04-components/_modal.scss
@@ -2,10 +2,13 @@
     #MODAL
 \*------------------------------------*/
 
+$pl-resizer-height: 14px;
+
 pl-modal {
   display: flex;
   flex-direction: column;
   position: relative;
+  position: sticky;
   z-index: 20;
   max-height: 100vh;
   box-shadow: 0 0 2px 0 $pl-color-gray-70;
@@ -23,10 +26,11 @@ pl-modal {
   font-family: $pl-font;
   background-color: $pl-color-gray-87;
   color: $pl-color-gray-20;
-  position: relative;
+  position: sticky;
   top: auto;
   bottom: 0;
   left: 0;
+  right: 0;
   z-index: 5;
   width: 100%;
   height: 0;
@@ -36,6 +40,7 @@ pl-modal {
   will-change: height, transform;
   overflow: hidden;
   max-width: 100vw;
+  box-shadow: 0 -1px 2px rgba($pl-color-gray-70, 0.1);
 
   .pl-c-body--theme-sidebar & {
     @media all and (min-width: $pl-bp-med) {
@@ -48,7 +53,7 @@ pl-modal {
      */
   &.pl-is-active {
     transform: translate3d(0, 0, 0);
-    height: 50vh; // default height unless manually resized
+    height: 40vh; // default height unless manually resized
     transition: transform 0.3s ease;
     pointer-events: auto;
   }
@@ -62,11 +67,28 @@ pl-modal {
   height: 100%;
 }
 
+.pl-c-modal__content {
+  flex-grow: 1;
+  display: flex;
+}
+
 .pl-c-modal__toolbar {
   display: flex;
+  flex-shrink: 0; // so that the resizer height doesn't change unexpectedly
+}
+
+.pl-c-modal__content-wrapper {
+  display: flex;
+  flex-direction: row-reverse;
+  flex-grow: 1;
+
+  @supports (padding: env(safe-area-inset-top)){
+    padding-right: calc(env(safe-area-inset-right) - 0.9rem);
+  }
 }
 
 .pl-c-modal__toolbar-controls {
+  margin-top: $pl-resizer-height * -1;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -79,6 +101,8 @@ pl-modal {
  */
 .pl-c-modal__close-btn {
   @include linkStyle;
+  margin: 0;
+  -webkit-appearance: none;
 
   @media all and (max-width: $pl-bp-med - 1) {
     border-radius: 20rem;
@@ -117,7 +141,7 @@ pl-modal {
   align-items: center;
   justify-content: center;
   left: 0;
-  height: 14px;
+  height: $pl-resizer-height;
   width: 100%;
   background-color: inherit;
   z-index: 2;

diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss
@@ -9,8 +9,9 @@
  */
 .pl-c-nav {
   @include accordionPanel;
-  background-color: inherit;
+  background-color: inherit; // allows the nav's children inherit from the parent header
   position: absolute;
+  left: 0; // IE 11 layout broken 
   top: 100%;
   width: 100%;
   display: flex;
@@ -37,7 +38,9 @@
     }
 
     .pl-c-body--theme-sidebar & {
-      box-shadow: none;
+      @media all and (min-width: $pl-bp-med) {
+        box-shadow: none;
+      }
     }
 
     // if nav was opened on smaller screen and screen is resized, it'll be cut off otherwise
@@ -69,6 +72,7 @@
   list-style: none;
   flex-shrink: 0; // helps prevent top-level nav items from occasionally wrapping to multiple lines
   order: 2;
+  background-color: inherit; // allows the nav's children inherit from the parent header
 
   @media all and (min-width: $pl-bp-med) {
     display: flex; /* 2 */
@@ -85,11 +89,17 @@
  * Nav list item
  */
 .pl-c-nav__item {
+  background-color: inherit; // allows the nav's children inherit from the parent header
+  transform: translateZ(0); // helps with more consistent rendering in Safari
   cursor: pointer;
   position: relative;
   display: flex;
   flex-direction: column;
   justify-content: center; // vertically align nav items
+
+  .pl-c-body--theme-sidebar & {
+    display: block;
+  }
 }
 
 /**
@@ -107,9 +117,15 @@
  * Nav link
  */
 .pl-c-nav__link {
+  @include linkStyle;
   display: flex;
   align-items: center;
-  @include linkStyle();
+  margin: 0; // remove default button margin in Safari
+
+  // makes link layout / size more consistent in the sidebar layout, especially when display: flex styles are removed for more consistent IE 11 rendering
+  .pl-c-body--theme-sidebar & {
+    width: 100%;
+  }
 }
 
 /**
@@ -126,6 +142,7 @@
  * Nav link
  */
 .pl-c-nav__link--dropdown {
+  -webkit-appearance: none; // remove default button styling
   flex-grow: 1; // fill up extra space in parent nav item, if available
   /**
      * Dropdown caret after accordion handle
@@ -171,6 +188,7 @@
  *    hang over the header
  */
 .pl-c-nav__sublist {
+  background-color: inherit; // allows the nav's children inherit from the parent header
   @include listReset();
 
   @media all and (min-width: $pl-bp-med) {

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
@@ -8,6 +8,8 @@
  *    code, annotations, and more.
  */
 .pl-c-pattern-info {
+  flex-grow: 1; // fills space available when placed in the parent flex container
+
   @media all and (min-width: $pl-bp-large) {
     display: flex;
   }
@@ -19,6 +21,7 @@
     max-height: 20rem;
     overflow: scroll;
     @include hideScrollBar();
+    -webkit-overflow-scrolling: touch;
 
     @media all and (min-width: $pl-bp-large) {
       max-height: none;
@@ -38,6 +41,8 @@
     left: 0;
     overflow: scroll;
     @include hideScrollBar();
+    -webkit-overflow-scrolling: touch;
+    flex-grow: 1;
 
     @media all and (min-width: $pl-bp-large) {
       position: static;
@@ -66,13 +71,16 @@
     left: 0;
     right: 1.3rem;
     padding-right: 0;
+
+    @supports (padding: env(safe-area-inset-right)){
+      right: calc(env(safe-area-inset-right) + 1.3rem);
+    }
   }
 
   .pl-c-modal & {
     @media all and (min-width: $pl-bp-xl) {
-      right: 0;
-      padding-left: 2rem;
-      padding-right: 2.5rem;
+      padding-left: 1rem;
+      padding-right: 0;
     }
   }
 }
@@ -87,8 +95,9 @@
   @media all and (min-width: $pl-bp-large) {
     left: 0;
     right: 50%;
-    overflow: scroll;
+    overflow: auto;
     @include hideScrollBar();
+    -webkit-overflow-scrolling: touch;
   }
 
   @media all and (min-width: $pl-bp-xl) {

diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss b/packages/uikit-workshop/src/sass/scss/04-components/_tabs.scss
@@ -17,23 +17,24 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  flex-grow: 1;
 
   /**
      * Tabs inside a code panel
      */
+
   .pl-c-pattern-info__panel--code & {
-    @media all and (min-width: $pl-bp-large) {
+    // @media all and (min-width: $pl-bp-large) {
       position: absolute;
       top: 1rem;
       bottom: 1rem;
       left: 1rem;
       right: 1rem;
-    }
+    // }
   }
 
   .pl-c-modal & {
     @media all and (min-width: $pl-bp-xl) {
-      right: 2.5rem;
       left: 2rem;
     }
   }
@@ -91,8 +92,8 @@
 .pl-c-tabs__content {
   flex: 1 0 auto;
   overflow: scroll;
-  @include hideScrollBar();
-  height: 100%;
+  -webkit-overflow-scrolling: touch;
+  max-height: 90%;
   padding-top: 0.5rem;
 
   /**