-
Notifications
You must be signed in to change notification settings - Fork 6
List Specification
Simeon Simeonoff edited this page Feb 28, 2025
·
12 revisions
Team Name: CodeX
Developer Name: Ivan Zhostov
Designer Name: Simeon Simeonoff
- Peer Developer Name | Date:
- Design Manager Name | Date:
- Radoslav Mirchev | Date:
- Damyan Petev | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Ivan Zhostov | N/A | Initial draft |
| 2 | Simeon Simeonoff | 28-Feb-2025 | Update list item API to reflect the addition of the `selecte property. |
The <igc-list> should represent vertical container for contextual similar items. List is a building block of any complex UI used in almost every mobile application.
<igc-list>
<igc-list-header>Header</igc-list-header>
<igc-list-item>
<igc-icon slot="start" name="face"></igc-icon>
<span slot="title">Title</span>
<span slot="subtitle">Sub title</span>
<igc-icon slot="end" name="more_horiz"></igc-icon>
</igc-list-item>
<igc-list-item>
<igc-icon slot="start" name="face"></igc-icon>
<span slot="title">Title</span>
<span slot="subtitle">Sub title</span>
<igc-icon slot="end" name="more_horiz"></igc-icon>
</igc-list-item>
</igc-list>Provides means for the developers to implement a simple common case, yet customizable list with minimal efforts. The list item component should be a container for text or some HTML content. A group of items into the list can be separated and labeled by header.
- The developer can add a list component to the application.
- The developer can define list items as headers, so they label other items below them.
- The end-users can view a list.
- The end-users can vertically scroll the list items.
Developer stories:
- Story 1: As a developer, I want to add a list, so that I can create rows of similar list-items.
- Story 2: As a developer, I want to have a vertically scrollable list, so that I can add as many list-items as I need.
- Story 3: As a developer, I want to be able provide data items to the list.
<igc-list>
${users.map((user) => {
return html`
<igc-list-item>
<h2 slot="title">${user.name}</h2>
<span slot="subtitle">${user.position}</span>
</igc-list-item>
`;
})}
</igc-list>- Story 4: As a developer, I want to be able display group headers by adding a special header item into the list.
<igc-list>
<igc-list-header>
<h1>Mildly Sweet</h1>
</igc-list-header>
<igc-list-item>
<h3 slot="title">Red Delicious</h3>
</igc-list-item>
<igc-list-item>
<h3 slot="title">Ambrosia</h3>
</igc-list-item>
<igc-list-header>
<h1>Sweet</h1>
</igc-list-header>
<igc-list-item>
<h3 slot="title">Golden Delicious</h3>
</igc-list-item>
<igc-list-item>
<h3 slot="title">Cosmic Crisp</h3>
</igc-list-item>
</igc-list>- Story 5: As a developer, I want to be able to provide a custom template when the list is empty.
<igc-list>
<p>My custom empty list template</p>
</igc-list>- Story 6: As a developer, I want to be able to implement custom logic and behavior to be executed when clicking a list item.
- Story 7: As a developer, I want to be able to set an active item..
- Story 8: As a developer, I want to be able to focus list items.
- Story 9: As a developer, I want to be able to specify a display density for the layout of the list and its items.
- Story 10: As a developer, I want to be able to have visual feedback when an item is selected.
A list consists of a single continuous column of tessellated sub-divisions of equal width called rows that function as containers for list-items.
3.1. API
| Name | Description | Type | Default value |
|---|---|---|---|
| size | The size of the list | small | medium | large |
large |
| Name | Description |
|---|---|
| (default) | Renders the list items. |
| Name | Description |
|---|---|
| (default) | Renders the list item header content. |
| Name | Description | Type | Default value |
|---|---|---|---|
| selected | Provides visual feedback for selected items | boolean | false |
| Name | Description |
|---|---|
| (default) | Renders custom content. |
| title | Renders the title. |
| subtitle | Renders the sub title below the title. |
| start | Renders the left aligned thumbnail. |
| end | Renders the right aligned action icons. |
| Name | Description |
|---|---|
| start | The left aligned thumbnail. |
| content | The wrapper for header and custom template. |
| header | The wrapper for title and subtitle. |
| end | The right aligned action icons. |
Automation
- Test defining a list:
- with content items only;
- with items and header;
- with multiple headers.
- Verify list item slots are rendered successfully.
- Verify the elements defined in the slots are displayed.
- Verify custom empty template would be shown.
- Verify items' roles are properly set.
ARIA Support
- Roles: