feat: Custom pagination component based on design system
Related epic: &997
What does this MR do?
This is a rewrite of the pagination component.
Why is it needed?
Our design system describes a behaviour that seemingly can not be achieved with out current implementation which wraps BootstrapVue's pagination component.
What does it look like after these changes?
On large and medium viewports
On mobile and smaller viewports
Breaking changes
This MR brings some potentially breaking changes that should be considered when upgrading:
- Dropped the underlying BootstrapVue's component
- Dropped support for following props:
hide-goto-end-buttons
hide-ellipsis
-
limit
, use responsivelimits
instead -
first-text
andlast-text
, usepage-number
slot instead -
value
, usepage
instead -
total-rows
, usetotal-items
instead -
aria-label
andaria-controls
are not exposed as props anymore but can still be set as normal attributes
- Dropped support for following props:
- The
page
andchange
props have been dropped in favor ofv-model
- The current page should be bound using
v-model
in the parent component - When the page changes, an
input
event is emitted - The page
prop
has been renamed tovalue
and should not be bound directly in most cases
- The current page should be bound using
A follow up issue has been created to ensure nothing breaks in GitLab once gitlab-ui is updated there: https://gitlab.com/gitlab-org/gitlab-ce/issues/62097
Edited by Paul Gascou-Vaillancourt