Skip to content

List Specification

Jump to bottom
Ivan edited this page Aug 11, 2021 · 11 revisions

List Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. References

Owned by

Team Name: CodeX

Developer Name: Ivan Zhostov

Designer Name

Requires approval from

  • Peer Developer Name | Date:
  • Design Manager Name | Date:

Signed off by

  • Radoslav Mirchev | Date:
  • Damyan Petev | Date:

Revision History

Version Users Date Notes
1 Names of Developers and Designers Date

1. Overview

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>

Objectives

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.

Acceptance criteria

  1. The developer can add a list component to the application.
  2. The developer can define list items as headers, so they label other items below them.
  3. The end-users can view a list.
  4. The end-users can vertically scroll the list items.

2. User Stories

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.

3. Functionality

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

igc-list

Properties

Name Description Type Default value
size The size of the list small | medium | large large

Slots

Name Description
(default) Renders the list items.

igc-list-header

Slots

Name Description
(default) Renders the list item header content.

igc-list-item

Slots

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.

CSS Parts

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.

4. Test Scenarios

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.

5. Accessibility

ARIA Support

  • Roles:
    • List will need list role
    • List item will need separator role when it is a header and listitem role when it is not.

6. References

Clone this wiki locally