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

[Rmnlly]

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

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.

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.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

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

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	210.4 KB (+0.02% 🔺)
polaris-react-esm	136.15 KB (+0.02% 🔺)
polaris-react-esnext	191.7 KB (+0.07% 🔺)
polaris-react-css	41.81 KB (+0.19% 🔺)

[alex-page]

@Rmnlly should nav items just be truncated by default? I wonder how this could impact translations... My gut feeling is we shouldn't add a property here and items should just truncate if necessary.

[Rmnlly]

@alex-page (Sorry I messed up the reply haha)

Do you mean instead of a prop to allow this functionality, instead have this be the default for all navigation items? I imagined there are cases where people would prefer to have the multiline full title displayed. As for translations I'm not sure what the impact might be besides the ellipsis having an alternative meaning in another language?

[alex-page]

In my opinion we should have a strong pattern here that works across all items. Either they truncate or don't. I personally prefer the items to go onto two lines as for translations this can easily happen.

Do you have a strong example for why we would make truncation an option?

[kyledurand]

Do you have a strong example for why we would make truncation an option?

It's only for apps according to a slack convo but that doesn't mean it couldn't get misused. I'd also prefer to never truncate. If we absolutely need to because of ridiculously long app names then maybe line-clamp with truncate is an option? Looks like we'd be able to use -webkit-line-clamp in the admin now: https://caniuse.com/mdn-css_properties_-webkit-line-clamp

[Rmnlly]

@kyledurand

I hadn't heard of line-clamp but it actually solved a bug I was dealing with so thats awesome! I updated the badge spacing too.

[kyledurand]

I don't love that we need to add a new prop for this and truncating text in the nav. My original suggestion was to line clamp to two lines and then truncate for all nav items. This seems like it could be a better middle ground but might require some UX buy in.

Things that make me nervous about this:

1. Could be misused and create a worse merchant experience
2. Moving the margins to first-child / last-child. Why was that necessary?
3. Using line clamp for single line truncation seems like overkill. Can you change that to use the truncate mixin?
4. Can you use /snapit and test this in web? Share the spin link when you can

[Rmnlly]

/snapit

[github-actions]

🫰✨ Thanks @Rmnlly! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221109152312

yarn add @shopify/polaris-icons@0.0.0-snapshot-release-20221109152312

yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221109152312

yarn add @shopify/polaris@0.0.0-snapshot-release-20221109152312

yarn add @shopify/polaris-tokens@0.0.0-snapshot-release-20221109152312

yarn add @shopify/stylelint-polaris@0.0.0-snapshot-release-20221109152312

[Rmnlly]

@alex-page What do you think after the changes/the extra context added? Just making sure you're okay if we're going to move forward since I added ya originally.

[henryyi]

🎩 and changes look good. Only minor non-blocking comment.