Migrate Truncate from Polaris React

Use app-owned text-overflow CSS only when space is genuinely constrained, and keep the full value available accessibly. Don't truncate instructions or unique action labels.

Anchor to Choose the destinationChoose the destination

Polaris React	Polaris web components	Migration type
`Truncate`	App-owned text-overflow CSS, with full content available accessibly	Native CSS

Anchor to Map truncation behaviorMap truncation behavior

Polaris React	Polaris web components	Migration notes
Single-line `children`	Narrowly scoped ellipsis CSS	Apply overflow behavior only at the layout boundary that requires it.
Heading or paragraph truncation	`lineClamp` where supported	Test long words, translations, and browser zoom.
Full value on hover only	Visible detail or another accessible path	A tooltip alone doesn't make essential truncated content reliably available.

Anchor to Migrate the call siteMigrate the call site

Document the layout constraint that caused Truncate to be used.
Apply narrowly scoped app-owned CSS to the element responsible for that behavior.
Test responsive layout, zoom, overflow, and keyboard focus.
After verification, remove the Truncate import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

Anchor to Preserve these behaviorsPreserve these behaviors

Readable full content and visible keyboard focus.
Behavior at narrow widths, high zoom, and long translated content.
Containment so the rule doesn't change unrelated surfaces.

Anchor to Test and remove Polaris ReactTest and remove Polaris React

Test the migrated Truncate behavior at narrow widths, 200% zoom, and with long translated content. Verify full content remains available and keyboard focus remains visible.

Don't remove @shopify/polaris while another component still imports it. Once all call sites are migrated, remove the package and its provider-level setup, then run the app's full test suite.

Anchor to Migration exampleMigration example

Migrating Truncate

export function TruncateMigrationExample() {

const title = 'Long product title that may not fit in the available space';

return (

<span

title={title}

style={{

display: 'block',

maxInlineSize: '16rem',

overflow: 'hidden',

textOverflow: 'ellipsis',

whiteSpace: 'nowrap',

}}

<s-text>{title}</s-text>

</span>

);

}

import {Truncate} from '@shopify/polaris';

export function TruncateMigrationExample() {

return (

<Truncate>Long product title that may not fit in the available space</Truncate>

);

}

Polaris web components

export function TruncateMigrationExample() {
  const title = 'Long product title that may not fit in the available space';

  return (
    <span
      title={title}
      style={{
        display: 'block',
        maxInlineSize: '16rem',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      }}
    >
      <s-text>{title}</s-text>
    </span>
  );
}

Polaris React

import {Truncate} from '@shopify/polaris';


export function TruncateMigrationExample() {

  return (
    <Truncate>Long product title that may not fit in the available space</Truncate>
  );
}

Preview

Was this page helpful?