fix(addon-table): TablePagination show checkmark for selected `[siz…

…e]` (#1780)
taiga-family · May 19, 2022 · 4a26fac · 4a26fac
1 parent 0950f8e
commit 4a26fac
Show file tree

Hide file tree

Showing 4 changed files with 77 additions and 3 deletions.
diff --git a/projects/addon-table/components/table-pagination/table-pagination.module.ts b/projects/addon-table/components/table-pagination/table-pagination.module.ts
@@ -5,6 +5,7 @@ import {
     TuiDataListModule,
     TuiHostedDropdownModule,
     TuiLinkModule,
+    TuiSvgModule,
 } from '@taiga-ui/core';
 
 import {TuiTablePaginationComponent} from './table-pagination.component';
@@ -16,6 +17,7 @@ import {TuiTablePaginationComponent} from './table-pagination.component';
         TuiLinkModule,
         TuiHostedDropdownModule,
         TuiDataListModule,
+        TuiSvgModule,
     ],
     declarations: [TuiTablePaginationComponent],
     exports: [TuiTablePaginationComponent],

diff --git a/projects/addon-table/components/table-pagination/table-pagination.style.less b/projects/addon-table/components/table-pagination/table-pagination.style.less
@@ -16,10 +16,15 @@
 }
 
 .t-item {
-    width: 5.5rem;
+    min-width: 5.5rem;
     box-sizing: border-box;
 }
 
+.t-checkmark {
+    min-width: 1.5rem;
+    border-left: 5px solid transparent;
+}
+
 .t-back {
     margin: 0 0.25rem 0 1.5rem;
 }
diff --git a/projects/addon-table/components/table-pagination/table-pagination.template.html b/projects/addon-table/components/table-pagination/table-pagination.template.html
@@ -3,7 +3,7 @@
         {{ texts.pages }}
         <strong class="t-strong">{{ pages }}</strong>
     </span>
-    <span>
+    <span automation-id="tui-table-pagination__lines-per-page-wrapper">
         {{ texts.linesPerPage }}
         <tui-hosted-dropdown
             [content]="content"
@@ -16,13 +16,21 @@
                 <tui-data-list>
                     <ng-container *ngFor="let item of items">
                         <button
-                            *ngIf="item !== size"
                             tuiOption
                             size="s"
                             class="t-item"
                             (click)="onItem(item)"
                         >
                             {{ item }}
+                            <tui-svg
+                                *ngIf="item === size; else fakeIcon"
+                                src="tuiIconCheckLarge"
+                                class="t-checkmark"
+                            ></tui-svg>
+
+                            <ng-template #fakeIcon>
+                                <span class="t-checkmark"></span>
+                            </ng-template>
                         </button>
                     </ng-container>
                 </tui-data-list>

diff --git a/...cts/demo-integrations/cypress/tests/addon-table/table-pagination/table-pagination.spec.ts b/...cts/demo-integrations/cypress/tests/addon-table/table-pagination/table-pagination.spec.ts
@@ -0,0 +1,59 @@
+describe('TablePagination', () => {
+    beforeEach(() => {
+        cy.viewport('macbook-13');
+    });
+
+    describe('Dropdown with `[size]`-options (amount items per page)', () => {
+        it('Basic case', () => {
+            cy.tuiVisit('/components/table-pagination/API');
+            initializeAliases('#demoContent');
+
+            cy.get('@linesPerPageSelect').click();
+            waitForCheckmarkIcon();
+            cy.get('@tablePagination').matchImageSnapshot('0-[size]-dropdown-base', {
+                padding: [0, 0, 150, 0],
+            });
+        });
+
+        it('With very long option name', () => {
+            const LONG_NUMBER = 10000000000000000000;
+
+            cy.tuiVisit(
+                encodeURI(
+                    `/components/table-pagination/API?items=[0, ${LONG_NUMBER}]&size=${LONG_NUMBER}&total=${LONG_NUMBER}&page=0`,
+                ),
+            );
+            initializeAliases('#demoContent');
+
+            cy.get('@linesPerPageSelect').click();
+            waitForCheckmarkIcon();
+            cy.get('@tablePagination').matchImageSnapshot(
+                '1-[size]-dropdown-long-option-name',
+                {
+                    padding: [0, 0, 100, 0],
+                },
+            );
+        });
+    });
+});
+
+function initializeAliases(selectorToTablePagination: string): void {
+    cy.get(`${selectorToTablePagination} tui-table-pagination`)
+        .should('be.visible')
+        .as('tablePagination');
+
+    cy.get('@tablePagination')
+        .find(
+            '[automation-id=tui-table-pagination__lines-per-page-wrapper] tui-hosted-dropdown',
+        )
+        .should('be.visible')
+        .as('linesPerPageSelect');
+}
+
+function waitForCheckmarkIcon(): void {
+    cy.get('tui-dropdown-box')
+        .find('tui-svg[src=tuiIconCheckLarge] use')
+        .should('be.visible')
+        .invoke('height')
+        .should('be.greaterThan', 0);
+}