fix(): update to Stencil One 🎉🎊

core/src/components/segment-button/readme.md

@@ -319,11 +319,10 @@ for (let i = 0; i < segmentButtons.length; i++) {
 
 ```tsx
 import React from 'react';
+import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonContent } from '@ionic/react';
 
-import { IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';
-
-const Example: React.SFC<{}> = () => (
-  <>
+export const SegmentButtonExample: React.FunctionComponent = () => (
+  <IonContent>
     {/*-- Segment buttons with text and click listeners --*/}
     <IonSegment>
       <IonSegmentButton onIonSelect={() => console.log('Friends segment selected')}>
@@ -459,10 +458,8 @@ const Example: React.SFC<{}> = () => (
         <IonLabel>Item Three</IonLabel>
       </IonSegmentButton>
     </IonSegment>
-  </>
+  </IonContent>
 );
-
-export default Example;
 ```
 
 
@@ -670,6 +667,19 @@ export default Example;
 | `--transition`              | Transition of the segment button                                    |
 
 
+## Dependencies
+
+### Depends on
+
+- [ion-ripple-effect](../ripple-effect)
+
+### Graph
+```mermaid
+graph TD;
+  ion-segment-button --> ion-ripple-effect
+  style ion-segment-button fill:#f9f,stroke:#333,stroke-width:4px
+```
+
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

core/src/components/segment-button/segment-button.tsx

@@ -1,10 +1,14 @@
-import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
+import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch, h } from '@stencil/core';
 
-import { Mode, SegmentButtonLayout } from '../../interface';
+import { getIonMode } from '../../global/ionic-global';
+import { SegmentButtonLayout } from '../../interface';
 import { ButtonInterface } from '../../utils/element-interface';
 
 let ids = 0;
 
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
 @Component({
   tag: 'ion-segment-button',
   styleUrls: {
@@ -17,11 +21,6 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
 
   @Element() el!: HTMLElement;
 
-  /**
-   * The mode determines which platform styles to use.
-   */
-  @Prop() mode!: Mode;
-
   /**
    * If `true`, the segment button is selected.
    */
@@ -74,10 +73,11 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
 
   hostData() {
     const { checked, disabled, hasIcon, hasLabel, layout } = this;
+    const mode = getIonMode(this);
     return {
       'aria-disabled': disabled ? 'true' : null,
       class: {
-        [`${this.mode}`]: true,
+        [`${mode}`]: true,
         'segment-button-has-label': hasLabel,
         'segment-button-has-icon': hasIcon,
         'segment-button-has-label-only': hasLabel && !hasIcon,
@@ -92,6 +92,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
   }
 
   render() {
+    const mode = getIonMode(this);
     return [
       <button
         type={this.type}
@@ -100,7 +101,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
         disabled={this.disabled}
       >
         <slot></slot>
-        {this.mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
+        {mode === 'md' && <ion-ripple-effect></ion-ripple-effect>}
       </button>,
       <div class="segment-button-indicator"></div>
     ];

core/src/components/segment-button/usage/react.md

@@ -1,10 +1,9 @@
 ```tsx
 import React from 'react';
+import { IonSegment, IonSegmentButton, IonLabel, IonIcon, IonContent } from '@ionic/react';
 
-import { IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react';
-
-const Example: React.SFC<{}> = () => (
-  <>
+export const SegmentButtonExample: React.FunctionComponent = () => (
+  <IonContent>
     {/*-- Segment buttons with text and click listeners --*/}
     <IonSegment>
       <IonSegmentButton onIonSelect={() => console.log('Friends segment selected')}>
@@ -140,8 +139,6 @@ const Example: React.SFC<{}> = () => (
         <IonLabel>Item Three</IonLabel>
       </IonSegmentButton>
     </IonSegment>
-  </>
+  </IonContent>
 );
-
-export default Example;
 ```