[DescriptionList] Long content styling fix

[posth]

WHY are these changes introduced?

This PR fixes an overflow and wrapping styling issue on the DescriptionList component.

More specifically, that long strings passed to the keys (term and description) of an Item in the items props of the component will not conserve their specific styling widths.

Sample codebox with the issue

WHAT is this pull request doing?

We add a couple css styles to not have long content overflow. This lets the component maintain it's already enforced widths for long content passed in.

with this styling fix applied

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

import React from 'react';

import {Page, DescriptionList} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <DescriptionList
        items={[
          {
            term:
              'termtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermterm',
            description:
              'longdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescription',
          },
          {
            term:
              'termtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermterm',
            description:
              'longdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescription',
          },
          {
            term:
              'termtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermtermterm',
            description:
              'longdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescriptionlongdescription',
          },
        ]}
      />
    </Page>
  );
}

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 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
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 2 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/DescriptionList/DescriptionList.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/DescriptionList/DescriptionList.scss (total: 1)

Files potentially affected (total: 1)

• /src/components/DescriptionList/DescriptionList.tsx

[loic-d]

I would double check with UX if it makes sense to have an ellipsis overflow for the text cc/ @chloerice
🎩 looks great. If we want to move in this direction, I would apply a similar fix for mobile.

[chloerice]

Thanks for catching this, Marc! Adding word-break: break-word to .DescriptionList is all that's needed here to prevent overflow and enable long words to wrap like regular sentences do. If you need the content to be truncated instead of wrapping, you can wrap with Truncate.

Large screen	Small screen




Click to view collapsed playground code

import React from 'react';

import {Page, DescriptionList} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <DescriptionList
        items={[
          {
            term: 'Logistics',
            description:
              'The management of products or other resources as they travel between a point of origin and a destination.',
          },
          {
            term:
              'The management of products or other resources as they travel between a point of origin and a destination.',
            description:
              'The management of products or other resources as they travel between a point of origin and a destination.',
          },
          {
            term: 'Sole proprietorship',
            description:
              'A business structure where a single individual both owns and runs the company.',
          },
          {
            term: 'Discount code',
            description:
              'A series of numbers and/or letters that an online shopper may enter at checkout to get a discount or special offer.',
          },
        ]}
      />
    </Page>
  );
}





[posth]

Adding word-break: break-word to .DescriptionList is all that's needed here to prevent overflow and enable long words to wrap like regular sentences do.

Much more succinct 💯

Requested changes made ✅

[chloerice]

🚢