From c4ca0886b2e87c641266b4739c26b72ebb456b4d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 30 Jan 2018 10:54:42 -0500
Subject: [PATCH] fix(button): update button components to pass down href

---
 packages/core/src/components.d.ts             |  1 +
 .../components/chip-button/chip-button.tsx    | 29 ++++++++++---------
 .../src/components/fab-button/fab-button.tsx  |  6 +++-
 .../infinite-scroll-content.tsx               |  2 +-
 .../components/item-option/item-option.tsx    | 10 +++++--
 .../refresher-content/refresher-content.tsx   |  4 +--
 6 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 1b3e085452..9e593b21d8 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -2470,6 +2470,7 @@ declare global {
       checked?: boolean;
       color?: string;
       disabled?: boolean;
+      href?: string;
       mode?: 'ios' | 'md';
       value?: string;
     }
diff --git a/packages/core/src/components/chip-button/chip-button.tsx b/packages/core/src/components/chip-button/chip-button.tsx
index 78ffb23adc..2173fefea0 100644
--- a/packages/core/src/components/chip-button/chip-button.tsx
+++ b/packages/core/src/components/chip-button/chip-button.tsx
@@ -12,12 +12,6 @@ import { getElementClassObject } from '../../utils/theme';
 export class ChipButton {
   @Element() private el: HTMLElement;
 
-  /**
-   * Contains a URL or a URL fragment that the hyperlink points to.
-   * If this property is set, an anchor tag will be rendered.
-   */
-  @Prop() href: string;
-
   /**
    * The color to use.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
@@ -30,15 +24,21 @@ export class ChipButton {
    */
   @Prop() mode: 'ios' | 'md';
 
+  /**
+   * If true, sets the button into a disabled state.
+   */
+  @Prop() disabled = false;
+
   /**
    * Set to `"clear"` for a transparent button style.
    */
   @Prop() fill: string;
 
   /**
-   * If true, sets the button into a disabled state.
+   * Contains a URL or a URL fragment that the hyperlink points to.
+   * If this property is set, an anchor tag will be rendered.
    */
-  @Prop() disabled = false;
+  @Prop() href: string;
 
   /**
    * Get the classes based on the button type
@@ -97,11 +97,14 @@ export class ChipButton {
     };
 
     return (
-      <TagType class={buttonClasses} disabled={this.disabled}>
-        <span class='button-inner'>
-          <slot></slot>
-        </span>
-        { this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
+      <TagType
+        class={buttonClasses}
+        disabled={this.disabled}
+        href={this.href}>
+          <span class='button-inner'>
+            <slot></slot>
+          </span>
+          { this.mode === 'md' && <ion-ripple-effect useTapClick={true} /> }
       </TagType>
     );
   }
diff --git a/packages/core/src/components/fab-button/fab-button.tsx b/packages/core/src/components/fab-button/fab-button.tsx
index 3b3fb6e352..1d06a71913 100755
--- a/packages/core/src/components/fab-button/fab-button.tsx
+++ b/packages/core/src/components/fab-button/fab-button.tsx
@@ -134,7 +134,11 @@ export class FabButton {
     };
 
     return (
-      <TagType class={fabClasses} onClick={this.clickedFab.bind(this)} disabled={this.disabled}>
+      <TagType
+        class={fabClasses}
+        disabled={this.disabled}
+        href={this.href}
+        onClick={this.clickedFab.bind(this)}>
         <ion-icon name='close' class='fab-button-close-icon'></ion-icon>
         <span class='button-inner'>
           <slot></slot>
diff --git a/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 389784cceb..dbfb48308d 100644
--- a/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/packages/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -12,7 +12,7 @@ export class InfiniteScrollContent {
   /**
    * @input {string} An animated SVG spinner that shows while loading.
    */
-  @Prop({mutable: true}) loadingSpinner: string;
+  @Prop({ mutable: true }) loadingSpinner: string;
 
   /**
    * @input {string} Optional text to display while loading.
diff --git a/packages/core/src/components/item-option/item-option.tsx b/packages/core/src/components/item-option/item-option.tsx
index 2a5a162e0c..53d1bfc99f 100644
--- a/packages/core/src/components/item-option/item-option.tsx
+++ b/packages/core/src/components/item-option/item-option.tsx
@@ -47,11 +47,17 @@ export class ItemOption {
   render() {
 
     const TagType = this.href ? 'a' : 'button';
+
+    // TODO TagType should wrap button-inner
     return [
-      <TagType class='item-option-button' onClick={this.clickedOptionButton.bind(this)} disabled={this.disabled}></TagType>,
+      <TagType
+        class='item-option-button'
+        disabled={this.disabled}
+        href={this.href}
+        onClick={this.clickedOptionButton.bind(this)}></TagType>,
       <span class='button-inner'>
         <slot></slot>
-       </span>
+      </span>
     ];
   }
 
diff --git a/packages/core/src/components/refresher-content/refresher-content.tsx b/packages/core/src/components/refresher-content/refresher-content.tsx
index 451eca27e4..efaf648e19 100644
--- a/packages/core/src/components/refresher-content/refresher-content.tsx
+++ b/packages/core/src/components/refresher-content/refresher-content.tsx
@@ -11,7 +11,7 @@ export class RefresherContent {
   /**
    * A static icon to display when you begin to pull down
    */
-  @Prop({mutable: true}) pullingIcon: string;
+  @Prop({ mutable: true }) pullingIcon: string;
 
   /**
    * The text you want to display when you begin to pull down
@@ -21,7 +21,7 @@ export class RefresherContent {
   /**
    * An animated SVG spinner that shows when refreshing begins
    */
-  @Prop({mutable: true}) refreshingSpinner: string;
+  @Prop({ mutable: true }) refreshingSpinner: string;
 
   /**
    * The text you want to display when performing a refresh