Skip to content

List Specification

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

List Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. 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:
  • Radoslav Karaivanov | 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-item>Header</igc-list-header-item>
    <igc-list-item>
       <igc-icon slot="start" name="face"></igc-icon>
       <span>Title</span>
       <span slot="secondary">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>Title</span>
       <span slot="secondary">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.
  • Story 4: As a developer, I want to be able display group headers by adding a special header item into the list.
  • Story 5: As a developer, I want to be able to provide a custom template when the list is empty.
  • 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.

End-user stories:

  • Story 1: As an end-user, I want to have a list of information, so that I can quickly review rows of data.
  • Story 2: As an end-user, I want to be able to vertically scroll the list, so that I can review all of the available list items.
  • Story 3: As an end-user, I want to be able to click any item, so that a certain behavior gets triggered.

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. End-User Experience

** Integration scenarios or functionality with other features/components prototype ** End-to-end user experienceprototype ** Prepared design files for styling e.g. interplay with features and light/dark variants design hand-off 3.2. Developer Experience

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

Keys Description

3.5. API

igc-list

Slots

Name Description
(default) Renders the list items.

igc-list-header-item

Slots

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

igc-list-item

Slots

Name Description
(default) Renders the title and sub-title.
secondary Secondary text displayed below title.
start Renders the left aligned icon.
end Renders the right aligned action icons.

CSS Parts

Name Description
base The base wrapper of the list.
start The left aligned thumbnail.
middle Title content.
secondary Secondary content.
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 the specified list width is honored.
  • Verify custom empty template would be shown when specified instead of the default one.
  • Verify items' roles are properly set.
  • Verify items can be hidden.
  • Verify list items get activated on click and on key press.
  • Verify list items get focused on click and on key press.

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. Assumptions and Limitations

Assumptions Limitation Notes

7. References

Clone this wiki locally