Deprecated attention-level 4 on kirby-button (#1993)

* Change name of kirby-button _disableAttentionLevel parameter to noDecoration * Change styling of attentionlevel2 and update button examples * Add styling of page header button * Change button attention level test * Change kirby-page-action button to attention level 3 * Add kirby-dropdown styling for attention-level 2 * Change page action button test to comply with UX change * Add missing styling on no-decoration * Remove none from button theme selector * Change attention-level-4 deprecation warning message on kirby-button * Change after Inspection * Change deprecation text Co-authored-by: Michael Troelsen <mxt@bankdata.dk>
kirbydesign · Feb 4, 2022 · 22d6966 · 22d6966
1 parent 88f00e0
commit 22d6966
Show file tree

Hide file tree

Showing 18 changed files with 176 additions and 111 deletions.
diff --git a/apps/cookbook/src/app/examples/button-example/button-example.component.html b/apps/cookbook/src/app/examples/button-example/button-example.component.html
@@ -17,22 +17,14 @@ <h2>Sizes</h2>
 
 <h2>Block button</h2>
 <button kirby-button [size]="buttonSize" expand="block">Block Button</button>
-<h2>Destructive Button</h2>
-<button kirby-button [size]="buttonSize" attentionLevel="1" isDestructive="true">
-  Destructive Level 1
-</button>
-<button kirby-button [size]="buttonSize" attentionLevel="2" isDestructive="true">
-  Destructive Level 2
-</button>
-<button kirby-button [size]="buttonSize" attentionLevel="3" isDestructive="true">
-  Destructive Level 3
-</button>
-<button kirby-button [size]="buttonSize" attentionLevel="4" isDestructive="true">
-  Destructive Level 4
-</button>
-<button kirby-button [size]="buttonSize" disabled>Disabled Button</button>
 
 <h2>Button with icon only</h2>
+<div class="button-example-container">
+  <button kirby-button [size]="buttonSize" [noDecoration]="true">
+    <kirby-icon name="close"></kirby-icon>
+  </button>
+  <label>Undecorated</label>
+</div>
 <div class="button-example-container">
   <button kirby-button [size]="buttonSize">
     <kirby-icon name="close"></kirby-icon>
@@ -51,19 +43,19 @@ <h2>Button with icon only</h2>
   </button>
   <label>Attention Level 3</label>
 </div>
-<div class="button-example-container">
-  <button kirby-button [size]="buttonSize" attentionLevel="4">
-    <kirby-icon name="close"></kirby-icon>
-  </button>
-  <label>Attention Level 4</label>
-</div>
 <div class="button-example-container">
   <button kirby-button [size]="buttonSize" disabled>
     <kirby-icon name="close"></kirby-icon>
   </button>
   <label>Disabled</label>
 </div>
 
+<p class="kirby-text-small">
+  <em>
+    <strong>Please note:</strong> The undecorated button is solely intended for use with icon only.
+  </em>
+</p>
+
 <h3>Custom Icon</h3>
 <div class="button-example-container">
   <button kirby-button [size]="buttonSize">
@@ -83,12 +75,6 @@ <h3>Custom Icon</h3>
   </button>
   <label>Attention Level 3</label>
 </div>
-<div class="button-example-container">
-  <button kirby-button [size]="buttonSize" attentionLevel="4">
-    <kirby-icon customName="football"></kirby-icon>
-  </button>
-  <label>Attention Level 4</label>
-</div>
 <div class="button-example-container">
   <button kirby-button [size]="buttonSize" disabled>
     <kirby-icon customName="football"></kirby-icon>
@@ -161,7 +147,4 @@ <h2>Button with attention level</h2>
   <button kirby-button [size]="buttonSize" attentionLevel="3" expand="block">
     Attention Level 3
   </button>
-  <button kirby-button [size]="buttonSize" attentionLevel="4" expand="block">
-    Attention Level 4
-  </button>
 </kirby-card>
diff --git a/apps/cookbook/src/app/examples/empty-state-example/empty-state-example.component.html b/apps/cookbook/src/app/examples/empty-state-example/empty-state-example.component.html
@@ -49,5 +49,5 @@
 >
   <button kirby-button attentionLevel="1">Call support</button>
   <button kirby-button attentionLevel="2">Mail support</button>
-  <button kirby-button attentionLevel="4">Get directions</button>
+  <button kirby-button attentionLevel="3">Get directions</button>
 </kirby-empty-state>
diff --git a/apps/cookbook/src/app/page/header/header.component.html b/apps/cookbook/src/app/page/header/header.component.html
@@ -91,22 +91,24 @@
   <nav>
     <ul>
       <li *ngFor="let item of navigationItems">
-        <a *ngIf="item.externalUrl" [href]="item.externalUrl" target="blank">
-          <button kirby-button attentionLevel="4">
-            {{ item.text }}<kirby-icon name="link"></kirby-icon>
-          </button>
+        <a
+          *ngIf="item.externalUrl"
+          [href]="item.externalUrl"
+          class="kirby-external-icon kirby-text-small"
+          target="blank"
+        >
+          {{ item.text }}
         </a>
         <a
           *ngIf="item.route"
           href="#"
+          class="kirby-text-small"
           [routerLink]="item.route"
           routerLinkActive
           [routerLinkActiveOptions]="{ exact: false }"
           #routerLinkActive="routerLinkActive"
         >
-          <button kirby-button [attentionLevel]="routerLinkActive.isActive ? '3' : '4'">
-            {{ item.text }}
-          </button>
+          {{ item.text }}
         </a>
       </li>
     </ul>

diff --git a/apps/cookbook/src/app/page/header/header.component.scss b/apps/cookbook/src/app/page/header/header.component.scss
@@ -35,6 +35,7 @@ nav {
 
   ul {
     display: flex;
+    column-gap: utils.size('xxxl');
     list-style: none;
     padding: 0;
     margin: 0;
@@ -43,10 +44,6 @@ nav {
     li {
       margin-block-start: 0;
     }
-
-    a {
-      text-decoration: none;
-    }
   }
 }
 

diff --git a/apps/cookbook/src/app/page/header/header.component.ts b/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' },

diff --git a/apps/cookbook/src/app/page/side-nav/side-nav.component.html b/apps/cookbook/src/app/page/side-nav/side-nav.component.html
@@ -27,7 +27,7 @@
       *ngIf="filter.length > 0"
       kirby-button
       size="sm"
-      attentionLevel="4"
+      [noDecoration]="true"
       class="clear-button"
       (click)="onFilterChange('')"
     >

diff --git a/apps/cookbook/src/app/showcase/button-showcase/button-showcase.component.html b/apps/cookbook/src/app/showcase/button-showcase/button-showcase.component.html
@@ -2,7 +2,6 @@
   <cookbook-button-example [themeColor]="themeColor"></cookbook-button-example>
   <div>
     <select (change)="onChange($event.target.value)">
-      <option value="">Card color: None</option>
       <option
         *ngFor="let color of themeColors"
         value="{{ color }}"
@@ -11,11 +10,6 @@
       >
     </select>
   </div>
-  <h2>Toggle Button</h2>
-  <cookbook-toggle-button-example></cookbook-toggle-button-example>
-  <a class="toggle-button-link" [routerLink]="['/home', 'showcase', 'toggle-button']"
-    ><em>See Toggle Button documentation &raquo;</em></a
-  >
   <cookbook-code-viewer [html]="exampleHtml"></cookbook-code-viewer>
   <cookbook-api-description-properties
     [properties]="properties"

diff --git a/apps/cookbook/src/app/showcase/button-showcase/button-showcase.component.ts b/apps/cookbook/src/app/showcase/button-showcase/button-showcase.component.ts
@@ -8,7 +8,7 @@ import { ApiDescriptionProperty } from '~/app/shared/api-description/api-descrip
 })
 export class ButtonShowcaseComponent {
   themeColors = ['light', 'white', 'dark'];
-  themeColor = '';
+  themeColor = 'light';
   exampleHtml: string = require('!raw-loader!../../examples/button-example/button-example.component.html')
     .default;
   properties: ApiDescriptionProperty[] = [
@@ -31,7 +31,7 @@ export class ButtonShowcaseComponent {
       description:
         'Sets the attention level for the button. Button color will be updated automatically depending on host color.',
       defaultValue: '1',
-      type: ['1', '2', '3', '4'],
+      type: ['1', '2', '3'],
     },
     {
       name: 'isDestructive',

diff --git a/apps/cookbook/src/app/showcase/dropdown-showcase/dropdown-showcase.component.ts b/apps/cookbook/src/app/showcase/dropdown-showcase/dropdown-showcase.component.ts
@@ -60,7 +60,7 @@ export class DropdownShowcaseComponent {
       description:
         'Sets the attention level for the button of the dropdown. Button color will be updated automatically depending on host color.',
       defaultValue: '3',
-      type: ['1', '2', '3', '4'],
+      type: ['1', '2', '3'],
     },
     {
       name: 'expand',

diff --git a/libs/designsystem/src/lib/components/button/button.component.integration.spec.ts b/libs/designsystem/src/lib/components/button/button.component.integration.spec.ts
@@ -145,7 +145,7 @@ describe('ButtonComponent in Kirby Page', () => {
     it('should render with correct background-color', async () => {
       await TestHelper.whenReady(ionContent);
       expect(actionButtonInPage).toHaveComputedStyle({
-        'background-color': getColor('white'),
+        'background-color': 'transparent',
       });
     });
 
@@ -161,7 +161,7 @@ describe('ButtonComponent in Kirby Page', () => {
       expect(actionButtonInPage).toHaveComputedStyle({
         'border-width': '1px',
         'border-style': 'solid',
-        'border-color': 'transparent',
+        'border-color': getColor('medium'),
       });
     });
   });
@@ -266,8 +266,8 @@ describe('ButtonComponent configured with icon only', () => {
     declarations: [MockComponent(IconComponent)],
   });
 
-  const attentionLevels = ['1', '2', '3', '4'];
-  type AttentionLevel = '1' | '2' | '3' | '4';
+  type AttentionLevel = '1' | '2' | '3';
+  const attentionLevels: AttentionLevel[] = ['1', '2', '3'];
 
   const iconButtonSizeDefault = size('xl');
 
@@ -293,7 +293,7 @@ describe('ButtonComponent configured with icon only', () => {
       );
       element = spectator.element as HTMLButtonElement;
     });
-    attentionLevels.forEach((attentionLevel: AttentionLevel) => {
+    attentionLevels.forEach((attentionLevel) => {
       it(
         'should render with correct width and height for attentionlevel = ' + attentionLevel,
         () => {
@@ -323,7 +323,7 @@ describe('ButtonComponent configured with icon only', () => {
     });
 
     describe('and configured with attentionlevel', () => {
-      attentionLevels.forEach((attentionLevel: AttentionLevel) => {
+      attentionLevels.forEach((attentionLevel) => {
         it(
           'should render with correct width and height for attentionlevel = ' + attentionLevel,
           () => {
@@ -354,7 +354,7 @@ describe('ButtonComponent configured with icon only', () => {
     });
 
     describe('and configured with attentionlevel', () => {
-      attentionLevels.forEach((attentionLevel: AttentionLevel) => {
+      attentionLevels.forEach((attentionLevel) => {
         it(
           'should render with correct width and height for attentionlevel = ' + attentionLevel,
           () => {
@@ -385,7 +385,7 @@ describe('ButtonComponent configured with icon only', () => {
     });
 
     describe('and configured with attentionlevel', () => {
-      attentionLevels.forEach((attentionLevel: AttentionLevel) => {
+      attentionLevels.forEach((attentionLevel) => {
         it(
           'should render with correct width and height for attentionlevel = ' + attentionLevel,
           () => {
@@ -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 = true;
+        spectator.detectChanges();
+        expect(element).toHaveComputedStyle({
+          width: iconButtonSizeLG,
+          height: iconButtonSizeLG,
+        });
+      });
+    });
   });
 });