From b70cca93409e2a6d6957c5cfd439f3eb382a99ba Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 30 Jan 2018 12:06:03 -0500
Subject: [PATCH] fix(segment): update segment to work with an anchor tag

---
 .../src/components/segment-button/readme.md   | 16 ++++
 .../segment-button/segment-button.tsx         | 30 ++++---
 .../src/components/segment/segment.ios.scss   |  6 --
 .../src/components/segment/segment.md.scss    |  6 --
 .../core/src/components/segment/segment.scss  | 16 +++-
 .../segment/test/standalone/index.html        | 87 +++++++++++++++++--
 6 files changed, 130 insertions(+), 31 deletions(-)

diff --git a/packages/core/src/components/segment-button/readme.md b/packages/core/src/components/segment-button/readme.md
index 660c4b7ee5..e6bc9e37ad 100644
--- a/packages/core/src/components/segment-button/readme.md
+++ b/packages/core/src/components/segment-button/readme.md
@@ -56,6 +56,14 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
 boolean
 
 
+#### href
+
+string
+
+Contains a URL or a URL fragment that the hyperlink points to.
+If this property is set, an anchor tag will be rendered.
+
+
 #### mode
 
 
@@ -98,6 +106,14 @@ Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"da
 boolean
 
 
+#### href
+
+string
+
+Contains a URL or a URL fragment that the hyperlink points to.
+If this property is set, an anchor tag will be rendered.
+
+
 #### mode
 
 
diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx
index ce68c81584..248d890714 100644
--- a/packages/core/src/components/segment-button/segment-button.tsx
+++ b/packages/core/src/components/segment-button/segment-button.tsx
@@ -16,7 +16,7 @@ export class SegmentButton {
    */
   @Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
 
-  @Prop({mutable: true}) activated = false;
+  @Prop({ mutable: true }) activated = false;
 
   /**
    * The color to use for the text color.
@@ -40,22 +40,21 @@ export class SegmentButton {
    */
   @Prop({ mutable: true }) disabled = false;
 
+  /**
+   * 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 value of the segment button.
    */
   @Prop({ mutable: true }) value: string;
 
-  segmentButtonClick(ev: UIEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-
-    this.emitClick();
-  }
-
   /**
    * Emit the click event to the parent segment
    */
-  private emitClick() {
+  private segmentButtonClick() {
     clearTimeout(this.styleTmr);
 
     this.styleTmr = setTimeout(() => {
@@ -94,10 +93,17 @@ export class SegmentButton {
       ...elementClasses
     };
 
+    const TagType = this.href ? 'a' : 'button';
+
     return [
-      <button onClick={this.segmentButtonClick.bind(this)} class={buttonClasses} aria-pressed={this.activated}>
-        <slot></slot>
-      </button>
+      <TagType
+        aria-pressed={this.activated}
+        class={buttonClasses}
+        disabled={this.disabled}
+        href={this.href}
+        onClick={this.segmentButtonClick.bind(this)}>
+          <slot></slot>
+      </TagType>
     ];
   }
 }
diff --git a/packages/core/src/components/segment/segment.ios.scss b/packages/core/src/components/segment/segment.ios.scss
index 84fa833455..3e35c5aa07 100644
--- a/packages/core/src/components/segment/segment.ios.scss
+++ b/packages/core/src/components/segment/segment.ios.scss
@@ -9,12 +9,6 @@
 }
 
 .segment-ios ion-segment-button {
-  display: flex;
-
-  flex: 1;
-
-  width: 0;
-
   &:first-of-type .segment-button {
     @include border-radius($segment-button-ios-border-radius, 0, 0, $segment-button-ios-border-radius);
     @include margin-horizontal(null, 0);
diff --git a/packages/core/src/components/segment/segment.md.scss b/packages/core/src/components/segment/segment.md.scss
index 90ae565fc4..08307ff602 100644
--- a/packages/core/src/components/segment/segment.md.scss
+++ b/packages/core/src/components/segment/segment.md.scss
@@ -8,12 +8,6 @@
   font-family: $segment-md-font-family;
 }
 
-.segment-md ion-segment-button {
-  display: flex;
-
-  flex: 1;
-}
-
 .segment-md .segment-button {
   @include padding($segment-button-md-padding-top, $segment-button-md-padding-end, $segment-button-md-padding-bottom, $segment-button-md-padding-start);
 
diff --git a/packages/core/src/components/segment/segment.scss b/packages/core/src/components/segment/segment.scss
index 6a885d117d..d66a0335ab 100644
--- a/packages/core/src/components/segment/segment.scss
+++ b/packages/core/src/components/segment/segment.scss
@@ -13,6 +13,12 @@ ion-segment {
   width: 100%;
 }
 
+ion-segment-button {
+  display: flex;
+
+  flex: 1;
+}
+
 .segment-button {
   @include border-radius(0);
   @include margin-horizontal(0);
@@ -20,14 +26,22 @@ ion-segment {
 
   position: relative;
   display: block;
+
   overflow: hidden;
 
+  text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
   cursor: pointer;
 
+  font-kerning: none;
+  user-select: none;
+  contain: content;
+  font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
+
   &:active,
   &:focus {
     outline: none;
   }
-}
+}
\ No newline at end of file
diff --git a/packages/core/src/components/segment/test/standalone/index.html b/packages/core/src/components/segment/test/standalone/index.html
index dd88053f6e..5b7d1f1858 100644
--- a/packages/core/src/components/segment/test/standalone/index.html
+++ b/packages/core/src/components/segment/test/standalone/index.html
@@ -9,30 +9,46 @@
 </head>
 
 <body>
+  <ion-toolbar>
+    <ion-segment value="Free">
+      <ion-segment-button value="Paid">
+        Paid
+      </ion-segment-button>
+      <ion-segment-button value="Free">
+        Free
+      </ion-segment-button>
+      <ion-segment-button value="Top">
+        Top
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
+
   <ion-segment color="dark" value="Reading List">
     <ion-segment-button value="Bookmarks">
       <ion-icon name="book"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="Reading List">
-      <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
+      <ion-icon name="glasses"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="Shared Links">
-      <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
+      <ion-icon name="at"></ion-icon>
     </ion-segment-button>
   </ion-segment>
 
-  <ion-segment color="danger">
-    <ion-segment-button value="Bookmarks">
+  <ion-segment id="browserSegment" color="danger">
+    <ion-segment-button href="#bookmarks" value="bookmarks">
       Bookmarks
     </ion-segment-button>
-    <ion-segment-button value="Reading List">
+    <ion-segment-button href="#reading" value="reading">
       Reading List
     </ion-segment-button>
-    <ion-segment-button value="Shared Links">
+    <ion-segment-button href="#links" value="links">
       Shared Links
     </ion-segment-button>
   </ion-segment>
 
+  <pre><code><span id="browserResults"></span></code></pre>
+
   <ion-segment color="secondary" value="active">
     <ion-segment-button value="active">
       Active
@@ -45,4 +61,63 @@
     </ion-segment-button>
   </ion-segment>
 </body>
+
+<script>
+  var segment = document.getElementById('browserSegment');
+  var results = document.getElementById('browserResults');
+
+  checkUrl();
+
+  segment.addEventListener('ionChange', function() {
+    checkUrl();
+  });
+
+  function checkUrl() {
+    var url = window.location.href;
+
+    if (url.search('#bookmarks') > -1) {
+      setResults('bookmarks');
+    } else if (url.search('#reading') > -1) {
+      setResults('reading');
+    } else if (url.search('#links') > -1) {
+      setResults('links');
+    }
+  }
+
+  function setResults(value) {
+    results.innerHTML = value.charAt(0).toUpperCase() + value.slice(1);
+    segment.value = value;
+  }
+</script>
+
+<style>
+  body {
+    margin: 0;
+  }
+
+  ion-segment {
+    margin-bottom: 10px;
+  }
+
+  ion-toolbar ion-segment {
+    margin-bottom: 0;
+  }
+
+  pre {
+    border: 1px solid #e6e9ee;
+    background: white;
+    margin: 10px;
+    padding: 4px;
+    line-height: 24px;
+  }
+
+  code {
+    display: block;
+    padding: 0.5em;
+    background: #ffffff;
+    word-wrap: normal;
+    white-space: pre;
+    color: #314361;
+  }
+</style>
 </html>