[ONL-8097] Fix search filter width (#1765)

* wip

* [ONL-8097] place search filter below other filters

* [ONL-8097] remove non used template ref

* [ONL-8097] avoid using tw class on template

* [ONL-8097] remove non used template ref

* [ONL-8097] fix unit test and update snapshots

* [ONL-8097] add min width

* [ONL-8097] increase media query threshold

* [ONL-8097] add story and update snapshots

* [ONL-8097] add margins

* [ONL-8097] set layout class using a prop

* [ONL-8097] use grid layout by default

* 2.5.2

* [ONL-8097] remove console log

* [ONL-8097] use flag in filter to set new layout

* [ONL-8097] update story and snapshots

* [ONL-8097] remove layout class prop from smart table

* [ONL-8097] add smart table story with stretched filters

* [ONL-8097] add margin bottom to table header instead of filters

* [ONL-8097] remove unnecessary ternary condition

* [ONL-8097] add missing prop in story

* [ONL-8097] remove comment

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-smart-table-heading/ec-smart-table-heading.vue

@@ -6,7 +6,10 @@
   <div
     v-if="hasSlot('filter') || hasSlot('actions')"
     class="ec-smart-table-heading"
-    :class="{ 'ec-smart-table-heading--is-responsive': isResponsive }"
+    :class="{
+      'ec-smart-table-heading--is-responsive': isResponsive,
+      'ec-smart-table-heading--has-stretch-filter': hasStretchFilter,
+    }"
   >
     <div
       v-if="hasSlot('filter')"
@@ -34,6 +37,7 @@ defineProps({
     type: Boolean,
     default: true,
   },
+  hasStretchFilter: Boolean,
 });
 
 function hasSlot(slotName) {
@@ -58,6 +62,12 @@ function hasSlot(slotName) {
     }
   }
 
+  &--has-stretch-filter {
+    @screen md {
+      @apply tw-mb-16;
+    }
+  }
+
   &__filter {
     @apply tw-p-8 tw-flex-grow;
   }

src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap

