feat(datagrid): remove deprecated sorting properties

BREAKING CHANGE: The deprecated datagrid sorting APIs are removed in favor of the newer APIs. You may need to make the following changes: - `sortIcon`: Use `sortDirection` instead. - `clrDgSorted`: Use `clrDgSortOrder` instead. - `clrDgSortedChange`: Use `clrDgSortOrderChange` instead.
vmware-clarity · Dec 19, 2022 · 6af3832 · 6af3832
1 parent 7470769
commit 6af3832
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 133 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -1306,13 +1306,6 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     get sortDirection(): 'up' | 'down' | null;
     // (undocumented)
-    get sorted(): boolean;
-    set sorted(value: boolean);
-    // @deprecated (undocumented)
-    sortedChange: EventEmitter<boolean>;
-    // @deprecated (undocumented)
-    sortIcon: string | null;
-    // (undocumented)
     get sortOrder(): ClrDatagridSortOrder;
     set sortOrder(value: ClrDatagridSortOrder);
     // (undocumented)
@@ -1322,7 +1315,7 @@ export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDa
     // (undocumented)
     get _view(): any;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridColumn<any>, "clr-dg-column", never, { "colType": "clrDgColType"; "field": "clrDgField"; "sortBy": "clrDgSortBy"; "sorted": "clrDgSorted"; "sortOrder": "clrDgSortOrder"; "filterStringPlaceholder": "clrFilterStringPlaceholder"; "filterNumberMaxPlaceholder": "clrFilterNumberMaxPlaceholder"; "filterNumberMinPlaceholder": "clrFilterNumberMinPlaceholder"; "updateFilterValue": "clrFilterValue"; }, { "sortedChange": "clrDgSortedChange"; "sortOrderChange": "clrDgSortOrderChange"; "filterValueChange": "clrFilterValueChange"; }, ["projectedFilter"], ["clr-dg-filter, clr-dg-string-filter, clr-dg-numeric-filter", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatagridColumn<any>, "clr-dg-column", never, { "colType": "clrDgColType"; "field": "clrDgField"; "sortBy": "clrDgSortBy"; "sortOrder": "clrDgSortOrder"; "filterStringPlaceholder": "clrFilterStringPlaceholder"; "filterNumberMaxPlaceholder": "clrFilterNumberMaxPlaceholder"; "filterNumberMinPlaceholder": "clrFilterNumberMinPlaceholder"; "updateFilterValue": "clrFilterValue"; }, { "sortOrderChange": "clrDgSortOrderChange"; "filterValueChange": "clrFilterValueChange"; }, ["projectedFilter"], ["clr-dg-filter, clr-dg-string-filter, clr-dg-numeric-filter", "*"], false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatagridColumn<any>, never>;
 }

