bug: setting button nodecoration false resets attentionlevel (#3022)

kirbydesign · May 1, 2023 · 2e67cad · 2e67cad
1 parent d90a08d
commit 2e67cad
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 33 deletions.
diff --git a/libs/designsystem/button/src/button.component.spec.ts b/libs/designsystem/button/src/button.component.spec.ts
@@ -85,15 +85,6 @@ describe('ButtonComponent', () => {
           color: getColor('semi-dark', 'shade'),
         });
       });
-
-      it('should not have a background-color when disabled', () => {
-        expect(element).toHaveComputedStyle({ 'background-color': getColor('semi-light') });
-
-        spectator.component.noDecoration = true;
-        spectator.detectChanges();
-
-        expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
-      });
     });
 
     describe('when configured with attentionlevel 1', () => {
@@ -183,6 +174,29 @@ describe('ButtonComponent', () => {
           color: getColor('black'),
         });
       });
+
+      describe('and is disabled', () => {
+        it('should not have a background-color', () => {
+          spectator.component.noDecoration = true;
+          spectator.detectChanges();
+
+          expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
+        });
+      });
+
+      describe('and attentionLevel', () => {
+        it('should render with no background-color', () => {
+          spectator.component.attentionLevel = '1';
+          spectator.detectChanges();
+          expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
+        });
+
+        it('should not reset attentionLevel', () => {
+          spectator.component.attentionLevel = '3';
+          spectator.component.noDecoration = false;
+          expect(spectator.component.attentionLevel).toEqual('3');
+        });
+      });
     });
   });
 

diff --git a/libs/designsystem/button/src/button.component.ts b/libs/designsystem/button/src/button.component.ts
@@ -36,30 +36,22 @@ const ATTENTION_LEVEL_4_DEPRECATION_WARNING =
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonComponent implements AfterContentInit {
-  @HostBinding('class.attention-level1')
-  isAttentionLevel1: boolean = true; // Default
-  @HostBinding('class.attention-level2')
-  isAttentionLevel2: boolean;
-  @HostBinding('class.attention-level3')
-  isAttentionLevel3: boolean;
+  private _attentionLevel?: AttentionLevel;
+  get attentionLevel(): AttentionLevel | undefined {
+    return this._attentionLevel;
+  }
+
   @Input() set attentionLevel(level: AttentionLevel) {
-    this.isAttentionLevel1 = level === '1';
-    this.isAttentionLevel2 = level === '2';
-    this.isAttentionLevel3 = level === '3' || level === '4';
+    this._attentionLevel = level;
     if (level === '4') {
+      this._attentionLevel = '3';
       console.warn(ATTENTION_LEVEL_4_DEPRECATION_WARNING);
     }
   }
 
   @HostBinding('class.no-decoration')
-  hasNoDecoration = false;
   @Input()
-  set noDecoration(enable: boolean) {
-    this.hasNoDecoration = enable;
-    this.isAttentionLevel1 = !enable;
-    this.isAttentionLevel2 = false;
-    this.isAttentionLevel3 = false;
-  }
+  noDecoration = false;
 
   @HostBinding('class.floating')
   public get isButtonFloating(): boolean {
@@ -83,7 +75,14 @@ export class ButtonComponent implements AfterContentInit {
 
   @HostBinding('class')
   get _cssClass() {
-    return [this.themeColor, this.size].filter((cssClass) => !!cssClass);
+    const attentionLevel = this.getAttentionLevelCssClass();
+    return [this.themeColor, this.size, attentionLevel].filter((cssClass) => !!cssClass);
+  }
+
+  private getAttentionLevelCssClass() {
+    if (this.noDecoration) return;
+    const attentionLevelDefault: AttentionLevel = '1';
+    return `attention-level${this._attentionLevel || attentionLevelDefault}`;
   }
 
   @Input()

diff --git a/libs/designsystem/empty-state/src/empty-state.component.integration.spec.ts b/libs/designsystem/empty-state/src/empty-state.component.integration.spec.ts
@@ -32,12 +32,13 @@ describe('EmptyStateComponent with slotted buttons', () => {
   });
 
   it('should not change the attention level of the first button', () => {
-    expect(buttons[0].isAttentionLevel1).toBeTrue();
+    expect(buttons[0].attentionLevel).toBeUndefined();
+    expect(buttons[0]._cssClass).toContain('attention-level1');
   });
 
   it('should set the attention level of all buttons to 3 except the first one', () => {
     const allButtonsButTheFirst = buttons.splice(1, buttons.length);
-    expect(allButtonsButTheFirst.every((button) => button.isAttentionLevel3)).toBeTrue();
+    expect(allButtonsButTheFirst.every((button) => button.attentionLevel === '3')).toBeTrue();
   });
 });
 
@@ -67,7 +68,7 @@ describe('EmptyStateComponent with slotted buttons configured with attention lev
   });
 
   it('should set the attention level of all buttons to 3', () => {
-    expect(buttons.every((button) => button.isAttentionLevel3)).toBeTrue();
+    expect(buttons.every((button) => button.attentionLevel === '3')).toBeTrue();
   });
 });
 
@@ -97,11 +98,11 @@ describe('EmptyStateComponent with slotted buttons configured with attention lev
   });
 
   it('should not change the attention level of the first button', () => {
-    expect(buttons[0].isAttentionLevel1).toBeTrue();
+    expect(buttons[0].attentionLevel).toEqual('1');
   });
 
   it('should set the attention level of all buttons to 3 except the first one', () => {
     const allButtonsButTheFirst = buttons.splice(1, buttons.length);
-    expect(allButtonsButTheFirst.every((button) => button.isAttentionLevel3)).toBeTrue();
+    expect(allButtonsButTheFirst.every((button) => button.attentionLevel === '3')).toBeTrue();
   });
 });
diff --git a/libs/designsystem/empty-state/src/empty-state.component.ts b/libs/designsystem/empty-state/src/empty-state.component.ts
@@ -39,9 +39,11 @@ export class EmptyStateComponent implements AfterContentInit {
    */
   private enforceAttentionLevelRules() {
     this.slottedButtons.forEach((button, index) => {
-      if (index === 0 && button.isAttentionLevel1) return;
+      if (index === 0 && (button.attentionLevel === undefined || button.attentionLevel === '1')) {
+        return;
+      }
 
-      if (!button.isAttentionLevel3) {
+      if (button.attentionLevel !== '3') {
         button.attentionLevel = '3';
       }
     });