feat(pie-list): DSW-2960 implement list + list item component and tests #2404

matthewhardern · 2025-06-09T08:57:19Z

Describe your changes (can list changeset entries if preferable)

Implements the initial version of the pie-list and pie-list-item components with basic functionality:

pie-list component:

Added variant prop supporting 'default' and 'compact' layouts
Added dividers prop to show separators between list items
Implemented proper semantic HTML with <ul role="list">
Integrated with PIE design system using CSS custom properties

pie-list-item component:

Added primaryText prop for text content
Added selected and disabled state props
Implemented proper accessibility with ARIA attributes
Applied PIE typography using font helpers

Additional changes:

Created Storybook stories with 4 variants (Default, Compact, WithDividers, CompactWithDividers)
Added test helpers and page objects for component testing
Implemented RTL support via RtlMixin
Added proper data-test-id attributes for testing

Author Checklist (complete before requesting a review, do not delete any)

I have performed a self-review of my code.
I have added thorough tests where applicable (unit / component / visual).
I have reviewed the PIE Storybook/PIE Docs PR preview.
I have reviewed visual test updates properly before approving.
If changes will affect consumers of the package, I have created a changeset entry.
If a changeset file has been created, I have tested these changes in PIE Aperture using the /test-aperture command.
I have filled out the DS Review Tracker checklist (Moving PR to "Ready to Review")

Not-applicable Checklist items

Visual test updates (none in this PR)

Task	Link
Aperture PR	🔗
NextJS 14 deployment	🔗
Nuxt 3 deployment	🔗
Vanilla deployment	🔗

Reviewer checklists (complete before approving)

Mark items as [-] N/A if not applicable.

Reviewer 1 - @jamieomaguire

I have reviewed the PIE Storybook/PIE Docs PR preview.
I have verified that all acceptance criteria for this ticket have been completed.
I have reviewed the Aperture changes (if added)
If there are visual test updates, I have reviewed them.

Reviewer 2 - @ashleynolan

I have reviewed the PIE Storybook/PIE Docs PR preview.
I have verified that all acceptance criteria for this ticket have been completed.
I have reviewed the Aperture changes (if added)
If there are visual test updates, I have reviewed them.

changeset-bot · 2025-06-09T08:57:23Z

🦋 Changeset detected

Latest commit: 77203c3

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

This PR includes changesets to release 4 packages

Name	Type
@justeattakeaway/pie-list	Minor
@justeattakeaway/pie-storybook	Patch
@justeattakeaway/pie-webc	Patch
@justeattakeaway/pie-docs	Patch

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

packages/components/pie-list/src/pie-list-item/index.ts

apps/pie-storybook/stories/testing/pie-list.test.stories.ts

packages/components/pie-list/src/pie-list-item/list-item.scss

Co-authored-by: Raouf <[email protected]>

raoufswe · 2025-11-07T11:10:52Z

packages/components/pie-list/src/index.ts

