chore(): update demos and segments

packages/core/src/components.d.ts

@@ -2425,6 +2425,7 @@ declare global {
   }
   namespace JSXElements {
     export interface IonSegmentButtonAttributes extends HTMLAttributes {
+      activated?: boolean;
       checked?: boolean;
       color?: string;
       disabled?: boolean;

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

@@ -31,15 +31,25 @@ The child buttons of the `ion-segment` component. Each `ion-segment-button` must
 
 ## Properties
 
+#### activated
+
+boolean
+
+
 #### checked
 
 boolean
 
+If true, the segment button is selected. Defaults to `false`.
+
 
 #### color
 
 string
 
+The color to use for the text color.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+
 
 #### disabled
 
@@ -50,23 +60,38 @@ boolean
 
 any
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 #### value
 
 string
 
+The value of the segment button.
+
 
 ## Attributes
 
+#### activated
+
+boolean
+
+
 #### checked
 
 boolean
 
+If true, the segment button is selected. Defaults to `false`.
+
 
 #### color
 
 string
 
+The color to use for the text color.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+
 
 #### disabled
 
@@ -77,16 +102,23 @@ boolean
 
 any
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 #### value
 
 string
 
+The value of the segment button.
+
 
 ## Events
 
 #### ionClick
 
+Emitted when the segment button is clicked.
+
 
 
 ----------------------------------------------

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

@@ -12,38 +12,36 @@ export class SegmentButton {
   @Element() private el: HTMLElement;
 
   /**
-   * @output {SegmentButtonEvent} Emitted when the segment button is clicked.
+   * Emitted when the segment button is clicked.
    */
   @Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
 
-  @State() activated: boolean = false;
+  @Prop({mutable: true}) activated: boolean = false;
 
   /**
-   * @input {string} The color to use from your Sass `$colors` map.
+   * The color to use for the text color.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color: string;
 
   /**
-   * @input {string} The mode determines which platform styles to use.
+   * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode: 'ios' | 'md';
 
   /**
-   * @input {boolean} If true, the segment button is selected. Defaults to `false`.
+   * If true, the segment button is selected. Defaults to `false`.
    */
   @Prop({ mutable: true }) checked: boolean = false;
 
   /*
-   * @input {boolean} If true, the user cannot interact with the segment button. Default false.
+   * If true, the user cannot interact with the segment button. Default false.
    */
   @Prop({ mutable: true }) disabled: boolean = false;
 
   /**
-   * @input {string} the value of the segment button.
+   * The value of the segment button.
    */
   @Prop({ mutable: true }) value: string;
 

packages/core/src/components/segment/readme.md

@@ -58,6 +58,9 @@ Segments provide functionality similar to tabs, selecting one will unselect all
 
 string
 
+The color to use for the text color.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+
 
 #### disabled
 
@@ -68,11 +71,16 @@ boolean
 
 any
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 #### value
 
 string
 
+the value of the segment.
+
 
 ## Attributes
 
@@ -80,6 +88,9 @@ string
 
 string
 
+The color to use for the text color.
+Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
+
 
 #### disabled
 
@@ -90,16 +101,23 @@ boolean
 
 any
 
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+
 
 #### value
 
 string
 
+the value of the segment.
+
 
 ## Events
 
 #### ionChange
 
+Emitted when the value property has changed.
+
 
 
 ----------------------------------------------

packages/core/src/components/segment/segment.tsx

@@ -18,31 +18,29 @@ export class Segment {
   @Element() private el: HTMLElement;
 
   /**
-   * @output {Event} Emitted when the value property has changed.
+   * Emitted when the value property has changed.
    */
   @Event() ionChange: EventEmitter<SegmentEventDetail>;
 
   /**
-   * @input {string} The color to use from your Sass `$colors` map.
+   * The color to use for the text color.
    * Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
    */
   @Prop() color: string;
 
   /**
-   * @input {string} The mode determines which platform styles to use.
+   * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode: 'ios' | 'md';
 
   /*
-   * @input {boolean} If true, the user cannot interact with the segment. Default false.
+   * If true, the user cannot interact with the segment. Default false.
    */
   @Prop({ mutable: true }) disabled: boolean = false;
 
   /**
-   * @input {string} the value of the segment.
+   * the value of the segment.
    */
   @Prop({ mutable: true }) value: string;
 
@@ -53,7 +51,6 @@ export class Segment {
 
   componentDidLoad() {
     this.buttons = this.el.querySelectorAll('ion-segment-button');
-
     for (var i = 0; i < this.buttons.length; i++) {
       const button = this.buttons[i];
 

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

@@ -49,10 +49,10 @@
               <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>
 
@@ -119,6 +119,8 @@
               console.log('event.target: ', event.target.value);
             });
           }
+
+
         </script>
       </ion-content>
     </ion-page>

packages/demos/conference-app/angular/src/pages/about/about.html

@@ -1,13 +1,12 @@
 <ion-page>
   <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="primary">
-      <ion-buttons>
+      <ion-buttons slot="start">
         <ion-button menuToggle>
           <ion-icon slot="icon-only" name="menu"></ion-icon>
         </ion-button>
       </ion-buttons>
       <ion-title>About</ion-title>
-
       <ion-buttons slot="end">
         <ion-button (click)="presentPopover($event)">
           <ion-icon slot="icon-only" name="more"></ion-icon>

packages/demos/conference-app/angular/src/pages/account/account.html

@@ -1,6 +1,6 @@
 <ion-page>
   <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="primary">
       <ion-buttons slot="start">
         <ion-button menuToggle>
           <ion-icon slot="icon-only" name="menu"></ion-icon>

packages/demos/conference-app/angular/src/pages/map/map.html

@@ -1,6 +1,6 @@
 <ion-page>
   <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="primary">
       <ion-buttons slot="start">
         <ion-button menuToggle>
           <ion-icon slot="icon-only" name="menu"></ion-icon>

packages/demos/conference-app/angular/src/pages/schedule/schedule.html

@@ -7,7 +7,7 @@
         </ion-button>
       </ion-buttons>
 
-      <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" ngDefaultControl color="light">
+      <ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()" color="light">
         <ion-segment-button value="all">
           All
         </ion-segment-button>

packages/demos/conference-app/angular/src/pages/session-detail/session-detail.html

@@ -1,6 +1,6 @@
 <ion-page>
   <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="primary">
       <ion-title *ngIf="session">{{session.name}}</ion-title>
     </ion-toolbar>
   </ion-header>

packages/demos/conference-app/angular/src/pages/speaker-detail/speaker-detail.html

@@ -1,6 +1,6 @@
 <ion-page>
   <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="primary">
       <ion-title>{{speaker?.name}}</ion-title>
     </ion-toolbar>
   </ion-header>

packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.html

@@ -1,6 +1,6 @@
 <ion-page>
   <ion-header>
-    <ion-toolbar>
+    <ion-toolbar color="primary">
       <ion-buttons slot="start">
         <ion-button menuToggle>
           <ion-icon slot="icon-only" name="menu"></ion-icon>
@@ -15,7 +15,7 @@
       <ion-grid fixed>
         <ion-row align-items-stretch>
 
-          <ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let speaker of speakers" approxItemHeight="457px">
+          <ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let speaker of speakers">
 
             <ion-card class="speaker-card">
               <ion-card-header>
@@ -27,7 +27,7 @@
                 </ion-item>
               </ion-card-header>
 
-              <ion-card-content class="outer-content">
+              <ion-card-content>
                 <ion-list>
                   <ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)">
                     <h3>{{session.name}}</h3>
@@ -39,21 +39,21 @@
                 </ion-list>
               </ion-card-content>
 
-              <ion-row no-padding>
+              <ion-row no-padding justify-content-center>
                 <ion-col col-12 col-lg-auto text-center text-lg-left>
-                  <ion-button clear small color="primary"(click)="goToSpeakerTwitter(speaker)">
+                  <ion-button fill="clear" size="small" color="primary" (click)="goToSpeakerTwitter(speaker)">
                     <ion-icon name="logo-twitter" slot="start"></ion-icon>
                     Tweet
                   </ion-button>
                 </ion-col>
                 <ion-col col-12 col-lg-auto text-center>
-                  <ion-button clear small color="primary" (click)="openSpeakerShare(speaker)">
+                  <ion-button fill="clear" size="small" color="primary" (click)="openSpeakerShare(speaker)">
                     <ion-icon name='share-alt' slit="start"></ion-icon>
                     Share
                   </ion-button>
                 </ion-col>
                 <ion-col col-12 col-lg-auto text-center text-lg-right>
-                  <ion-button clear small color="primary" (click)="openContact(speaker)">
+                  <ion-button fill="clear" size="small" color="primary" (click)="openContact(speaker)">
                     <ion-icon name='chatboxes' slot="start"></ion-icon>
                     Contact
                   </ion-button>

packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.scss

@@ -1,6 +1,8 @@
 page-speaker-list {
-  .scroll-content {
+
-    background: #EDEDED;
+  .outer-content .content-md,
+  .outer-content .content-ios {
+    background-color: #ededed;
   }
 
   .speaker-card {
@@ -13,12 +15,12 @@ page-speaker-list {
     }
   }
 
-  // Todo: remove when this issue https://github.com/ionic-team/ionic/issues/11212 is fixed
+  // // Todo: remove when this issue https://github.com/ionic-team/ionic/issues/11212 is fixed
-  @media(min-width: 769px) {
+  // @media(min-width: 769px) {
-    .speaker-card {
+  //   .speaker-card {
-      height: 370px;
+  //     height: 370px;
-    }
+  //   }
-  }
+  // }
 
   .speaker-card ion-card-header .item {
     padding: 4px 16px;
@@ -28,4 +30,4 @@ page-speaker-list {
     padding-left: 0;
     padding-right: 0;
   }
-}
+  }

packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 import {
   ActionSheetController,
@@ -15,7 +15,9 @@ import { SpeakerDetailPage } from '../speaker-detail/speaker-detail';
 
 @Component({
   selector: 'page-speaker-list',
-  templateUrl: 'speaker-list.html'
+  templateUrl: 'speaker-list.html',
+  styleUrls: ['./speaker-list.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class SpeakerListPage {
   speakers: any[] = [];