[3/6] Add POS List web component types by ajanth-u · Pull Request #4661 · Shopify/ui-extensions

ajanth-u · 2026-09-01T03:43:06Z

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 shop/world#2037349 (migrated from the archived 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 a plain POSListRowClickEvent ({type: 'click'}) — rows are data rather than elements, so the callback crosses the sandbox boundary as an RPC callable and can't receive a DOM Event; row context is held by each callback's closure
a disabled toggle switch also blocks its row's activation, and auto image display is decided per row, both matching the legacy List
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

Restore the legacy List contract unchanged — rejected because React-specific names and listHeaderComponent do not fit the web-component surface.
Add a title property — rejected because headings compose outside the list or through the header slot.
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 shop/world#2037349. 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

API design: https://meteorite.shopify.io/repos/shop/world/pulls/2037349
POS host implementation: https://meteorite.shopify.io/repos/shop/world/pulls/2030122
Shopify Dev documentation: https://meteorite.shopify.io/repos/shop/world/pulls/2030135

🎩

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 · 2026-09-01T03:43:15Z

/snapIt

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

ajanth-u · 2026-09-01T15:33:18Z

/snapit

shopify-github-actions-access · 2026-09-01T15:35:02Z

🫰✨ 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 · 2026-09-01T16:21:45Z

/snapit

shopify-github-actions-access · 2026-09-01T16:23:34Z

🫰✨ 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/731c45d9-3be0-4043-899f-87200624d2b8

Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Row callbacks are functions nested inside the `rows` data, so they cross the sandbox boundary as RPC callables and cannot receive a DOM Event. The host sends `{type: 'click'}`; describe exactly that instead of `CallbackEvent`. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

ajanth-u · 2026-09-10T04:16:26Z

/snapit

shopify-github-actions-access · 2026-09-10T04:18:05Z

🫰✨ 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-20260910041724",
"@shopify/ui-extensions-tester": "0.0.0-snapshot-20260910041724"

Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Subtitles take tone and color as s-text does; badges take tone as s-badge does. Replaces the legacy List value sets that reused the shared prop names with incompatible values. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

ajanth-u · 2026-09-10T14:35:05Z

/snapit

shopify-github-actions-access · 2026-09-10T14:36:42Z

🫰✨ 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-20260910143603",
"@shopify/ui-extensions-tester": "0.0.0-snapshot-20260910143603"

Removes the POSListTone and POSListTextColor duplicates; the published types narrow the shared keywords exactly as Badge and Text do. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Rows gain type ('auto' | 'text' | 'button'); the list gains onRowClick, whose event carries the activated row's id in detail. Rows no longer hold functions, so they cross the sandbox boundary as pure data and the handler receives a real Event on the declared-event path, like loadmore. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

ajanth-u · 2026-09-11T00:45:57Z

/snapit

shopify-github-actions-access · 2026-09-11T00:47:38Z

🫰✨ 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-20260911004700",
"@shopify/ui-extensions-tester": "0.0.0-snapshot-20260911004700"

Row activation is a declared element event; a rejection in the listener stays in the extension like any other element event. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

The docs generator leaves Extract<...> inside object type aliases unresolved, so the reference page showed the raw expression. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Add POS List web component types

dc15766

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

Add POS List generated docs data

67ca32c

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

ajanth-u marked this pull request as ready for review September 1, 2026 04:06

ajanth-u marked this pull request as draft September 1, 2026 05:18

Use standard POS list click details

40dddf1

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

ajanth-u added 4 commits September 1, 2026 15:41

Document POSList subtitle color and chevron defaults

5c6633c

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

Add per-row clickable control to POSList

d145625

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

Switch POSList types to per-row onClick callbacks

afc2556

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

Pass a click event to POSList row callbacks

5d1e677

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

ajanth-u changed the title ~~Add POS List web component types~~ [3/6] Add POS List web component types Sep 2, 2026

ajanth-u commented Sep 2, 2026

View reviewed changes

Comment thread packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx Outdated

ajanth-u commented Sep 2, 2026

View reviewed changes

Comment thread packages/ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/default.jsx Outdated

ajanth-u commented Sep 2, 2026

View reviewed changes

Comment thread ...ui-extensions/src/surfaces/point-of-sale/components/POSList/examples/incremental-loading.jsx Outdated

Update POSList example callbacks to log events

88491b6

Assisted-By: devx/731c45d9-3be0-4043-899f-87200624d2b8

ajanth-u added the #gsd:51755 label Sep 8, 2026

ajanth-u added 2 commits September 9, 2026 23:37

Document toggle switch precedence over trailing label and chevron

706ce1d

Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

ajanth-u added 3 commits September 10, 2026 00:33

Document that a disabled POSList toggle switch blocks row activation

2501fd5

Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Document that POSList auto image display is decided per row

cb567ea

Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

ajanth-u self-assigned this Sep 10, 2026

ajanth-u marked this pull request as ready for review September 10, 2026 15:01

ajanth-u added 2 commits September 10, 2026 12:36

Narrow POSList tone and color off BadgeProps and TextProps

31619b2

Removes the POSListTone and POSListTextColor duplicates; the published types narrow the shared keywords exactly as Badge and Text do. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

ajanth-u added 4 commits September 11, 2026 00:14

Document that POSList rowclick listener errors are not reported by POS

d3d8ac3

Row activation is a declared element event; a rejection in the listener stays in the extension like any other element event. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Publish POSList tone and color as literal unions

081f69a

The docs generator leaves Extract<...> inside object type aliases unresolved, so the reference page showed the raw expression. Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Drop the auto POSList row type; rows are buttons by default

6e40114

Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

Make a POSList row end either trailing text or a toggle switch

822fcbb

Assisted-By: devx/0c7bafdf-0c5c-4c4d-b9aa-d967e97853e3

ajanth-u mentioned this pull request Sep 12, 2026

[POS] Add s-pos-list and the posListTemplate compiler (2026-10) #4690

Draft

Navigation Menu

Uh oh!

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

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

ajanth-u commented Sep 1, 2026 •

edited

Loading

Uh oh!

ajanth-u commented Sep 1, 2026

Uh oh!

ajanth-u commented Sep 1, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 1, 2026

Uh oh!

ajanth-u commented Sep 1, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 1, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ajanth-u commented Sep 10, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 10, 2026

Uh oh!

ajanth-u commented Sep 10, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 10, 2026

Uh oh!

ajanth-u commented Sep 11, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

ajanth-u commented Sep 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Background

Solution

Alternatives considered

Verification

Dependencies

Related PRs

🎩

Checklist

Uh oh!

ajanth-u commented Sep 1, 2026

Uh oh!

ajanth-u commented Sep 1, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 1, 2026

Uh oh!

ajanth-u commented Sep 1, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 1, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ajanth-u commented Sep 10, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 10, 2026

Uh oh!

ajanth-u commented Sep 10, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 10, 2026

Uh oh!

ajanth-u commented Sep 11, 2026

Uh oh!

shopify-github-actions-access Bot commented Sep 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

ajanth-u commented Sep 1, 2026 •

edited

Loading