Check for nav and top bar before setting left or top

Shopify · Apr 2, 2020 · c8cc9d6 · c8cc9d6
1 parent cac330b
commit c8cc9d6
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 12 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -19,13 +19,13 @@ addParameters({
 });
 
 addDecorator(function PaddingDecorator(story) {
-  const storyProps = story().storyProps;
+  const storyProps = story().props;
   const containsFrame =
     storyProps &&
     (storyProps.hasOwnProperty('topBar') ||
       storyProps.hasOwnProperty('navigation') ||
       storyProps.hasOwnProperty('data-has-frame'));
-
+  console.log({storyProps});
   return containsFrame ? (
     story()
   ) : (

diff --git a/playground/DetailsPage.tsx b/playground/DetailsPage.tsx
@@ -211,12 +211,12 @@ export function DetailsPage() {
       searchResults={searchResultsMarkup}
       onSearchResultsDismiss={handleSearchResultsDismiss}
       onNavigationToggle={toggleMobileNavigationActive}
-      contextControl={contextControlMarkup}
+      // contextControl={contextControlMarkup}
     />
   );
   // ---- Navigation ----
   const navigationMarkup = (
-    <Navigation location="/" contextControl={contextControlMarkup}>
+    <Navigation location="/">
       <Navigation.Section
         items={[
           {

diff --git a/src/components/Frame/Frame.scss b/src/components/Frame/Frame.scss
@@ -35,11 +35,16 @@ $skip-vertical-offset: rem(10px);
 
   @include frame-when-nav-displayed {
     z-index: 1;
+    // `calc()` needs the px value below.
+    // stylelint-disable-next-line length-zero-no-unit
+    left: calc(0px + var(--p-frame-offset));
     display: flex;
 
     &:not(.Navigation-newDesignLanguage) {
-      top: top-bar-height();
-      height: calc(100% - #{top-bar-height()});
+      .hasTopBar & {
+        top: top-bar-height();
+        height: calc(100% - #{top-bar-height()});
+      }
     }
   }
 
@@ -139,8 +144,13 @@ $skip-vertical-offset: rem(10px);
 
   &.TopBar-newDesignLanguage {
     @include frame-when-nav-displayed {
-      left: calc(#{layout-width(unstable-nav)} + var(--p-frame-offset));
-      width: calc(100% - #{layout-width(unstable-nav)} - var(--p-frame-offset));
+      // stylelint-disable-next-line selector-max-class
+      .hasNav & {
+        left: calc(#{layout-width(unstable-nav)} + var(--p-frame-offset));
+        width: calc(
+          100% - #{layout-width(unstable-nav)} - var(--p-frame-offset)
+        );
+      }
     }
   }
 }
@@ -160,10 +170,12 @@ $skip-vertical-offset: rem(10px);
 
 .ContextualSaveBar-newDesignLanguage {
   @include frame-when-nav-displayed {
-    left: calc(#{layout-width(unstable-nav)} + var(--p-frame-offset));
-    max-width: calc(
-      100% - #{layout-width(unstable-nav)} - var(--p-frame-offset)
-    );
+    .hasNav & {
+      left: calc(#{layout-width(unstable-nav)} + var(--p-frame-offset));
+      max-width: calc(
+        100% - #{layout-width(unstable-nav)} - var(--p-frame-offset)
+      );
+    }
   }
 }