Paginator Specification Draft

Paginator Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. ARIA support
5. Test scenarios
6. References
7. Dependencies

Owned by

Team Name: Design and Web Development

Developer Name:

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	Silvia Ivanova	16-Sep-2022	Initial Draft

1. Overview

The igc-paginator component is used to divide a set of data into a number of similar pages.

Objectives

The component enables the users to easily navigate through a range of pages. It should display a select with options for defining the number of items shown on each page along with buttons for changing the page.

2. User Stories

Developer Stories

As a developer, I want to

• be able to set the number of visible items per page
• be notified when the number of visible items per page has changed
• be able to navigate through the pages
• be notified when the current page has changed
• be able to enable/disable or hide the select options
• be able to enable/disable or hide the navigation buttons
• be able to set the paginator size
• be able to customize the paginator giving different combinations of colors for background and foreground elements

As an end user, I want to

• be able to see how many records are currently being displayed per page
• be able to select the number of visible items per page
• be able to see on which page I am currently at
• be able to see the total number of pages
• be able to navigate to the first/last page through icon buttons
• be able to navigate to the previous/next page through icon buttons
• be able to change the size of the component
• be able to define a custom content

3. Functionality

3.1. End User Experience

The paginator component should display a select controlling the number of visible items per page along with buttons for navigating through the pages.

3.2. Developer Experience

<igc-paginator perPage="5">
</igc-paginator>

3.3. Keyboard Navigation ??

3.4. API

Properties

IgcPaginatorComponent

Name	Description	Type	Default Value	Reflected
perPage	Set the number of visible items per page	number	15	false
totalRecords	Set the total records	number		false
selectOptions ?	Sets custom options in the select of the paginator	string		false

Methods

IgcPaginatorComponent

Name	Description	Parameters
nextPage	Navigates to the next page if the paginator is not already at the last one
previousPage	Navigates to the previous page if the paginator is not already at the first one
paginate	Navigates to specific page index	index

Events

IgcPaginatorComponent

Name	Description	Cancelable	Parameters
igcPageChange	Emitted when the current page has changed	false
igcPerPageChange	Emitted when the value of the perPage property has changed	false
igcPaging	Emitted before paging is performed	true
igcPagingDone	Emitted after paging is performed	false
igcDensityChanged	Emitted when the size of the component has changed	false

Slots

IgcPaginatorComponent

Name	Description
(default)	Renders the paginator's content

IgcPageSizeComponent

Name	Description
(default)	Renders the page size content
label	Renders the page size label

IgcPageNavComponent

Name	Description
(default)	Renders the page navigation content
text	Renders the page navigation text

IgcPaginatorContentComponent ???

CSS Parts

IgcPaginatorComponent

Name	Description
base	The base wrapper of the paginator

IgcPageSizeComponent

Name	Description
base	The base wrapper of the page size

IgcPageNavComponent

Name	Description
base	The base wrapper of the page navigation

4. ARIA Support

• IgcPageNavComponent - role="navigation"

5. Test Scenarios

Automation

• Should initilize the component properly with default property values.
• Should initilize the component properly with passed property values.
• Should set the paginator visible records per page correctly.
• Should set the paginator total records correctly.
• Should set the paginator select options correctly.
• Should display custom content placed between the opening and closing tags of the paginator.
• Should navigate through the pages using navigation buttons.
• Should fire event when the current page has changed.
• Should fire event when the value of the perPage property has changed.
• Should fire event when the size of the component has changed.

6. References

• https://github.com/IgniteUI/igniteui-angular/wiki/Grid-Paging-Specification

7. Dependencies