diff --git a/projects/angular/src/data/datagrid/datagrid-column.spec.ts b/projects/angular/src/data/datagrid/datagrid-column.spec.ts
@@ -69,11 +69,11 @@ export default function (): void {
 
       it('knows if the column is currently sorted', function () {
         component.sortBy = comparator;
-        expect(component.sorted).toBe(false);
+        expect(component.sortOrder).toBe(ClrDatagridSortOrder.UNSORTED);
         component.sort();
-        expect(component.sorted).toBe(true);
+        expect(component.sortOrder).toBe(ClrDatagridSortOrder.ASC);
         component.sort();
-        expect(component.sorted).toBe(true);
+        expect(component.sortOrder).toBe(ClrDatagridSortOrder.DESC);
       });
 
       it('sorts according to the optional input parameter', function () {
@@ -96,32 +96,26 @@ export default function (): void {
         expect(component.sortOrder).toBe(ClrDatagridSortOrder.DESC);
       });
 
-      it('knows when the column has an ascending sortIcon', function () {
+      it('knows when the column has an ascending sortDirection', function () {
         component.sortBy = comparator;
-        expect(component.sortIcon).toBeUndefined();
         expect(component.sortDirection).toBeUndefined();
         component.sort();
-        expect(component.sortIcon).toBe('arrow');
         expect(component.sortDirection).toBe('up');
       });
 
-      it('knows when the column has a descending sortIcon', function () {
+      it('knows when the column has a descending sortDirection', function () {
         component.sortBy = comparator;
-        expect(component.sortIcon).toBeUndefined();
         expect(component.sortDirection).toBeUndefined();
         component.sort();
         component.sort();
-        expect(component.sortIcon).toBe('arrow down');
         expect(component.sortDirection).toBe('down');
       });
 
-      it('sets the column sortIcon to null when sort is cleared', function () {
+      it('sets the column sortDirection to null when sort is cleared', function () {
         component.sortBy = comparator;
         expect(component.sortDirection).toBe(undefined);
-        expect(component.sortIcon).toBe(undefined);
         component.sort();
         sortService.clear();
-        expect(component.sortIcon).toBeNull();
         expect(component.sortDirection).toBeNull();
       });
 
@@ -195,18 +189,6 @@ export default function (): void {
         expect(this.context.clarityDirective.filterValue).toBe('M');
       });
 
-      it('offers two-way binding on the sorted state', function () {
-        this.context = this.create(ClrDatagridColumn, SimpleDeprecatedTest, DATAGRID_SPEC_PROVIDERS);
-        this.comparator = new TestComparator();
-        this.context.testComponent.comparator = this.comparator;
-        this.context.testComponent.sorted = true;
-        this.context.detectChanges();
-        expect(this.context.clarityDirective.sorted).toBe(true); // dg col instance
-        this.context.getClarityProvider(Sort).clear();
-        this.context.detectChanges();
-        expect(this.context.testComponent.sorted).toBe(false);
-      });
-
       it('offers two-way binding on the sortOrder state', function () {
         this.context = this.create(ClrDatagridColumn, SimpleTest, DATAGRID_SPEC_PROVIDERS);
         this.comparator = new TestComparator();
@@ -513,19 +495,6 @@ class TestStringFilter implements ClrDatagridStringFilterInterface<number> {
   }
 }
 
-@Component({
-  template: `
-    <clr-dg-column [clrDgSortBy]="comparator" [clrDgField]="field" [(clrDgSorted)]="sorted">
-      Hello world
-    </clr-dg-column>
-  `,
-})
-class SimpleDeprecatedTest {
-  comparator: ClrDatagridComparatorInterface<number>;
-  field: string;
-  sorted = false;
-}
-
 @Component({
   template: `
     <clr-dg-column [clrDgSortBy]="comparator" [clrDgField]="field" [(clrDgSortOrder)]="sortOrder">

diff --git a/projects/angular/src/data/datagrid/datagrid-column.ts b/projects/angular/src/data/datagrid/datagrid-column.ts
@@ -140,16 +140,8 @@ export class ClrDatagridColumn<T = any>
       if (this.sortOrder !== ClrDatagridSortOrder.UNSORTED && sort.comparator !== this._sortBy) {
         this._sortOrder = ClrDatagridSortOrder.UNSORTED;
         this.sortOrderChange.emit(this._sortOrder);
-        // removes the sortIcon when column becomes unsorted
-        this.sortIcon = null;
         this._sortDirection = null;
       }
-      // deprecated: to be removed - START
-      if (this.sorted && sort.comparator !== this._sortBy) {
-        this._sorted = false;
-        this.sortedChange.emit(false);
-      }
-      // deprecated: to be removed - END
     });
   }
 
@@ -257,37 +249,6 @@ export class ClrDatagridColumn<T = any>
     return !!this._sortBy;
   }
 
-  // deprecated: to be removed - START
-  /**
-   * Indicates if the column is currently sorted
-   *
-   * @deprecated This will be removed soon, in favor of the sortOrder mechanism
-   */
-  private _sorted = false;
-  get sorted() {
-    return this._sorted;
-  }
-
-  /**
-   * @deprecated This will be removed soon, in favor of the sortOrder mechanism
-   */
-  @Input('clrDgSorted')
-  set sorted(value: boolean) {
-    if (!value && this.sorted) {
-      this._sorted = false;
-      this._sort.clear();
-    } else if (value && !this.sorted) {
-      this.sort();
-    }
-  }
-
-  /**
-   * @deprecated This will be removed soon, in favor of the sortOrder mechanism
-   */
-  @Output('clrDgSortedChange') sortedChange = new EventEmitter<boolean>();
-
-  // deprecated: to be removed - END
-
   /**
    * Indicates how the column is currently sorted
    */
@@ -336,13 +297,6 @@ export class ClrDatagridColumn<T = any>
 
   @Output('clrDgSortOrderChange') sortOrderChange = new EventEmitter<ClrDatagridSortOrder>();
 
-  /**
-   * @deprecated
-   *
-   * Use `sortDirection` to indentify the sort direction
-   */
-  sortIcon: string | null;
-
   private _sortDirection: 'up' | 'down' | null;
 
   get sortDirection(): 'up' | 'down' | null {
@@ -363,13 +317,7 @@ export class ClrDatagridColumn<T = any>
     this._sortOrder = this._sort.reverse ? ClrDatagridSortOrder.DESC : ClrDatagridSortOrder.ASC;
     // Sets the correct icon for current sort order
     this._sortDirection = this._sortOrder === ClrDatagridSortOrder.DESC ? 'down' : 'up';
-    this.sortIcon = this._sortOrder === ClrDatagridSortOrder.DESC ? 'arrow down' : 'arrow'; // Backward compatibility
     this.sortOrderChange.emit(this._sortOrder);
-
-    // deprecated: to be removed - START
-    this._sorted = true;
-    this.sortedChange.emit(true);
-    // deprecated: to be removed - END
   }
 
   /**

diff --git a/projects/demo/src/app/datagrid/sorting/sorting.html b/projects/demo/src/app/datagrid/sorting/sorting.html
@@ -139,36 +139,3 @@ <h2>Custom sort</h2>
 
   <clr-dg-footer>{{users.length}} users</clr-dg-footer>
 </clr-datagrid>
-
-<p>
-  The following example is showcasing the deprecated way of sorting pokemons. This will be removed in the next major
-  release.
-</p>
-<p>
-  The datagrid is currently {{sorted ? "" : "not"}} sorted.
-  <button class="btn btn-secondary" (click)="sorted = !sorted">{{sorted ? "Clear sort" : "Sort"}}</button>
-</p>
-<clr-datagrid>
-  <clr-dg-column>User ID</clr-dg-column>
-  <clr-dg-column>Name</clr-dg-column>
-  <clr-dg-column>Creation date</clr-dg-column>
-  <clr-dg-column [clrDgField]="'pokemon.name'" [clrDgSortBy]="pokemonComparator" [(clrDgSorted)]="sorted">
-    Pokemon
-  </clr-dg-column>
-  <clr-dg-column>Favorite color</clr-dg-column>
-
-  <clr-dg-row *clrDgItems="let user of usersDeprecated">
-    <clr-dg-cell>{{user.id}}</clr-dg-cell>
-    <clr-dg-cell>{{user.name}}</clr-dg-cell>
-    <clr-dg-cell>{{user.creation | date}}</clr-dg-cell>
-    <clr-dg-cell>
-      {{user.pokemon.name}}
-      <span class="badge badge-5">#{{user.pokemon.number}}</span>
-    </clr-dg-cell>
-    <clr-dg-cell>
-      <span class="color-square" [style.backgroundColor]="user.color"></span>
-    </clr-dg-cell>
-  </clr-dg-row>
-
-  <clr-dg-footer>{{users.length}} users</clr-dg-footer>
-</clr-datagrid>
diff --git a/projects/demo/src/app/datagrid/sorting/sorting.ts b/projects/demo/src/app/datagrid/sorting/sorting.ts
@@ -19,16 +19,13 @@ import { PokemonComparator } from '../utils/pokemon-comparator';
 })
 export class DatagridSortingDemo {
   users: User[];
-  usersDeprecated: User[];
   sortOrder: ClrDatagridSortOrder = ClrDatagridSortOrder.UNSORTED;
-  sorted = false;
 
   pokemonComparator = new PokemonComparator();
 
   constructor(inventory: Inventory) {
     inventory.size = 10;
     inventory.reset();
     this.users = inventory.all;
-    this.usersDeprecated = inventory.all;
   }
 }