[Navigation] Round nav at mdDown behind feature flag

.changeset/famous-ghosts-fold.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Rounded `Navigation` at `mdDown` behind a feature flag

polaris-react/src/components/Navigation/Navigation.module.css

@@ -52,6 +52,14 @@
 
 .NavigationFrame-TopBarAndReframe {
   border-top-left-radius: var(--p-border-radius-300);
+  border-top-right-radius: var(--p-border-radius-300);
+  /* stylelint-disable-next-line -- polaris custom global property */
+  margin-top: var(--pg-top-bar-height);
+
+  @media (--p-breakpoints-md-up) {
+    border-top-right-radius: 0;
+    margin-top: 0;
+  }
 }
 
 .PrimaryNavigation {
@@ -100,6 +108,16 @@
   }
 }
 
+.PrimaryNavigation-TopBarAndReframe {
+  padding-top: var(--p-space-500);
+  border-top-left-radius: var(--p-border-radius-300);
+  border-top-right-radius: var(--p-border-radius-300);
+
+  @media (--p-breakpoints-md-up) {
+    border-top-right-radius: 0;
+  }
+}
+
 .LogoContainer {
   display: none;
 

polaris-react/src/components/Navigation/Navigation.tsx

@@ -8,6 +8,7 @@ import {classNames} from '../../utilities/css';
 import {getWidth} from '../../utilities/get-width';
 import {useFrame} from '../../utilities/frame';
 import {useFeatures} from '../../utilities/features';
+import {useBreakpoints} from '../../utilities/breakpoints';
 
 import {NavigationContext} from './context';
 import {Section, Item} from './components';
@@ -37,6 +38,8 @@ export const Navigation: React.FunctionComponent<NavigationProps> & {
 }: NavigationProps) {
   const {logo} = useFrame();
   const width = getWidth(logo, 104);
+  const features = useFeatures();
+  const {mdUp} = useBreakpoints();
 
   const logoMarkup = logo ? (
     <div
@@ -72,8 +75,6 @@ export const Navigation: React.FunctionComponent<NavigationProps> & {
     [location, onDismiss],
   );
 
-  const features = useFeatures();
-
   return (
     <NavigationContext.Provider value={context}>
       <WithinContentContext.Provider value>
@@ -85,12 +86,12 @@ export const Navigation: React.FunctionComponent<NavigationProps> & {
           )}
           aria-labelledby={ariaLabelledBy}
         >
-          {mediaMarkup}
+          {mdUp || !features?.dynamicTopBarAndReframe ? mediaMarkup : null}
           <Scrollable
             className={classNames(
               styles.PrimaryNavigation,
               features?.dynamicTopBarAndReframe &&
-                styles['NavigationFrame-TopBarAndReframe'],
+                styles['PrimaryNavigation-TopBarAndReframe'],
             )}
           >
             {children}