[Navigation] Add a new prop to truncate nav item text

.changeset/tidy-waves-live.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `truncateText` prop to `Navigation.Item` to prevent text wrapping

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

@@ -92,6 +92,12 @@ $disabled-fade: 0.6;
 .Item {
   @include nav-item-attributes;
   position: relative;
+
+  margin-inline-start: var(--p-space-2);
+
+  &:last-child {
+    margin-inline-end: var(--p-space-2);
+  }
 }
 
 .Item-selected {
@@ -213,13 +219,22 @@ $disabled-fade: 0.6;
   }
 }
 
+.Text-truncated {
+  // stylelint-disable-next-line value-no-vendor-prefix
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+}
+
 .SecondaryAction {
   @include recolor-icon($fill-color: var(--p-icon));
   display: flex;
   align-items: center;
   height: nav(mobile-height);
-  margin-right: var(--p-space-1);
   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

@@ -249,6 +249,83 @@ 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: '/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',
+              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>

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

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

@@ -62,6 +62,7 @@ export interface ItemProps extends ItemURLDetails {
   onToggleExpandedState?(): void;
   expanded?: boolean;
   shouldResizeIcon?: boolean;
+  truncateText?: boolean;
 }
 
 enum MatchState {
@@ -92,6 +93,7 @@ export function Item({
   onToggleExpandedState,
   expanded,
   shouldResizeIcon,
+  truncateText,
 }: ItemProps) {
   const i18n = useI18n();
   const {isNavigationCollapsed} = useMediaQuery();
@@ -162,7 +164,12 @@ export function Item({
   const itemContentMarkup = (
     <>
       {iconMarkup}
-      <span className={styles.Text}>
+      <span
+        className={classNames(
+          styles.Text,
+          truncateText && styles['Text-truncated'],
+        )}
+      >
         {label}
         {indicatorMarkup}
       </span>
@@ -291,6 +298,7 @@ export function Item({
                 label={label}
                 matches={item === longestMatch}
                 onClick={onClick}
+                truncateText={truncateText}
               />
             );
           })}