changed truncation to use -webkit-line-clamp

Author: Rmnlly

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

@@ -92,6 +92,12 @@ $disabled-fade: 0.6;
 .Item {
   @include nav-item-attributes;
   position: relative;
+  &:first-child {
+    margin-left: var(--p-space-2);
+  }
+  &:last-child {
+    margin-right: var(--p-space-2);
+  }
 }
 
 .Item-selected {
@@ -195,21 +201,18 @@ $disabled-fade: 0.6;
   display: flex;
   flex-wrap: nowrap;
   width: 100%;
-  margin: 0 var(--p-space-1);
 }
 
 .Text {
   @include nav-item-text-attributes;
 }
 
 .Text-truncated {
-  width: calc(
-    $layout-width-nav-base -
-      (var(--pc-navigation-icon-size) + var(--p-space-4) * 6 + var(--p-space-1))
-  );
+  display: -webkit-box;
   overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
 }
 
 .SecondaryAction {
@@ -218,6 +221,7 @@ $disabled-fade: 0.6;
   align-items: center;
   height: nav(mobile-height);
   padding: var(--p-space-1) var(--p-space-4);
+  margin-right: var(--p-space-1);
   border-radius: var(--p-border-radius-1);
 
   @media #{$p-breakpoints-md-up} {

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

@@ -284,6 +284,22 @@ export function WithTruncationForVariousStates() {
               badge: 'Old',
               icon: HomeMinor,
             },
+            {
+              url: '/path/to/place',
+              label: 'Lengthy label with secondary action',
+              icon: OrdersMinor,
+              selected: false,
+              truncateText: true,
+              badge: 'Old',
+              secondaryAction: {
+                url: '/admin/orders/add',
+                accessibilityLabel: 'Add an order',
+                icon: CirclePlusOutlineMinor,
+                tooltip: {
+                  content: 'Add a lengthy order',
+                },
+              },
+            },
             {
               url: '/admin/products',
               label: 'Truncated secondary navigation items',

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-left: var(--p-space-1);
+  margin: 0;
   border-radius: var(--p-border-radius-1);
   color: var(--p-text);
   text-decoration: none;