[List]: list item in the panel has no border when nested
@dobrinyonkov is already working on this.
Since Feb 5, 2025.
- 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:
-
open the first playground link in the List document.
-
import "@ui5/webcomponents/dist/Panel.js";
-
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>`
-
watch the preview that the bottom border of the list item is not shown
Affected Component
List and Panel
Expected Behaviour
the list item should have the option to show its bottom border.
Isolated Example
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.