refactor(components): update to use shadow DOM and work with css variables

- updates components to use shadow DOM or scoped if they require css variables
- moves global styles to an external stylesheet that needs to be imported
- adds support for additional colors and removes the Sass loops to generate colors for each component
- several property renames, bug fixes, and test updates

Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com>
Co-authored-by: Adam Bradley <adambradley25@gmail.com>
Co-authored-by: Cam Wiegert <cam@camwiegert.com>

core/src/components/segment/segment.ios.scss

@@ -4,22 +4,71 @@
 // iOS Segment
 // --------------------------------------------------
 
-.segment-ios {
+:host {
   font-family: $segment-ios-font-family;
 }
 
-.segment-ios.segment-disabled {
+:host(.segment-disabled) {
   opacity: $segment-ios-opacity-disabled;
 
   pointer-events: none;
 }
 
+// iOS Segment Button
+// --------------------------------------------------
+
+::slotted(ion-segment-button) {
+  --border-radius: #{$segment-button-ios-border-radius};
+  --border-width: #{$segment-button-ios-border-width};
+  --border-style: solid;
+  --border-color: #{current-color(base)};
+
+  --background: transparent;
+  --transition: 100ms all linear;
+  --icon-size: #{$segment-button-ios-icon-size};
+
+  height: #{$segment-button-ios-height};
+
+  font-size: #{$segment-button-ios-font-size};
+  line-height: #{$segment-button-ios-line-height};
+
+  color: #{current-color(base)};
+}
+
+::slotted(.segment-checked) {
+  color: #{current-color(contrast)};
+
+  --background: #{current-color(base)};
+}
+
+::slotted(.segment-button-disabled) {
+  color: #{current-color(base, $segment-button-ios-background-color-alpha-disabled)};
+
+  pointer-events: none;
+}
+
+::slotted(ion-segment-button):hover:not(.segment-checked) {
+  --background: #{current-color(base, $segment-button-ios-background-color-alpha-hover)};
+}
+
+::slotted(ion-segment-button):active:not(.segment-checked) {
+  --background: #{current-color(base, $segment-button-ios-background-color-alpha-active)};
+}
+
 
 // iOS Segment in Toolbar
 // --------------------------------------------------
-
-.toolbar-ios .segment-ios {
+:host(.in-toolbar) {
   @include position(0, 0, 0, 0);
 
   position: absolute;
 }
+
+:host(.in-toolbar) ::slotted(ion-segment-button) {
+  max-width: $segment-button-ios-toolbar-button-max-width;
+
+  height: $segment-button-ios-toolbar-button-height;
+
+  font-size: $segment-button-ios-toolbar-font-size;
+  line-height: $segment-button-ios-toolbar-line-height;
+}

core/src/components/segment/segment.ios.vars.scss

@@ -4,7 +4,86 @@
 // --------------------------------------------------
 
 /// @prop - Background of the segment button
-$segment-ios-font-family:                       $font-family-ios-base !default;
+$segment-ios-font-family:                       $font-family-base !default;
 
 /// @prop - Opacity of the disabled segment
 $segment-ios-opacity-disabled:                  .4 !default;
+
+
+// iOS Segment Button
+// --------------------------------------------------
+
+/// @prop - Background of the segment button
+$segment-button-ios-background-color:                 transparent !default;
+
+/// @prop - Background of the activated segment button
+$segment-button-ios-background-color-activated:       ion-color(primary, base) !default;
+
+/// @prop - Background alpha of the activated segment button
+$segment-button-ios-background-color-alpha-hover:     .1 !default;
+
+/// @prop - Background of the segment button when hovered
+$segment-button-ios-background-color-hover:           ion-color(primary, base, $segment-button-ios-background-color-alpha-hover) !default;
+
+/// @prop - Background alpha of the segment button when hovered
+$segment-button-ios-background-color-alpha-active:    .1 !default;
+
+/// @prop - Background of the segment button when active
+$segment-button-ios-background-color-active:          ion-color(primary, base, $segment-button-ios-background-color-alpha-active) !default;
+
+/// @prop - Background alpha of the segment button when active
+$segment-button-ios-background-color-alpha-disabled:  .5 !default;
+
+/// @prop - Background of the activated segment button when active
+$segment-button-ios-background-color-disabled:        ion-color(primary, base, $segment-button-ios-background-color-alpha-disabled) !default;
+
+/// @prop - Text color of the segment button
+$segment-button-ios-text-color:                       ion-color(primary, contrast) !default;
+
+/// @prop - Border width of the segment button
+$segment-button-ios-border-width:                     1px !default;
+
+/// @prop - Height of the segment button
+$segment-button-ios-height:                           32px !default;
+
+/// @prop - Line height of the segment button
+$segment-button-ios-line-height:                      37px !default;
+
+/// @prop - Font size of the segment button
+$segment-button-ios-font-size:                        13px !default;
+
+/// @prop - Border radius of the segment button
+$segment-button-ios-border-radius:                    4px !default;
+
+/// @prop - Size of an icon in the segment button
+$segment-button-ios-icon-size:                        26px !default;
+
+/// @prop - Line height of an icon in the segment button
+$segment-button-ios-icon-line-height:                 28px !default;
+
+/// @prop - Max width of the segment button in a toolbar
+$segment-button-ios-toolbar-button-max-width:         100px !default;
+
+/// @prop - Height of the segment button in a toolbar
+$segment-button-ios-toolbar-button-height:            30px !default;
+
+/// @prop - Line height of the segment button in a toolbar
+$segment-button-ios-toolbar-line-height:              22px !default;
+
+/// @prop - Font size of the segment button in a toolbar
+$segment-button-ios-toolbar-font-size:                12px !default;
+
+/// @prop - Size of an icon in the segment button in a toolbar
+$segment-button-ios-toolbar-icon-size:                22px !default;
+
+/// @prop - Line height of an icon in the segment button in a toolbar
+$segment-button-ios-toolbar-icon-line-height:         24px !default;
+
+/// @prop - Opacity of the segment button on hover
+$segment-button-ios-opacity-hover:                    .1 !default;
+
+/// @prop - Opacity of the segment button when pressed
+$segment-button-ios-opacity-active:                   .16 !default;
+
+/// @prop - Opacity of the disabled segment button
+$segment-button-ios-opacity-disabled:                 .3 !default;

core/src/components/segment/segment.md.scss

@@ -4,12 +4,66 @@
 // Material Design Segment
 // --------------------------------------------------
 
-.segment-md {
+:host {
   font-family: $segment-md-font-family;
+
+  color: $segment-button-md-text-color;
 }
 
-.segment-md.segment-disabled {
+:host(.ion-color) {
+  color: #{current-color(base)} !important;
+}
+
+:host(.segment-disabled) {
   opacity: $segment-md-opacity-disabled;
 
   pointer-events: none;
 }
+
+// Material Design Segment Button
+// --------------------------------------------------
+
+::slotted(ion-segment-button) {
+  --padding-top: #{$segment-button-md-padding-top};
+  --padding-end: #{$segment-button-md-padding-end};
+  --padding-bottom: #{$segment-button-md-padding-bottom};
+  --padding-start: #{$segment-button-md-padding-start};
+
+  --background: transparent;
+  --border-color: #{$segment-button-md-border-bottom-color};
+  --border-width: #{0 0 $segment-button-md-border-bottom-width 0};
+  --border-style: solid;
+  --opacity: #{$segment-button-md-opacity};
+  --transition: #{$segment-button-md-transition};
+
+  --icon-size: #{$segment-button-md-icon-size};
+
+  font-size: $segment-button-md-font-size;
+  font-weight: $segment-button-md-font-weight;
+  line-height: $segment-button-md-line-height;
+  color: inherit;
+  height: $segment-button-md-height;
+
+  opacity: $segment-button-md-opacity;
+
+  text-transform: uppercase;
+}
+
+// Checked Segment Button
+// --------------------------------------------------
+
+::slotted(.activated),
+::slotted(.segment-checked) {
+  opacity: $segment-button-md-opacity-activated;
+
+  --border-color: currentColor;
+}
+
+// Disabled Segment Button
+// --------------------------------------------------
+
+::slotted(.segment-button-disabled) {
+  opacity: $segment-button-md-opacity-disabled;
+
+  pointer-events: none;
+}

core/src/components/segment/segment.md.vars.scss

@@ -4,7 +4,65 @@
 // --------------------------------------------------
 
 /// @prop - Background of the segment button
-$segment-md-font-family:                       $font-family-md-base !default;
+$segment-md-font-family:                       $font-family-base !default;
 
 /// @prop - Opacity of the disabled segment
 $segment-md-opacity-disabled:                  .3 !default;
+
+
+// Material Design Segment Button
+// --------------------------------------------------
+
+/// @prop - Text color of the segment button
+$segment-button-md-text-color:                 $toolbar-md-color-active !default;
+
+/// @prop - Width of the bottom border on the segment button
+$segment-button-md-border-bottom-width:        2px !default;
+
+/// @prop - Color of the bottom border on the segment button
+$segment-button-md-border-bottom-color:        rgba(#000, .10) !default;
+
+/// @prop - Opacity of the segment button
+$segment-button-md-opacity:                    .7 !default;
+
+/// @prop - Border color of the activated segment button
+$segment-button-md-border-color-activated:     $toolbar-md-color-active !default;
+
+/// @prop - Opacity of the activated segment button
+$segment-button-md-opacity-activated:          1 !default;
+
+/// @prop - Opacity of the disabled segment button
+$segment-button-md-opacity-disabled:           .3 !default;
+
+/// @prop - Padding top of the segment button
+$segment-button-md-padding-top:                0 !default;
+
+/// @prop - Padding end of the segment button
+$segment-button-md-padding-end:                6px !default;
+
+/// @prop - Padding bottom of the segment button
+$segment-button-md-padding-bottom:             $segment-button-md-padding-top !default;
+
+/// @prop - Padding start of the segment button
+$segment-button-md-padding-start:              $segment-button-md-padding-end !default;
+
+/// @prop - Height of the segment button
+$segment-button-md-height:                     42px !default;
+
+/// @prop - Line height of the segment button
+$segment-button-md-line-height:                40px !default;
+
+/// @prop - Font size of the segment button
+$segment-button-md-font-size:                  12px !default;
+
+/// @prop - Font weight of the segment button
+$segment-button-md-font-weight:                500 !default;
+
+/// @prop - Transition of the segment button
+$segment-button-md-transition:                 100ms all linear !default;
+
+/// @prop - Size of an icon in the segment button
+$segment-button-md-icon-size:                  26px !default;
+
+/// @prop - Line height of an icon in the segment button
+$segment-button-md-icon-line-height:           $segment-button-md-line-height !default;

core/src/components/segment/segment.scss

@@ -3,7 +3,7 @@
 // Segment
 // --------------------------------------------------
 
-ion-segment {
+:host {
   @include font-smoothing();
 
   display: flex;
@@ -13,4 +13,9 @@ ion-segment {
   justify-content: center;
 
   width: 100%;
+
+  --ion-color-base: #{ion-color(primary, base)};
+  --ion-color-base-rgb: #{ion-color(primary, base, null, true)};
+  --ion-color-contrast: #{ion-color(primary, contrast)};
+  --ion-color-shade: #{ion-color(primary, shade)};
 }

core/src/components/segment/segment.tsx

@@ -1,5 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
 import { Color, InputChangeEvent, Mode } from '../../interface';
+import { createColorClasses, hostContext } from '../../utils/theme';
 
 
 @Component({
@@ -8,9 +9,7 @@ import { Color, InputChangeEvent, Mode } from '../../interface';
     ios: 'segment.ios.scss',
     md: 'segment.md.scss'
   },
-  host: {
-    theme: 'segment'
-  }
+  shadow: true
 })
 export class Segment {
 
@@ -40,7 +39,7 @@ export class Segment {
 
   @Watch('value')
   protected valueChanged(value: string | undefined) {
-    this.update();
+    this.updateButtons();
     this.ionChange.emit({value});
   }
 
@@ -57,29 +56,38 @@ export class Segment {
 
   componentDidLoad() {
     if (this.value === undefined) {
-      const buttons = Array.from(this.el.querySelectorAll('ion-segment-button'));
-      const checked = buttons.find(b => b.checked);
+      const checked = this.getButtons().find(b => b.checked);
       if (checked) {
         this.value = checked.value;
       }
     }
-    this.update();
+    this.updateButtons();
   }
 
-  private update() {
+  private updateButtons() {
     const value = this.value;
-    const buttons = Array.from(this.el.querySelectorAll('ion-segment-button'));
-    for (const button of buttons) {
+    for (const button of this.getButtons()) {
       button.checked = (button.value === value);
     }
   }
 
+  private getButtons() {
+    return Array.from(this.el.querySelectorAll('ion-segment-button'));
+  }
+
   hostData() {
     return {
       class: {
-        'segment-disabled': this.disabled
+        ...createColorClasses(this.color),
+
+        'segment-disabled': this.disabled,
+        'in-toolbar': hostContext('ion-toolbar', this.el)
       }
     };
   }
 
+  render() {
+    return <slot></slot>;
+  }
+
 }

core/src/components/segment/test/basic/index.html

@@ -6,195 +6,197 @@
   <title>Segment - Basic</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 
 <body onload="listenForEvent()">
   <ion-app>
 
-      <ion-header no-border>
-        <ion-toolbar>
-          <ion-title>Segment - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
+    <ion-header no-border>
+      <ion-toolbar>
+        <ion-title>Segment - Basic</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-      <ion-content>
-        <ion-toolbar>
-          <ion-segment class="event-tester" 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-content>
+      <ion-toolbar>
+        <ion-segment class="event-tester" 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-toolbar>
-          <ion-segment name="dynamicPropDisable" disabled color="danger">
-            <ion-segment-button value="Bookmarks">
-              Bookmarks
-            </ion-segment-button>
-            <ion-segment-button value="Reading List">
-              Reading List
-            </ion-segment-button>
-            <ion-segment-button value="Shared Links">
-              Shared Links
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
+      <ion-toolbar>
+        <ion-segment name="dynamicPropDisable" disabled color="danger">
+          <ion-segment-button value="Bookmarks">
+            Bookmarks
+          </ion-segment-button>
+          <ion-segment-button value="Reading List">
+            Reading List
+          </ion-segment-button>
+          <ion-segment-button value="Shared Links">
+            Shared Links
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
 
-        <ion-toolbar>
-          <ion-segment name="dynamicAttrElem" color="secondary" value="active">
-            <ion-segment-button value="active">
-              Active
-            </ion-segment-button>
-            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
-              Disabled
-            </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false">
-              Inactive
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
+      <ion-toolbar>
+        <ion-segment name="dynamicAttrElem" color="secondary" value="active">
+          <ion-segment-button value="active">
+            Active
+          </ion-segment-button>
+          <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+            Disabled
+          </ion-segment-button>
+          <ion-segment-button value="inactive" disabled="false">
+            Inactive
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
 
-        <ion-toolbar>
-          <ion-segment color="danger">
-            <ion-segment-button value="sunny">
-              Sunny
-            </ion-segment-button>
-            <ion-segment-button value="rainy" checked>
-              Rainy
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
+      <ion-toolbar>
+        <ion-segment color="danger">
+          <ion-segment-button value="sunny">
+            Sunny
+          </ion-segment-button>
+          <ion-segment-button value="rainy" checked>
+            Rainy
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
 
-        <div padding>
-          <ion-segment>
-            <ion-segment-button>Seg 1</ion-segment-button>
-            <ion-segment-button>Seg 2</ion-segment-button>
-            <ion-segment-button>Seg 3</ion-segment-button>
-          </ion-segment>
+      <div padding>
+        <ion-segment>
+          <ion-segment-button>Seg 1</ion-segment-button>
+          <ion-segment-button>Seg 2</ion-segment-button>
+          <ion-segment-button>Seg 3</ion-segment-button>
+        </ion-segment>
 
-          <ion-segment disabled>
-            <ion-segment-button>Seg 2 1</ion-segment-button>
-            <ion-segment-button checked>Seg 2 2</ion-segment-button>
-            <ion-segment-button>Seg 2 3</ion-segment-button>
-          </ion-segment>
+        <ion-segment disabled>
+          <ion-segment-button>Seg 2 1</ion-segment-button>
+          <ion-segment-button checked>Seg 2 2</ion-segment-button>
+          <ion-segment-button>Seg 2 3</ion-segment-button>
+        </ion-segment>
 
-          <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 name="glasses"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="Shared Links">
-              <ion-icon name="at"></ion-icon>
-            </ion-segment-button>
-          </ion-segment>
+        <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 name="glasses"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="Shared Links">
+            <ion-icon name="at"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
 
-          <ion-segment name="dynamicPropDisable" disabled color="danger">
-            <ion-segment-button value="Bookmarks">
-              Bookmarks
-            </ion-segment-button>
-            <ion-segment-button value="Reading List">
-              Reading List
-            </ion-segment-button>
-            <ion-segment-button value="Shared Links">
-              Shared Links
-            </ion-segment-button>
-          </ion-segment>
+        <ion-segment name="dynamicPropDisable" disabled color="danger">
+          <ion-segment-button value="Bookmarks">
+            Bookmarks
+          </ion-segment-button>
+          <ion-segment-button value="Reading List">
+            Reading List
+          </ion-segment-button>
+          <ion-segment-button value="Shared Links">
+            Shared Links
+          </ion-segment-button>
+        </ion-segment>
 
-          <ion-segment id="finalSegment" name="dynamicAttrElem" color="secondary" value="active">
-            <ion-segment-button value="active">
-              Active
-            </ion-segment-button>
-            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
-              Disabled
-            </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false">
-              Inactive
-            </ion-segment-button>
-          </ion-segment>
+        <ion-segment id="finalSegment" name="dynamicAttrElem" color="secondary" value="active">
+          <ion-segment-button value="active">
+            Active
+          </ion-segment-button>
+          <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+            Disabled
+          </ion-segment-button>
+          <ion-segment-button value="inactive" disabled="false">
+            Inactive
+          </ion-segment-button>
+        </ion-segment>
 
-          <!-- Dynamic Buttons -->
-          <ion-segment id="dynamicButtons" color="dark"></ion-segment>
-        </div>
+        <!-- Dynamic Buttons -->
+        <ion-segment id="dynamicButtons" color="dark"></ion-segment>
+      </div>
 
-        <div padding-horizontal>
-          <ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
-        </div>
-        <div padding>
-          <ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
-        </div>
+      <div padding-horizontal>
+        <ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
+      </div>
+      <div padding>
+        <ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
+      </div>
 
-        <script>
-          var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
-          var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
+      <script>
+        var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
+        var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
 
-          function toggleDisabled() {
-            for (var i = 0; i < dynamicAttrDisable.length; i++) {
-              const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
-              dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
-            }
-            for (var i = 0; i < dynamicPropDisable.length; i++) {
-              const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
-              dynamicPropDisable[i].disabled = propIsDisabled;
+        function toggleDisabled() {
+          for (var i = 0; i < dynamicAttrDisable.length; i++) {
+            const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
+            dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
+          }
+          for (var i = 0; i < dynamicPropDisable.length; i++) {
+            const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
+            dynamicPropDisable[i].disabled = propIsDisabled;
+          }
+        }
+
+        function toggleValue() {
+          var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
+          for (var i = 0; i < dynamicAttrElem.length; i++) {
+            var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
+
+            if (dynamicAttrValue === 'active') {
+              dynamicAttrElem[i].setAttribute('value', 'inactive');
+            } else if (dynamicAttrValue === 'inactive') {
+              dynamicAttrElem[i].setAttribute('value', 'disabled');
+            } else {
+              dynamicAttrElem[i].setAttribute('value', 'active');
             }
           }
+        }
 
-          function toggleValue() {
-            var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
-            for (var i = 0; i < dynamicAttrElem.length; i++) {
-              var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
+        async function listenForEvent() {
+          const ionSegmentElement = document.querySelector('ion-segment.event-tester');
+          await ionSegmentElement.componentOnReady();
+          ionSegmentElement.addEventListener('ionChange', (event) => {
+            console.log('event.target: ', event.target.value);
+          });
+        }
 
-              if (dynamicAttrValue === 'active') {
-                dynamicAttrElem[i].setAttribute('value', 'inactive');
-              } else if (dynamicAttrValue === 'inactive') {
-                dynamicAttrElem[i].setAttribute('value', 'disabled');
-              } else {
-                dynamicAttrElem[i].setAttribute('value', 'active');
-              }
-            }
-          }
+        var dynamicButtons = document.getElementById('dynamicButtons');
+        updateSegmentButtons(2);
 
-          async function listenForEvent() {
-            const ionSegmentElement = document.querySelector('ion-segment.event-tester');
-            await ionSegmentElement.componentOnReady();
-            ionSegmentElement.addEventListener('ionChange', (event) => {
-              console.log('event.target: ', event.target.value);
-            });
-          }
+        setTimeout(function () {
+          updateSegmentButtons(4);
+        }, 4000);
 
-          var dynamicButtons = document.getElementById('dynamicButtons');
-          updateSegmentButtons(2);
+        function updateSegmentButtons(length) {
+          dynamicButtons.innerHTML = '';
 
-          setTimeout(function() {
-            updateSegmentButtons(4);
-          }, 4000);
-
-          function updateSegmentButtons(length) {
-            dynamicButtons.innerHTML = '';
-
-            for (var i = 0; i < length; i++) {
-              dynamicButtons.innerHTML += `
+          for (var i = 0; i < length; i++) {
+            dynamicButtons.innerHTML += `
                 <ion-segment-button value="segment-${i}">
                   Btn ${i}
                 </ion-segment-button>`;
-            }
           }
-
-        </script>
-      </ion-content>
-
-      <style>
-        ion-content ion-segment {
-          margin-bottom: 10px;
         }
-      </style>
+
+      </script>
+    </ion-content>
+
+    <style>
+      ion-content ion-segment {
+        margin-bottom: 10px;
+      }
+
+    </style>
   </ion-app>
 </body>
 

core/src/components/segment/test/modes/e2e.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const { By, until } = require('selenium-webdriver');
+const { register, Page, platforms } = require('../../../../../scripts/e2e');
+
+class E2ETestPage extends Page {
+  constructor(driver, platform) {
+    super(driver, `http://localhost:3333/src/components/segment/test/modes?ionic:mode=${platform}`);
+  }
+}
+
+platforms.forEach(platform => {
+  describe('segment/modes', () => {
+    register('should init', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.navigate('#modeSegment');
+    });
+  });
+});

core/src/components/segment/test/modes/index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Segment - Modes</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
+</head>
+
+<body>
+  <ion-app>
+
+    <ion-header no-border>
+      <ion-toolbar>
+        <ion-title>Segment - Modes</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <h2>Mode: ios</h2>
+      <ion-segment id="modeSegment" mode="ios" name="iosMode" value="kittens">
+        <ion-segment-button value="puppies">
+          Puppies
+        </ion-segment-button>
+        <ion-segment-button value="kittens">
+          Kittens
+        </ion-segment-button>
+        <ion-segment-button value="turtles">
+          Turtles
+        </ion-segment-button>
+      </ion-segment>
+
+      <hr>
+
+      <h2>Mode: md</h2>
+      <ion-segment mode="md" name="mdMode" value="kittens">
+        <ion-segment-button value="puppies">
+          Puppies
+        </ion-segment-button>
+        <ion-segment-button value="kittens">
+          Kittens
+        </ion-segment-button>
+        <ion-segment-button value="turtles">
+          Turtles
+        </ion-segment-button>
+      </ion-segment>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>

core/src/components/segment/test/preview/index.html

@@ -6,210 +6,212 @@
   <title>Segment</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 
 <body onload="listenForEvent()">
   <ion-app>
 
-      <ion-header no-border>
-        <ion-toolbar>
-          <ion-title>Segment</ion-title>
-        </ion-toolbar>
-      </ion-header>
+    <ion-header no-border>
+      <ion-toolbar>
+        <ion-title>Segment</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-      <ion-content>
-        <ion-toolbar>
-          <ion-segment class="event-tester" 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-content>
+      <ion-toolbar>
+        <ion-segment class="event-tester" 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-toolbar>
-          <ion-segment name="dynamicPropDisable" disabled color="danger">
-            <ion-segment-button value="Bookmarks">
-              Bookmarks
-            </ion-segment-button>
-            <ion-segment-button value="Reading List">
-              Reading List
-            </ion-segment-button>
-            <ion-segment-button value="Shared Links">
-              Shared Links
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
+      <ion-toolbar>
+        <ion-segment name="dynamicPropDisable" disabled color="danger">
+          <ion-segment-button value="Bookmarks">
+            Bookmarks
+          </ion-segment-button>
+          <ion-segment-button value="Reading List">
+            Reading List
+          </ion-segment-button>
+          <ion-segment-button value="Shared Links">
+            Shared Links
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
 
-        <ion-toolbar>
-          <ion-segment name="dynamicAttrElem" color="secondary" value="active">
-            <ion-segment-button value="active">
-              Active
-            </ion-segment-button>
-            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
-              Disabled
-            </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false">
-              Inactive
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
+      <ion-toolbar>
+        <ion-segment name="dynamicAttrElem" color="secondary" value="active">
+          <ion-segment-button value="active">
+            Active
+          </ion-segment-button>
+          <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+            Disabled
+          </ion-segment-button>
+          <ion-segment-button value="inactive" disabled="false">
+            Inactive
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
 
-        <ion-toolbar>
-          <ion-segment color="danger">
-            <ion-segment-button value="sunny">
-              Sunny
-            </ion-segment-button>
-            <ion-segment-button value="rainy" checked>
-              Rainy
-            </ion-segment-button>
-          </ion-segment>
-        </ion-toolbar>
+      <ion-toolbar>
+        <ion-segment color="danger">
+          <ion-segment-button value="sunny">
+            Sunny
+          </ion-segment-button>
+          <ion-segment-button value="rainy" checked>
+            Rainy
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
 
-        <div padding>
-          <ion-segment>
-            <ion-segment-button>Seg 1</ion-segment-button>
-            <ion-segment-button>Seg 2</ion-segment-button>
-            <ion-segment-button>Seg 3</ion-segment-button>
-          </ion-segment>
+      <div padding>
+        <ion-segment>
+          <ion-segment-button>Seg 1</ion-segment-button>
+          <ion-segment-button>Seg 2</ion-segment-button>
+          <ion-segment-button>Seg 3</ion-segment-button>
+        </ion-segment>
 
-          <ion-segment disabled>
-            <ion-segment-button>Seg 2 1</ion-segment-button>
-            <ion-segment-button checked>Seg 2 2</ion-segment-button>
-            <ion-segment-button>Seg 2 3</ion-segment-button>
-          </ion-segment>
+        <ion-segment disabled>
+          <ion-segment-button>Seg 2 1</ion-segment-button>
+          <ion-segment-button checked>Seg 2 2</ion-segment-button>
+          <ion-segment-button>Seg 2 3</ion-segment-button>
+        </ion-segment>
 
-          <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 name="glasses"></ion-icon>
-            </ion-segment-button>
-            <ion-segment-button value="Shared Links">
-              <ion-icon name="at"></ion-icon>
-            </ion-segment-button>
-          </ion-segment>
+        <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 name="glasses"></ion-icon>
+          </ion-segment-button>
+          <ion-segment-button value="Shared Links">
+            <ion-icon name="at"></ion-icon>
+          </ion-segment-button>
+        </ion-segment>
 
-          <ion-segment name="dynamicPropDisable" disabled color="danger">
-            <ion-segment-button value="Bookmarks">
-              Bookmarks
-            </ion-segment-button>
-            <ion-segment-button value="Reading List">
-              Reading List
-            </ion-segment-button>
-            <ion-segment-button value="Shared Links">
-              Shared Links
-            </ion-segment-button>
-          </ion-segment>
+        <ion-segment name="dynamicPropDisable" disabled color="danger">
+          <ion-segment-button value="Bookmarks">
+            Bookmarks
+          </ion-segment-button>
+          <ion-segment-button value="Reading List">
+            Reading List
+          </ion-segment-button>
+          <ion-segment-button value="Shared Links">
+            Shared Links
+          </ion-segment-button>
+        </ion-segment>
 
-          <ion-segment id="finalSegment" name="dynamicAttrElem" color="secondary" value="active">
-            <ion-segment-button value="active">
-              Active
-            </ion-segment-button>
-            <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
-              Disabled
-            </ion-segment-button>
-            <ion-segment-button value="inactive" disabled="false">
-              Inactive
-            </ion-segment-button>
-          </ion-segment>
+        <ion-segment id="finalSegment" name="dynamicAttrElem" color="secondary" value="active">
+          <ion-segment-button value="active">
+            Active
+          </ion-segment-button>
+          <ion-segment-button name="dynamicAttrDisable" value="disabled" disabled="true">
+            Disabled
+          </ion-segment-button>
+          <ion-segment-button value="inactive" disabled="false">
+            Inactive
+          </ion-segment-button>
+        </ion-segment>
 
-          <!-- Dynamic Buttons -->
-          <ion-segment id="dynamicButtons" color="dark"></ion-segment>
-        </div>
+        <!-- Dynamic Buttons -->
+        <ion-segment id="dynamicButtons" color="dark"></ion-segment>
+      </div>
 
-        <div padding-horizontal>
-          <ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
-        </div>
-        <div padding>
-          <ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
-        </div>
+      <div padding-horizontal>
+        <ion-button expand="block" onClick="toggleDisabled()">Toggle Disabled</ion-button>
+      </div>
+      <div padding>
+        <ion-button expand="block" color="secondary" onClick="toggleValue()">Toggle Value</ion-button>
+      </div>
 
-        <script>
-          var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
-          var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
+      <script>
+        var dynamicAttrDisable = document.getElementsByName('dynamicAttrDisable');
+        var dynamicPropDisable = document.getElementsByName('dynamicPropDisable');
 
-          function toggleDisabled() {
-            for (var i = 0; i < dynamicAttrDisable.length; i++) {
-              const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
-              dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
-            }
-            for (var i = 0; i < dynamicPropDisable.length; i++) {
-              const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
-              dynamicPropDisable[i].disabled = propIsDisabled;
+        function toggleDisabled() {
+          for (var i = 0; i < dynamicAttrDisable.length; i++) {
+            const attrIsDisabled = dynamicAttrDisable[i].getAttribute('disabled') === 'true' ? false : true;
+            dynamicAttrDisable[i].setAttribute('disabled', attrIsDisabled);
+          }
+          for (var i = 0; i < dynamicPropDisable.length; i++) {
+            const propIsDisabled = dynamicPropDisable[i].disabled === true ? false : true;
+            dynamicPropDisable[i].disabled = propIsDisabled;
+          }
+        }
+
+        function toggleValue() {
+          var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
+          for (var i = 0; i < dynamicAttrElem.length; i++) {
+            var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
+
+            if (dynamicAttrValue === 'active') {
+              dynamicAttrElem[i].setAttribute('value', 'inactive');
+            } else if (dynamicAttrValue === 'inactive') {
+              dynamicAttrElem[i].setAttribute('value', 'disabled');
+            } else {
+              dynamicAttrElem[i].setAttribute('value', 'active');
             }
           }
+        }
 
-          function toggleValue() {
-            var dynamicAttrElem = document.getElementsByName('dynamicAttrElem');
-            for (var i = 0; i < dynamicAttrElem.length; i++) {
-              var dynamicAttrValue = dynamicAttrElem[i].getAttribute('value');
+        async function listenForEvent() {
+          const ionSegmentElement = document.querySelector('ion-segment.event-tester');
+          await ionSegmentElement.componentOnReady();
+          ionSegmentElement.addEventListener('ionChange', (event) => {
+            console.log('event.target: ', event.target.value);
+          });
+        }
 
-              if (dynamicAttrValue === 'active') {
-                dynamicAttrElem[i].setAttribute('value', 'inactive');
-              } else if (dynamicAttrValue === 'inactive') {
-                dynamicAttrElem[i].setAttribute('value', 'disabled');
-              } else {
-                dynamicAttrElem[i].setAttribute('value', 'active');
-              }
-            }
-          }
+        var dynamicButtons = document.getElementById('dynamicButtons');
+        updateSegmentButtons(2);
 
-          async function listenForEvent() {
-            const ionSegmentElement = document.querySelector('ion-segment.event-tester');
-            await ionSegmentElement.componentOnReady();
-            ionSegmentElement.addEventListener('ionChange', (event) => {
-              console.log('event.target: ', event.target.value);
-            });
-          }
+        setTimeout(function () {
+          updateSegmentButtons(4);
+        }, 4000);
 
-          var dynamicButtons = document.getElementById('dynamicButtons');
-          updateSegmentButtons(2);
+        function updateSegmentButtons(length) {
+          dynamicButtons.innerHTML = '';
 
-          setTimeout(function() {
-            updateSegmentButtons(4);
-          }, 4000);
-
-          function updateSegmentButtons(length) {
-            dynamicButtons.innerHTML = '';
-
-            for (var i = 0; i < length; i++) {
-              dynamicButtons.innerHTML += `
+          for (var i = 0; i < length; i++) {
+            dynamicButtons.innerHTML += `
                 <ion-segment-button value="segment-${i}">
                   Btn ${i}
                 </ion-segment-button>`;
-            }
           }
-
-          const segments = document.querySelectorAll('ion-segment')
-          for (let i = 0; i < segments.length; i++) {
-            segments[i].addEventListener('ionChange', (ev) => {
-              console.log('Segment value changed', ev);
-            })
-          }
-
-          // Listen for ionClick on all segment buttons
-          const segmentButtons = document.querySelectorAll('ion-segment-button')
-          for (let i = 0; i < segmentButtons.length; i++) {
-            segmentButtons[i].addEventListener('ionSelect', (ev) => {
-              console.log('Segment button clicked', ev);
-            })
-          }
-
-        </script>
-      </ion-content>
-
-      <style>
-        ion-content ion-segment {
-          margin-bottom: 10px;
         }
-      </style>
+
+        const segments = document.querySelectorAll('ion-segment')
+        for (let i = 0; i < segments.length; i++) {
+          segments[i].addEventListener('ionChange', (ev) => {
+            console.log('Segment value changed', ev);
+          })
+        }
+
+        // Listen for ionClick on all segment buttons
+        const segmentButtons = document.querySelectorAll('ion-segment-button')
+        for (let i = 0; i < segmentButtons.length; i++) {
+          segmentButtons[i].addEventListener('ionSelect', (ev) => {
+            console.log('Segment button clicked', ev);
+          })
+        }
+
+      </script>
+    </ion-content>
+
+    <style>
+      ion-content ion-segment {
+        margin-bottom: 10px;
+      }
+
+    </style>
   </ion-app>
 </body>
 

core/src/components/segment/test/standalone/index.html

@@ -6,6 +6,7 @@
   <title>Segment - Standalone</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
+  <link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
 </head>
 
 <body>