Migrate TextContainer from Polaris React

Use a block-direction stack for vertical rhythm between text elements. Keep headings, paragraphs, and lists semantic rather than wrapping all content in generic text.

Anchor to Choose the destinationChoose the destination

Anchor to Map text-container propertiesMap text-container properties

Anchor to Migrate the call siteMigrate the call site

1. Identify each responsibility currently hidden behind TextContainer: layout, semantics, state, actions, and responsive behavior.

2. Build the documented composition for those responsibilities; don't create a compatibility wrapper that accepts the old API.

3. Reconnect app state and verify the composition at every existing call site.

4. After verification, remove the TextContainer import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

Anchor to Preserve these behaviorsPreserve these behaviors

• Information hierarchy, reading order, and accessible relationships.
• App-owned state and every action or navigation outcome.
• Responsive behavior and focus order across the composed elements.

Anchor to Test and remove Polaris ReactTest and remove Polaris React

Test the complete TextContainer composition at each responsive size used by the app. Verify reading and focus order, accessible relationships, keyboard interaction, and every action outcome.

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

export function TextContainerMigrationExample() {
  return (
    <><s-stack direction="block" gap="small"><s-heading>Details</s-heading><s-paragraph>Product information</s-paragraph></s-stack></>
  );
}

import {Text, TextContainer} from '@shopify/polaris';

export function TextContainerMigrationExample() {
  return (
    <TextContainer spacing="tight">
      <Text as="h2" variant="headingSm">Details</Text>
      <p>Product information</p>
    </TextContainer>
  );
}