Patternfly-react: Enhancement - Pagination previous/next paging

[priley86]

Create support for Paging component:
PatternFly design documentation: https://www.patternfly.org/pattern-library/navigation/pagination/

Follow up enhancement from #123

Include story examples demonstrating paging into a mock application scenario

• Add pagination row component (for use in list view, table view, card view) (finished in #143)
• Add simple previous/next pagers here and pagination default/mini size.

[AllenBW]

adding #162 as a record of another place where pagination was done to this issue

[AllenBW]

@priley86 @sharvit @jeff-phillips-18 Ok so been chewing on this one for a bit... leaning towards making the following approach:

1. make a <Pager> component, for the simple previous/next buttons that encompasses the two sizes seen below
   

2. make a <Pagination> component that encompasses the sizes seen below
   

3. Ok now we're at step three, does the existence of<Pagination> make the <Paginator>a lil odd?
   or slightly misnamed? Step three is possibly renaming the component to<PaginationRow> or something like that (I realize this would be a breaking change so we'll have to talk about this one)

you might be wondering, well why not just overload <Paginator> to do ALL TEH THINGS 🤔

It already has viewType a prop to select which type of pagination row to render... overloading it with the type of pagination is too much.

Thoughts?

[sharvit]

The 3 steps make tons of sense to me.

About step 3,
I am not sure I understand,
what is <Paginator>? don't we currently have a proper <PaginationRow> component?

It already has viewType a prop to select which type of pagination row to render... overloading it with the type of pagination is too much.

Could be nice to recompose them under Card.PaginationRow, Table.PaginationRow List.PaginationRow

[AllenBW]

Oh yeah, woops, its called <PaginationRow>

scrap step three, will make and who will all live under the Pagination storybook

[sharvit]

I think it makes sense to demonstrate the <PaginationRow> naked under the Pagination storybook.
For cards/tables/lists can do a full story with pagination (or add to an existing story if it makes sense).

[AllenBW]

hmm by naked... do you mean.... in a story without pager and pagination components?

Below is what I am presently working towards:

[sharvit]

@AllenBW sorry for the confusion.
By naked I meant just render the component without the context (Card, Tables, etc...) like it does now.

• Storybook
  
  
  
  • Pagination
  
  
  • Pager
  
  
  • Pagination
  
  
  • PaginationRow /* naked /
  
  
  • Card
  
  
  • Some card story
  
  
  • Some card story
  
  
  • Card with PaginationRow / in the cards context /
  
  
  • Table
  
  
  • Some table story
  
  
  • Some table story
  
  
  • Table with PaginationRow / in the tables context /
  
  
  • List
  
  
  • Some list story
  
  
  • Some list story
  
  
  • List with PaginationRow / in the lists context */
  
  

[AllenBW]

gotcha! yeah without context, that makes sense, no confusion @sharvit , its the direction I was heading 👍

[AllenBW]

@serenamarie125 quick question about https://www.patternfly.org/pattern-library/widgets/#pagination

The default pagination widget, does clicking a right or left arrow change all numbers in the range? (eg if 1, 2, 3, 4, 5 are show, clicking the right arrow would result in 6, 7, 8, 9, 10 being shown) Or increment by one (1, 2, 3, 4 becomes 2, 3, 4, 5)

@patrick OR do we want this component to be unopinionated, it to render a list given, execute a function when left or right are clicked?

[serenamarie125]

@AllenBW let me see if I can dig up some mocks which are reflective of the thoughts on PF documentation. Currently it's not in a great state, and there is an associated Issue with it https://github.com/patternfly/patternfly-design/issues/559

[serenamarie125]

IMO we want this pagination row

[AllenBW]

yeah! has been implemented, wondering if the rest of the pagination widgets should be implemented? if yes, pager is done... just unsure of behavior of the default pagination widget

[serenamarie125]

@priley86 @AllenBW IMO we need the pagination row to be utilized in card, list & table views. I'm not sure what the other paging use cases would cover. Thoughts ?

[AllenBW]

@serenamarie125 I could see the next previous button having a generic use... possibly a building block for other components, but can't say I see much use for the default pagination widget (given that pagination row exits)

[AllenBW]

@serenamarie125 @priley86 I'd like to propose this work be rescoped to only include the pager, in which case the outstanding pr will be recalibrated and unwipped

[jgiardino]

Unless there is a specific product need to include the bootstrap Pager example, can we close this issue? The pagination row that is implemented in #143 is the supported PatternFly pagination pattern, and the one we want to encourage people to use.

[AllenBW]

Ooooo I guess we could do that... this issue took a turn from "good first issue" to "bad first issue" 😭