From fd499d5d90f13a942b286eb68de45d3a4959f0b2 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:20:45 -0400 Subject: [PATCH 01/15] fix: remove default search styling from Safari, hide search clear icon in IE 11 + tweak the breakpoint when the Search component's font size reduces --- .../src/scripts/components/pl-search/pl-search.scss | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss index d759e738ed..94e6d3a4e1 100644 --- a/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss +++ b/packages/uikit-workshop/src/scripts/components/pl-search/pl-search.scss @@ -86,6 +86,16 @@ pl-search { width: 100%; outline-offset: -3px; outline-width: 2px; + -webkit-appearance: none; // removes default styling (ex. heavy box shadow) in Safari + + @media all and (min-width: 900px) { + font-size: inherit; + } + + // Remove the native clear button in IE 11 in lieu of JS-controlled clear button + &::-ms-clear { + display: none; + } .pl-c-body--theme-sidebar & { border-radius: 0; @@ -101,7 +111,6 @@ pl-search { } @media all and (min-width: $pl-bp-med) { - font-size: inherit; .pl-c-body--theme-sidebar & { max-width: none; From d2bc3d7ddf250da3b3c66b222b6a289a44775c0c Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:40:01 -0400 Subject: [PATCH 02/15] fix: fixing CSS var syntax --- .../uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss b/packages/uikit-workshop/src/sass/scss/01-abstracts/_mixins.scss index 56bab34dfb..c06101c069 100644 --- 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; From a684a416ed38c63bc0418903f21fbca69ab59c61 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:40:30 -0400 Subject: [PATCH 03/15] fix: fixing page scrolling behavior + IE 11 layout issue --- packages/uikit-workshop/src/sass/scss/02-base/_body.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/uikit-workshop/src/sass/scss/02-base/_body.scss b/packages/uikit-workshop/src/sass/scss/02-base/_body.scss index 313929a726..90bc557f06 100644 --- 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 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 } From ec936ea158b2d9de8fa85c39e5293c1381073fc1 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:41:07 -0400 Subject: [PATCH 04/15] fix: fix missing background color from dropdown nav --- .../src/sass/scss/04-components/_navigation.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss index 76357fcefb..beb5d77e83 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_navigation.scss @@ -9,7 +9,7 @@ */ .pl-c-nav { @include accordionPanel; - background-color: inherit; + background-color: inherit; // allows the nav's children inherit from the parent header position: absolute; top: 100%; width: 100%; @@ -69,6 +69,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,6 +86,7 @@ * Nav list item */ .pl-c-nav__item { + background-color: inherit; // allows the nav's children inherit from the parent header cursor: pointer; position: relative; display: flex; @@ -171,6 +173,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) { From 0b88010b33518902b63e64260a373a8b84d45ad6 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:44:41 -0400 Subject: [PATCH 05/15] refactor: update header and modal UI to better support devices with curved / notched displays (ex. the iPhone XS Max) --- packages/uikit-workshop/src/html/index.html | 5 ++-- .../src/html/partials/modal.html | 4 ++- .../src/sass/scss/04-components/_header.scss | 5 ++++ .../src/sass/scss/04-components/_modal.scss | 27 ++++++++++++++++--- 4 files changed, 34 insertions(+), 7 deletions(-) diff --git a/packages/uikit-workshop/src/html/index.html b/packages/uikit-workshop/src/html/index.html index b3289639be..2cca126e53 100644 --- a/packages/uikit-workshop/src/html/index.html +++ b/packages/uikit-workshop/src/html/index.html @@ -1,12 +1,11 @@ - + Pattern Lab - + - diff --git a/packages/uikit-workshop/src/html/partials/modal.html b/packages/uikit-workshop/src/html/partials/modal.html index 1832a2f6ab..158ebf88d3 100644 --- a/packages/uikit-workshop/src/html/partials/modal.html +++ b/packages/uikit-workshop/src/html/partials/modal.html @@ -2,6 +2,8 @@
+
+
+
-
diff --git a/packages/uikit-workshop/src/sass/scss/04-components/_header.scss b/packages/uikit-workshop/src/sass/scss/04-components/_header.scss index 6fdfb119f6..19295a5ff6 100644 --- 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 index 2a0f67c66c..be7d2c6df7 100644 --- 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,25 @@ 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; + 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 +98,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 +138,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; From 4fc19c962fb64556f28aae1aebfc772959c33305 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:45:11 -0400 Subject: [PATCH 06/15] fix: remove old styling clashing with nav background color --- .../src/sass/scss/05-themes/_light-theme.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss index 1e7da64f3d..6a195abe25 100644 --- a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss @@ -15,13 +15,6 @@ border-bottom: 1px solid $pl-color-gray-20; } - /** - * Nav Sublist dropdown - */ - .pl-c-nav__sublist { - background-color: transparent; - } - /** * Tools dropdown */ From b620422dfdf998b89f10246edba769022c7ff1c2 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:45:41 -0400 Subject: [PATCH 07/15] fix: adjust border styling so the context menu's border shows up more consistently --- .../src/sass/scss/05-themes/_light-theme.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss index 6a195abe25..11829b3d82 100644 --- a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss @@ -20,6 +20,13 @@ */ // don't show border to the left / bottom when in vertical mode + @media all and (max-width: $pl-bp-med - 1) { + .pl-c-tools__list.pl-is-active { + border-bottom: 1px solid $pl-color-gray-20; + border-left: 1px solid $pl-color-gray-20; + } + } + &:not(.pl-c-body--theme-sidebar) { .pl-c-tools__list.pl-is-active { border-bottom: 1px solid $pl-color-gray-20; From 4ba33b6639693c4982e2119a02628b6668a98d52 Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:46:08 -0400 Subject: [PATCH 08/15] =?UTF-8?q?fix:=20remove=20old=20typeahead=20styling?= =?UTF-8?q?=20=E2=80=94=20particularly=20visible=20on=20Safari?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/sass/scss/05-themes/_light-theme.scss | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss index 11829b3d82..038ae43905 100644 --- a/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss +++ b/packages/uikit-workshop/src/sass/scss/05-themes/_light-theme.scss @@ -79,13 +79,6 @@ background-color: $pl-color-gray-13 !important; } - /** - * Typeahead input - */ - .pl-c-typeahead { - background-color: $pl-color-gray-13 !important; - color: $pl-color-gray-70 !important; - } /** * Typeahead input From e2301fa7bb352144c5e3e8922685488b974b8dec Mon Sep 17 00:00:00 2001 From: Salem Ghoweri Date: Tue, 9 Oct 2018 09:49:03 -0400 Subject: [PATCH 09/15] refactor: fix scroll-related layout issues; add iframe-resizer library to address core UI issues with previous approach to handling the iframe content height --- packages/uikit-workshop/package.json | 1 + .../sass/scss/04-components/_viewport.scss | 26 ++++++++++++------- .../sass/scss/05-themes/_sidebar-theme.scss | 4 +-- .../scripts/components/pl-layout/pl-layout.js | 11 ++++++++ .../components/pl-layout/pl-layout.scss | 10 +++++-- .../src/scripts/patternlab-pattern.js | 2 ++ 6 files changed, 41 insertions(+), 13 deletions(-) diff --git a/packages/uikit-workshop/package.json b/packages/uikit-workshop/package.json index be7e028b44..983ff11efd 100644 --- 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/sass/scss/04-components/_viewport.scss b/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss index 2c62e40847..ba8fa9e26e 100644 --- a/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss +++ b/packages/uikit-workshop/src/sass/scss/04-components/_viewport.scss @@ -15,8 +15,6 @@ .pl-c-viewport { display: flex; flex-direction: column; - flex-direction: column; - height: auto; width: 100%; position: relative; top: $offset-top; @@ -24,7 +22,6 @@ left: 0; right: 0; z-index: 0; - overflow: hidden; flex-grow: 1; transition: height 0.3s ease; @@ -60,19 +57,25 @@ * iframe and the manual resize handle */ .pl-c-viewport__iframe-wrapper { - height: 100%; + display: flex; + flex-direction: column; + max-width: 100vw; width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in position: relative; margin: 0 auto; flex: 1; -webkit-overflow-scrolling: touch; - overflow-y: auto; - overflow-x: hidden; &.hay-mode { transition: all 40s linear; } width: 100%; // bug fix for Safari and Firefox getting stuck calculating a width of 0px when the JS first kicks in + + .pl-c-body--theme-sidebar & { + @media all and (min-width: $pl-bp-med) { + max-width: calc(100vw - #{$pl-sidebar-width} + 14px); + } + } } /** @@ -80,8 +83,8 @@ * 1) this is the actual