Update Navigation density

.storybook/polaris-readme-loader.js

@@ -182,6 +182,7 @@ import {
   CirclePlusOutlineMinor,
   ConversationMinor,
   CustomersMajor,
+  CustomersMinor,
   DeleteMinor,
   CircleDisableMinor,
   DisputeMinor,
@@ -191,17 +192,22 @@ import {
   ExternalMinor,
   QuestionMarkMajor,
   HomeMajor,
+  HomeMinor,
   HorizontalDotsMinor,
   ImportMinor,
   LogOutMinor,
   MarketingMajor,
+  MarketingMinor,
   MobileHamburgerMajor,
   NoteMinor,
   NotificationMajor,
   OnlineStoreMajor,
+  OnlineStoreMinor,
   OrdersMajor,
+  OrdersMinor,
   PrintMinor,
   ProductsMajor,
+  ProductsMinor,
   ProfileMinor,
   RefreshMinor,
   RiskMinor,
@@ -356,7 +362,8 @@ function filterMarkdownForPlatform(markdown, platform) {
     `<!-- content-for: (?:[\\w\\s,]*${platform}[\\w\\s,]*) -->([\\s\\S]+?)<!-- \\/content-for -->`,
     'gu',
   );
-  const deleteRemainingPlatformsRegExp = /<!-- content-for: [\w\s,]+ -->[\s\S]+?<!-- \/content-for -->/gu;
+  const deleteRemainingPlatformsRegExp =
+    /<!-- content-for: [\w\s,]+ -->[\s\S]+?<!-- \/content-for -->/gu;
 
   return (
     markdown

UNRELEASED.md

@@ -8,6 +8,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t
 
 ### Enhancements
 
+- Tightened up the Navigation component UI density. ([#4874](https://github.com/Shopify/polaris-react/pull/4874))
+
 ### Bug fixes
 
 - Fixed `segmented` `ButtonGroup` misaligning icon only buttons when grouped with text only buttons ([#4079](https://github.com/Shopify/polaris-react/issues/4079))

package.json

@@ -72,7 +72,7 @@
     "postcolordocs": "yarn run format"
   },
   "dependencies": {
-    "@shopify/polaris-icons": "^4.11.0",
+    "@shopify/polaris-icons": "4.14.0",
     "@shopify/polaris-tokens": "^3.0.0",
     "@types/react": "^17.0.19",
     "@types/react-dom": "^17.0.9",

src/components/Navigation/Navigation.scss

@@ -55,7 +55,7 @@ $nav-max-width: rem(360px);
   }
 
   @include breakpoint-after(nav-min-window-corrected()) {
-    padding-top: rem(12px);
+    padding-top: spacing();
   }
 }
 
@@ -93,10 +93,9 @@ $disabled-fade: 0.6;
   &::before {
     content: '';
     position: absolute;
-    top: 0;
-    bottom: 0;
+    top: 1px;
+    bottom: 1px;
     left: -1 * spacing(tight);
-    height: 100%;
     width: $active-indicator-width;
     background-color: var(--p-action-primary);
     border-top-right-radius: var(--p-border-radius-base);
@@ -123,6 +122,10 @@ $disabled-fade: 0.6;
     color: var(--p-text-primary);
     background-color: var(--p-background-pressed);
   }
+
+  @include breakpoint-after(nav-min-window-corrected()) {
+    font-weight: 500;
+  }
 }
 
 .Item-disabled {
@@ -282,14 +285,15 @@ $secondary-item-font-size: rem(15px);
 
     @include breakpoint-after(nav-min-window-corrected()) {
       font-size: $item-font-size-small;
-      line-height: rem(28px);
+      line-height: 1;
+      padding-left: nav(icon-size) + spacing(base-tight);
     }
   }
 
   .Text {
-    margin-top: rem(6px);
-    margin-bottom: rem(6px);
-    line-height: rem(20px);
+    margin-top: spacing(tight) / 2;
+    margin-bottom: spacing(tight) / 2;
+    line-height: spacing(loose);
   }
 
   .Item-selected {
@@ -329,8 +333,12 @@ $secondary-item-font-size: rem(15px);
   @include safe-area-for(padding-left, 0, left);
 
   + .Section {
-    padding-top: spacing(extra-tight);
     padding-bottom: spacing();
+    padding-top: spacing(tight);
+  }
+
+  + .Section-withSeparator {
+    padding-top: spacing(extra-tight);
   }
 }
 
@@ -344,11 +352,16 @@ $secondary-item-font-size: rem(15px);
 
 .SectionHeading {
   @include text-style-subheading;
+  text-transform: none; // Adding this intentionally to override the default subheading styling.
   display: flex;
   align-items: center;
   min-height: nav(desktop-nav-height);
   padding-left: spacing();
 
+  @include breakpoint-after(nav-min-window-corrected()) {
+    padding-left: spacing(loose);
+  }
+
   .Text {
     font-size: font-size(subheading);
     color: var(--p-text-subdued);
@@ -370,6 +383,14 @@ $secondary-item-font-size: rem(15px);
 
     @include breakpoint-after(nav-min-window-corrected()) {
       height: nav(desktop-nav-height);
+
+      // stylelint-disable selector-max-combinators
+      svg,
+      img {
+        height: spacing();
+        width: spacing();
+        margin: spacing(extra-tight) / 2;
+      }
     }
 
     @include focus-ring;