Migrate VideoThumbnail from Polaris React

Compose s-thumbnail or s-image with a clearly labelled play affordance. Preserve duration or playback state only when it is essential and available as text.

Anchor to Choose the destinationChoose the destination

Polaris React	Polaris web components	Migration type
`VideoThumbnail`	`s-thumbnail` or `s-image` with a custom play affordance	Compose

Anchor to Map video-thumbnail propertiesMap video-thumbnail properties

Polaris React	Polaris web components	Migration notes
`thumbnailUrl`	`src` on `s-thumbnail` or `s-image`	Preserve meaningful alternative text.
`videoLength`	Visible duration text	Format the duration in app code and don't rely on an image overlay alone.
`onClick` and play icon	Labelled button, clickable, or link with a supplementary `s-icon`	Name the action, such as "Play setup video".

Anchor to Migrate the call siteMigrate the call site

Identify each responsibility currently hidden behind VideoThumbnail: layout, semantics, state, actions, and responsive behavior.
Build the documented composition for those responsibilities; don't create a compatibility wrapper that accepts the old API.
Reconnect app state and verify the composition at every existing call site.
After verification, remove the VideoThumbnail 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 VideoThumbnail 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

Migrating VideoThumbnail

export function VideoThumbnailMigrationExample() {

return (

<s-clickable accessibilityLabel="Play setup video, 1 minute 20 seconds">

<s-stack direction="inline" gap="base" alignItems="center">

<s-thumbnail

src="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg"

alt="White sneaker shown in the setup video"

<s-stack gap="small-100">

<s-stack direction="inline" gap="small" alignItems="center">

<s-icon type="play-circle" />

<s-text type="strong">Play setup video</s-text>

</s-stack>

<s-text color="subdued">1:20</s-text>

</s-stack>

</s-clickable>

);

}

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

export function VideoThumbnailMigrationExample() {

return (

);

}

Polaris web components

export function VideoThumbnailMigrationExample() {
  return (
    <s-clickable accessibilityLabel="Play setup video, 1 minute 20 seconds">
      <s-stack direction="inline" gap="base" alignItems="center">
        <s-thumbnail
          src="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg"
          alt="White sneaker shown in the setup video"
        />
        <s-stack gap="small-100">
          <s-stack direction="inline" gap="small" alignItems="center">
            <s-icon type="play-circle" />
            <s-text type="strong">Play setup video</s-text>
          </s-stack>
          <s-text color="subdued">1:20</s-text>
        </s-stack>
      </s-stack>
    </s-clickable>
  );
}

Polaris React

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


export function VideoThumbnailMigrationExample() {

  return (
    <VideoThumbnail videoLength={80} thumbnailUrl="https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg" onClick={() => {}} />
  );
}

Preview

Was this page helpful?