feat(component): provide props for customising pagination button labels

[BC-SEven]

What?

Adding a label, previousLabel , nextLabel and getLabel prop to the Pagination component that customise the labels of the navigation buttons and range selector

Why?

Allow greater customisability of the component.

Screenshots/Screen Recordings

Screen.Recording.2022-10-12.at.4.08.54.pm.mov

Testing/Proof

Added jest spec tests to define behaviour of new pagination props.

[chanceaclark]

This is something we've been meaning to get around to but haven't yet! Thanks for taking the time and effort to do so! I have a few comments, otherwise looks really good! 🙇

[chanceaclark]

Overall I think this is great! I'd love to sort of condense the names just a bit and add one more if that cool? Generally, I'd like this to align with Atlaskit: https://atlassian.design/components/pagination/code

Suggested change

	previousPageLabel?: string;
	nextPageLabel?: string;
	getRangeLabel?(start: number, end: number, totalItems: number): string;
	label?: string;
	previousLabel?: string;
	nextLabel?: string;
	getRangeLabel?(start: number, end: number, totalItems: number): string;

The new addition label would be for aria-label="pagination".

[chanceaclark]

How about we extract this outside of the component (same file) and default prop the getRangeLabel? I would also love to get rid of the ternary statement too 😬

const DEFAULT_GET_RANGE_LABEL: PaginationProps['getRangeLabel']  = (start, end, totalItems) => {
  if (start === end) {
    return `${start} of ${totalItems}`;
  }

  return `${start} - ${end} of ${totalItems};
}

[chanceaclark]

Can you revert this back? We actually did that to exclude the margin props to enforce design consistency. (Maybe add a comment about that?

[chanceaclark]

Same here

[davelinke]

In terms of visuals I assume the getRangeLabel prop is to allow diverse languages to be used. I'm worried of people abusing it, but we can enforce misuse in demo reviews.

I got one question; Since pagers are usually found at the bottom of pages, does the dropdown open upwards in case there is not enough space for the dropdown to open downwards?

[chanceaclark]

Since pagers are usually found at the bottom of pages, does the dropdown open upwards in case there is not enough space for the dropdown to open downwards?

Yes, our popper library takes care of that.