Add admin rounded corners

Shopify · Jan 23, 2024 · bd2ef48 · bd2ef48
1 parent 6eb350e
commit bd2ef48
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 26 deletions.
diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss
@@ -51,6 +51,7 @@ body {
   min-height: 100%;
   margin: 0;
   padding: 0;
+  overflow: hidden;
 
   // hardcoding background color because app provider does not have access to
   // the --p-color-bg custom property. Will revisit best way to address in

diff --git a/polaris-react/src/components/Frame/Frame.module.scss b/polaris-react/src/components/Frame/Frame.module.scss
@@ -5,13 +5,13 @@ $sidebar-breakpoint: 1200px;
 .Frame {
   // stylelint-disable -- Polaris component custom properties
   --pc-frame-button-size: var(--p-space-800);
-  --pc-sidebar-width: calc(356px + var(--p-space-400));
+  --pc-sidebar-width: calc(356px + var(--p-space-100));
   // stylelint-enable
   width: 100%;
   min-height: 100vh;
   min-height: 100svh; // For mobile browsers, fill the screen taking into account dynamic browser chrome
   display: flex;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-inverse);
 
   @media print {
     background-color: transparent;
@@ -23,6 +23,22 @@ $sidebar-breakpoint: 1200px;
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     margin-left: var(--pc-frame-offset);
   }
+
+  // stylelint-disable -- top bar
+  & [class*='Polaris-ShadowBevel'] {
+    &::before {
+      top: 56px;
+    }
+  }
+  // stylelint-enable
+}
+
+.hasSidebar {
+  /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */
+  @media screen and (min-width: #{$sidebar-breakpoint}) {
+    /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
+    width: calc(100% - var(--pc-sidebar-width));
+  }
 }
 
 .Navigation {
@@ -183,13 +199,12 @@ $sidebar-breakpoint: 1200px;
   flex: 1;
   display: flex;
   align-items: stretch;
-
   min-width: 0;
-  @media (--p-breakpoints-sm-up) {
-    // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties
-    max-width: calc(100vw - var(--pc-app-provider-scrollbar-width));
-    // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list
-  }
+  background-color: var(--p-color-bg);
+  border-top-left-radius: var(--p-border-radius-300);
+  border-top-right-radius: var(--p-border-radius-300);
+  height: 100vh;
+  overflow: hidden;
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include safe-area-for(padding-right, 0, right);
@@ -210,9 +225,9 @@ $sidebar-breakpoint: 1200px;
   }
 
   .hasTopBar & {
-    padding-top: $top-bar-height;
+    margin-top: $top-bar-height;
     @media print {
-      padding-top: 0;
+      margin-top: 0;
     }
   }
 }
@@ -224,14 +239,10 @@ $sidebar-breakpoint: 1200px;
   flex: 1;
   min-width: 0;
   max-width: 100%;
-
-  .hasSidebar & {
-    /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */
-    @media screen and (min-width: #{$sidebar-breakpoint}) {
-      /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
-      margin-right: var(--pc-sidebar-width);
-    }
-  }
+  overflow-y: scroll;
+  // stylelint-disable-next-line polaris/space/declaration-property-unit-disallowed-list -- top bar plus 1px
+  margin-bottom: 56px;
+  margin-right: var(--p-space-050);
 }
 
 .GlobalRibbonContainer {

diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
@@ -24,6 +24,7 @@ import {UseTheme} from '../../utilities/use-theme';
 
 import {ToastManager, Loading} from './components';
 import styles from './Frame.module.scss';
+import {ShadowBevel} from '../ShadowBevel';
 
 export interface FrameProps {
   /** Sets the logo for the TopBar, Navigation, and ContextualSaveBar components */
@@ -269,16 +270,18 @@ class FrameInner extends PureComponent<CombinedProps, State> {
         >
           {skipMarkup}
           {topBarMarkup}
-          {navigationMarkup}
           {loadingMarkup}
           {navigationOverlayMarkup}
-          <main
-            className={styles.Main}
-            id={APP_FRAME_MAIN}
-            data-has-global-ribbon={Boolean(globalRibbon)}
-          >
-            <div className={styles.Content}>{children}</div>
-          </main>
+          <ShadowBevel borderRadius="300" boxShadow="100" zIndex="1000">
+            {navigationMarkup}
+            <main
+              className={styles.Main}
+              id={APP_FRAME_MAIN}
+              data-has-global-ribbon={Boolean(globalRibbon)}
+            >
+              <div className={styles.Content}>{children}</div>
+            </main>
+          </ShadowBevel>
           <ToastManager toastMessages={toastMessages} />
           {globalRibbonMarkup}
           <EventListener event="resize" handler={this.handleResize} />

diff --git a/polaris-react/src/components/Navigation/Navigation.module.scss b/polaris-react/src/components/Navigation/Navigation.module.scss
@@ -21,6 +21,7 @@ $nav-max-width: 360px;
   background-color: var(--p-color-nav-bg);
   -webkit-overflow-scrolling: touch;
   border-right: 0;
+  border-top-left-radius: var(--p-border-radius-300);
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include safe-area-for(padding-bottom, 0, bottom);