[Navigation] Add a new prop to truncate nav item text (Shopify#7619)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->
### WHY are these changes introduced?
Overwrites have been used in admin to get navigation item text to
truncate with ellipsis since the app pinning project. This is an effort
to port the changes to Polaris to reduce the overwriting and tech debt
in core.

Fixes https://github.com/Shopify/core-workflows/issues/561 <!-- link to
issue if one exists -->

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?
I've added a prop to allow text truncation in navigation items. It
applies a class that stops the line wrapping of item text and instead
does an ellipsis truncation through CSS.

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->
<img width="275" alt="Screen Shot 2022-11-04 at 12 20 29 PM"
src="https://user-images.githubusercontent.com/33904740/200025372-15995417-9fda-468f-9ab0-75d1a24b8c89.png">

There is a new story for the truncation enabled items. Here you can see
anything going beyond the width of the text container will be truncated
with ellipsis. Notice that "Inventory" is fine as it not long enough to
trigger it. Secondary navigation items are also treated the same as
their parent.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';
import {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Author: Rmnlly

.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}
               />
             );
           })}