From d313e69013afc6cabb02fadfe717303663a861d4 Mon Sep 17 00:00:00 2001
From: Adam Bradley <adambradley25@gmail.com>
Date: Tue, 6 Mar 2018 19:59:08 -0600
Subject: [PATCH] refactor(tab-button): use <a href> instead of <button>

---
 packages/core/src/components.d.ts                |  1 +
 .../src/components/tab-button/tab-button.scss    |  4 ++++
 .../src/components/tab-button/tab-button.tsx     | 16 ++++++++++------
 packages/core/src/components/tab/readme.md       | 14 ++++++++++++++
 packages/core/src/components/tab/tab.tsx         |  8 +++++---
 5 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 0123c6322b..80b2da6a10 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -3194,6 +3194,7 @@ declare global {
       btnId?: string;
       component?: any;
       disabled?: boolean;
+      href?: string;
       icon?: string;
       name?: string;
       selected?: boolean;
diff --git a/packages/core/src/components/tab-button/tab-button.scss b/packages/core/src/components/tab-button/tab-button.scss
index 12be6e2f1b..27427b1371 100644
--- a/packages/core/src/components/tab-button/tab-button.scss
+++ b/packages/core/src/components/tab-button/tab-button.scss
@@ -24,6 +24,10 @@ ion-tab-button {
   user-select: none;
 }
 
+ion-tab-button a {
+  text-decoration: none;
+}
+
 .tab-cover {
   @include margin(0);
   @include padding(0);
diff --git a/packages/core/src/components/tab-button/tab-button.tsx b/packages/core/src/components/tab-button/tab-button.tsx
index 79497bea8c..65bc016265 100644
--- a/packages/core/src/components/tab-button/tab-button.tsx
+++ b/packages/core/src/components/tab-button/tab-button.tsx
@@ -33,8 +33,11 @@ export class TabButton {
 
   @Listen('click')
   protected onClick(ev: UIEvent) {
-    this.ionTabbarClick.emit(this.tab);
+    if (!this.tab.disabled) {
+      this.ionTabbarClick.emit(this.tab);
+    }
     ev.stopPropagation();
+    ev.preventDefault();
   }
 
   private onKeyUp() {
@@ -73,18 +76,19 @@ export class TabButton {
 
   render() {
     const tab = this.tab;
+    const href = tab.href || '#';
+
     return [
-      <button
-        type='button'
+      <a
+        href={href}
         class='tab-cover'
         onKeyUp={this.onKeyUp.bind(this)}
-        onBlur={this.onBlur.bind(this)}
-        disabled={tab.disabled}>
+        onBlur={this.onBlur.bind(this)}>
         { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
         { tab.title && <span class='tab-button-text'>{tab.title}</span> }
         { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
         { this.mode === 'md' && <ion-ripple-effect/> }
-      </button>
+      </a>
     ];
   }
 }
diff --git a/packages/core/src/components/tab/readme.md b/packages/core/src/components/tab/readme.md
index 174630a965..b504b44113 100644
--- a/packages/core/src/components/tab/readme.md
+++ b/packages/core/src/components/tab/readme.md
@@ -88,6 +88,13 @@ boolean
 If true, the user cannot interact with the tab. Defaults to `false`.
 
 
+#### href
+
+string
+
+The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
+
+
 #### icon
 
 string
@@ -170,6 +177,13 @@ boolean
 If true, the user cannot interact with the tab. Defaults to `false`.
 
 
+#### href
+
+string
+
+The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
+
+
 #### icon
 
 string
diff --git a/packages/core/src/components/tab/tab.tsx b/packages/core/src/components/tab/tab.tsx
index 3d8659570a..e9b5df7a2c 100644
--- a/packages/core/src/components/tab/tab.tsx
+++ b/packages/core/src/components/tab/tab.tsx
@@ -22,6 +22,11 @@ export class Tab {
    */
   @Prop() title: string;
 
+  /**
+   * The URL which will be used as the `href` within this tab's `<ion-tab-button>` anchor.
+   */
+  @Prop() href: string;
+
   /**
    * The icon for the tab.
    */
@@ -120,9 +125,6 @@ export class Tab {
     };
   }
 
-  render() {
-    return <slot/>;
-  }
 }
 
 function attachViewToDom(container: HTMLElement, cmp: string): Promise<any> {