Update Pagination - Githubissues

seb-oss / design-library

Design Library is a set of individual styles and components, that when combined make delightful, intuitive designs and shape a consistent SEB user experience.

http://designlibrary.sebgroup.com

15 stars 1 forks source link

Update Pagination #34

Open ulde01 opened 5 years ago

ulde01 commented 5 years ago

Design decision 2021-11-19

Change

Added numbers for first and last page to give user an idea of how many pages there are
"Current page" is indicated with grey (base-800)
More minimalistic design and a more in-dept description

Details

https://designlibrary.sebgroup.com/components/component-pagination

/Ulrika

[ ] Vanilla: https://github.com/sebgroup/vanilla-pattern-library/issues/298
[x] Bootstrap: https://github.com/sebgroup/bootstrap/issues/795
[ ] Angular: https://github.com/sebgroup/ng-components/issues/596
[ ] AngularMaterial: https://github.com/sebgroup/seb-angular-material/issues/167
[x] React: https://github.com/sebgroup/react-components/issues/666

hjalmers commented 5 years ago

The design in bootstrap is based on the early prototypes by Doberman where the buttons didn't have any border radius (rounded corners), since the buttons have changed since then it might make sense to give the pagination component rounded corners too so that it aligns with the design of other buttons, because it basically just a group of secondary buttons?

conandx commented 5 years ago

In previous sketches it's been added as being a part of the footer in a module

ulde01 commented 4 years ago

https://designlibrary.sebgroup.com/components/upcoming/pagination/

conandx commented 4 years ago

Nowadays it's normally placed to the right under the table. Perhaps we should add old ideas about how to handle 100 pages (or similar) where and how do we concatenate pages

conandx commented 4 years ago

I think this should be related to the form-size used in the table. If the tables rows are 40px high. The paging should not be bigger, but they need to align to a dropdown, as it's sometimes used together. Screenshot 2020-01-03 at 15 47 58 I also think we should add the rounded corners (like buttons/input-fields) and adjust the border to match input-fields.

So... we need alternative form-controlls in the other sizes: https://github.com/sebgroup/design-library/issues/101

hjalmers commented 4 years ago

I think this should be related to the form-size used in the table. If the tables rows are 40px high. The paging should not be bigger, but they need to align to a dropdown, as it's sometimes used together. I also think we should add the rounded corners (like buttons/input-fields) and adjust the border to match input-fields.

So... we need alternative form-controlls in the other sizes: #101

Just as a reference and how it's implemented in bootstrap since version 5.0.0: https://sebgroup.github.io/bootstrap/pagination