Migrate Sticky from Polaris React
Use app-owned position: sticky only when the content must remain in view within its scroll container. Test overlap, zoom, small screens, and keyboard focus.
Anchor to Choose the destinationChoose the destination
| Polaris React | Polaris web components | Migration type |
|---|---|---|
Sticky | App-owned CSS using position: sticky | Native CSS |
Anchor to Map sticky responsibilitiesMap sticky responsibilities
| Polaris React usage | Polaris web components | Migration notes |
|---|---|---|
| Page actions or title content | s-page action slots | Move important actions to the Shopify admin title bar. |
| Contextual save controls | data-save-bar or Save Bar API | Use the host save bar for unsaved form state. |
boundingElement and offsets | Remove with the old layout | Recheck content occlusion, focus visibility, zoom, and small containers. |
Anchor to Migrate the call siteMigrate the call site
-
Document the layout constraint that caused
Stickyto 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
Stickyimport 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 Sticky 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.