+
+    @property({
+        type: Boolean,
+        attribute: 'has-dividers',


i think we don't need this line anymore as we can use hasDividers as a css selector.

raoufswe · 2025-11-07T11:11:30Z

packages/components/pie-list/src/list.scss

+}
+
+// Dividers between items
+:host([has-dividers]) ::slotted(pie-list-item:not(:last-child)),


Suggested change

:host([has-dividers]) ::slotted(pie-list-item:not(:last-child)),

:host([hasDividers]) ::slotted(pie-list-item:not(:last-child)),

raoufswe · 2025-11-07T11:11:41Z

packages/components/pie-list/src/list.scss

+// Dividers between items
+:host([has-dividers]) ::slotted(pie-list-item:not(:last-child)),
+// Allow bespoke markup that renders native `<li>` elements.
+:host([has-dividers]) ::slotted(li:not(:last-child)) {


Suggested change

:host([has-dividers]) ::slotted(li:not(:last-child)) {

:host([hasDividers]) ::slotted(li:not(:last-child)) {

raoufswe · 2025-11-07T11:14:22Z

packages/components/pie-modal/test/helpers/page-object/pie-modal.component.ts

    private readonly headerLocator: Locator;
    private readonly descriptionLocator: Locator;
    readonly footerLocator: Locator;
-    private readonly page: Page;


is there a reason of this change or just a rebase issue?

github-actions bot added apps components pie-storybook pie-list labels Jun 9, 2025

github-actions bot temporarily deployed to storybook-pr-2404 June 9, 2025 09:01 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 9, 2025 09:02 Inactive

github-actions bot temporarily deployed to storybook-pr-2404 June 9, 2025 12:44 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 9, 2025 12:44 Inactive

matthewhardern force-pushed the dsw-2960-basic-list branch from cb8c46d to 7f35ff3 Compare June 9, 2025 13:47

github-actions bot temporarily deployed to storybook-pr-2404 June 9, 2025 13:51 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 9, 2025 13:52 Inactive

matthewhardern force-pushed the dsw-2960-basic-list branch from 7f35ff3 to e8e7f13 Compare June 10, 2025 07:56

github-actions bot temporarily deployed to storybook-pr-2404 June 10, 2025 08:00 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 10, 2025 08:01 Inactive

matthewhardern marked this pull request as ready for review June 10, 2025 08:12

matthewhardern requested review from a team as code owners June 10, 2025 08:12

matthewhardern changed the title ~~feat(pie-list): implement list + list item component and tests~~ feat(pie-list): DS2960 implement list + list item component and tests Jun 10, 2025

matthewhardern changed the title ~~feat(pie-list): DS2960 implement list + list item component and tests~~ feat(pie-list): DSW-2960 implement list + list item component and tests Jun 10, 2025

github-actions bot temporarily deployed to storybook-pr-2404 June 10, 2025 08:16 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 10, 2025 08:17 Inactive

matthewhardern force-pushed the dsw-2960-basic-list branch 4 times, most recently from cea6f8e to a482147 Compare June 11, 2025 07:59

github-actions bot temporarily deployed to storybook-pr-2404 June 11, 2025 08:04 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 June 11, 2025 08:04 Inactive

matthewhardern force-pushed the dsw-2960-basic-list branch from a482147 to bd1633d Compare June 16, 2025 08:34

github-actions bot temporarily deployed to storybook-pr-2404 June 16, 2025 08:38 Inactive

chore(pie-list): DSW-2960 remove component test suite

4d369a4

matthewhardern dismissed siggerzz’s stale review via 4d369a4 October 21, 2025 08:17

github-actions bot temporarily deployed to storybook-pr-2404 October 21, 2025 08:21 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 October 21, 2025 08:22 Inactive

Merge branch 'main' into dsw-2960-basic-list

2bc6017

github-actions bot temporarily deployed to storybook-pr-2404 October 21, 2025 12:12 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 October 21, 2025 12:12 Inactive

ashleynolan previously approved these changes Nov 5, 2025

View reviewed changes

jamieomaguire previously approved these changes Nov 5, 2025

View reviewed changes

Merge branch 'main' into dsw-2960-basic-list

84f4eab

github-actions bot temporarily deployed to storybook-pr-2404 November 5, 2025 11:16 Inactive

github-actions bot temporarily deployed to storybook-testing-pr-2404 November 5, 2025 11:16 Inactive

raoufswe reviewed Nov 5, 2025

View reviewed changes

packages/components/pie-list/src/pie-list-item/index.ts Outdated Show resolved Hide resolved

raoufswe reviewed Nov 5, 2025

View reviewed changes

apps/pie-storybook/stories/testing/pie-list.test.stories.ts Outdated Show resolved Hide resolved

fix(pie-list): DSW-2960 reflect isSelected and Lit bindings

9e190f4

matthewhardern dismissed stale reviews from jamieomaguire and ashleynolan via 9e190f4 November 6, 2025 08:37

github-actions bot temporarily deployed to storybook-testing-pr-2404 November 6, 2025 08:41 Inactive

github-actions bot temporarily deployed to storybook-pr-2404 November 6, 2025 08:41 Inactive

raoufswe reviewed Nov 6, 2025

View reviewed changes

packages/components/pie-list/src/pie-list-item/list-item.scss Outdated Show resolved Hide resolved

raoufswe reviewed Nov 6, 2025

View reviewed changes

packages/components/pie-list/src/pie-list-item/list-item.scss Outdated Show resolved Hide resolved

matthewhardern and others added 3 commits November 7, 2025 08:25

Update packages/components/pie-list/src/pie-list-item/list-item.scss

ca3a113

Co-authored-by: Raouf <[email protected]>

Update packages/components/pie-list/src/pie-list-item/list-item.scss

79217ce

Co-authored-by: Raouf <[email protected]>

Merge branch 'main' into dsw-2960-basic-list

77203c3

github-actions bot deployed to storybook-pr-2404 November 7, 2025 08:30 View deployment

github-actions bot deployed to storybook-testing-pr-2404 November 7, 2025 08:30 View deployment

raoufswe reviewed Nov 7, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(pie-list): DSW-2960 implement list + list item component and tests #2404

feat(pie-list): DSW-2960 implement list + list item component and tests #2404

matthewhardern commented Jun 9, 2025 •

edited by ashleynolan

Loading

Uh oh!

changeset-bot bot commented Jun 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

raoufswe Nov 7, 2025 •

edited

Loading

Uh oh!

raoufswe Nov 7, 2025

Uh oh!

raoufswe Nov 7, 2025

Uh oh!

raoufswe Nov 7, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

	:host([has-dividers]) ::slotted(pie-list-item:not(:last-child)),
	:host([hasDividers]) ::slotted(pie-list-item:not(:last-child)),

	:host([has-dividers]) ::slotted(li:not(:last-child)) {
	:host([hasDividers]) ::slotted(li:not(:last-child)) {

feat(pie-list): DSW-2960 implement list + list item component and tests #2404

Are you sure you want to change the base?

feat(pie-list): DSW-2960 implement list + list item component and tests #2404

Conversation

matthewhardern commented Jun 9, 2025 • edited by ashleynolan Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Describe your changes (can list changeset entries if preferable)

Author Checklist (complete before requesting a review, do not delete any)

Not-applicable Checklist items

Reviewer checklists (complete before approving)

Reviewer 1 - @jamieomaguire

Reviewer 2 - @ashleynolan

Uh oh!

changeset-bot bot commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

raoufswe Nov 7, 2025 • 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!

raoufswe Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

raoufswe Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

raoufswe Nov 7, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

matthewhardern commented Jun 9, 2025 •

edited by ashleynolan

Loading

changeset-bot bot commented Jun 9, 2025 •

edited

Loading

raoufswe Nov 7, 2025 •

edited

Loading