feat(unstable-pagination): add refactored experimental pagination component #5485

jendowns · 2020-02-28T16:56:43Z

Closes #5129
Closes #4365

This PR has the Unstable_Pagination component, a refactored experimental version of Pagination component that is written with a "building blocks" approach, allowing users to add either an inner PageSelector (traditional select) ~~or PageInput (a number input),~~ or leave out those children entirely. The component also includes icon-only buttons with tooltips.

This component is implemented in our downstream library @carbon/ibm-security, and I copied almost everything from there (changing prefixes and so forth, of course).

Changelog

New

add Unstable_Pagination component with demo and styles
add PageSelector
the pagiantion buttons now have tooltips!! 🎉
~~add PageInput~~ Removed in this PR, to wait for design exploration in Design for pagination number input #5546

TODO: Tests

I couldn't copy over our tests because we use react testing library for our version of this component -- its' super useful because we have the user event package as well to check tab order etc.

Are you all open to that, or would you rather I rewrite tests in your current structure/style?

Testing / Reviewing

Check out the storybook demo & documentation.

netlify · 2020-02-28T17:09:34Z

Deploy preview for carbon-components-react ready!

Built with commit 7c650ea

https://deploy-preview-5485--carbon-components-react.netlify.com

netlify · 2020-02-28T17:09:40Z

Deploy preview for carbon-elements ready!

Built with commit 7c650ea

https://deploy-preview-5485--carbon-elements.netlify.com

netlify · 2020-02-28T17:23:51Z

Deploy preview for carbon-elements ready!

Built with commit 152ba4f

https://deploy-preview-5485--carbon-elements.netlify.app

netlify · 2020-02-28T17:24:09Z

Deploy preview for carbon-components-react ready!

Built with commit 152ba4f

https://deploy-preview-5485--carbon-components-react.netlify.app

jendowns · 2020-02-28T17:39:47Z

@designertyler This PR is a followup to our conversation in #4365 --

I have an example with a number input added here: https://deploy-preview-5485--carbon-components-react.netlify.com/?path=/story/unstable-pagination--with-a-page-input
How should it look though?
And where should the error state appear? (right now I have hidden the "invalid"/"error" text for the input, and all you see if a red outline if you type in letters)

joshblack · 2020-02-28T21:23:55Z

@jendowns for the use-case of tables with a large number of pages, what use-case or flow are we considering where they would like to select a specific page in a list of 200,000 pages? 🤔

joshblack

Left a question above, curious to hear what you think 👀

jendowns · 2020-02-28T21:30:01Z

@joshblack Here are the use cases I'm seeing...

Super large number of pages (10k, 200k, etc) -- don't use PageSelector. Maybe use PageInput if you want and if you are getting data from backend with each page change (othewrise that's... a lot of data lol).
100-ish pages -- could use PageSelector and pass in size={10} to limit options list height (since PageSelector has a spread operator). Or could use PageInput.

I think the key in both cases is to pick the tool that works best, whether it's a select, a number input, or nothing at all. 👍

jendowns · 2020-02-28T21:33:13Z

OH @joshblack I just realized I kinda missed the point of your question here. 😅

Yeah I don't see why there's a need to jump pages at all, honestly. It seems like you would have to know EXACTLY where you want to go?

But these are just options 🤷‍♀ As said in my previous comment, it's a set of tools that someone can use depending on their situation. If they have 200k pages they should seriously consider NO children for this pagination component and instead provide ways for people to filter/search.

joshblack · 2020-02-28T21:35:56Z

@jendowns yeah, I think that's 100% along the lines of what I was thinking for this too. It can seem like at that number of pages this feature isn't really meant for your use-case/users.

jendowns · 2020-02-28T21:45:08Z

@joshblack 200k is defintiely an extreme example. What #4365 highlights an issue we have in product right now where there's a reasonable number of pages (80-something, I think) and the page selector is super long in Chrome.

Try it out here in Chrome: https://react.carbondesignsystem.com/?path=/story/pagination--pagination
Set the totalItems to like 500 or something.

designertyler · 2020-03-03T21:37:38Z

Using the number input in place means we have two sets of buttons with the same function right next to each other.

There's no existing example of an input in a toolbar like this so we'd have to explore ways to do the error message or limit the ability for the user to cause an error. I'm also not sure if we want to use ui-03 for the field or if we'd want to use something to the mobile number input that uses field-01.

I'll get with the team to see how we want to establish these types of entry fields.

jendowns · 2020-03-04T17:04:14Z

Thanks @designertyler!

If you prefer, I can remove the PageInput subcomponent (i.e., the inner number input) from this PR for now, while you explore the button & error state questions? (And then when you are finished with the design explorations, I can propose a followup PR, separate from this one.)

