feat(datagrid): require using common strings to translate column toggle

BREAKING CHANGES: The `showColumns` and `selectAll` common strings must be used translate the datagrid column toggle title and select all button text. The `clr-dg-column-toggle-title` and `clr-dg-column-toggle-button` components were deprecated and now can no longer be used.
vmware-clarity · Feb 3, 2023 · 45ef6d1 · 45ef6d1
1 parent c8d4d5c
commit 45ef6d1
Show file tree

Hide file tree

Showing 12 changed files with 57 additions and 151 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
diff --git a/projects/angular/src/data/datagrid/datagrid-column-toggle-button.spec.ts b/projects/angular/src/data/datagrid/datagrid-column-toggle-button.spec.ts
@@ -24,7 +24,12 @@ export default function (): void {
     };
 
     beforeEach(function () {
-      context = this.create(ClrDatagridColumnToggleButton, ButtonTest, [MOCK_COLUMN_SERVICE_PROVIDER]);
+      context = this.create(
+        ClrDatagridColumnToggleButton,
+        ButtonTest,
+        [MOCK_COLUMN_SERVICE_PROVIDER],
+        [ClrDatagridColumnToggleButton]
+      );
       columnsService = context.getClarityProvider(ColumnsService) as MockColumnsService;
       toggleButton = context.clarityDirective;
       columnsService.mockColumns(3);

diff --git a/projects/angular/src/data/datagrid/datagrid-column-toggle-button.ts b/projects/angular/src/data/datagrid/datagrid-column-toggle-button.ts
@@ -7,6 +7,7 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 
+import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
 import { DatagridColumnChanges } from './enums/column-changes.enum';
 import { ColumnState } from './interfaces/column-state.interface';
 import { ColumnsService } from './providers/columns.service';
@@ -20,13 +21,12 @@ import { ColumnsService } from './providers/columns.service';
       [disabled]="allHideablesVisible"
       type="button"
     >
-      <ng-content></ng-content>
+      {{ commonStrings.keys.selectAll }}
     </button>
   `,
 })
-/** @deprecated since 2.0, remove in 3.0 */
 export class ClrDatagridColumnToggleButton {
-  constructor(private columnsService: ColumnsService) {}
+  constructor(public commonStrings: ClrCommonStringsService, private columnsService: ColumnsService) {}
 
   private allSelected: Subject<boolean> = new EventEmitter();
 

diff --git a/projects/angular/src/data/datagrid/datagrid-column-toggle-title.ts b/projects/angular/src/data/datagrid/datagrid-column-toggle-title.ts
diff --git a/projects/angular/src/data/datagrid/datagrid-column-toggle.spec.ts b/projects/angular/src/data/datagrid/datagrid-column-toggle.spec.ts
@@ -18,10 +18,7 @@ import { MOCK_COLUMN_SERVICE_PROVIDER, MockColumnsService } from './providers/co
   template: `
     <ng-template>Template Content</ng-template>
     <!--The above ng-template is required/used as a hideable column template-->
-    <clr-dg-column-toggle>
-      <clr-dg-column-toggle-title *ngIf="hasCustomToggleTitle">Custom Toggle Title</clr-dg-column-toggle-title>
-      <clr-dg-column-toggle-button *ngIf="hasCustomToggleButton">Custom Toggle Button</clr-dg-column-toggle-button>
-    </clr-dg-column-toggle>
+    <clr-dg-column-toggle></clr-dg-column-toggle>
   `,
 })
 class ColumnToggleTest {
@@ -35,25 +32,22 @@ class ColumnToggleTest {
   constructor(columnsService: ColumnsService) {
     this.mockColumnsService = columnsService as MockColumnsService;
   }
-
-  hasCustomToggleTitle = false;
-  hasCustomToggleButton = false;
 }
 
 export default function (): void {
   describe('Datagrid Column Toggle component', function () {
     let context: TestContext<ClrDatagridColumnToggle, ColumnToggleTest>;
     let columnsService: MockColumnsService;
     let columnToggle: ClrDatagridColumnToggle;
-    let testComponent: ColumnToggleTest;
 
     beforeEach(function () {
-      context = this.create(ClrDatagridColumnToggle, ColumnToggleTest, [
-        MOCK_COLUMN_SERVICE_PROVIDER,
-        ClrPopoverToggleService,
-      ]);
+      context = this.create(
+        ClrDatagridColumnToggle,
+        ColumnToggleTest,
+        [MOCK_COLUMN_SERVICE_PROVIDER, ClrPopoverToggleService],
+        [ClrDatagridColumnToggle]
+      );
       columnsService = context.getClarityProvider(ColumnsService) as MockColumnsService;
-      testComponent = context.testComponent;
       columnToggle = context.clarityDirective;
       columnsService.mockColumns(3);
     });
@@ -244,14 +238,6 @@ export default function (): void {
         expect(document.querySelector('.switch-header').textContent).toMatch(/Show Columns/);
       });
 
-      it('can show custom title in switch panel', function () {
-        testComponent.hasCustomToggleTitle = true;
-        columnsService.mockAllHideable();
-        columnToggle.openState = true;
-        context.fixture.detectChanges();
-        expect(document.querySelector('.switch-header').textContent).toMatch(/Custom Toggle Title/);
-      });
-
       it('shows toggle button in switch panel', function () {
         columnsService.mockAllHideable();
         columnToggle.openState = true;
@@ -275,14 +261,6 @@ export default function (): void {
         const toggleButton: HTMLButtonElement = document.querySelector('button.switch-button');
         expect(toggleButton.disabled).toBeFalsy();
       });
-
-      it('can show custom toggle button in switch panel', function () {
-        testComponent.hasCustomToggleButton = true;
-        columnsService.mockAllHideable();
-        columnToggle.openState = true;
-        context.fixture.detectChanges();
-        expect(document.querySelector('button.switch-button').textContent).toMatch(/Custom Toggle Button/);
-      });
     });
   });
 }
diff --git a/projects/angular/src/data/datagrid/datagrid-column-toggle.ts b/projects/angular/src/data/datagrid/datagrid-column-toggle.ts
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, ContentChild, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs';
 
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
@@ -15,8 +15,6 @@ import { ClrSide } from '../../utils/popover/enums/side.enum';
 import { ClrPopoverPosition } from '../../utils/popover/interfaces/popover-position.interface';
 import { PopoverHostDirective } from '../../utils/popover/popover-host.directive';
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
-import { ClrDatagridColumnToggleButton } from './datagrid-column-toggle-button';
-import { ClrDatagridColumnToggleTitle } from './datagrid-column-toggle-title';
 import { DatagridColumnChanges } from './enums/column-changes.enum';
 import { ColumnState } from './interfaces/column-state.interface';
 import { ColumnsService } from './providers/columns.service';
@@ -46,10 +44,7 @@ import { ColumnsService } from './providers/columns.service';
     >
       <div class="switch-header">
         <div class="clr-sr-only" tabindex="-1" #allSelected>{{ commonStrings.keys.allColumnsSelected }}</div>
-        <ng-container *ngIf="!customToggleTitle">
-          <h2>{{ commonStrings.keys.showColumns }}</h2>
-        </ng-container>
-        <ng-content select="clr-dg-column-toggle-title"></ng-content>
+        <h2>{{ commonStrings.keys.showColumns }}</h2>
         <button
           class="btn btn-sm btn-link toggle-switch-close-button"
           clrPopoverCloseButton
@@ -77,17 +72,13 @@ import { ColumnsService } from './providers/columns.service';
         </li>
       </ul>
       <div class="switch-footer">
-        <ng-content select="clr-dg-column-toggle-button"></ng-content>
-        <clr-dg-column-toggle-button *ngIf="!customToggleButton" (clrAllSelected)="allColumnsSelected()">
-          {{ commonStrings.keys.selectAll }}
-        </clr-dg-column-toggle-button>
+        <clr-dg-column-toggle-button (clrAllSelected)="allColumnsSelected()"></clr-dg-column-toggle-button>
       </div>
     </div>
   `,
   host: { '[class.column-switch-wrapper]': 'true', '[class.active]': 'openState' },
   hostDirectives: [PopoverHostDirective],
 })
