Remove deprecated okBtnText and cancelBtnText from AlertConfig (#2175)

* ♻️ Use correct config properties in examples * ♻️ Rename and use correct properties in alert * 🔥 Remove deprecated config properties * ♻️ Simplify cancelBtn config * ♻️ Rename getter for okBtn to match property name
kirbydesign · Apr 21, 2022 · 51a767c · 51a767c
1 parent f906f40
commit 51a767c
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 49 deletions.
diff --git a/.../app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts b/.../app/examples/chart-deprecated-example/examples/chart-deprecated-example-bar.component.ts
@@ -38,7 +38,7 @@ const config = {
   this.modalController.showAlert({
     title: 'Clicked chart',
     message: 'You clicked on year: ' + ev.point.category,
-    okBtnText: 'Ok',
+    okBtn: 'Ok',
   });
 
   this.selectedYear = ev.point.category;
@@ -109,7 +109,7 @@ export class ChartDeprecatedExampleBarComponent {
     this.modalController.showAlert({
       title: 'Clicked chart',
       message: 'You clicked on year: ' + ev.point.category,
-      okBtnText: 'Ok',
+      okBtn: 'Ok',
     });
 
     this.selectedYear = ev.point.category;

diff --git a/...p/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts b/...p/examples/chart-deprecated-example/examples/chart-deprecated-example-column.component.ts
@@ -39,7 +39,7 @@ const config = {
       this.modalController.showAlert({
     title: 'Clicked chart',
     message: 'You clicked on column: ' + ev.point.category,
-    okBtnText: 'Ok',
+    okBtn: 'Ok',
   });
 
   this.selectedIdx = this.categories.indexOf(ev.point.category);
@@ -94,7 +94,7 @@ export class ChartDeprecatedExampleColumnComponent {
     this.modalController.showAlert({
       title: 'Clicked chart',
       message: 'You clicked on column: ' + ev.point.category,
-      okBtnText: 'Ok',
+      okBtn: 'Ok',
     });
 
     this.selectedIdx = this.categories.indexOf(ev.point.category);

diff --git a/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts b/apps/cookbook/src/app/examples/slide-button-example/slide-button-example.component.ts
@@ -13,8 +13,8 @@ export class SlideButtonExampleComponent {
     const config: AlertConfig = {
       title: 'Your alert',
       message: 'Your alert message',
-      okBtnText: 'Ok',
-      cancelBtnText: 'Cancel',
+      okBtn: 'Ok',
+      cancelBtn: 'Cancel',
     };
     this.modalController.showAlert(config, this.onAlertClosed);
   }

diff --git a/libs/designsystem/src/lib/components/modal/alert/alert.component.html b/libs/designsystem/src/lib/components/modal/alert/alert.component.html
@@ -8,22 +8,22 @@
   <div class="buttongroup">
     <button
       kirby-button
-      *ngIf="cancelBtnText"
+      *ngIf="cancelBtn"
       attentionLevel="3"
       class="cancel-btn"
       (click)="onCancel()"
     >
-      {{ cancelBtnText }}
+      {{ cancelBtn }}
     </button>
     <button
       kirby-button
-      [size]="cancelBtnText ? null : 'lg'"
+      [size]="cancelBtn ? null : 'lg'"
       attentionLevel="1"
       class="ok-btn"
       [isDestructive]="okBtnIsDestructive"
       (click)="onOk()"
     >
-      {{ okBtnText }}
+      {{ okBtn }}
     </button>
   </div>
 </article>
diff --git a/libs/designsystem/src/lib/components/modal/alert/alert.component.spec.ts b/libs/designsystem/src/lib/components/modal/alert/alert.component.spec.ts
@@ -32,7 +32,7 @@ describe('AlertComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AlertComponent);
     component = fixture.componentInstance;
-    component.okBtnText = 'Test OK Button Text';
+    component.okBtn = 'Test OK Button Text';
     fixture.detectChanges();
   });
 
@@ -45,7 +45,7 @@ describe('AlertComponent', () => {
       const expected = 'Test OK Button Text';
       const okButton = fixture.debugElement.query(By.css('.ok-btn'));
 
-      expect(component.okBtnText).toEqual(expected);
+      expect(component.okBtn).toEqual(expected);
       expect(okButton.nativeElement.innerText).toEqual(expected);
     });
 
@@ -67,15 +67,15 @@ describe('AlertComponent', () => {
 
     it('should have default size', () => {
       const okButton = fixture.debugElement.query(By.css('.ok-btn'));
-      component.cancelBtnText = 'Test Cancel Button Text';
+      component.cancelBtn = 'Test Cancel Button Text';
       fixture.detectChanges();
 
       expect(okButton.attributes['ng-reflect-size']).toBeUndefined();
     });
 
     it('should have large ok button when no cancel button', () => {
       const okButton = fixture.debugElement.query(By.css('.ok-btn'));
-      component.cancelBtnText = null;
+      component.cancelBtn = null;
       fixture.detectChanges();
 
       expect(okButton.attributes['ng-reflect-size']).toBe('lg');
@@ -85,15 +85,15 @@ describe('AlertComponent', () => {
   describe('cancel button', () => {
     it('should render', () => {
       const expected = 'Test Cancel Button Text';
-      component.cancelBtnText = 'Test Cancel Button Text';
+      component.cancelBtn = 'Test Cancel Button Text';
       fixture.detectChanges();
       const cancelButton = fixture.debugElement.query(By.css('.cancel-btn'));
 
       expect(cancelButton.nativeElement.innerText).toEqual(expected);
     });
 
     it('should not render when cancelBtn not set', () => {
-      component.cancelBtnText = null;
+      component.cancelBtn = null;
       fixture.detectChanges();
       const cancelButton = fixture.debugElement.query(By.css('.cancel-btn'));
 
@@ -129,7 +129,7 @@ describe('AlertComponent with okBtn', () => {
 
   beforeEach(() => {
     spectator = createHost(`
-    <kirby-alert okBtnText="OK Button Text">
+    <kirby-alert okBtn="OK Button Text">
     </kirby-alert>
     `);
     element = spectator.element;

diff --git a/libs/designsystem/src/lib/components/modal/alert/alert.component.ts b/libs/designsystem/src/lib/components/modal/alert/alert.component.ts
@@ -29,9 +29,9 @@ export class AlertComponent implements AfterViewInit {
 
   @Input() iconName: string;
   @Input() iconThemeColor: string;
-  @Input() okBtnText: string;
+  @Input() okBtn: string;
   @Input() okBtnIsDestructive: boolean;
-  @Input() cancelBtnText: string;
+  @Input() cancelBtn: string;
 
   constructor(private elementRef: ElementRef<HTMLElement>, private windowRef: WindowRef) {}
 

diff --git a/libs/designsystem/src/lib/components/modal/alert/config/alert-config.ts b/libs/designsystem/src/lib/components/modal/alert/config/alert-config.ts
@@ -3,17 +3,6 @@ import { Observable } from 'rxjs';
 export interface AlertConfig {
   title: string | Observable<string>;
   message?: string | Observable<string>;
-
-  /**
-   * @deprecated Will be deprecated in next major version. Use `okBtn` instead.
-   */
-  okBtnText?: string;
-
-  /**
-   * @deprecated Will be deprecated in next major version. Use `cancelBtn` instead.
-   */
-  cancelBtnText?: string;
-
   cancelBtn?: string;
 
   icon?: {

diff --git a/libs/designsystem/src/lib/components/modal/services/alert.helper.ts b/libs/designsystem/src/lib/components/modal/services/alert.helper.ts
@@ -1,8 +1,9 @@
 import { Injectable } from '@angular/core';
 import { ModalController } from '@ionic/angular';
 
-import { AlertConfig } from '../alert/config/alert-config';
 import { AlertComponent } from '../alert/alert.component';
+import { AlertConfig } from '../alert/config/alert-config';
+
 import { Overlay } from './modal.interfaces';
 
 @Injectable()
@@ -29,22 +30,17 @@ export class AlertHelper {
   private getComponentProps(config: AlertConfig) {
     return {
       ...config,
-      okBtnText: this.getOkBtnText(config),
-      cancelBtnText: this.getCancelBtnText(config),
+      okBtn: this.getOkBtn(config),
+      cancelBtn: config.cancelBtn,
       okBtnIsDestructive: this.getOkBtnIsDestructive(config),
       iconName: config.icon && config.icon.name,
       iconThemeColor: config.icon && config.icon.themeColor,
     };
   }
 
-  private getOkBtnText(config: AlertConfig) {
+  private getOkBtn(config: AlertConfig) {
     let text: string;
-    if (config.okBtnText) {
-      console.warn(
-        '`okBtnText` will be deprecated on next major version. Please use `okBtn` instead.'
-      );
-      text = config.okBtnText;
-    }
+
     if (config.okBtn) {
       if (typeof config.okBtn === 'string') {
         text = config.okBtn;
@@ -58,13 +54,4 @@ export class AlertHelper {
   getOkBtnIsDestructive(config) {
     return typeof config.okBtn === 'object' ? config.okBtn.isDestructive : undefined;
   }
-
-  private getCancelBtnText(config: AlertConfig) {
-    if (config.cancelBtnText) {
-      console.warn(
-        '`cancelBtnText` will be deprecated on next major version. Please use `cancelBtn` instead.'
-      );
-    }
-    return config.cancelBtn || config.cancelBtnText;
-  }
 }