Change after Inspection

apps/cookbook/src/app/examples/button-example/button-example.component.html

@@ -20,7 +20,7 @@ <h2>Block button</h2>
 
 <h2>Button with icon only</h2>
 <div class="button-example-container">
-  <button kirby-button [size]="buttonSize" [noDecoration]="true">
+  <button kirby-button [size]="buttonSize" noDecoration>
     <kirby-icon name="close"></kirby-icon>
   </button>
   <label>Undecorated</label>

apps/cookbook/src/app/page/header/header.component.scss

@@ -36,6 +36,7 @@ nav {
 
   ul {
     display: flex;
+    column-gap: utils.size('xxl');
     list-style: none;
     padding: 0;
     margin: 0;
@@ -44,14 +45,6 @@ nav {
     li {
       margin-block-start: 0;
     }
-
-    a {
-      display: flex;
-      align-items: center;
-      height: 38px;
-      padding: 0 24px;
-      margin: 5px;
-    }
   }
 }
 

apps/cookbook/src/app/page/header/header.component.ts

@@ -9,7 +9,6 @@ interface HeaderLink {
 
 export const navigationItems: HeaderLink[] = [
   { text: 'Introduction', route: '/home/intro' },
-  { text: 'Ressources', route: '' },
   { text: 'Changelog', route: '/home/changelog' },
   { text: 'Component Status', route: '/home/component-status' },
   { text: 'Layout Recipes', route: '/home/layout-recipes' },

apps/cookbook/src/app/page/side-nav/side-nav.component.html

@@ -27,7 +27,7 @@
       *ngIf="filter.length > 0"
       kirby-button
       size="sm"
-      [noDecoration]="true"
+      noDecoration
       class="clear-button"
       (click)="onFilterChange('')"
     >

libs/designsystem/src/lib/components/button/button.component.integration.spec.ts

@@ -399,6 +399,17 @@ describe('ButtonComponent configured with icon only', () => {
         );
       });
     });
+
+    describe('and configured with noDecoration', () => {
+      it('should render with correct width and height for noDecoration', () => {
+        spectator.component.noDecoration();
+        spectator.detectChanges();
+        expect(element).toHaveComputedStyle({
+          width: iconButtonSizeLG,
+          height: iconButtonSizeLG,
+        });
+      });
+    });
   });
 });
 

libs/designsystem/src/lib/components/button/button.component.spec.ts

@@ -273,9 +273,71 @@ describe('ButtonComponent', () => {
       });
     });
 
+    describe('when configured with attentionlevel 4', () => {
+      beforeEach(() => {
+        spectator.component.attentionLevel = '4';
+        spectator.detectChanges();
+      });
+
+      it('should render with no background-color', () => {
+        expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
+      });
+
+      it('should render with correct border', () => {
+        expect(element).toHaveComputedStyle({
+          'border-color': getColor('medium'),
+          'border-width': '1px',
+          'border-style': 'solid',
+        });
+      });
+
+      it('should render with correct color', () => {
+        expect(element).toHaveComputedStyle({
+          color: getColor('black'),
+        });
+      });
+
+      describe('and is destructive', () => {
+        beforeEach(() => {
+          spectator.component.isDestructive = true;
+          spectator.detectChanges();
+        });
+
+        it('should render with correct background-color', () => {
+          expect(element).toHaveComputedStyle({ 'background-color': 'transparent' });
+        });
+
+        it('should render with correct border-color', () => {
+          expect(element).toHaveComputedStyle({
+            'border-color': getColor('medium'),
+          });
+        });
+
+        it('should render with correct color', () => {
+          expect(element).toHaveComputedStyle({
+            color: getColor('danger'),
+          });
+        });
+      });
+
+      describe('and is disabled', () => {
+        beforeEach(() => {
+          element.disabled = true;
+        });
+
+        it('should render with transparent border', () => {
+          expect(element).toHaveComputedStyle({
+            'border-width': '1px',
+            'border-style': 'solid',
+            'border-color': 'transparent',
+          });
+        });
+      });
+    });
+
     describe('when configured with no decoration', () => {
       beforeEach(() => {
-        spectator.component.noDecoration = true;
+        spectator.component.noDecoration();
         spectator.detectChanges();
       });
 

libs/designsystem/src/lib/components/button/button.component.ts

@@ -18,7 +18,7 @@ export enum ButtonSize {
 }
 
 const ATTENTION_LEVEL_4_DEPRECATION_WARNING =
-  'Deprecation warning: The "kirby-button" support for using input property "attentionLevel" with the value "4" will be removed in a future release of Kirby designsystem.';
+  'Deprecation warning: The "kirby-button" support for using input property "attentionLevel" with the value "4" will be removed in a future release of Kirby designsystem. Usage of attention-level 4 will forcibly be rendered as a attention-level 3 button.';
 
 @Component({
   // tslint:disable-next-line:component-selector
@@ -73,9 +73,9 @@ export class ButtonComponent implements AfterContentInit {
     }
   }
 
-  @Input() set noDecoration(enable: boolean) {
-    this.hasNoDecoration = enable;
-    this.isAttentionLevel1 = !this.hasNoDecoration;
+  @Input() noDecoration() {
+    this.hasNoDecoration = true;
+    this.isAttentionLevel1 = false;
     this.isAttentionLevel2 = false;
     this.isAttentionLevel3 = false;
   }

libs/designsystem/src/lib/components/modal/action-sheet/action-sheet.component.html

@@ -5,7 +5,7 @@
     kirby-button
     expand="block"
     size="lg"
-    [noDecoration]="true"
+    noDecoration
     (click)="onItemSelect(item)"
     *ngFor="let item of items"
   >

libs/designsystem/src/lib/components/modal/modal-wrapper/modal-wrapper.component.html

@@ -26,7 +26,7 @@
 </ion-content>
 
 <ng-template #closeButton let-icon="icon">
-  <button kirby-button [noDecoration]="true" size="sm" (click)="close()">
+  <button kirby-button noDecoration size="sm" (click)="close()">
     <kirby-icon [name]="icon"></kirby-icon>
   </button>
 </ng-template>