Skip to content

Commit

Permalink
[ONL-8077] Fix paddings in responsive view (#1736)
Browse files Browse the repository at this point in the history 
* [ONL-8077] add paddings to table pagination and header

* [ONL-8077] is responsive class for pagination changes

* [ONL-8077] add is responsive prop for heading and update snapshots

* [ONL-8077] fix custom rows threshold value

* 2.3.3

* 2.4.1
  • Loading branch information
@raulwwq0
raulwwq0 authored Nov 8, 2023
1 parent 3ab4b7b commit 0dfb7f7
Show file tree
Hide file tree
Showing 13 changed files with 57 additions and 30 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.4.0",
"version": "2.4.1",
"main": "src/main.js",
"sideEffects": false,
"author": "Ebury Team (http://labs.ebury.rocks/)",
Expand Down
6 changes: 3 additions & 3 deletions src/components/ec-smart-table-heading/__snapshots__/ec-smart-table-heading.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ exports[`EcSmartTableHeading > should render given filter and header-actions slo
Random Title
</div>
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<div
class="ec-smart-table-heading__filter"
Expand Down Expand Up @@ -58,7 +58,7 @@ exports[`EcSmartTableHeading > should render given filter slot 1`] = `
Random Title
</div>
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<div
class="ec-smart-table-heading__filter"
Expand Down Expand Up @@ -86,7 +86,7 @@ exports[`EcSmartTableHeading > should render given header-actions slot 1`] = `
Random Title
</div>
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<!--v-if-->
<div
Expand Down
13 changes: 13 additions & 0 deletions src/components/ec-smart-table-heading/ec-smart-table-heading.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<div
v-if="hasSlot('filter') || hasSlot('actions')"
class="ec-smart-table-heading"
:class="{ 'ec-smart-table-heading--is-responsive': isResponsive }"
>
<div
v-if="hasSlot('filter')"
Expand All @@ -29,6 +30,10 @@ const slots = useSlots();
defineProps({
title: String,
isResponsive: {
type: Boolean,
default: true,
},
});
function hasSlot(slotName) {
Expand All @@ -45,6 +50,14 @@ function hasSlot(slotName) {
.ec-smart-table-heading {
@apply tw-flex;
&--is-responsive {
@apply tw-px-12 tw-pb-12;
@screen md {
@apply tw-px-0 tw-pb-0;
}
}
&__filter {
@apply tw-p-8 tw-flex-grow;
}
Expand Down
30 changes: 15 additions & 15 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 @@ -198,7 +198,7 @@ exports[`EcSmartTable > #slots > should render empty data with custom template,
<!--v-if-->
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<!--v-if-->
<div
Expand Down Expand Up @@ -230,7 +230,7 @@ exports[`EcSmartTable > #slots > should render empty data with header-actions sl
<!--v-if-->
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<!--v-if-->
<div
Expand Down Expand Up @@ -260,7 +260,7 @@ exports[`EcSmartTable > #slots > should render empty data with header-actions sl
<!--v-if-->
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<!--v-if-->
<div
Expand Down Expand Up @@ -324,7 +324,7 @@ exports[`EcSmartTable > #slots > should render error with custom template, custo
<!--v-if-->
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<!--v-if-->
<div
Expand Down Expand Up @@ -356,7 +356,7 @@ exports[`EcSmartTable > #slots > should render in empty state by default with th
<!--v-if-->
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<!--v-if-->
<div
Expand Down Expand Up @@ -386,7 +386,7 @@ exports[`EcSmartTable > #slots > should render resolved data properly with the h
<!--v-if-->
<div
class="ec-smart-table-heading"
class="ec-smart-table-heading ec-smart-table-heading--is-responsive"
>
<!--v-if-->
<div
Expand Down Expand Up @@ -689,7 +689,7 @@ exports[`EcSmartTable > filtering > should render the given filters 1`] = `

exports[`EcSmartTable > filtering > should reset the page after changes in filters and reload the table data > pagination after changing the filters 1`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down Expand Up @@ -851,7 +851,7 @@ exports[`EcSmartTable > filtering > should reset the page after changes in filte

exports[`EcSmartTable > filtering > should reset the page after changes in filters and reload the table data > pagination after loading new page 1`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down Expand Up @@ -1027,7 +1027,7 @@ exports[`EcSmartTable > pagination > should pass pages slot into the pagination

exports[`EcSmartTable > pagination > should re-fetch the data when page size is changed > pagination after loading new page 1`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down Expand Up @@ -1190,7 +1190,7 @@ exports[`EcSmartTable > pagination > should re-fetch the data when page size is

exports[`EcSmartTable > pagination > should re-fetch the data when prev page is selected > pagination after loading new page 1`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down Expand Up @@ -1352,7 +1352,7 @@ exports[`EcSmartTable > pagination > should re-fetch the data when prev page is

exports[`EcSmartTable > pagination > should re-fetch the data when prev page is selected 1`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down Expand Up @@ -1527,7 +1527,7 @@ exports[`EcSmartTable > pagination > should render footer slot inside of the pag
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down Expand Up @@ -1728,7 +1728,7 @@ exports[`EcSmartTable > pagination > should render footer slot when pagination i

exports[`EcSmartTable > pagination > should render pagination when it's enabled 1`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down Expand Up @@ -1890,7 +1890,7 @@ exports[`EcSmartTable > pagination > should render pagination when it's enabled

exports[`EcSmartTable > pagination > should render pagination when it's enabled and changed 1`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down Expand Up @@ -2051,7 +2051,7 @@ exports[`EcSmartTable > pagination > should render pagination when it's enabled

exports[`EcSmartTable > pagination > should render pagination when it's enabled and changed 2`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-smart-table-pagination ec-table-pagination"
>
<div
Expand Down
2 changes: 1 addition & 1 deletion src/components/ec-smart-table/ec-smart-table.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ describe('EcSmartTable', () => {

it('should render custom row if window width is lower than 768px', () => {
window.matchMedia = vi.fn().mockImplementation(query => ({
matches: query === '(max-width: 768px)',
matches: query === '(max-width: 767px)',
media: '',
onchange: null,
addListener: vi.fn(),
Expand Down
2 changes: 1 addition & 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,7 +360,7 @@ export const all = args => ({
fetchEmptyList: null,
isFilteringEnabled: null,
prefilter: null,
isPaginationResponsive: false,
isResponsive: false,
}"
v-on="{
fetch: onFetch,
Expand Down
11 changes: 8 additions & 3 deletions src/components/ec-smart-table/ec-smart-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
class="ec-smart-table"
:data-test="attrs['data-test'] ? `${attrs['data-test']} ec-smart-table` : 'ec-smart-table'"
>
<ec-smart-table-heading :title="title">
<ec-smart-table-heading
v-bind="{
title,
isResponsive,
}"
>
<template
#filter
v-if="isFilteringEnabled"
Expand Down Expand Up @@ -84,7 +89,7 @@
itemsPerPageText,
isPageSizeHidden,
isTotalHidden,
isResponsive: isPaginationResponsive,
isResponsive,
}"
data-test="ec-smart-table-pagination"
@change="paginate"
Expand Down Expand Up @@ -184,7 +189,7 @@ const props = defineProps({
type: Boolean,
default: false,
},
isPaginationResponsive: {
isResponsive: {
type: Boolean,
default: true,
},
Expand Down
2 changes: 1 addition & 1 deletion src/components/ec-table-filter/ec-table-filter.story.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ const AllTemplate = storyArgs => ({
setup() {
const { modelValue: model, filters } = toRefs(storyArgs);

const areFiltersHidden = useMediaQuery('(max-width: 768px)');
const areFiltersHidden = useMediaQuery('(max-width: 767px)');
const someFiltersHidden = reactive([{
label: 'Payment status',
name: 'paymentStatus',
Expand Down
2 changes: 1 addition & 1 deletion 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 @@ -365,7 +365,7 @@ exports[`EcTablePagination > should display the page size dropdown with preselec

exports[`EcTablePagination > should render as expected 1`] = `
<div
class="ec-table-pagination"
class="ec-table-pagination ec-table-pagination--is-responsive"
data-test="ec-table-pagination"
>
<div
Expand Down
9 changes: 9 additions & 0 deletions src/components/ec-table-pagination/ec-table-pagination.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div
class="ec-table-pagination"
:class="{ 'ec-table-pagination--is-responsive': isResponsive }"
v-bind="{
...$attrs,
'data-test': $attrs['data-test'] ? `${$attrs['data-test']} ec-table-pagination` : 'ec-table-pagination',
Expand Down Expand Up @@ -177,6 +178,14 @@ const selectedPageSizeText = computed(() => pageSizeModel.value?.text);
width: calc(100% + theme('spacing.32'));
&--is-responsive {
@apply tw-pl-12;
@screen md {
@apply tw-pl-0;
}
}
&__page-size,
&__current-page,
&__total {
Expand Down
2 changes: 1 addition & 1 deletion src/components/ec-table/ec-table.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ describe('EcTable', () => {

it('should render custom row if window width is lower than 768px', () => {
window.matchMedia = vi.fn().mockImplementation(query => ({
matches: query === '(max-width: 768px)',
matches: query === '(max-width: 767px)',
media: '',
onchange: null,
addListener: vi.fn(),
Expand Down
2 changes: 1 addition & 1 deletion src/components/ec-table/ec-table.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ import EcTableHead from '../ec-table-head';
import type { StickyColumnPosition, TableHeadColumn, TableHeadSort } from '../ec-table-head/types';
import type { TableEvent, TableEvents } from './types';
const isInCustomRowThreshold = useMediaQuery('(max-width: 768px)');
const isInCustomRowThreshold = useMediaQuery('(max-width: 767px)');
const slots = useSlots();
const attrs = useAttrs();
Expand Down

1 comment on commit 0dfb7f7

@vercel
Copy link

@vercel vercel bot commented on 0dfb7f7 Nov 8, 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-git-master-ebury.vercel.app
chameleon-dead-plane.vercel.app
chameleon-ebury.vercel.app

Please sign in to comment.