-/** @deprecated since 2.0, remove in 3.0 */
 export class ClrDatagridColumnToggle implements OnDestroy {
   popoverId = uniqueIdFactory();
 
@@ -103,8 +94,6 @@ export class ClrDatagridColumnToggle implements OnDestroy {
   };
   openState: boolean;
 
-  @ContentChild(ClrDatagridColumnToggleTitle) customToggleTitle: ClrDatagridColumnToggleTitle;
-  @ContentChild(ClrDatagridColumnToggleButton) customToggleButton: ClrDatagridColumnToggleButton;
   @ViewChild('allSelected', { read: ElementRef })
   private allSelectedElement: ElementRef<HTMLElement>;
 

diff --git a/projects/angular/src/data/datagrid/datagrid-footer.spec.ts b/projects/angular/src/data/datagrid/datagrid-footer.spec.ts
@@ -5,10 +5,13 @@
  */
 
 import { Component } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
 
 import { ClrDatagridFooter } from './datagrid-footer';
 import { SelectionType } from './enums/selection-type';
 import { DATAGRID_SPEC_PROVIDERS, TestContext } from './helpers.spec';
+import { ColumnsService } from './providers/columns.service';
+import { MOCK_COLUMN_SERVICE_PROVIDER, MockColumnsService } from './providers/columns.service.mock';
 import { DetailService } from './providers/detail.service';
 
 export default function (): void {
@@ -76,28 +79,20 @@ export default function (): void {
       });
     });
 