That way, I can still get a review on the rest of the code with the hopes of providing good alternatives / paths for people to resolve issues like #5129 & #4365? (That is, with this PR minus the number input, they'd be able to just leave out any type of page selector to avoid causing their browser to crash. OR pass a size attribute to the page selector to limit the size of the options list, if they don't have thousands of pages.)

CC @joshblack @tw15egan

… pagination-refactor

jendowns · 2020-03-24T13:39:47Z

Hey @tw15egan sorry for the delay! I have fixed the jumpy focus border/outline that you saw when you reviewed. Could you take another look when you get a chance? Thank you! 🎉

tw15egan · 2020-03-24T17:05:16Z

@jendowns just another small style issue I noticed. Seems like the spacing between the chevrons are different. Also, the right select does not seem to have any hover styles.

Other than that, everything looks great!

jendowns · 2020-05-12T18:54:56Z

@joshblack @tw15egan I updated the hover styles for the "page selector" select element.

I'm not sure about the point about arrow spacing in the select inputs, however. They both have the same svg, the same dimensions, and the same padding:

jendowns · 2020-05-28T16:14:26Z

Hey @joshblack @tw15egan @designertyler did you all need anything from me with this PR?

designertyler

Visually it looks good. I think the chevron spacing was a result of there being 1 vs 2 digit numbers next to the chevron.

joshblack · 2020-05-29T20:13:00Z

packages/react/src/components/Pagination/Unstable_Pagination/Pagination.js