@@ -570,13 +570,13 @@ exports[`EcSmartTable > filtering > should change filters when filter prop is ch
 >
   
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-0"
   >
     Test 1 (test-value-1)
   </div>
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-1"
   >
     Test 2 (N/A)
@@ -599,13 +599,13 @@ exports[`EcSmartTable > filtering > should change filters when filter prop is ch
 >
   
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-0"
   >
     Test 1 (N/A)
   </div>
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-1"
   >
     Test 2 (N/A)
@@ -622,13 +622,13 @@ exports[`EcSmartTable > filtering > should handle changes in filters and reload
 >
   
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-0"
   >
     Test 1 (N/A)
   </div>
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-1"
   >
     Test 2 (N/A)
@@ -645,13 +645,13 @@ exports[`EcSmartTable > filtering > should pass given prefilter to table filter
 >
   
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-0"
   >
     Test 1 (test-value-1)
   </div>
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-1"
   >
     Test 2 (N/A)
@@ -674,13 +674,13 @@ exports[`EcSmartTable > filtering > should render the given filters 1`] = `
 >
   
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-0"
   >
     Test 1 (N/A)
   </div>
   <div
-    class="ec-table-filter__filter-item tw-mr-8"
+    class="ec-table-filter__filter-item ec-table-filter__filter-item--is-not-full-width"
     data-test="ec-table-filter__filter-item ec-table-filter__filter-item-1"
   >
     Test 2 (N/A)

src/components/ec-smart-table/ec-smart-table.story.js

@@ -45,6 +45,40 @@ const defaultFilters = [{
   },
 }];
 
+const defaultStretchedFilters = [{
+  label: 'Payment status',
+  name: 'paymentStatus',
+  component: markRaw(EcSyncMultipleValuesFilter),
+  items: [{ text: 'Paid', value: 'paid' }, { text: 'Cancelled', value: 'canceled' }, { text: 'Overdue', value: 'overdue' }],
+  isSearchable: false,
+  isSelectAll: false,
+  selectAllFiltersText: '',
+}, {
+  label: 'Fee type',
+  name: 'feeType',
+  component: markRaw(EcSyncMultipleValuesFilter),
+  items: [{ text: 'Invoiced', value: 'invoiced' }, { text: 'Payment', value: 'payment' }],
+  isSearchable: false,
+  isSelectAll: false,
+  selectAllFiltersText: '',
+}, {
+  label: 'Due date',
+  name: 'dueDate',
+  component: markRaw(EcDateRangeFilter),
+  fromLabelText: 'From',
+  toLabelText: 'To',
+  clearText: 'Clear dates',
+  errorMessage: '',
+}, {
+  name: 'text',
+  component: EcTextFilter,
+  isFullWidth: true,
+  stretch: true,
+  inputProps: {
+    placeholder: 'Type here the text to search by',
+  },
+}];
+
 const columns = [
   {
     name: 'request-details',
@@ -153,6 +187,7 @@ function useSmartTableSetup(args) {
 
   // filters
   const filters = computed(() => (args.isFilteringEnabled ? defaultFilters : null));
+  const stretchedFilters = computed(() => (args.isFilteringEnabled ? defaultStretchedFilters : null));
   const selectedFilter = computed(() => prefilters[args.prefilter]);
 
   // fake fetch API
@@ -253,6 +288,7 @@ function useSmartTableSetup(args) {
     execute,
     sortCycle,
     filters,
+    stretchedFilters,
     selectedFilter,
     infiniteScrollMappedData,
     getInfiniteScrollMappedData,
@@ -558,6 +594,57 @@ export const all = args => ({
         </ec-smart-table>
       </div>
     </div>
+    <h2 class="tw-m-24">With stretched filters</h2>
+    <div class="tw-flex tw-px-20">
+      <div class="tw-my-auto tw-mx-20 tw-w-full ec-card">
+        <ec-smart-table
+          v-bind="{
+            ...args,
+            data: data?.items,
+            totalRecords: data?.total ?? 0,
+            isFetching,
+            error,
+            sortCycle,
+            filters: stretchedFilters,
+            filter: selectedFilter,
+            loadingDelay: null,
+            failOnFetch: null,
+            fakeData: null,
+            fetchEmptyList: null,
+            isFilteringEnabled: null,
+            prefilter: null,
+            isResponsive: false,
+          }"
+          v-on="{
+            fetch: onFetch,
+            sort: onSort,
+            abort: onAbort,
+            error: onError,
+          }">
+          <template #header-actions="{ total, items, error, loading }">
+            <a
+              href="#"
+              v-if="!error && !loading"
+              @click.prevent.stop="onDownload">Download all {{ total }} item(s)</a>
+            <a @click.prevent.stop="execute()" href="#">Reload</a>
+          </template>
+          <template #error="{ errorMessage }">
+            <div class="tw-text-center tw-text-error tw-py-48">
+              <div><ec-icon name="simple-error" :size="48" class="tw-fill-error" /></div>
+              {{ errorMessage }}
+            </div>
+          </template>
+          <template #empty="{ emptyMessage }">
+            <div class="tw-text-center tw-py-48">
+              <div><ec-icon name="simple-info" :size="48" /></div>
+              {{ emptyMessage }}
+            </div>
+          </template>
+          <template #footer><div class="tw-text-right">Custom footer info</div></template>
+          <template #pages="{ page, totalPages, total }">{{ page }}&nbsp;of&nbsp;{{ totalPages }} pages ({{ total }}&nbsp;ipsums)</template>
+        </ec-smart-table>
+      </div>
+    </div>
     <h2 class="tw-m-24">With infinite scrolling</h2>
     <div class="tw-flex tw-px-20">
       <div class="tw-my-auto tw-mx-20 tw-w-full ec-card">

src/components/ec-smart-table/ec-smart-table.vue

@@ -7,6 +7,7 @@
       v-bind="{
         title,
         isResponsive,
+        hasStretchFilter,
       }"
     >
       <template
@@ -15,9 +16,12 @@
       >
         <ec-table-filter
           v-model="filterModel"
-          :filters="filters"
-          :clear-filters-button-text="clearFiltersButtonText"
-          :is-clear-filters-button-hidden="isClearFiltersButtonHidden"
+          v-bind="{
+            filters,
+            clearFiltersButtonText,
+            isClearFiltersButtonHidden,
+            hasStretchFilter,
+          }"
           data-test="ec-smart-table__filter"
           @change="onFilterChanged"
         />
@@ -215,6 +219,8 @@ const props = defineProps({
   },
 });
 
+const hasStretchFilter = computed(() => (Object.values(props.filters).some(filter => filter.stretch)));
+
 // sorting
 const { sorts, sortBy } = useEcSorting({
   initialSorts: props.sorts, isMultiSort: props.isMultiSort, sortCycle: props.sortCycle,