Fix pagination UI (#512)

* fix: (pagination) - fix pagination according to specs

* fix: (pagination) - linting

* fix: (pagination) - button borders color/radius

* fix: (pagination) - ht-popover width equal to select width

* fix: (pagination) - remove unused enum

* fix: (pagination) - increase dropdown margins

* fix: (pagination) - change pagination button component

* fix: (pagination) - linting, test

* fix: (pagination) - remove unused style

* fix: (pagination) - refactor set min width of dropdown

* fix: (pagination) - change buttons component

* fix(pagination-ui): remove unused styles

* fix(select): add style to select option, remove unused styles

* fix(select): trigger container element for ref

* fix(paginaion-ui): remove unused ref

Co-authored-by: Dmitriy Potychkin <dmitriy.traceable.ai>

Author: DmitiryPotychkin

projects/components/src/paginator/paginator.component.scss

@@ -16,7 +16,6 @@
   }
 
   .page-size-select {
-    min-width: 86px;
     margin-left: 12px;
   }
 
@@ -28,16 +27,22 @@
   .previous-button {
     ::ng-deep {
       .button {
-        border-radius: 4px 0 0 4px;
+        width: 32px;
+
+        border-radius: 6px 0 0 6px;
+        border-color: $gray-2;
       }
     }
   }
 
   .next-button {
     ::ng-deep {
       .button {
-        border-radius: 0 4px 4px 0;
+        width: 32px;
         margin-left: -1px;
+
+        border-radius: 0 6px 6px 0;
+        border-color: $gray-2;
       }
     }
   }

projects/components/src/paginator/paginator.component.ts

@@ -10,7 +10,7 @@ import {
 import { IconType } from '@hypertrace/assets-library';
 import { TypedSimpleChanges } from '@hypertrace/common';
 import { Observable } from 'rxjs';
-import { ButtonStyle } from '../button/button';
+import { ButtonSize, ButtonStyle } from '../button/button';
 import { PageEvent } from './page.event';
 import { PaginationProvider } from './paginator-api';
 
@@ -25,14 +25,13 @@ import { PaginationProvider } from './paginator-api';
         label="{{ this.firstItemNumberForPage() }}-{{ this.lastItemNumberForPage() }} of {{ this.totalItems }}"
       >
       </ht-label>
-
       <div class="pagination-buttons">
-        <!-- TODO: Change ToggleButtonComponent to be more generic ButtonGroupComponent to accommodate this use case -->
         <ht-button
           class="button previous-button"
           htTooltip="Go to previous page"
           display="${ButtonStyle.Bordered}"
-          icon="${IconType.Previous}"
+          size="${ButtonSize.Small}"
+          icon="${IconType.ArrowLeft}"
           [disabled]="!this.hasPrevPage()"
           (click)="this.gotoPreviousPage()"
         >
@@ -41,15 +40,14 @@ import { PaginationProvider } from './paginator-api';
           class="button next-button"
           htTooltip="Go to next page"
           display="${ButtonStyle.Bordered}"
-          icon="${IconType.Next}"
+          size="${ButtonSize.Small}"
+          icon="${IconType.ArrowRight}"
           [disabled]="!this.hasNextPage()"
           (click)="this.gotoNextPage()"
         >
         </ht-button>
       </div>
-
       <ht-label class="label" label="Rows per Page:"></ht-label>
-
       <div class="page-size-select" *ngIf="this.pageSizeOptions.length">
         <ht-select [selected]="this.pageSize" (selectedChange)="this.onPageSizeChange($event)" showBorder="true">
           <ht-select-option *ngFor="let pageSize of this.pageSizeOptions" [value]="pageSize" [label]="pageSize">

projects/components/src/paginator/paginator.module.ts

@@ -3,12 +3,13 @@ import { NgModule } from '@angular/core';
 import { ButtonModule } from '../button/button.module';
 import { LabelModule } from '../label/label.module';
 import { SelectModule } from '../select/select.module';
+import { ToggleButtonModule } from '../toggle-button-group/toggle-button.module';
 import { TooltipModule } from '../tooltip/tooltip.module';
 import { PaginatorComponent } from './paginator.component';
 
 @NgModule({
   declarations: [PaginatorComponent],
-  imports: [CommonModule, SelectModule, LabelModule, ButtonModule, TooltipModule],
+  imports: [CommonModule, SelectModule, LabelModule, ToggleButtonModule, ButtonModule, TooltipModule],
   exports: [PaginatorComponent]
 })
 export class PaginatorModule {}

projects/components/src/select/select.component.scss

@@ -54,6 +54,11 @@
     }
   }
 
+  .trigger-container {
+    width: 100%;
+    height: 100%;
+  }
+
   .trigger-content {
     display: flex;
     align-items: center;
@@ -118,7 +123,6 @@
 
 .select-content {
   @include dropdown();
-  min-width: 120px;
   max-height: 204px;
 
   .select-option {

projects/components/src/select/select.component.ts

@@ -45,32 +45,35 @@ import { SelectSize } from './select-size';
         [ngSwitch]="this.triggerDisplayMode"
       >
         <ht-popover-trigger>
-          <div
-            *ngSwitchCase="'${SelectTriggerDisplayMode.MenuWithBorder}'"
-            class="trigger-content menu-with-border"
-            [ngClass]="[this.justifyClass]"
-          >
-            <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize"> </ht-icon>
-            <ht-label class="trigger-label" [label]="selected?.label || this.placeholder"> </ht-label>
-            <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
-          </div>
-          <div
-            *ngSwitchCase="'${SelectTriggerDisplayMode.Icon}'"
-            class="trigger-content icon-only"
-            [ngClass]="this.selected !== undefined ? 'selected' : ''"
-          >
-            <ht-icon
-              class="icon"
-              *ngIf="this.icon"
-              [icon]="this.icon"
-              [size]="this.iconSize"
-              [htTooltip]="this.selected?.label || this.placeholder"
+          <div class="trigger-container" #triggerContainer>
+            <div
+              *ngSwitchCase="'${SelectTriggerDisplayMode.MenuWithBorder}'"
+              class="trigger-content menu-with-border"
+              [ngClass]="[this.justifyClass]"
+            >
+              <ht-icon *ngIf="this.icon" class="trigger-prefix-icon" [icon]="this.icon" [size]="this.iconSize">
+              </ht-icon>
+              <ht-label class="trigger-label" [label]="selected?.label || this.placeholder"> </ht-label>
+              <ht-icon class="trigger-icon" icon="${IconType.ChevronDown}" size="${IconSize.ExtraSmall}"> </ht-icon>
+            </div>
+            <div
+              *ngSwitchCase="'${SelectTriggerDisplayMode.Icon}'"
+              class="trigger-content icon-only"
+              [ngClass]="this.selected !== undefined ? 'selected' : ''"
             >
-            </ht-icon>
+              <ht-icon
+                class="icon"
+                *ngIf="this.icon"
+                [icon]="this.icon"
+                [size]="this.iconSize"
+                [htTooltip]="this.selected?.label || this.placeholder"
+              >
+              </ht-icon>
+            </div>
           </div>
         </ht-popover-trigger>
         <ht-popover-content>
-          <div class="select-content">
+          <div class="select-content" [ngStyle]="{ 'minWidth.px': triggerContainer.offsetWidth }">
             <div
               *ngFor="let item of items"
               (click)="this.onSelectionChange(item)"