Skip to content

[3/6] Add POS List web component types - #4661

Draft
ajanth-u wants to merge 8 commits into
2026-10-rcfrom
au/pos-list-2026-10
Draft

[3/6] Add POS List web component types#4661
ajanth-u wants to merge 8 commits into
2026-10-rcfrom
au/pos-list-2026-10

Conversation

@ajanth-u

@ajanth-u ajanth-u commented Sep 1, 2026

Copy link
Copy Markdown
Collaborator

Background

The 2026-10 POS UI Extensions surface needs a virtualized list component for structured, incrementally loaded data. The public shape is under TAG review in Shopify/ui-api-design#1576.

Solution

Add the s-pos-list web component contract to the 2026-10 release branch:

  • structured rows with labels, up to three subtitles, badges, images, trailing labels, chevrons, and toggle state
  • per-row onClick callbacks that receive the callback event; row context is held by each callback's closure
  • imageDisplayStrategy, loadingMore, and loadmore support
  • a header slot for composable content above the rows; no component-owned title
  • availability on supported POS action extension targets
  • default and incremental-loading examples
  • a minor changeset

The web-component names intentionally replace legacy React-oriented names: data becomes rows, isLoadingMore becomes loadingMore, and onEndReached becomes loadmore / onLoadMore.

Alternatives considered

  1. Restore the legacy List contract unchanged — rejected because React-specific names and listHeaderComponent do not fit the web-component surface.
  2. Add a title property — rejected because headings compose outside the list or through the header slot.
  3. Add a component-level click event carrying row data — rejected because row activation is modeled by per-row onClick callbacks, with row context already available through the closure.

Verification

  • yarn build
  • yarn type-check
  • yarn test (no related Jest suites)
  • Prettier on all changed files
  • Focused ESLint: StandardComponents.ts passes; generated declarations and examples are intentionally ignored by this repository's ESLint configuration
  • Full yarn lint reaches only pre-existing generated checkout/preact.js and customer-account/preact.js errors after yarn build

Dependencies

This draft is blocked on approval of Shopify/ui-api-design#1576. End-to-end availability also requires the POS host implementation linked below.

After this PR merges, regenerate the 2026-10 POS reference data in World before the Shopify Dev documentation PR can merge.

Related PRs

🎩

Manual POS verification is intentionally deferred to the author.

Checklist

  • I have 🎩'd these changes
  • I have updated relevant documentation

Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8
@ajanth-u

ajanth-u commented Sep 1, 2026

Copy link
Copy Markdown
Collaborator Author

/snapIt

Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8
@ajanth-u
ajanth-u marked this pull request as ready for review September 1, 2026 04:06
@ajanth-u
ajanth-u marked this pull request as draft September 1, 2026 05:18
Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8
@ajanth-u

ajanth-u commented Sep 1, 2026

Copy link
Copy Markdown
Collaborator Author

/snapit

@shopify-github-actions-access

Copy link
Copy Markdown
Contributor

🫰✨ Thanks @ajanth-u! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/ui-extensions": "0.0.0-snapshot-20260901153420",
"@shopify/ui-extensions-tester": "0.0.0-snapshot-20260901153420"

@ajanth-u

ajanth-u commented Sep 1, 2026

Copy link
Copy Markdown
Collaborator Author

/snapit

@shopify-github-actions-access

Copy link
Copy Markdown
Contributor

🫰✨ Thanks @ajanth-u! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/ui-extensions": "0.0.0-snapshot-20260901162303",
"@shopify/ui-extensions-tester": "0.0.0-snapshot-20260901162303"

Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8
Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8
Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8
Assisted-By: devx/46b3a0a9-3b3c-4c53-a0c1-759bfb326ea8
@ajanth-u ajanth-u changed the title Add POS List web component types [3/6] Add POS List web component types Sep 2, 2026
Assisted-By: devx/731c45d9-3be0-4043-899f-87200624d2b8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant