feat(core/list): Implement generic list component by lzeiml · Pull Request #2724 · siemens/ix

lzeiml · 2026-08-18T14:31:16Z

EIX-65
Docs PR: siemens/ix-docs#279

Add ix-list, ix-list-item and ix-list-separator.
Implements the following functionality:

Keyboard navigable list with standard/custom content
Checkbox selection
Variants
Dividers/spacing
Action slot (persisent/on-hover)
Drag and Drop (dynamic/separator)

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

🦮 Accessibility (a11y) features were implemented
🗺️ Internationalization (i18n) - no hard coded strings
📲 Responsiveness - components handle viewport changes and content overflow gracefully
📕 Add or update a Storybook story
📄 Documentation was reviewed/updated siemens/ix-docs
🧪 Unit tests were added/updated and pass (pnpm test)
📸 Visual regression tests were added/updated and pass (Guide)
🧐 Static code analysis passes (pnpm lint)
🏗️ Successful compilation (pnpm build, changes pushed)

Summary by CodeRabbit

New Features
- Added versatile list, list-item, and separator components.
- Supports selection, custom content, descriptions, dividers, spacing, disabled states, visual variants, and hover actions.
- Added pointer- and keyboard-based drag-and-drop reordering.
- Added keyboard navigation and accessibility-focused interactions.
- Added framework examples and documentation previews for common list configurations.
Tests
- Added accessibility, interaction, reordering, and visual regression coverage.

changeset-bot · 2026-08-18T14:31:22Z

🦋 Changeset detected

Latest commit: 7f7ca58

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@siemens/ix	Minor
@siemens/ix-react	Minor
@siemens/ix-angular	Minor
@siemens/ix-vue	Minor
@siemens/ix-docs	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

netlify · 2026-08-18T14:31:24Z

✅ Deploy Preview for ix-storybook ready!

Name	Link
🔨 Latest commit	`7f7ca58`
🔍 Latest deploy log	https://app.netlify.com/projects/ix-storybook/deploys/6aa947307c59ee0008d4871c
😎 Deploy Preview	https://deploy-preview-2724--ix-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

coderabbitai · 2026-08-18T14:31:37Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

The pull request adds ix-list, ix-list-item, and ix-list-item-separator with selection, actions, variants, accessibility behavior, and keyboard or pointer reordering. It adds Angular, React, Vue, HTML, Storybook, showcase, and visual-testing examples.

Changes

Generic list components

Layer / File(s)	Summary
List contracts and item behavior `packages/core/component-api.json`, `packages/core/src/components.d.ts`, `packages/core/src/components/list-item/`, `packages/core/src/components/list-item-separator/`	Adds public APIs, generated typings, list-item rendering and styling, selection and action events, and the standalone separator component with accessibility tests.
List orchestration and reordering `packages/core/src/components/list/*`	Adds inherited defaults, focus management, action navigation, keyboard and pointer reordering, drag placeholders, announcements, and order-change events with comprehensive tests.
Angular integration and previews `packages/angular/src/`, `packages/angular-standalone-test-app/src/`, `packages/angular-test-app/src/*`	Adds Angular proxies, directive registration, routes, module declarations, and list examples for basic, action, selection, custom-content, draggable, and variant configurations.
Cross-framework showcases `packages/html-test-app/src/preview-examples/`, `packages/react-test-app/src/`, `packages/vue-test-app/src/*`	Adds equivalent HTML, React, and Vue previews for list content, actions, selection, variants, separators, and dragging.
Showcase validation and release support `packages/core/src/index.html`, `packages/storybook-docs/`, `testing/visual-testing/tests/list/`, `.changeset/add-list-components.md`	Adds core and Storybook demonstrations, visual regression scenarios, and release metadata for the new components.

Estimated code review effort: 5 (Critical) | ~120 minutes

Suggested reviewers: danielleroux

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant IxListItem
  participant IxList
  participant Consumer
  User->>IxListItem: activate item or selection control
  IxListItem->>Consumer: emit itemClick or selectedChange
  User->>IxListItem: start keyboard or pointer drag
  IxListItem->>IxList: provide drag interaction
  IxList->>IxList: update order and focus
  IxList->>Consumer: emit itemOrderChange

Merge Risk: 🟡 Moderate · up to 87f4a

The new list component still has keyboard and accessibility defects, an inconsistent documented API, and failing component tests that can block users and leave required checks incomplete; it is not merge-ready until these issues are fixed or explicitly accepted.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 33 files. (5 skipped: 5…	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change: implementing the generic list component and related core list functionality.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 7 functions across 33 files. (5 skipped: 5 unsupported.)

✨ Finishing Touches 💡 2

📝 Generate docstrings 💡

Create stacked PR
Commit on current branch

🛠️ Fix failing CI checks 💡

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch feature/1795_generic-list

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

…s/ix into feature/1795_generic-list

danielleroux · 2026-09-08T07:09:18Z

+    this.announce(
+      item,
+      `${this.getItemLabel(
+        item
+      )} lifted. Use arrow keys to move, Enter or Space to drop, and Escape to cancel.`
+    );


Just put the comment here but hit every hardcoded announce string, we need to provide a way to make it i18n ready

danielleroux · 2026-09-08T07:13:20Z

+      item.style.setProperty('--ix-list-drag-left', `${itemBounds.left}px`);
+      item.style.setProperty('--ix-list-drag-top', `${itemBounds.top}px`);
+      item.style.setProperty('--ix-list-drag-width', `${itemBounds.width}px`);


Would make sense to use here also rem

i dont think rem makes sense here, because getBoundingClientRect() returns the values in px, and writing them back in px preserves the same system

danielleroux

Storybook for "ix-list-item" is missing

sonarqubecloud · 2026-09-15T13:25:59Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

lzeiml added 16 commits July 16, 2026 16:36

first version

9ba37d8

visual test

4fd3e5a

fixes

ef683a3

misc

7084be0

fixes

39c1b85

fixes

9be7004

improvements

89e08e5

more improvements

7ce5298

improvements

9453b39

fixes

67a6020

fix

2365538

Merge branch 'main' into feature/1795_generic-list

24f861f

examples

9b6c143

examples

6f4a804

more examples

0312416

fixes

242ce00

lzeiml added 2 commits August 18, 2026 16:41

fix

0b1c833

Merge branch 'main' into feature/1795_generic-list

33b885c

lzeiml mentioned this pull request Aug 20, 2026

docs(ix-list): Add documentation page for generic list siemens/ix-docs#279

Open

lzeiml added 5 commits August 20, 2026 09:22

Fix changesets

9be79a9

Merge branch 'feature/1795_generic-list' of https://github.com/siemen…

1192475

…s/ix into feature/1795_generic-list

fix stories

a58cca8

fix snapshots

67c2428

Merge branch 'main' into feature/1795_generic-list

220f672

lzeiml marked this pull request as ready for review August 26, 2026 14:38

lzeiml requested review from a team as code owners August 26, 2026 14:38

lzeiml added 15 commits September 2, 2026 14:32

use system tokens

40731eb

update snapshots

1637acc

remove non null assertion

d1048d5

fix unit

5cc91fa

fix checkbox accessibility

fd44217

refactor and fix keyboard nav

1fc267c

fix separator a11y

e5bf1eb

update actions story

a3c5020

fix unit

49423fc

fix keyboard nav

ab6e165

fix checkbox margin

f6cd8db

fix preview examples

aeb96a0

revert index changes

c64591a

fix index file

2fdfc58

build

620bbb1

danielleroux requested changes Sep 8, 2026

View reviewed changes

lzeiml added 12 commits September 8, 2026 12:53

extract list/list-item types

d9b2c6f

extract system tokens

796b234

super call

53fece8

fix drag and drop inside transformed container

d2cc380

fixes

fe20dcf

linting

c27a36a

update snapshots

bbb98b7

refactor styling

ae3df11

adapt item-gap prop

80da996

adapt examples

e6f2f2f

allow list item standalone navigation

cadc2df

fix index

7f7ca58

Conversation

lzeiml commented Aug 18, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🏁 Checklist

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

netlify Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for ix-storybook ready!

Uh oh!

coderabbitai Bot commented Aug 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Sequence Diagram(s)

❌ Failed checks (1 warning)

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielleroux Sep 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielleroux Sep 8, 2026

Choose a reason for hiding this comment

Uh oh!

lzeiml Sep 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danielleroux left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Sep 15, 2026

Quality Gate passed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lzeiml commented Aug 18, 2026 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Aug 18, 2026 •

edited

Loading

netlify Bot commented Aug 18, 2026 •

edited

Loading

coderabbitai Bot commented Aug 18, 2026 •

edited

Loading

danielleroux Sep 8, 2026 •

edited

Loading