feat(button): Add trailing icon support (#1676)

Closes #1602

Author: Ruben Oliveira Chiavone

demos/src/app/components/button-demo/api.html

@@ -44,6 +44,10 @@ <h4 mdcSubtitle2>Properties</h4>
         <td>disabled: boolean</td>
         <td>Disables the button.</td>
       </tr>
+      <tr>
+        <td>label: string</td>
+        <td>Indicates the element containing the button's text label.</td>
+      </tr>
     </tbody>
   </table>
 
@@ -56,4 +60,14 @@ <h4 mdcSubtitle2>Methods</h4>
       </tr>
     </tbody>
   </table>
-</div>
+</div>
+
+<div class="docs-api">
+  <h3 mdcHeadline6>MdcButtonLabel</h3>
+  <p>
+    Selector:
+    <span class="docs-api-class-selector-name">mdc-button-label</span>
+    <span class="docs-api-class-selector-name">[mdcButtonLabel]</span>
+  </p>
+  Exported as: <span class="docs-api-class-selector-name">mdcButtonLabel</span>
+</div>

demos/src/app/components/button-demo/button-demo.ts

@@ -112,4 +112,20 @@ export class Examples {
   @include mdc-button-shape-radius(8px);
 }`
   };
+
+  trailingIconExample = {
+    html: `<button mdc-button>
+  <span mdcButtonLabel>Trailing Icon</span>
+  <mdc-icon>favorite</mdc-icon>
+</button>
+
+<button mdc-button secondary raised>
+  <mdc-button-label>Trailing Icon</mdc-button-label>
+  <mdc-icon>favorite</mdc-icon>
+</button>
+
+<button mdc-button outlined label="Trailing Icon">
+  <mdc-icon>favorite</mdc-icon>
+</button>`
+  };
 }

demos/src/app/components/button-demo/examples.html

@@ -105,4 +105,34 @@ <h3 class="demo-content__headline">Shaped</h3>
     </div>
   </div>
   <example-viewer [example]="shapedExample"></example-viewer>
-</div>
+</div>
+
+<div class="demo-content">
+  <h3 class="demo-content__headline">Trailing icon</h3>
+  <p>
+    Certain icons make more sense to appear after the button's text label rather than before. This can be accomplished by putting the icon markup <i>after</i> the mdcButtonLabel element.
+  </p>
+  <p>
+    NOTE: The mdc-button-label element is required in order for the trailing icon to be styled appropriately.
+  </p>
+  <div class="demo-layout__row">
+    <div class="demo-container">
+      <button mdc-button>
+        <span mdcButtonLabel>Trailing Icon</span>
+        <mdc-icon>favorite</mdc-icon>
+      </button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button secondary raised>
+        <mdc-button-label>Trailing Icon</mdc-button-label>
+        <mdc-icon>favorite</mdc-icon>
+      </button>
+    </div>
+    <div class="demo-container">
+      <button mdc-button outlined label="Trailing Icon">
+        <mdc-icon>favorite</mdc-icon>
+      </button>
+    </div>
+  </div>
+  <example-viewer [example]="trailingIconExample"></example-viewer>
+</div>

packages/button/button-module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
 
-import { MdcButton } from './button';
+import { MdcButton, MdcButtonLabel } from './button';
 
 @NgModule({
-  exports: [MdcButton],
-  declarations: [MdcButton]
+  imports: [
+    CommonModule
+  ],
+  exports: [MdcButton, MdcButtonLabel],
+  declarations: [MdcButton, MdcButtonLabel]
 })
 export class MdcButtonModule { }

packages/button/button.ts

@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   ContentChild,
+  Directive,
   ElementRef,
   Input,
   OnDestroy,
@@ -12,6 +13,15 @@ import { toBoolean } from '@angular-mdc/web/common';
 import { MdcRipple } from '@angular-mdc/web/ripple';
 import { MdcIcon } from '@angular-mdc/web/icon';
 
+@Directive({
+  selector: 'mdc-button-label, [mdcButtonLabel]',
+  exportAs: 'mdcButtonLabel',
+  host: {
+    'class': 'mdc-button__label'
+ }
+})
+export class MdcButtonLabel { }
+
 @Component({
   moduleId: module.id,
   exportAs: 'mdcButton',
@@ -27,7 +37,10 @@ import { MdcIcon } from '@angular-mdc/web/icon';
     '[class.mdc-button--outlined]': 'outlined',
     '(click)': 'onClick($event)'
   },
-  template: '<ng-content></ng-content>',
+  template: `
+  <mdc-button-label *ngIf="label">{{label}}</mdc-button-label>
+  <ng-content></ng-content>
+  `,
   providers: [MdcRipple],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
@@ -84,6 +97,8 @@ export class MdcButton implements OnInit, OnDestroy {
 
   @ContentChild(MdcIcon) _icon!: MdcIcon;
 
+  @Input() label?: string;
+
   constructor(
     public elementRef: ElementRef<HTMLElement>,
     private _ripple: MdcRipple) { }

test/button/button.test.ts

@@ -2,7 +2,7 @@ import { Component, DebugElement } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
-import { MdcButton, MdcIcon, MdcIconModule, MdcButtonModule } from '@angular-mdc/web';
+import { MdcButton, MdcButtonLabel, MdcIcon, MdcIconModule, MdcButtonModule } from '@angular-mdc/web';
 
 describe('MdcButton', () => {
   let fixture: ComponentFixture<any>;
@@ -13,7 +13,10 @@ describe('MdcButton', () => {
       declarations: [
         SimpleButton,
         HrefButton,
-        SimpleButtonWithIcon
+        SimpleButtonWithIcon,
+        SimpleButtonWithTrailingIcon,
+        SimpleButtonWithTrailingIconLabelElement,
+        SimpleButtonWithTrailingIconLabelAttr
       ]
     });
     TestBed.compileComponents();
@@ -102,6 +105,11 @@ describe('MdcButton', () => {
       fixture.detectChanges();
       expect(buttonNativeElement.disabled).toBeTruthy('Expected button to be disabled');
     });
+
+    it('#should NOT have mdc-button-label by default', () => {
+      expect(fixture.debugElement.query(By.directive(MdcButtonLabel)))
+        .toBe(null, 'Expected buttons not to have mdc-button-label by default');
+    });
   });
 
   // Anchor button tests
@@ -173,6 +181,38 @@ describe('MdcButton', () => {
       expect(buttonDebugElement.nativeElement.classList.contains('mdc-button__icon')).toBe(true);
     });
   });
+
+  // Trailing icon button tests
+  describe('mdc-button with trailing icon', () => {
+    let buttonLabelDebugElement: DebugElement;
+
+    it('#should have class mdc-button__label when using MdcButtonLabel attr', () => {
+      fixture = TestBed.createComponent(SimpleButtonWithTrailingIcon);
+      fixture.detectChanges();
+
+      buttonLabelDebugElement = fixture.debugElement.query(By.directive(MdcButtonLabel));
+
+      expect(buttonLabelDebugElement.nativeElement.classList.contains('mdc-button__label')).toBe(true);
+    });
+
+    it('#should have class mdc-button__label when using MdcButtonLabel element', () => {
+      fixture = TestBed.createComponent(SimpleButtonWithTrailingIconLabelElement);
+      fixture.detectChanges();
+
+      buttonLabelDebugElement = fixture.debugElement.query(By.directive(MdcButtonLabel));
+
+      expect(buttonLabelDebugElement.nativeElement.classList.contains('mdc-button__label')).toBe(true);
+    });
+
+    it('#should have class mdc-button__label when using MdcButton label attribute', () => {
+      fixture = TestBed.createComponent(SimpleButtonWithTrailingIconLabelAttr);
+      fixture.detectChanges();
+
+      buttonLabelDebugElement = fixture.debugElement.query(By.directive(MdcButtonLabel));
+
+      expect(buttonLabelDebugElement.nativeElement.classList.contains('mdc-button__label')).toBe(true);
+    });
+  });
 });
 
 /** Simple component for testing. */
@@ -225,3 +265,32 @@ class HrefButton {
   `,
 })
 class SimpleButtonWithIcon { }
+
+@Component({
+  template: `
+    <button mdc-button>
+      <span mdcButtonLabel>Search</span>
+      <mdc-icon>search</mdc-icon>
+    </button>
+  `,
+})
+class SimpleButtonWithTrailingIcon { }
+
+@Component({
+  template: `
+    <button mdc-button>
+      <mdc-button-label>Search</mdc-button-label>
+      <mdc-icon>search</mdc-icon>
+    </button>
+  `,
+})
+class SimpleButtonWithTrailingIconLabelElement { }
+
+@Component({
+  template: `
+    <button mdc-button label="Search">
+      <mdc-icon>search</mdc-icon>
+    </button>
+  `,
+})
+class SimpleButtonWithTrailingIconLabelAttr { }