fix(pagination): fixes pagination focus issues (#54)

BREAKING CHANGE: Removes link variants of pagination and navigation components. The link variants caused focus issues, which can not easily be resolved. If you need the link variants, you can open a feature request and we will have another look at it. Several properties of sbb-pagination have been renamed or refactored. Check the documentation for the new specification. Closes #17
sbb-design-systems · Jun 25, 2019 · 1e1ce4b · 1e1ce4b
1 parent fd3b6b4
commit 1e1ce4b
Show file tree

Hide file tree

Showing 94 changed files with 1,263 additions and 2,536 deletions.
diff --git a/angular.json b/angular.json
@@ -155,6 +155,11 @@
       "sourceRoot": "projects/sbb-esta/angular-public/src",
       "projectType": "library",
       "prefix": "sbb",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
@@ -213,6 +218,11 @@
       "sourceRoot": "projects/sbb-esta/angular-business/src",
       "projectType": "library",
       "prefix": "sbb",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
@@ -265,6 +275,11 @@
       "sourceRoot": "projects/sbb-esta/angular-icons/src",
       "projectType": "library",
       "prefix": "sbb",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
@@ -313,6 +328,11 @@
       "root": "projects/sbb-esta/angular-keycloak",
       "sourceRoot": "projects/sbb-esta/angular-keycloak/src",
       "prefix": "sbb",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",

diff --git a/.../angular-showcase/src/app/examples/pagination-showcase/pagination-showcase.component.html b/.../angular-showcase/src/app/examples/pagination-showcase/pagination-showcase.component.html
@@ -1,41 +1,29 @@
 <div class="container-fluid">
   <div class="row">
     <div class="col-lg-6 sbbsc-v-sep">
-      <h4 id="default" class="sbbsc-block">Pagination as buttons</h4>
+      <h4 id="default" class="sbbsc-block">Pagination</h4>
       <sbb-pagination
         (pageChange)="onPageChange($event)"
-        [maxPage]="maxPage"
-        [initialPage]="initialPage"
+        [length]="length"
+        [pageIndex]="pageIndex"
       ></sbb-pagination>
     </div>
     <div class="col-lg-6">
       <h4 class="sbbsc-block">Properties</h4>
-      <sbb-field mode="long" label="Max page">
-        <input type="number" [(ngModel)]="maxPage" name="maxPage" />
+      <sbb-field mode="long" label="Length">
+        <input type="number" [(ngModel)]="length" name="length" />
       </sbb-field>
-      <sbb-field mode="long" label="Initial page">
-        <input type="number" [(ngModel)]="initialPage" name="initialPage" />
+      <sbb-field mode="long" label="Page index">
+        <input type="number" [(ngModel)]="pageIndex" name="pageIndex" />
       </sbb-field>
     </div>
   </div>
 
-  <div class="row">
-    <div class="col-lg-6 sbbsc-v-sep">
-      <h4 id="default" class="sbbsc-block">Pagination as links</h4>
-      <sbb-pagination
-        (pageChange)="onPageChange($event)"
-        [maxPage]="maxPage"
-        [linkGenerator]="linkGenerator"
-      >
-      </sbb-pagination>
-    </div>
-  </div>
-
   <div role="presentation" class="sbbsc-separator"></div>
 
   <div class="row">
     <div class="col-lg-6">
-      <h4 class="sbbsc-block">Navigation buttons</h4>
+      <h4 class="sbbsc-block">Navigation</h4>
       <sbb-navigation
         (pageChange)="onPageChangeNavigation($event)"
         [nextPage]="nextPage"
@@ -51,17 +39,4 @@ <h4 class="sbbsc-block">Properties</h4>
       <button sbbButton (click)="addPage()">Add new page</button>
     </div>
   </div>
-
-  <div class="row">
-    <div class="col-lg-6">
-      <h4 class="sbbsc-block">Navigation</h4>
-      <sbb-navigation
-        [linkGenerator]="linkGeneratorNavigation"
-        (pageChange)="onPageChangeNavigation($event)"
-        [nextPage]="nextPage"
-        [previousPage]="previousPage"
-      >
-      </sbb-navigation>
-    </div>
-  </div>
 </div>
diff --git a/...ts/angular-showcase/src/app/examples/pagination-showcase/pagination-showcase.component.ts b/...ts/angular-showcase/src/app/examples/pagination-showcase/pagination-showcase.component.ts
@@ -1,6 +1,5 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { LinkGeneratorResult, NavigationPageDescriptor } from '@sbb-esta/angular-public';
 
 @Component({
   selector: 'sbb-pagination-showcase',
@@ -10,15 +9,15 @@ import { LinkGeneratorResult, NavigationPageDescriptor } from '@sbb-esta/angular
 export class PaginationShowcaseComponent {
   constructor(private _route: ActivatedRoute) {}
 
-  maxPage = 7;
-  initialPage = 5;
+  length = 7;
+  pageIndex = 5;
 
   pages = ['Einführung', 'Kapitel 1', 'Kapitel 2', 'Kapitel 3'].map((page, index) => {
     return { title: page, index: index };
   });
 
-  hasPrevious: NavigationPageDescriptor = this.pages[1];
-  hasNext: NavigationPageDescriptor = this.pages[2];
+  hasPrevious = this.pages[1];
+  hasNext = this.pages[2];
 
   get previousPage(): string {
     return this.hasPrevious ? this.hasPrevious.title : null;
@@ -33,15 +32,6 @@ export class PaginationShowcaseComponent {
     console.log($event);
   }
 
-  linkGenerator = (page: { displayNumber: number; index: number }): LinkGeneratorResult => {
-    return {
-      routerLink: ['.'],
-      queryParams: { page: page.displayNumber },
-      queryParamsHandling: 'merge',
-      relativeTo: this._route
-    };
-  };
-
   onPageChangeNavigation($event) {
     if ($event === 'next') {
       this.hasPrevious = this.hasNext;
@@ -52,22 +42,6 @@ export class PaginationShowcaseComponent {
     }
   }
 
-  linkGeneratorNavigation = (direction: 'previous' | 'next'): LinkGeneratorResult => {
-    let index = null;
-    if (direction === 'next') {
-      index = this.hasNext.index;
-    } else {
-      index = this.hasPrevious.index;
-    }
-
-    return {
-      routerLink: ['.'],
-      queryParams: { page: index },
-      queryParamsHandling: 'merge',
-      relativeTo: this._route
-    };
-  };
-
   addPage() {
     this.pages.push({ title: this.newPage.title, index: this.pages.length });
     this.newPage.title = '';

diff --git a/projects/angular-showcase/src/app/examples/pagination-showcase/pagination.md b/projects/angular-showcase/src/app/examples/pagination-showcase/pagination.md
@@ -11,67 +11,31 @@ This module contains two different components:
 - sbb-pagination
 - sbb-navigation
 
-Each of them can be used in two ways:
-
-- as links (using router links)
-- as buttons
-
 ## The sbb-pagination component
 
-### Buttons configuration
-
-Each sbb-pagination instance requires:
+A sbb-pagination requires a length property, which defines the amount of pages.
+Optionally a pageIndex property (defaults to 0) can be set to select the displayed page.
+Note that the pageIndex is Zero-based.
 
-- The max number of pages (a maximum of 5 pages are displayed)
-- The initial page
-- An optional pageChange function
-
-as see below:
+The pagination emits a pageChange event, when the page changes. The event contains the new 
+page index and the display number.
 
 ```html
-<sbb-pagination (pageChange)="onPageChange($event)" [maxPage]="maxPage" [initialPage]="initialPage">
+<sbb-pagination (pageChange)="onPageChange($event)" [length]="length" [pageIndex]="pageIndex">
 </sbb-pagination>
 ```
 
-When the user interacts with the paginator, a `PageEvent` will be fired that can be used to update the status of pagination (current page selected, previous and next pages and the pages displayed).
-
-### Links configuration
-
-In order to use this component with router links, you must define a `linkGenerator` function to be applied on every page in input. The `initialPage` input is not needed.
-
-```html
-<sbb-pagination
-  (pageChange)="onPageChange($event)"
-  [maxPage]="maxPage"
-  [linkGenerator]="linkGenerator"
->
-</sbb-pagination>
-```
-
-The `linkGenerator` method has this kind of declaration:
-
-```ts
-  linkGenerator?: (page: { index: number, displayNumber: number }) => LinkGeneratorResult
-```
 
 ## The sbb-navigation component
 
-This component has only two buttons/links labelled by a title, one for navigating to the previous page, another to get to the next page.
+This component has only two buttons labelled by a title, one for navigating to the previous page, another to get to the next page.
 
 When the description is too long and doesn't fit into the button/link label, it is still visible into the native tooltip of each button.
 
-Input needed:
-
-- nextPage: a string representing the title of the next page
-- previousPage: a string representing the title of the previous page
-- pageChange: callback called when a button/link is clicked
-- linkGenerator: input function to be used to enable the link mode
-
-The pageChange callback argument is a `{direction: 'previous' | 'next'}` object.
+The sbb-navigation requires either a nextPage property or a previousPage property or both.
 
-### Navigation buttons configuration
-
-If no `linkGenerator` function is passed as input to the component, this renders two buttons.
+The navigation emits a pageChange event (`'previous' | 'next'`) on click of the previous or next button,
+which indicates the direction that was clicked.
 
 ```html
 <sbb-navigation
@@ -83,23 +47,3 @@ If no `linkGenerator` function is passed as input to the component, this renders
 ```
 
 The switching logic has to be implemented into the `pageChange` callback.
-
-### Navigation links configuration
-
-If you want to use Angular routing to change pages, you have to implement and pass into the component a `linkGenerator` function.
-
-```html
-<sbb-navigation
-  [linkGenerator]="linkGeneratorNavigation"
-  (pageChange)="onPageChangeNavigation($event)"
-  [nextPage]="nextPage"
-  [previousPage]="previousPage"
->
-</sbb-navigation>
-```
-
-The `linkGenerator` method declaration is the following one:
-
-```ts
-linkGenerator?: (direction: 'previous' | 'next') => LinkGeneratorResult;
-```