feat:(Pagination): Stand alone Small pagination

[okstaticzero]

The design files show a secondary pagination example (shown below). Any plans to add this?

[tw15egan]

There aren't any plans to add this in at this time, but if this is a component someone would like to tackle we would love contributions! We would probably want to start in the Vanilla repo, as that's where the styles would come from, so I'm going to move this one over there.

[tw15egan]

Issue moved to IBM/carbon-components #977 via ZenHub

[asudoh]

Re-opened for React variant implementation - @Martskin thanks again for your awesome contribution in vanilla! 🎉

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[asudoh]

Let's enqueue this for feature enhancement bucket.

[aagonzales]

For the record the image shown in the first comment is NOT the approved v10 styling. The styling is correct in the #1812 issue.

[shixiedesign]

To do

• Update style to v10 (coded version has v10 style see PR 977 pagination small #1812) - AG
• Need react version
• Documentation update on website Add "pagination-nav" example to code tab carbon-website#275

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[aagonzales]

Vanilla versions has been added to the website. The outstanding task here is to make the react version.

[emyarod]

is this component meant to be a 1:1 drop-in replacement for the regular pagination component? if so, I would need some additional clarification for certain scenarios like when the total number of items is unknown for example

[aagonzales]

@emyarod No, it's a new variation. It's essentially a non-table pagination version. Something you'd see at the bottom of a search results page for example.

Like at the bottom of a google search page:

Can you show me an example of pagination with the total number of items is unknown?(ie what's the industry standard for handling this?) Is this something we address with our current data table version of pagination?

[aagonzales]

For google it looks like it just keeps counting pages and wouldn't present the ellipse feature. The only controls the user would have are the set of 10 number in the range and a backward/forward function.

So ours would looks like:

[emyarod]

@aagonzales it looks like we currently have a prop called pagesUnknown (introduced in c2de95a), you can see it in action in the story after selecting the knob for it. I'm assuming we will carry that feature over to this variation and we would just remove the ellipses selection menu in this case as you mentioned

[emyarod]

I have a few more questions for clarification

have we created a spec for this pagination variation including disabled/hover/focus styles, theme variants etc? some of these details aren't currently shown in the live component example but I'll need to add them

is there a default/minimum/maximum number of pages we want to show in the component (in the cases with and without <select> menu overflow too)?

and based on the mockups in the first post in this issue, will we always show the first and last page numbers?

[aagonzales]

@emyarod as per this comment #2634 (comment) the image in the first comment is not the final design. The code was contributed to us and we made a lot of decisions on the fly in the PR. #1812

All the state you mention are already part of the vanilla component here, they are also available in the design kit under "pagination/standalone".

Enabled & selected

Hover:

Focus:

Overflow:

Disabled:

From the sandbox here, it looks like the themes are already rendering properly with the correct tokens: https://the-carbon-components.netlify.com/?nav=pagination-nav

[aagonzales]

Min number of pages: 2
Max number of pages before overflow: 10

[emyarod]

@aagonzales cool, I was already referring to the resources that you linked. WRT disabled state, I meant a scenario when the entire component is disabled (including the caret buttons and current page indicator) instead of a couple of individual pages like in the image

[aagonzales]

For disabled all numbers and the arrows should use the color token $disabled-02

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[lukefirth]

Adding a 2¢ to this from some exploration on my team where we're using this as part of a larger 'tile catalog' type component.

I wanted to keep the simplicity of the interactions googles search used for paging back and forth, but I didn't want to lose the versatility of the overflow, even while deep in the pages. In the end I landed here:

Note: The overflows would simply let you jump directly to the given page, which would make the pagination assume the appropriate step.

[laurenmrice]

closing as this was merged into react with this pr: #6199