UI5 / UI5/webcomponents

[List]: list item in the panel has no border when nested

Open
#10,636 8 comments 0 reactions 1 assignee View on GitHub

@dobrinyonkov is already working on this.

Since Feb 5, 2025.

Design Pending feature request Low Prio SAP SF TOPIC P
Dominant language
TypeScript
Stars
1.8k
Forks
285
Avg merge
3d 2h
Merged PRs (30d)
59

Description

Bug Description

List does not provide the expand/collapse functionality natively.
However, in some cases where the items are private, it's necessary to hide them by default by collapsing the group. To achieve so, we plan to put the group of items into a panel. But the items have no bottom border as the separator when doing so.

reproduction steps:

  1. open the first playground link in the List document.

  2. import "@ui5/webcomponents/dist/Panel.js";

  3. modify the html to `

     <ui5-li icon="nutrition-activity" description="Tropical plant with an edible fruit" additional-text="In-stock"
         additional-text-state="Positive">Pineapple</ui5-li>
     <ui5-li icon="nutrition-activity" description="Occurs between red and yellow" additional-text="Expires"
         additional-text-state="Critical">Orange</ui5-li>
     <ui5-li icon="nutrition-activity" description="The yellow lengthy fruit" additional-text="Re-stock"
         additional-text-state="Information">Blueberry</ui5-li>
     <ui5-li icon="nutrition-activity" description="The tropical stone fruit" additional-text="Re-stock"
         additional-text-state="Negative">Mango</ui5-li>
      <ui5-panel>
    

    `

  4. watch the preview that the bottom border of the list item is not shown

Image
Affected Component

List and Panel

Expected Behaviour

the list item should have the option to show its bottom border.

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG48aGVhZD5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpXCI-XG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuXG4gICAgPHVpNS1saXN0PlxuICAgICAgICA8dWk1LWxpIGljb249XCJudXRyaXRpb24tYWN0aXZpdHlcIiBkZXNjcmlwdGlvbj1cIlRyb3BpY2FsIHBsYW50IHdpdGggYW4gZWRpYmxlIGZydWl0XCIgYWRkaXRpb25hbC10ZXh0PVwiSW4tc3RvY2tcIlxuICAgICAgICAgICAgYWRkaXRpb25hbC10ZXh0LXN0YXRlPVwiUG9zaXRpdmVcIj5QaW5lYXBwbGU8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSBpY29uPVwibnV0cml0aW9uLWFjdGl2aXR5XCIgZGVzY3JpcHRpb249XCJPY2N1cnMgYmV0d2VlbiByZWQgYW5kIHllbGxvd1wiIGFkZGl0aW9uYWwtdGV4dD1cIkV4cGlyZXNcIlxuICAgICAgICAgICAgYWRkaXRpb25hbC10ZXh0LXN0YXRlPVwiQ3JpdGljYWxcIj5PcmFuZ2U8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSBpY29uPVwibnV0cml0aW9uLWFjdGl2aXR5XCIgZGVzY3JpcHRpb249XCJUaGUgeWVsbG93IGxlbmd0aHkgZnJ1aXRcIiBhZGRpdGlvbmFsLXRleHQ9XCJSZS1zdG9ja1wiXG4gICAgICAgICAgICBhZGRpdGlvbmFsLXRleHQtc3RhdGU9XCJJbmZvcm1hdGlvblwiPkJsdWViZXJyeTwvdWk1LWxpPlxuICAgICAgICA8dWk1LWxpIGljb249XCJudXRyaXRpb24tYWN0aXZpdHlcIiBkZXNjcmlwdGlvbj1cIlRoZSB0cm9waWNhbCBzdG9uZSBmcnVpdFwiIGFkZGl0aW9uYWwtdGV4dD1cIlJlLXN0b2NrXCJcbiAgICAgICAgICAgIGFkZGl0aW9uYWwtdGV4dC1zdGF0ZT1cIk5lZ2F0aXZlXCI-TWFuZ288L3VpNS1saT5cbiAgICA8L3VpNS1saXN0PlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuICAgIDxzY3JpcHQgdHlwZT1cIm1vZHVsZVwiIHNyYz1cIm1haW4uanNcIj48L3NjcmlwdD5cbjwvYm9keT5cblxuPC9odG1sPlxuPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuIn0sIm1haW4uanMiOnsibmFtZSI6Im1haW4uanMiLCJjb250ZW50IjoiLyogcGxheWdyb3VuZC1oaWRlICovXG5pbXBvcnQgXCIuL3BsYXlncm91bmQtc3VwcG9ydC5qc1wiO1xuLyogcGxheWdyb3VuZC1oaWRlLWVuZCAqL1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvTGlzdC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvTGlzdEl0ZW1TdGFuZGFyZC5qc1wiO1xuXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtaWNvbnMvZGlzdC9udXRyaXRpb24tYWN0aXZpdHkuanNcIjsifX0

Steps to Reproduce

No response

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.3.0

Browser

Chrome, Edge, Firefox, Safari

Operating System

No response

Additional Context

No response

Organization

SFSF

Declaration
  • I’m not disclosing any internal or sensitive information.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.