Migrate ProgressBar from Polaris React

Replace Polaris React ProgressBar with s-progress. Preserve the measured value and accessible purpose, and omit value only when the duration can't be quantified.

s-progress is available in Polaris 1.1 and later. The stable channel, polaris-1.js, includes it; install @shopify/polaris-types@^1.1.0 alongside it. If you pin polaris-1.1.js instead, use @shopify/polaris-types@~1.1.0 so the types stay on 1.1 like the script tag.

Anchor to Choose the destinationChoose the destination

Polaris React	Polaris web components	Migration type
`ProgressBar`	`s-progress`	Direct

Anchor to Map progress valuesMap progress values

Polaris React	Polaris web components	Migration notes
`progress` from 0 to 100	`value` with `max={100}`	Keep the existing percentage scale and ensure the value remains between zero and `max`.
`ariaLabelledBy`	`accessibilityLabel`	Write a concise label that names the task and current progress. Don't rely on a Polaris React DOM ID relationship after removing the old component.
`tone="primary"`	`tone="auto"`	Use the default brand treatment.
`tone="highlight"`	`tone="info"`	Preserve the informational meaning rather than matching the old color mechanically.
`tone="success"` or `tone="critical"`	`tone="success"` or `tone="critical"`	Map these semantic tones directly.
`size`	Remove	`s-progress` has one supported height. Remove layout assumptions based on the old small, medium, or large sizes.
`animated`	Remove	The component owns its visual behavior. Don't add CSS to recreate the Polaris React animation toggle.

s-progress also supports values on scales other than 100 by setting max. Omit the value property for indeterminate progress, and use an accessibilityLabel that describes the activity without announcing a fabricated percentage.

Anchor to Migrate the call siteMigrate the call site

Identify whether each bar is determinate. For a percentage, use max={100}. For counts or amounts, preserve their natural scale with a matching max.
Replace ariaLabelledBy with an accessibilityLabel that includes the task and current value when determinate.
Map semantic tones, then remove old size and animation props instead of recreating them with CSS.
After verification, remove the ProgressBar import and any Polaris-only state, wrappers, or helpers that no longer have a caller.

Anchor to Preserve these behaviorsPreserve these behaviors

The numeric scale and source of progress state.
An accessible label that distinguishes multiple progress indicators on a page.
Semantic success, informational, or critical meaning.

Anchor to Test and remove Polaris ReactTest and remove Polaris React

Test zero, partial, and complete values, plus the indeterminate state if used. Add a unit test for the calculation that keeps value between zero and max. Verify the accessible label at each state and confirm that the bar fills its containing layout without app CSS reaching into its shadow root.

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 ProgressBar

export function ProgressBarMigrationExample() {

return (

<s-stack gap="small">

<s-text>Import progress</s-text>

<s-progress

value={60}

max={100}

tone="auto"

accessibilityLabel="Import progress: 60 percent complete"

</s-stack>

);

}

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

export function ProgressBarMigrationExample() {

return (

<Text id="import-progress" as="p">Import progress</Text>

</BlockStack>

);

}

Polaris web components

// @validate-ignore: Property 's-progress' does not exist on type 'JSX.IntrinsicElements'
export function ProgressBarMigrationExample() {
  return (
    <s-stack gap="small">
      <s-text>Import progress</s-text>
      <s-progress
        value={60}
        max={100}
        tone="auto"
        accessibilityLabel="Import progress: 60 percent complete"
      />
    </s-stack>
  );
}

Polaris React

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


export function ProgressBarMigrationExample() {

  return (
    <BlockStack gap="200">
      <Text id="import-progress" as="p">Import progress</Text>
      <ProgressBar progress={60} tone="primary" ariaLabelledBy="import-progress" />
    </BlockStack>
  );
}

Preview

Was this page helpful?