fixed spacing for secondary actions and truncated text

Author: Rmnlly

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

@@ -195,6 +195,7 @@ $disabled-fade: 0.6;
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
+  margin: 0 var(--p-space-1);
 }
 
 .Text {
@@ -216,7 +217,6 @@ $disabled-fade: 0.6;
   display: flex;
   align-items: center;
   height: nav(mobile-height);
-  margin-right: var(--p-space-1);
   padding: var(--p-space-1) var(--p-space-4);
   border-radius: var(--p-border-radius-1);
 

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

@@ -249,6 +249,67 @@ export function WithASecondaryActionForAnItem() {
   );
 }
 
+export function WithTruncationForVariousStates() {
+  return (
+    <Frame>
+      <Navigation location="/">
+        <Navigation.Section
+          items={[
+            {
+              url: '/path/to/place',
+              label: 'A very long label to ellipsize',
+              truncateText: true,
+              icon: OrdersMinor,
+              selected: false,
+            },
+            {
+              url: '/path/to/place',
+              label: 'Lengthy label with secondary action',
+              icon: OrdersMinor,
+              selected: false,
+              truncateText: true,
+              secondaryAction: {
+                url: '/admin/orders/add',
+                accessibilityLabel: 'Add an order',
+                icon: CirclePlusOutlineMinor,
+                tooltip: {
+                  content: 'Add a lengthy order',
+                },
+              },
+            },
+            {
+              url: '/path/to/place',
+              label: 'Lengthy label with badge',
+              truncateText: true,
+              badge: 'Old',
+              icon: HomeMinor,
+            },
+            {
+              url: '/admin/products',
+              label: 'Truncated secondary navigation items',
+              icon: ProductsMinor,
+              selected: true,
+              truncateText: true,
+              subNavigationItems: [
+                {
+                  url: '/admin/products/collections',
+                  disabled: false,
+                  label: 'Something longer than collections',
+                },
+                {
+                  url: '/admin/products/inventory',
+                  disabled: false,
+                  label: 'Inventoy',
+                },
+              ],
+            },
+          ]}
+        />
+      </Navigation>
+    </Frame>
+  );
+}
+
 export function WithSectionRollup() {
   return (
     <Frame>
@@ -363,28 +424,6 @@ export function WithVariousStatesAndSecondaryElements() {
               badge: 'Old',
               icon: HomeMinor,
             },
-            {
-              url: '/path/to/place',
-              label: 'A very long label to ellipsize',
-              truncateText: true,
-              icon: OrdersMinor,
-              selected: false,
-            },
-            {
-              url: '/path/to/place',
-              label: 'Truncated lengthy text with secondary action',
-              icon: OrdersMinor,
-              selected: false,
-              truncateText: true,
-              secondaryAction: {
-                url: '/admin/orders/add',
-                accessibilityLabel: 'Add an order',
-                icon: CirclePlusOutlineMinor,
-                tooltip: {
-                  content: 'Add an order',
-                },
-              },
-            },
             {
               url: '/path/to/place',
               label: 'Active with secondary action',

polaris-react/src/components/Navigation/_variables.scss

@@ -28,7 +28,7 @@ $nav-animation-variables: (
   align-items: flex-start;
   max-width: 100%;
   padding: 0 var(--p-space-1) 0 var(--p-space-3);
-  margin: 0 var(--p-space-2);
+  margin-left: var(--p-space-1);
   border-radius: var(--p-border-radius-1);
   color: var(--p-text);
   text-decoration: none;

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

@@ -302,6 +302,7 @@ export function Item({
                 label={label}
                 matches={item === longestMatch}
                 onClick={onClick}
+                truncateText={truncateText}
               />
             );
           })}