List Specification

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-item>
       <igc-icon slot="start" name="face"></igc-icon>
       <span>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>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.
5. The end-users can interact the list items by swiping them left or right.

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 change focused items via keyboard keys: Enter, Space, Home, End, Arrow keys.
• Story 10: As a developer, I want to be able to remove focus from an item via the Escape key.
• Story 11: As a developer, I want to be able to control whether keyboard navigation would continue when reaching the start/end of the list.
• Story 12: 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 use on-swipe/pan gestures.
• Story 4: As an end-user, I want to be able to click any item, so that a certain behavior gets triggered.
• Story 5: As an end-user, I want to be able to navigate through list items via the keyboard.

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

Properties

Name	Description
allowLeftPanning	Determines whether the left panning of an item is allowed
allowRightPanning	Determines whether the right panning of an item is allowed
isLoading	???

Methods

Name	Description
focus	Sets focus on the native element.
blur	Removes focus from the native element.

Events

Name	Description
igcPanStateChange	Triggered when pan gesture is executed on list item
igcLeftPan	Triggered when left pan gesture is executed on list item
igcRightPan	Triggered when right pan gesture is executed on list item
igcItemClicked	Triggered when a list item has been clicked
igcStartPan	Triggered when start a pan gesture on list item
igcEndPan	Triggered when a pan gesture execution on list item has ended
igcResetPan	Triggered when the pan end threshold not reached

Slots

Name	Description
(default)	Renders the list items.

igc-list-item

Properties

Name	Description
hidden	Determines whether the item should be displayed
isHeader	Determines whether the item should be displayed as a header, default value is false

Slots

Name	Description
(default)	Renders the title and sub-title.
subTitle	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.
subTitle	Sub title 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.
• Test defining an empty list and verify the default empty template is used.
• Verify the specified list width is honored.
• Verify allowRightPanning properly controls whether panning items right is allowed.
• Verify allowLeftPanning properly controls whether panning items left is allowed.
• Verify custom empty template would be shown when specified instead of the default one.
• Verify IgcList's igcItemClicked event is emitted on clicking a list item.
• Verify igcItemClicked event is emitted with the correct direction when swiping items.
• Verify items' roles are properly set.
• Verify items can be hidden.
• Test panning events.
• Verify list items get activated on click and on key press.
• Verify list items get focused on click and on key press.
• Verify Escape key clears the focus from the focused item.
• Verify Arrow keys navigate successfully through list items.
• Verify Space and Enter keys activate & focus the first list item if there's no active item already.
• Verify Home and End keys navigate to the first and last list item respectively.

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

• https://material.io/components/lists
• https://www.infragistics.com/products/ignite-ui-angular/angular/components/list