-    describe('View with Custom Toggle Buttons', function () {
-      let context: TestContext<ClrDatagridFooter<void>, ColumnTogglerTest>;
+    describe('View with Detail Pane open', function () {
+      let context: TestContext<ClrDatagridFooter<void>, SimpleTest>;
 
       beforeEach(function () {
-        context = this.create(ClrDatagridFooter, ColumnTogglerTest, DATAGRID_SPEC_PROVIDERS);
-      });
+        context = this.create(ClrDatagridFooter, SimpleTest, [
+          ...DATAGRID_SPEC_PROVIDERS,
+          MOCK_COLUMN_SERVICE_PROVIDER,
+        ]);
 
-      it('projects custom column toggler', function () {
-        context.clarityElement.querySelector('.column-toggle--action').click();
-        context.detectChanges();
-        const titleText: HTMLElement = document.body.querySelector('clr-dg-column-toggle-title');
-        const footerSwitch: HTMLElement = document.body.querySelector('.switch-footer clr-dg-column-toggle-button');
-        expect(titleText.innerText).toMatch('Custom Title');
-        expect(footerSwitch.innerText).toMatch('OK!!!');
-      });
-    });
+        // mock a hideable column
+        const columnsService = context.getClarityProvider(ColumnsService) as MockColumnsService;
+        columnsService.columns.push(new BehaviorSubject({} as any));
+        columnsService.mockAllHideable();
 
-    describe('View with Detail Pane open', function () {
-      let context: TestContext<ClrDatagridFooter<void>, ColumnTogglerTest>;
-
-      beforeEach(function () {
-        context = this.create(ClrDatagridFooter, ColumnTogglerTest, DATAGRID_SPEC_PROVIDERS);
         context.detectChanges();
       });
 
@@ -115,17 +110,3 @@ export default function (): void {
   template: `<clr-dg-footer>Hello world</clr-dg-footer>`,
 })
 class SimpleTest {}
-
-@Component({
-  template: `
-    <clr-dg-footer>
-      <clr-dg-column-toggle>
-        <clr-dg-column-toggle-title>Custom Title</clr-dg-column-toggle-title>
-        <clr-dg-column-toggle-button type="ok">OK!!!</clr-dg-column-toggle-button>
-        <clr-dg-column-toggle-button type="selectAll">Select All!!!</clr-dg-column-toggle-button>
-      </clr-dg-column-toggle>
-      Hello world
-    </clr-dg-footer>
-  `,
-})
-class ColumnTogglerTest {}
diff --git a/projects/angular/src/data/datagrid/datagrid-footer.ts b/projects/angular/src/data/datagrid/datagrid-footer.ts
@@ -4,10 +4,9 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, ContentChild } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ClrCommonStringsService } from '../../utils';
-import { ClrDatagridColumnToggle } from './datagrid-column-toggle';
 import { SelectionType } from './enums/selection-type';
 import { ColumnsService } from './providers/columns.service';
 import { DetailService } from './providers/detail.service';
@@ -26,8 +25,7 @@ import { Selection } from './providers/selection';
       </div>
     </ng-container>
     <ng-container *ngIf="!detailService.isOpen">
-      <ng-content select="clr-dg-column-toggle"></ng-content>
-      <clr-dg-column-toggle *ngIf="hasHideableColumns && !toggle"></clr-dg-column-toggle>
+      <clr-dg-column-toggle *ngIf="hasHideableColumns"></clr-dg-column-toggle>
       <div class="datagrid-footer-description">
         <ng-content></ng-content>
       </div>
@@ -49,8 +47,6 @@ export class ClrDatagridFooter<T = any> {
   /* reference to the enum so that template can access */
   SELECTION_TYPE = SelectionType;
 
-  @ContentChild(ClrDatagridColumnToggle) toggle: ClrDatagridColumnToggle;
-
   get hasHideableColumns(): boolean {
     return this.columnsService.hasHideableColumns;
   }

diff --git a/projects/angular/src/data/datagrid/datagrid.module.ts b/projects/angular/src/data/datagrid/datagrid.module.ts
@@ -44,7 +44,6 @@ import { ClrDatagridColumn } from './datagrid-column';
 import { ClrDatagridColumnSeparator } from './datagrid-column-separator';
 import { ClrDatagridColumnToggle } from './datagrid-column-toggle';
 import { ClrDatagridColumnToggleButton } from './datagrid-column-toggle-button';
-import { ClrDatagridColumnToggleTitle } from './datagrid-column-toggle-title';
 import { ClrDatagridDetail } from './datagrid-detail';
 import { ClrDatagridDetailBody } from './datagrid-detail-body';
 import { ClrDatagridDetailHeader } from './datagrid-detail-header';
@@ -77,9 +76,6 @@ export const CLR_DATAGRID_DIRECTIVES: Type<any>[] = [
   ClrDatagridCell,
   ClrDatagridColumn,
   ClrDatagridColumnSeparator,
-  ClrDatagridColumnToggle,
-  ClrDatagridColumnToggleButton,
-  ClrDatagridColumnToggleTitle,
   ClrDatagridDetail,
   ClrDatagridDetailBody,
   ClrDatagridDetailHeader,
@@ -116,6 +112,8 @@ export const CLR_DATAGRID_DIRECTIVES: Type<any>[] = [
   DatagridStringFilter,
 ];
 
+const CLR_DATAGRID_INTERNAL_DIRECTIVES = [ClrDatagridColumnToggle, ClrDatagridColumnToggleButton];
+
 @NgModule({
   imports: [
     CommonModule,
@@ -132,7 +130,7 @@ export const CLR_DATAGRID_DIRECTIVES: Type<any>[] = [
     ClrPopoverModuleNext,
     ClrKeyFocusModule,
   ],
-  declarations: [CLR_DATAGRID_DIRECTIVES],
+  declarations: [CLR_DATAGRID_DIRECTIVES, CLR_DATAGRID_INTERNAL_DIRECTIVES],
   exports: [CLR_DATAGRID_DIRECTIVES],
 })
 export class ClrDatagridModule {

diff --git a/projects/angular/src/data/datagrid/index.ts b/projects/angular/src/data/datagrid/index.ts
@@ -9,7 +9,6 @@ export * from './datagrid-action-bar';
 export * from './datagrid-action-overflow';
 export * from './datagrid-column';
 export * from './datagrid-column-toggle';
-export * from './datagrid-column-toggle-title';
 export * from './datagrid-column-toggle-button';
 export * from './datagrid-column-separator';
 export * from './datagrid-detail';

diff --git a/projects/angular/src/deprecations.spec.ts b/projects/angular/src/deprecations.spec.ts
@@ -5,21 +5,12 @@
  */
 
 import { ClrDatagrid } from './data/datagrid/datagrid';
-import { ClrDatagridColumnToggle } from './data/datagrid/datagrid-column-toggle';
-import { ClrDatagridColumnToggleButton } from './data/datagrid/datagrid-column-toggle-button';
-import { ClrDatagridColumnToggleTitle } from './data/datagrid/datagrid-column-toggle-title';
 
 describe('Deprecations', () => {
   // When we deprecate some code, we should write a test to verify it is still in the bundle
   // and keep track of when it was deprecated, and when we plan to remove it.
 
   describe('2.0', () => {
-    it('should deprecate the column toggle title and button components', () => {
-      expect(ClrDatagridColumnToggle).toBeTruthy();
-      expect(ClrDatagridColumnToggleTitle).toBeTruthy();
-      expect(ClrDatagridColumnToggleButton).toBeTruthy();
-    });
-
     it('should deprecate but still support clrDgRowSelection', () => {
       const propTest = Object.getOwnPropertyDescriptor(ClrDatagrid.prototype, 'rowSelectionMode');
       expect(propTest.set).toBeDefined();

diff --git a/projects/demo/src/app/datagrid/hide-show-columns/hide-show.html b/projects/demo/src/app/datagrid/hide-show-columns/hide-show.html
@@ -101,10 +101,6 @@ <h2>Hide-show columns demo with custom buttons</h2>
   </clr-dg-row>
 
   <clr-dg-footer>
-    <clr-dg-column-toggle>
-      <clr-dg-column-toggle-title>Kolumne Herauschauen!</clr-dg-column-toggle-title>
-      <clr-dg-column-toggle-button>Alle auswählen!</clr-dg-column-toggle-button>
-    </clr-dg-column-toggle>
     {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}} of {{pagination.totalItems}} users
     <clr-dg-pagination #pagination [clrDgPageSize]="currentPageSize"></clr-dg-pagination>
   </clr-dg-footer>