Skip to content

Commit

Permalink
[ONL-7972] Make table pagination responsive (#1719)
Browse files Browse the repository at this point in the history 
* [ONL-7972] add prop to hide page size

* [ONL-7972] add new prop to story

* [ONL-7972] add prop to hide pagination custom info

* [ONL-7972] justify between when page and info are hidden

* [ONL-7972] add custom info prop to story

* [ONL-7972] fix padding

* [ONL-7972] fix actions position when only custom info is hidden

* [ONL-7972] update snapshots

* [ONL-7972] add ellipsis to current page text

* [ONL-7972] change props defaults

* [ONL-7972] fix unit tests

* [ONL-7972] show ellipsis only when responsive design is applied

* [ONL-7972] test props and ellipsis

* [ONL-7972] add ellipsis always

* [ONL-7972] refactor

* [ONL-7972] use tw media queries instead of js

* [ONL-7972] remove window matchMedia from tests

* 2.2.56
  • Loading branch information
@raulwwq0
raulwwq0 authored Oct 24, 2023
1 parent 026102b commit 499acef
Show file tree
Hide file tree
Showing 12 changed files with 134 additions and 43 deletions.
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ebury/chameleon-components",
"version": "2.2.55",
"version": "2.2.56",
"main": "src/main.js",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
Expand Down
54 changes: 27 additions & 27 deletions src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -693,7 +693,7 @@ exports[`EcSmartTable filtering should reset the page after changes in filters a
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -804,14 +804,14 @@ exports[`EcSmartTable filtering should reset the page after changes in filters a
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -855,7 +855,7 @@ exports[`EcSmartTable filtering should reset the page after changes in filters a
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -966,14 +966,14 @@ exports[`EcSmartTable filtering should reset the page after changes in filters a
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -1031,7 +1031,7 @@ exports[`EcSmartTable pagination should re-fetch the data when page size is chan
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -1142,14 +1142,14 @@ exports[`EcSmartTable pagination should re-fetch the data when page size is chan
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -1194,7 +1194,7 @@ exports[`EcSmartTable pagination should re-fetch the data when prev page is sele
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -1305,14 +1305,14 @@ exports[`EcSmartTable pagination should re-fetch the data when prev page is sele
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -1355,7 +1355,7 @@ exports[`EcSmartTable pagination should re-fetch the data when prev page is sele
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -1466,14 +1466,14 @@ exports[`EcSmartTable pagination should re-fetch the data when prev page is sele
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -1531,7 +1531,7 @@ exports[`EcSmartTable pagination should render footer slot inside of the paginat
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -1642,7 +1642,7 @@ exports[`EcSmartTable pagination should render footer slot inside of the paginat
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
Expand All @@ -1654,7 +1654,7 @@ exports[`EcSmartTable pagination should render footer slot inside of the paginat
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -1732,7 +1732,7 @@ exports[`EcSmartTable pagination should render pagination when it's enabled 1`]
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -1843,14 +1843,14 @@ exports[`EcSmartTable pagination should render pagination when it's enabled 1`]
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -1894,7 +1894,7 @@ exports[`EcSmartTable pagination should render pagination when it's enabled and
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -2005,14 +2005,14 @@ exports[`EcSmartTable pagination should render pagination when it's enabled and
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -2055,7 +2055,7 @@ exports[`EcSmartTable pagination should render pagination when it's enabled and
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -2166,14 +2166,14 @@ exports[`EcSmartTable pagination should render pagination when it's enabled and
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down
5 changes: 4 additions & 1 deletion src/components/ec-smart-table/ec-smart-table.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -360,6 +360,7 @@ export const all = args => ({
fetchEmptyList: null,
isFilteringEnabled: null,
prefilter: null,
isPaginationResponsive: false,
}"
v-on="{
fetch: onFetch,
Expand Down Expand Up @@ -458,7 +459,7 @@ export const all = args => ({
</p>
</div>
</div>
<h2 class="tw-m-24">With always shown custom row</h2>
<h2 class="tw-m-24">With always shown custom row and hidden pagination size and custom info</h2>
<div class="tw-flex tw-px-20">
<div class="tw-my-auto tw-mx-20 tw-w-full ec-card">
<ec-smart-table
Expand All @@ -478,6 +479,8 @@ export const all = args => ({
isFilteringEnabled: null,
prefilter: null,
isCustomRowShown: true,
isPageSizeHidden: true,
isTotalHidden: true,
}"
v-on="{
fetch: onFetch,
Expand Down
15 changes: 15 additions & 0 deletions src/components/ec-smart-table/ec-smart-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@
total: totalRecords,
numberOfItems,
itemsPerPageText,
isPageSizeHidden,
isTotalHidden,
isResponsive: isPaginationResponsive,
}"
data-test="ec-smart-table-pagination"
@change="paginate"
Expand Down Expand Up @@ -173,6 +176,18 @@ const props = defineProps({
type: Boolean,
default: false,
},
isPageSizeHidden: {
type: Boolean,
default: false,
},
isTotalHidden: {
type: Boolean,
default: false,
},
isPaginationResponsive: {
type: Boolean,
default: true,
},
});
// sorting
Expand Down
18 changes: 9 additions & 9 deletions src/components/ec-table-pagination/__snapshots__/ec-table-pagination.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ exports[`EcTablePagination #slots should use given pages slot 1`] = `

exports[`EcTablePagination #slots should use given total slot 1`] = `
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
Expand Down Expand Up @@ -60,7 +60,7 @@ exports[`EcTablePagination should display last page information by calculating t

exports[`EcTablePagination should display next and prev buttons disabled if pagination has only one page 1`] = `
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -100,7 +100,7 @@ exports[`EcTablePagination should display next and prev buttons disabled if pagi

exports[`EcTablePagination should display next and prev buttons enabled if pagination is in the middle 1`] = `
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -138,7 +138,7 @@ exports[`EcTablePagination should display next and prev buttons enabled if pagin

exports[`EcTablePagination should display only next button disabled if pagination is on the last page 1`] = `
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -177,7 +177,7 @@ exports[`EcTablePagination should display only next button disabled if paginatio

exports[`EcTablePagination should display only prev button disabled if pagination is on the first page 1`] = `
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down Expand Up @@ -264,7 +264,7 @@ exports[`EcTablePagination should display page information when last page is inc

exports[`EcTablePagination should display the page size dropdown with preselected value 1`] = `
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -369,7 +369,7 @@ exports[`EcTablePagination should render as expected 1`] = `
data-test="ec-table-pagination"
>
<div
class="ec-table-pagination__page-size"
class="ec-table-pagination__page-size ec-table-pagination__page-size--is-responsive"
data-test="ec-table-pagination__page-size"
>
<div
Expand Down Expand Up @@ -480,14 +480,14 @@ exports[`EcTablePagination should render as expected 1`] = `
</div>
<div
class="ec-table-pagination__total"
class="ec-table-pagination__total ec-table-pagination__total--is-responsive"
data-test="ec-table-pagination__total"
>
</div>
<div
class="ec-table-pagination__actions"
class="ec-table-pagination__actions ec-table-pagination__actions--is-responsive"
data-test="ec-table-pagination__actions"
>
<button
Expand Down
Loading

1 comment on commit 499acef

@vercel
Copy link

@vercel vercel bot commented on 499acef Oct 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

chameleon – ./

chameleon-ebury.vercel.app
chameleon-git-master-ebury.vercel.app
chameleon-dead-plane.vercel.app

Please sign in to comment.