fix(segment): working

ionic/components/segment/segment.scss

@@ -15,6 +15,9 @@ ion-segment {
   button,
   [button] {
 
+    margin-left: 0;
+    margin-right: 0;
+
     flex: 1;
     display: block;
     overflow: hidden;
@@ -43,3 +46,40 @@ ion-segment {
   }
 
 }
+
+// Generate Default Button Colors
+// --------------------------------------------------
+
+@each $color, $value in $colors {
+
+  ion-segment[#{$color}] {
+
+    ion-segment-button[button] {
+      $bg-color: $value;
+      $bg-color-activated: darken-or-lighten($bg-color);
+      $text-color: inverse($bg-color);
+
+      background-color: $bg-color;
+      color: $text-color;
+
+      &.activated {
+        background-color: $bg-color-activated;
+      }
+
+      &[outline] {
+        border: 1px solid $bg-color;
+        background: $background-color;
+        color: $bg-color;
+
+        &.activated {
+          opacity: 1;
+          color: $text-color;
+          background-color: $bg-color;
+        }
+      }
+
+    }
+
+  }
+
+}

ionic/components/segment/segment.ts

@@ -17,7 +17,7 @@ import {dom} from 'ionic/util';
     'value'
   ],
   host: {
-    '(click)': 'buttonClicked($event)',
+    //'(click)': 'buttonClicked($event)',
     '(change)': 'onChange($event)',
     //'[value]': 'value',
     /*
@@ -191,7 +191,7 @@ export class SegmentControlValueAccessor {
   ],
   host: {
     '(click)': 'buttonClicked($event)',
-    '[class.active]': 'isActive'
+    '[class.activated]': 'isActive',
   }
 })
 export class SegmentButton {
@@ -202,10 +202,16 @@ export class SegmentButton {
    */
   constructor(
     @Host() segment: Segment,
-    elementRef: ElementRef
+    elementRef: ElementRef,
+    renderer: Renderer
   ) {
-    this.ele = elementRef.ele
     this.segment = segment;
+    this.renderer = renderer;
+    this.isButton = true;
+
+    // This is a button, and it's outlined
+    this.renderer.setElementAttribute(elementRef, 'button', '');
+    this.renderer.setElementAttribute(elementRef, 'outline', '');
   }
 
   onInit() {

ionic/components/segment/test/basic/index.ts

@@ -5,12 +5,11 @@ import {App} from 'ionic/ionic';
 
 @App({
   templateUrl: 'main.html',
-  appInjector: [FormBuilder],
+  bindings: [FormBuilder],
   directives: [FORM_DIRECTIVES]
 })
-class IonicApp {
+class MyApp {
   constructor(fb: FormBuilder) {
-
     this.myForm = fb.group({
       mapStyle: ['hybrid', Validators.required]
     });
@@ -18,7 +17,7 @@ class IonicApp {
   }
 
   doSubmit(event) {
-    console.log('Submitting form', this.form.value);
+    console.log('Submitting form', this.myForm.value);
     event.preventDefault();
   }
 }

ionic/components/segment/test/basic/main.html

@@ -1,13 +1,13 @@
 <ion-content padding>
   <form (submit)="doSubmit($event)" [ng-form-model]="myForm">
-      <ion-segment ng-control="mapStyle">
-        <ion-segment-button value="standard" button>
+      <ion-segment ng-control="mapStyle" danger>
+        <ion-segment-button value="standard">
           Standard
         </ion-segment-button>
-        <ion-segment-button value="hybrid" button>
+        <ion-segment-button value="hybrid">
           Hybrid
         </ion-segment-button>
-        <ion-segment-button value="sat" button>
+        <ion-segment-button value="sat">
           Satellite
         </ion-segment-button>
       </ion-segment>