+
+const { prefix } = settings;
+
+function Unstable_Pagination({


Suggested change

function Unstable_Pagination({

function unstable_Pagination({

Will try to make sure this is in our style guide soon! Totally get if the U was meant for usage in React components, I think we would just recommend renaming the import if that's the case:

import { unstable_Pagination as Pagination } from '...';

@joshblack I can update it to unstable_ in all locations (including file names) if that's what you prefer?

Yes please! The only reason we do this convention is to mirror FB's unstable_ convention, e.g. unstable_SuspenseList. I'll make sure to add a reference to this in our style guide as well, sorry about the mixup

Yeah no worries @joshblack I probably misremembered the capitalization when I wrote this

One thing I just noticed though, as I started to change to unstable_ -- the linter is not pleased with me & flags hooks usage as a violation of eslint(react-hooks/rules-of-hooks):

React Hook "useState" is called in function "unstable_Pagination" that is neither a React function component nor a custom React Hook function. eslint(react-hooks/rules-of-hooks)

How do you want to proceed here?

joshblack

Definitely down to bring this in under the unstable namespace 👀 So sorry for the delays @jendowns, thanks so much for being persistent here 🙏

tw15egan

Changes look good to me! Thanks for taking the time to add this in @jendowns

jendowns added 9 commits February 27, 2020 14:45

feat(unstable_pagination): initial commit of js, scss, and story demo

285469e

fix(unstable-pagination): update naming structure

58c710d

fix(unstable-pagination): add styles for refactored component

6e0f228

fix(unstable-pagination): update imports

a88fd5c

fix(unstable-pagination): flatten styles

ac79733

fix(unstable-pagination): update class names

7c650ea

Merge branch 'master' into pagination-refactor

2090d0b

fix(unstable-pagination): update comments and formatting

4d0a63a

chore: run prettier

f906e94

jendowns marked this pull request as ready for review February 28, 2020 17:09

jendowns requested a review from a team as a code owner February 28, 2020 17:09

ghost requested review from joshblack and tw15egan February 28, 2020 17:09

joshblack mentioned this pull request Feb 28, 2020

March 2020 Planning #5475

Closed

82 tasks

emyarod requested a review from designertyler February 28, 2020 19:26

joshblack reviewed Feb 28, 2020

View reviewed changes

asudoh added the status: visual review 🔍 label Mar 2, 2020

chore: update exports snapshot

e70cd80

jendowns added 6 commits March 23, 2020 15:07

fix(unstable-pagination): update left and right section height

eba2ff0

test(api): update public api snapshot to include new components

8b195c3

Merge branch 'master' into pagination-refactor

8312a8a

fix(unstable-pagination): adjust btn focus outlines

5b4198b

Merge branch 'pagination-refactor' of github.com:jendowns/carbon into…

e4d43a8

… pagination-refactor

Merge branch 'master' into pagination-refactor

2af6f3c

Merge branch 'master' into pagination-refactor

34f090f

jendowns and others added 2 commits April 2, 2020 14:12

Merge branch 'master' into pagination-refactor

7da42ac

Merge branch 'master' into pagination-refactor

826f172

tw15egan requested a review from a team as a code owner April 20, 2020 17:18

jendowns added 3 commits April 23, 2020 16:27

Merge branch 'master' into pagination-refactor

ba3e748

Merge branch 'master' into pagination-refactor

c416cd9

fix(unstable-pagination): update select hover state, update borders

5b8c055

jendowns added 3 commits May 13, 2020 08:36

Merge branch 'master' into pagination-refactor

0ee00b9

Merge branch 'master' into pagination-refactor

9a757b1

Merge branch 'master' into pagination-refactor

b50ba31

tay1orjones mentioned this pull request May 20, 2020

[Table] scalability to millions of rows and up to 500 columns carbon-design-system/carbon-addons-iot-react#458

Closed

jendowns added 3 commits May 21, 2020 10:46

Merge branch 'master' into pagination-refactor

bc3eab0

Merge branch 'master' into pagination-refactor

8dbf723

Merge branch 'master' into pagination-refactor

ae5ac10

designertyler approved these changes May 29, 2020

View reviewed changes

joshblack reviewed May 29, 2020

View reviewed changes

joshblack approved these changes May 29, 2020

View reviewed changes

Merge branch 'master' into pagination-refactor

152ba4f

tw15egan approved these changes Jun 2, 2020

View reviewed changes

tw15egan merged commit 40d9deb into carbon-design-system:master Jun 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(unstable-pagination): add refactored experimental pagination component #5485

feat(unstable-pagination): add refactored experimental pagination component #5485

jendowns commented Feb 28, 2020 •

edited

Loading

netlify bot commented Feb 28, 2020

netlify bot commented Feb 28, 2020

netlify bot commented Feb 28, 2020 •

edited

Loading

netlify bot commented Feb 28, 2020 •

edited

Loading

jendowns commented Feb 28, 2020

joshblack commented Feb 28, 2020

joshblack left a comment

jendowns commented Feb 28, 2020 •

edited

Loading

jendowns commented Feb 28, 2020 •

edited

Loading

joshblack commented Feb 28, 2020

jendowns commented Feb 28, 2020

designertyler commented Mar 3, 2020

jendowns commented Mar 4, 2020 •

edited

Loading

jendowns commented Mar 24, 2020 •

edited

Loading

tw15egan commented Mar 24, 2020

jendowns commented May 12, 2020

jendowns commented May 28, 2020

designertyler left a comment

joshblack May 29, 2020

jendowns Jun 1, 2020

joshblack Jun 1, 2020

jendowns Jun 1, 2020

joshblack left a comment

tw15egan left a comment

	function Unstable_Pagination({
	function unstable_Pagination({

feat(unstable-pagination): add refactored experimental pagination component #5485

feat(unstable-pagination): add refactored experimental pagination component #5485

Conversation

jendowns commented Feb 28, 2020 • edited Loading

Changelog

TODO: Tests

Testing / Reviewing

netlify bot commented Feb 28, 2020

netlify bot commented Feb 28, 2020

netlify bot commented Feb 28, 2020 • edited Loading

netlify bot commented Feb 28, 2020 • edited Loading

jendowns commented Feb 28, 2020

joshblack commented Feb 28, 2020

joshblack left a comment

Choose a reason for hiding this comment

jendowns commented Feb 28, 2020 • edited Loading

jendowns commented Feb 28, 2020 • edited Loading

joshblack commented Feb 28, 2020

jendowns commented Feb 28, 2020

designertyler commented Mar 3, 2020

jendowns commented Mar 4, 2020 • edited Loading

jendowns commented Mar 24, 2020 • edited Loading

tw15egan commented Mar 24, 2020

jendowns commented May 12, 2020

jendowns commented May 28, 2020

designertyler left a comment

Choose a reason for hiding this comment

joshblack May 29, 2020

Choose a reason for hiding this comment

jendowns Jun 1, 2020

Choose a reason for hiding this comment

joshblack Jun 1, 2020

Choose a reason for hiding this comment

jendowns Jun 1, 2020

Choose a reason for hiding this comment

joshblack left a comment

Choose a reason for hiding this comment

tw15egan left a comment

Choose a reason for hiding this comment

jendowns commented Feb 28, 2020 •

edited

Loading

netlify bot commented Feb 28, 2020 •

edited

Loading

netlify bot commented Feb 28, 2020 •

edited

Loading

jendowns commented Feb 28, 2020 •

edited

Loading

jendowns commented Feb 28, 2020 •

edited

Loading

jendowns commented Mar 4, 2020 •

edited

Loading

jendowns commented Mar 24, 2020 •

edited

Loading