chore(): update dependencies

2025-08-15 17:42:15 +08:00 · 2018-04-22 20:08:02 +02:00
parent 3f8fcda366
commit ae0541a465
48 changed files with 1299 additions and 1720 deletions
--- a/angular/src/directives/proxies.ts
+++ b/angular/src/directives/proxies.ts
--- a/angular/test/nav/package-lock.json
+++ b/angular/test/nav/package-lock.json
--- a/core/package-lock.json
+++ b/core/package-lock.json
--- a/core/package.json
+++ b/core/package.json
@ -28,23 +28,16 @@
    "@stencil/dev-server": "latest",
    "@stencil/sass": "0.0.3",
    "@stencil/utils": "latest",
-    "@types/jest": "^21.1.6",
+    "@types/jest": "^22.2.3",
    "chai": "^4.1.2",
-    "chalk": "^2.3.2",
    "chromedriver": "^2.37.0",
-    "execa": "^0.9.0",
-    "fs-extra": "^5.0.0",
-    "glob": "^7.1.2",
-    "inquirer": "^5.2.0",
-    "jest": "^21.2.1",
-    "listr": "^0.13.0",
+    "jest": "^22.4.3",
    "mocha": "^4.0.1",
    "np": "^2.17.0",
    "sass-lint": "^1.12.1",
    "selenium-webdriver": "^3.6.0",
-    "semver": "^5.5.0",
    "tslint": "^5.8.0",
-    "tslint-ionic-rules": "0.0.13",
+    "tslint-ionic-rules": "0.0.14",
    "yargs": "^10.0.3"
  },
  "scripts": {
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@ -125,6 +125,10 @@ import {
 import {
  FrameworkDelegate as FrameworkDelegate3,
 } from './utils/framework-delegate';
+import {
+  TabbarLayout,
+  TabbarPlacement,
+} from './components/tabbar/tabbar';
 import {
  DomRenderFn,
  HeaderFn,
@ -6432,8 +6436,8 @@ declare global {
  namespace StencilComponents {
    interface IonTabbar {
      'highlight': boolean;
-      'layout': string;
-      'placement': string;
+      'layout': TabbarLayout;
+      'placement': TabbarPlacement;
      'scrollable': boolean;
      'selectedTab': HTMLIonTabElement;
      'tabs': HTMLIonTabElement[];
@ -6464,8 +6468,8 @@ declare global {
  namespace JSXElements {
    export interface IonTabbarAttributes extends HTMLAttributes {
      'highlight'?: boolean;
-      'layout'?: string;
-      'placement'?: string;
+      'layout'?: TabbarLayout;
+      'placement'?: TabbarPlacement;
      'scrollable'?: boolean;
      'selectedTab'?: HTMLIonTabElement;
      'tabs'?: HTMLIonTabElement[];
@ -6507,11 +6511,11 @@ declare global {
      /**
       * Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
       */
-      'tabbarLayout': string;
+      'tabbarLayout': TabbarLayout;
      /**
       * Set position of the tabbar: `top`, `bottom`.
       */
-      'tabbarPlacement': string;
+      'tabbarPlacement': TabbarPlacement;
      /**
       * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
       */
@ -6565,11 +6569,11 @@ declare global {
      /**
       * Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
       */
-      'tabbarLayout'?: string;
+      'tabbarLayout'?: TabbarLayout;
      /**
       * Set position of the tabbar: `top`, `bottom`.
       */
-      'tabbarPlacement'?: string;
+      'tabbarPlacement'?: TabbarPlacement;
      /**
       * If true, the tabs will be translucent. Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. Defaults to `false`.
       */
--- a/core/src/components/action-sheet/action-sheet.tsx
+++ b/core/src/components/action-sheet/action-sheet.tsx
@ -227,22 +227,22 @@ export class ActionSheet implements OverlayInterface {

    return [
      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
-      <div class='action-sheet-wrapper' role='dialog'>
-        <div class='action-sheet-container'>
-          <div class='action-sheet-group'>
+      <div class="action-sheet-wrapper" role="dialog">
+        <div class="action-sheet-container">
+          <div class="action-sheet-group">
            {this.header
-              ? <div class='action-sheet-title'>
+              ? <div class="action-sheet-title">
                {this.header}
                {this.subHeader
-                ? <div class='action-sheet-sub-title'>{this.subHeader}</div>
+                ? <div class="action-sheet-sub-title">{this.subHeader}</div>
                : null}
              </div>
              : null}
            {buttons.map(b =>
              <button class={buttonClass(b)} onClick={() => this.buttonClick(b)}>
-                <span class='action-sheet-button-inner'>
+                <span class="action-sheet-button-inner">
                  {b.icon
-                    ? <ion-icon name={b.icon} class='action-sheet-icon' />
+                    ? <ion-icon name={b.icon} class="action-sheet-icon" />
                    : null}
                  {b.text}
                </span>
@ -250,16 +250,16 @@ export class ActionSheet implements OverlayInterface {
            )}
          </div>
          {cancelButton
-            ? <div class='action-sheet-group action-sheet-group-cancel'>
+            ? <div class="action-sheet-group action-sheet-group-cancel">
                <button
                  class={buttonClass(cancelButton)}
                  onClick={() => this.buttonClick(cancelButton)}
                >
-                  <span class='action-sheet-button-inner'>
+                  <span class="action-sheet-button-inner">
                    {cancelButton.icon
                      ? <ion-icon
                          name={cancelButton.icon}
-                          class='action-sheet-icon'
+                          class="action-sheet-icon"
                        />
                      : null}
                    {cancelButton.text}
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@ -307,12 +307,12 @@ export class Alert implements OverlayInterface {
      return null;
    }
    return (
-      <div class='alert-checkbox-group' aria-labelledby={labelledby}>
+      <div class="alert-checkbox-group" aria-labelledby={labelledby}>
        { inputs.map((i) => (
-          <button onClick={() => this.cbClick(i)} aria-checked={i.checked} id={i.id} disabled={i.disabled} tabIndex={0} role='checkbox' class='alert-tappable alert-checkbox alert-checkbox-button'>
-            <div class='alert-button-inner'>
-              <div class='alert-checkbox-icon'><div class='alert-checkbox-inner'></div></div>
-              <div class='alert-checkbox-label'>
+          <button onClick={() => this.cbClick(i)} aria-checked={i.checked} id={i.id} disabled={i.disabled} tabIndex={0} role="checkbox" class="alert-tappable alert-checkbox alert-checkbox-button">
+            <div class="alert-button-inner">
+              <div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>
+              <div class="alert-checkbox-label">
                {i.label}
              </div>
            </div>
@ -329,12 +329,12 @@ export class Alert implements OverlayInterface {
      return null;
    }
    return (
-      <div class='alert-radio-group' role='radiogroup' aria-labelledby={labelledby} aria-activedescendant={this.activeId}>
+      <div class="alert-radio-group" role="radiogroup" aria-labelledby={labelledby} aria-activedescendant={this.activeId}>
        { inputs.map((i) => (
-          <button onClick={() => this.rbClick(i)} aria-checked={i.checked} disabled={i.disabled} id={i.id} tabIndex={0} class='alert-radio-button alert-tappable alert-radio' role='radio'>
-            <div class='alert-button-inner'>
-              <div class='alert-radio-icon'><div class='alert-radio-inner'></div></div>
-              <div class='alert-radio-label'>
+          <button onClick={() => this.rbClick(i)} aria-checked={i.checked} disabled={i.disabled} id={i.id} tabIndex={0} class="alert-radio-button alert-tappable alert-radio" role="radio">
+            <div class="alert-button-inner">
+              <div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>
+              <div class="alert-radio-label">
                {i.label}
              </div>
            </div>
@ -351,9 +351,9 @@ export class Alert implements OverlayInterface {
      return null;
    }
    return (
-      <div class='alert-input-group' aria-labelledby={labelledby}>
+      <div class="alert-input-group" aria-labelledby={labelledby}>
        { inputs.map(i => (
-          <div class='alert-input-wrapper'>
+          <div class="alert-input-wrapper">
            <input
              placeholder={i.placeholder}
              value={i.value}
@ -364,7 +364,7 @@ export class Alert implements OverlayInterface {
              id={i.id}
              disabled={i.disabled}
              tabIndex={0}
-              class='alert-input'/>
+              class="alert-input"/>
          </div>
        ))}
      </div>
@ -414,21 +414,21 @@ export class Alert implements OverlayInterface {
    return [
      <ion-backdrop tappable={this.enableBackdropDismiss}/>,

-      <div class='alert-wrapper'>
+      <div class="alert-wrapper">

-        <div class='alert-head'>
-          { this.header && <h2 id={hdrId} class='alert-title'>{this.header}</h2> }
-          { this.subHeader && <h2 id={subHdrId} class='alert-sub-title'>{this.subHeader}</h2> }
+        <div class="alert-head">
+          { this.header && <h2 id={hdrId} class="alert-title">{this.header}</h2> }
+          { this.subHeader && <h2 id={subHdrId} class="alert-sub-title">{this.subHeader}</h2> }
        </div>

-        <div id={msgId} class='alert-message' innerHTML={this.message}></div>
+        <div id={msgId} class="alert-message" innerHTML={this.message}></div>

        { this.renderAlertInputs(labelledById) }

        <div class={alertButtonGroupClass}>
          {buttons.map(button =>
            <button class={buttonClass(button)} tabIndex={0} onClick={() => this.buttonClick(button)}>
-              <span class='alert-button-inner'>
+              <span class="alert-button-inner">
                {button.text}
              </span>
            </button>
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@ -81,9 +81,9 @@ export class BackButton {
      <button
        class={backButtonClasses}
        onClick={(ev) => this.onClick(ev)}>
-        <span class='back-button-inner'>
+        <span class="back-button-inner">
          { backButtonIcon && <ion-icon name={backButtonIcon}/> }
-          { this.mode === 'ios' && backButtonText && <span class='button-text'>{backButtonText}</span> }
+          { this.mode === 'ios' && backButtonText && <span class="button-text">{backButtonText}</span> }
          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
        </span>
      </button>
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@ -148,11 +148,11 @@ export class Button {
        onKeyUp={this.onKeyUp.bind(this)}
        onBlur={this.onBlur.bind(this)}
        onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}>
-          <span class='button-inner'>
-            <slot name='icon-only'></slot>
-            <slot name='start'></slot>
+          <span class="button-inner">
+            <slot name="icon-only"></slot>
+            <slot name="start"></slot>
            <slot></slot>
-            <slot name='end'></slot>
+            <slot name="end"></slot>
          </span>
          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
      </TagType>
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@ -136,10 +136,10 @@ export class Checkbox implements CheckboxInput {

    return [
      <div class={checkboxClasses}>
-        <div class='checkbox-inner'></div>
+        <div class="checkbox-inner"></div>
      </div>,
      <input
-        type='checkbox'
+        type="checkbox"
        id={this.inputId}
        aria-labelledby={this.labelId}
        onChange={this.onChange.bind(this)}
--- a/core/src/components/chip-button/chip-button.tsx
+++ b/core/src/components/chip-button/chip-button.tsx
@ -65,7 +65,7 @@ export class ChipButton {
        class={buttonClasses}
        disabled={this.disabled}
        href={this.href}>
-          <span class='chip-button-inner'>
+          <span class="chip-button-inner">
            <slot></slot>
          </span>
          { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@ -143,8 +143,8 @@ export class Content {
          forceOverscroll={this.forceOverscroll}>
          <slot></slot>
        </ion-scroll>
-      : <div class='scroll-inner'><slot></slot></div>,
-      <slot name='fixed'></slot>
+      : <div class="scroll-inner"><slot></slot></div>,
+      <slot name="fixed"></slot>
    ];
  }
 }
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@ -599,13 +599,13 @@ export class Datetime {
    return [
      <div class={ datetimeTextClasses }>{ datetimeText }</div>,
      <button
-        type='button'
-        aria-haspopup='true'
+        type="button"
+        aria-haspopup="true"
        id={this.datetimeId}
        aria-labelledby={this.labelId}
        aria-disabled={this.disabled ? 'true' : false}
        onClick={this.open.bind(this)}
-        class='datetime-cover'>
+        class="datetime-cover">
        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
      </button>
    ];
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@ -90,8 +90,8 @@ export class FabButton {
        class={fabClasses}
        disabled={this.disabled}
        href={this.href}>
-        <ion-icon name='close' class='fab-button-close-icon'></ion-icon>
-        <span class='fab-button-inner'>
+        <ion-icon name="close" class="fab-button-close-icon"></ion-icon>
+        <span class="fab-button-inner">
          <slot></slot>
        </span>
        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@ -35,14 +35,14 @@ export class InfiniteScrollContent {

  render() {
    return (
-      <div class='infinite-loading'>
+      <div class="infinite-loading">
        {this.loadingSpinner &&
-          <div class='infinite-loading-spinner'>
+          <div class="infinite-loading-spinner">
            <ion-spinner name={this.loadingSpinner}></ion-spinner>
          </div>
        }
        {this.loadingText &&
-          <div class='infinite-loading-text' innerHTML={this.loadingText}></div>
+          <div class="infinite-loading-text" innerHTML={this.loadingText}></div>
        }
      </div>
    );
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@ -350,8 +350,8 @@ export class Input implements InputComponent {
        onKeyDown={this.inputKeydown.bind(this)}
      />,
      <button
-        type='button'
-        class='input-clear-icon'
+        type="button"
+        class="input-clear-icon"
        hidden={this.clearInput !== true}
        onClick={this.clearTextInput.bind(this)}
        onMouseDown={this.clearTextInput.bind(this)}/>
--- a/core/src/components/item-divider/item-divider.tsx
+++ b/core/src/components/item-divider/item-divider.tsx
@ -42,12 +42,12 @@ export class ItemDivider {

  render() {
    return [
-      <slot name='start'></slot>,
-      <div class='item-divider-inner'>
-        <div class='item-divider-wrapper'>
+      <slot name="start"></slot>,
+      <div class="item-divider-inner">
+        <div class="item-divider-wrapper">
          <slot></slot>
        </div>
-        <slot name='end'></slot>
+        <slot name="end"></slot>
      </div>
    ];
  }
--- a/core/src/components/item-option/item-option.tsx
+++ b/core/src/components/item-option/item-option.tsx
@ -61,17 +61,17 @@ export class ItemOption {

    return (
      <TagType
-        class='item-option-button'
+        class="item-option-button"
        disabled={this.disabled}
        href={this.href}
        onClick={this.clickedOptionButton.bind(this)}>
-        <span class='item-option-button-inner'>
-          <slot name='start'></slot>
-          <slot name='top'></slot>
-          <slot name='icon-only'></slot>
+        <span class="item-option-button-inner">
+          <slot name="start"></slot>
+          <slot name="top"></slot>
+          <slot name="icon-only"></slot>
          <slot></slot>
-          <slot name='bottom'></slot>
-          <slot name='end'></slot>
+          <slot name="bottom"></slot>
+          <slot name="end"></slot>
        </span>
      </TagType>
    );
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@ -128,12 +128,12 @@ export class Item {
        {...attrs}
        class={themedClasses}
        onClick={(ev) => openURL(this.win, this.href, ev, this.routerDirection)}>
-        <slot name='start'></slot>
-        <div class='item-inner'>
-          <div class='input-wrapper'>
+        <slot name="start"></slot>
+        <div class="item-inner">
+          <div class="input-wrapper">
            <slot></slot>
          </div>
-          <slot name='end'></slot>
+          <slot name="end"></slot>
        </div>
        { clickable && this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
      </TagType>
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@ -206,14 +206,14 @@ export class Loading implements OverlayInterface {
  render() {
    return [
      <ion-backdrop visible={this.showBackdrop} tappable={false} />,
-      <div class='loading-wrapper' role='dialog'>
+      <div class="loading-wrapper" role="dialog">

        { this.spinner !== 'hide' &&
-        <div class='loading-spinner'>
+        <div class="loading-spinner">
          <ion-spinner name={this.spinner}></ion-spinner>
        </div>}

-        { this.content && <div class='loading-content'>{this.content}</div>}
+        { this.content && <div class="loading-content">{this.content}</div>}
      </div>
    ];
  }
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@ -40,7 +40,7 @@ export class MenuButton {
        <ion-button>
          {this.custom
            ? <slot/>
-            : <ion-icon slot='icon-only' name={menuIcon}/>}
+            : <ion-icon slot="icon-only" name={menuIcon}/>}
        </ion-button>
      </ion-menu-toggle>
    );
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@ -427,13 +427,13 @@ export class Menu {

  render() {
    return ([
-      <div class='menu-inner' ref={el => this.menuInnerEl = el}>
+      <div class="menu-inner" ref={el => this.menuInnerEl = el}>
        <slot></slot>
      </div>,

      <ion-backdrop
        ref={el => this.backdropEl = el}
-        class='menu-backdrop'
+        class="menu-backdrop"
        tappable={false}
        stopPropagation={false}/>,

@ -444,12 +444,12 @@ export class Menu {
        onMove={this.onDragMove.bind(this)}
        onEnd={this.onDragEnd.bind(this)}
        disabled={!this.isActive() || !this.swipeEnabled}
-        gestureName='menu-swipe'
+        gestureName="menu-swipe"
        gesturePriority={10}
-        type='pan'
-        direction='x'
+        type="pan"
+        direction="x"
        threshold={10}
-        attachTo='window'
+        attachTo="window"
        disableScroll={true} />
    ]);
  }
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@ -230,7 +230,7 @@ export class Modal implements OverlayInterface {

    return [
      <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
-      <div role='dialog' class={dialogClasses}></div>
+      <div role="dialog" class={dialogClasses}></div>
    ];
  }
 }
--- a/core/src/components/nav/nav.tsx
+++ b/core/src/components/nav/nav.tsx
@ -750,13 +750,13 @@ export class Nav implements NavOutlet {
          onStart={this.swipeBackStart.bind(this)}
          onMove={this.swipeBackProgress.bind(this)}
          onEnd={this.swipeBackEnd.bind(this)}
-          gestureName='goback-swipe'
+          gestureName="goback-swipe"
          gesturePriority={10}
-          type='pan'
-          direction='x'
+          type="pan"
+          direction="x"
          threshold={10}
-          attachTo='body'/>,
-      this.mode === 'ios' && <div class='nav-decor'/>,
+          attachTo="body"/>,
+      this.mode === 'ios' && <div class="nav-decor"/>,
      <slot></slot>
    ];
  }
--- a/core/src/components/picker-column/picker-column.tsx
+++ b/core/src/components/picker-column/picker-column.tsx
@ -406,7 +406,7 @@ export class PickerColumnCmp {

    if (col.prefix) {
      results.push(
-        <div class='picker-prefix' style={{width: col.prefixWidth!}}>
+        <div class="picker-prefix" style={{width: col.prefixWidth!}}>
          {col.prefix}
        </div>
      );
@ -418,15 +418,15 @@ export class PickerColumnCmp {
        onStart={this.onDragStart.bind(this)}
        onMove={this.onDragMove.bind(this)}
        onEnd={this.onDragEnd.bind(this)}
-        gestureName='picker-swipe'
+        gestureName="picker-swipe"
        gesturePriority={10}
-        type='pan'
-        direction='y'
+        type="pan"
+        direction="y"
        passive={false}
        threshold={0}
-        attachTo='parent'
+        attachTo="parent"
      ></ion-gesture>,
-      <div class='picker-opts' style={{maxWidth: col.optionsWidth!}}>
+      <div class="picker-opts" style={{maxWidth: col.optionsWidth!}}>
        {options.map((o, index) =>
          <button
            class={{'picker-opt': true, 'picker-opt-disabled': !!o.disabled}}
@ -440,7 +440,7 @@ export class PickerColumnCmp {

    if (col.suffix) {
      results.push(
-        <div class='picker-suffix' style={{width: col.suffixWidth!}}>
+        <div class="picker-suffix" style={{width: col.suffixWidth!}}>
          {col.suffix}
        </div>
      );
--- a/core/src/components/picker/picker.tsx
+++ b/core/src/components/picker/picker.tsx
@ -299,8 +299,8 @@ export class Picker implements OverlayInterface {

    return [
      <ion-backdrop visible={this.showBackdrop} tappable={this.enableBackdropDismiss}/>,
-      <div class='picker-wrapper' role='dialog'>
-        <div class='picker-toolbar'>
+      <div class="picker-wrapper" role="dialog">
+        <div class="picker-toolbar">
          {buttons.map(b =>
            <div class={buttonWrapperClass(b)}>
              <button onClick={() => this.buttonClick(b)} class={buttonClass(b)}>
@ -309,12 +309,12 @@ export class Picker implements OverlayInterface {
            </div>
          )}
        </div>
-        <div class='picker-columns'>
-          <div class='picker-above-highlight'></div>
+        <div class="picker-columns">
+          <div class="picker-above-highlight"></div>
          {columns.map(c =>
            <ion-picker-column col={c}></ion-picker-column>
          )}
-          <div class='picker-below-highlight'></div>
+          <div class="picker-below-highlight"></div>
        </div>
      </div>
    ];
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@ -246,8 +246,8 @@ export class Popover implements OverlayInterface {
    return [
      <ion-backdrop tappable={this.enableBackdropDismiss}/>,
      <div class={wrapperClasses}>
-        <div class='popover-arrow'></div>
-        <div class='popover-content'></div>
+        <div class="popover-arrow"></div>
+        <div class="popover-content"></div>
      </div>
    ];
  }
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@ -189,10 +189,10 @@ export class Radio implements RadioButtonInput, ComponentDidLoad, ComponentDidUn
    };
    return [
      <div class={radioClasses}>
-        <div class='radio-inner'/>
+        <div class="radio-inner"/>
      </div>,
      <input
-        type='radio'
+        type="radio"
        onClick={this.onClick.bind(this)}
        onChange={this.onChange.bind(this)}
        onFocus={this.onFocus.bind(this)}
--- a/core/src/components/range-knob/range-knob.tsx
+++ b/core/src/components/range-knob/range-knob.tsx
@ -59,11 +59,11 @@ export class RangeKnob {
  render() {
    if (this.pin) {
      return [
-        <div class='range-pin' role='presentation'>{this.val}</div>,
-        <div class='range-knob' role='presentation' />
+        <div class="range-pin" role="presentation">{this.val}</div>,
+        <div class="range-knob" role="presentation" />
      ];
    }
-    return <div class='range-knob' role='presentation' />;
+    return <div class="range-knob" role="presentation" />;
  }
 }

--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@ -414,40 +414,40 @@ export class Range implements BaseInput {

  render() {
    return [
-      <slot name='start'></slot>,
+      <slot name="start"></slot>,
      <ion-gesture
        disableScroll={true}
        onStart={this.onDragStart.bind(this)}
        onMove={this.onDragMove.bind(this)}
        onEnd={this.onDragEnd.bind(this)}
        disabled={this.disabled}
-        gestureName='range'
+        gestureName="range"
        gesturePriority={30}
-        type='pan'
-        direction='x'
+        type="pan"
+        direction="x"
        threshold={0}>

-        <div class='range-slider'>
+        <div class="range-slider">
          {this.ticks.map(t =>
            <div
              style={{ left: t.left! }}
-              role='presentation'
+              role="presentation"
              class={{ 'range-tick': true, 'range-tick-active': !!t.active }}
            />
          )}

-          <div class='range-bar' role='presentation' />
+          <div class="range-bar" role="presentation" />
          <div
-            class='range-bar range-bar-active'
-            role='presentation'
+            class="range-bar range-bar-active"
+            role="presentation"
            style={{
              left: this.barL,
              right: this.barR
            }}
          />
          <ion-range-knob
-            class='range-knob-handle'
-            knob='knobA'
+            class="range-knob-handle"
+            knob="knobA"
            pressed={this.pressedA}
            ratio={this.ratioA}
            val={this.valA}
@ -458,8 +458,8 @@ export class Range implements BaseInput {

          {this.dualKnobs
            ? <ion-range-knob
-                class='range-knob-handle'
-                knob='knobB'
+                class="range-knob-handle"
+                knob="knobB"
                pressed={this.pressedB}
                ratio={this.ratioB}
                val={this.valB}
@ -470,7 +470,7 @@ export class Range implements BaseInput {
            : null}
        </div>
      </ion-gesture>,
-      <slot name='end'></slot>
+      <slot name="end"></slot>
    ];
  }
 }
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@ -40,24 +40,24 @@ export class RefresherContent {

  protected render() {
    return [
-      <div class='refresher-pulling'>
+      <div class="refresher-pulling">
        {this.pullingIcon &&
-          <div class='refresher-pulling-icon'>
+          <div class="refresher-pulling-icon">
            <ion-icon name={this.pullingIcon}></ion-icon>
          </div>
        }
        {this.pullingText &&
-          <div class='refresher-pulling-text' innerHTML={this.pullingText}></div>
+          <div class="refresher-pulling-text" innerHTML={this.pullingText}></div>
        }
      </div>,
-      <div class='refresher-refreshing'>
+      <div class="refresher-refreshing">
        {this.refreshingSpinner &&
-          <div class='refresher-refreshing-icon'>
+          <div class="refresher-refreshing-icon">
            <ion-spinner name={this.refreshingSpinner}></ion-spinner>
          </div>
        }
        {this.refreshingText &&
-          <div class='refresher-refreshing-text' innerHTML={this.refreshingText}></div>
+          <div class="refresher-refreshing-text" innerHTML={this.refreshingText}></div>
        }
      </div>
    ];
--- a/core/src/components/reorder/reorder.tsx
+++ b/core/src/components/reorder/reorder.tsx
@ -34,7 +34,7 @@ export class Reorder {
  render() {
    return (this.custom)
      ? <slot/>
-      : <ion-icon class='reorder-icon' name='reorder'/>;
+      : <ion-icon class="reorder-icon" name="reorder"/>;
  }

 }
--- a/core/src/components/router-outlet/route-outlet.tsx
+++ b/core/src/components/router-outlet/route-outlet.tsx
@ -131,7 +131,7 @@ export class RouterOutlet implements NavOutlet {

  render() {
    return [
-      this.mode === 'ios' && <div class='nav-decor'/>,
+      this.mode === 'ios' && <div class="nav-decor"/>,
      <slot/>
    ];
  }
--- a/core/src/components/scroll/scroll.tsx
+++ b/core/src/components/scroll/scroll.tsx
@ -253,7 +253,7 @@ export class Scroll {
  render() {
    return [
      // scroll-inner is used to keep custom user padding
-      <div class='scroll-inner'>
+      <div class="scroll-inner">
        <slot></slot>
      </div>
    ];
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@ -324,23 +324,23 @@ export class Searchbar {
    const cancelButton =
      this.showCancelButton
        ? <button
-          type='button'
+          type="button"
          tabindex={this.mode === 'ios' && !this.activated ? -1 : undefined}
          onClick={this.cancelSearchbar.bind(this)}
          onMouseDown={this.cancelSearchbar.bind(this)}
          class={cancelButtonClasses}>
            { this.mode === 'md'
-              ? <ion-icon name='md-arrow-back'></ion-icon>
+              ? <ion-icon name="md-arrow-back"></ion-icon>
              : this.cancelButtonText }
        </button>
        : null;

    const searchbar: JSX.Element[] = [
-      <div class='searchbar-input-container'>
+      <div class="searchbar-input-container">
        { this.mode === 'md' ? cancelButton : null }
        <div class={searchIconClasses}></div>
        <input
-          class='searchbar-input'
+          class="searchbar-input"
          onInput={this.inputChanged.bind(this)}
          onBlur={this.inputBlurred.bind(this)}
          onFocus={this.inputFocused.bind(this)}
@ -351,8 +351,8 @@ export class Searchbar {
          autoCorrect={this.autocorrect}
          spellCheck={this.spellcheck}/>
        <button
-          type='button'
-          class='searchbar-clear-icon'
+          type="button"
+          class="searchbar-clear-icon"
          onClick={this.clearInput.bind(this)}
          onMouseDown={this.clearInput.bind(this)}>
        </button>
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@ -484,17 +484,17 @@ export class Select {

    return [
      <div
-        role='textbox'
-        aria-multiline='false'
+        role="textbox"
+        aria-multiline="false"
        class={ selectTextClasses }>{ selectText }
      </div>,
-      <div class='select-icon' role='presentation'>
-        <div class='select-icon-inner'></div>
+      <div class="select-icon" role="presentation">
+        <div class="select-icon-inner"></div>
      </div>,
      <button
-        type='button'
-        role='combobox'
-        aria-haspopup='dialog'
+        type="button"
+        role="combobox"
+        aria-haspopup="dialog"
        aria-expanded={this.isExpanded}
        aria-labelledby={this.labelId}
        aria-disabled={this.disabled ? 'true' : false}
@ -502,11 +502,11 @@ export class Select {
        onKeyUp={this.onKeyUp.bind(this)}
        onFocus={this.onFocus.bind(this)}
        onBlur={this.onBlur.bind(this)}
-        class='select-cover'>
+        class="select-cover">
        <slot></slot>
        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
      </button>,
-      <input type='hidden' name={this.name} value={parseValue(this.value)}/>
+      <input type="hidden" name={this.name} value={parseValue(this.value)}/>
    ];
  }
 }
--- a/core/src/components/slides/slides.tsx
+++ b/core/src/components/slides/slides.tsx
@ -380,8 +380,8 @@ export class Slides {

  render() {
    return (
-      <div class='swiper-container' data-dir='rtl'>
-        <div class='swiper-wrapper'>
+      <div class="swiper-container" data-dir="rtl">
+        <div class="swiper-wrapper">
          <slot />
        </div>
        <div
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@ -114,8 +114,8 @@ function buildCircle(spinner: SpinnerConfig, duration: number, index: number, to
  data.style.animationDuration = duration + 'ms';

  return (
-    <svg viewBox='0 0 64 64' style={data.style}>
-      <circle transform='translate(32,32)' r={data.r}></circle>
+    <svg viewBox="0 0 64 64" style={data.style}>
+      <circle transform="translate(32,32)" r={data.r}></circle>
    </svg>
  );
 }
@ -126,8 +126,8 @@ function buildLine(spinner: SpinnerConfig, duration: number, index: number, tota
  data.style.animationDuration = duration + 'ms';

  return (
-    <svg viewBox='0 0 64 64' style={data.style}>
-      <line transform='translate(32,32)' y1={data.y1} y2={data.y2}></line>
+    <svg viewBox="0 0 64 64" style={data.style}>
+      <line transform="translate(32,32)" y1={data.y1} y2={data.y2}></line>
    </svg>
  );
 }
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@ -82,12 +82,12 @@ export class TabButton {
    return [
      <a
        href={href}
-        class='tab-cover'
+        class="tab-cover"
        onKeyUp={this.onKeyUp.bind(this)}
        onBlur={this.onBlur.bind(this)}>
-        { tab.icon && <ion-icon class='tab-button-icon' name={tab.icon}></ion-icon> }
-        { tab.label && <span class='tab-button-text'>{tab.label}</span> }
-        { tab.badge && <ion-badge class='tab-badge' color={tab.badgeStyle}>{tab.badge}</ion-badge> }
+        { tab.icon && <ion-icon class="tab-button-icon" name={tab.icon}></ion-icon> }
+        { tab.label && <span class="tab-button-text">{tab.label}</span> }
+        { tab.badge && <ion-badge class="tab-badge" color={tab.badgeStyle}>{tab.badge}</ion-badge> }
        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
      </a>
    ];
--- a/core/src/components/tabbar/tabbar.tsx
+++ b/core/src/components/tabbar/tabbar.tsx
@ -2,6 +2,9 @@ import { Component, Element, Listen, Prop, State, Watch } from '@stencil/core';
 import { createThemedClasses } from '../../utils/theme';
 import { Mode, QueueController } from '../../index';

+export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'title-hide';
+export type TabbarPlacement = 'top' | 'bottom';
+
@Component({
  tag: 'ion-tabbar',
  styleUrls: {
@ -28,7 +31,8 @@ export class Tabbar {
  @State() canScrollRight = false;
  @State() hidden = false;

-  @Prop() placement = 'bottom';
+  @Prop() layout: TabbarLayout = 'icon-top';
+  @Prop() placement: TabbarPlacement = 'bottom';
  @Prop() selectedTab?: HTMLIonTabElement;
  @Prop() scrollable = false;
  @Prop() tabs: HTMLIonTabElement[] = [];
@ -39,7 +43,6 @@ export class Tabbar {
    this.highlight && this.updateHighlight();
  }

-  @Prop() layout = 'icon-top';
  @Prop() highlight = false;

  /**
@ -181,14 +184,14 @@ export class Tabbar {

  render() {
    const selectedTab = this.selectedTab;
-    const ionTabbarHighlight = this.highlight ? <div class='animated tabbar-highlight'/> as HTMLElement : null;
+    const ionTabbarHighlight = this.highlight ? <div class="animated tabbar-highlight"/> as HTMLElement : null;
    const buttonClasses = createThemedClasses(this.mode, this.color, 'tab-button');
    const tabButtons = this.tabs.map(tab => <ion-tab-button class={buttonClasses} tab={tab} selected={selectedTab === tab}/>);

    if (this.scrollable) {
      return [
-        <ion-button onClick={() => this.scrollByTab('left')} fill='clear' class={{inactive: !this.canScrollLeft}}>
-          <ion-icon name='arrow-dropleft'/>
+        <ion-button onClick={() => this.scrollByTab('left')} fill="clear" class={{inactive: !this.canScrollLeft}}>
+          <ion-icon name="arrow-dropleft"/>
        </ion-button>,

        <ion-scroll forceOverscroll={false} ref={(scrollEl) => this.scrollEl = scrollEl as HTMLIonScrollElement}>
@ -196,8 +199,8 @@ export class Tabbar {
          {ionTabbarHighlight}
        </ion-scroll>,

-        <ion-button onClick={() => this.scrollByTab('right')} fill='clear' class={{inactive: !this.canScrollRight}}>
-          <ion-icon name='arrow-dropright'/>
+        <ion-button onClick={() => this.scrollByTab('right')} fill="clear" class={{inactive: !this.canScrollRight}}>
+          <ion-icon name="arrow-dropright"/>
        </ion-button>
      ];
    } else {
--- a/core/src/components/tabs/tabs.tsx
+++ b/core/src/components/tabs/tabs.tsx
@ -1,6 +1,7 @@
 import { Build, Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
 import { Config, NavOutlet } from '../../index';
 import { RouteID, RouteWrite, RouterDirection } from '../router/utils/interfaces';
+import { TabbarLayout, TabbarPlacement } from '../tabbar/tabbar';


@Component({
@ -42,12 +43,12 @@ export class Tabs implements NavOutlet {
  /**
   * Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
   */
-  @Prop({ mutable: true }) tabbarLayout?: string;
+  @Prop({ mutable: true }) tabbarLayout?: TabbarLayout;

  /**
   * Set position of the tabbar: `top`, `bottom`.
   */
-  @Prop({ mutable: true }) tabbarPlacement?: string;
+  @Prop({ mutable: true }) tabbarPlacement?: TabbarPlacement;

  /**
   * If true, show the tab highlight bar under the selected tab.
@ -78,9 +79,9 @@ export class Tabs implements NavOutlet {
      this.useRouter = !!this.doc.querySelector('ion-router') && !this.el.closest('[no-router]');
    }

-    this.loadConfig('tabsPlacement', 'bottom');
-    this.loadConfig('tabsLayout', 'icon-top');
-    this.loadConfig('tabsHighlight', true);
+    this.loadConfig('tabbarLayout', 'bottom');
+    this.loadConfig('tabbarLayout', 'icon-top');
+    this.loadConfig('tabbarHighlight', false);
  }

  async componentDidLoad() {
@ -272,7 +273,7 @@ export class Tabs implements NavOutlet {

  render() {
    const dom = [
-      <div class='tabs-inner'>
+      <div class="tabs-inner">
        <slot></slot>
      </div>
    ];
--- a/core/src/components/tabs/test/placements/e2e.js
+++ b/core/src/components/tabs/test/placements/e2e.js
@ -0,0 +1,34 @@
+// 'use strict';
+
+// const { register, Page, platforms } = require('../../../../../scripts/e2e');
+// const { getElement, waitAndGetElementById, waitForTransition } = require('../../../../../scripts/e2e/utils');
+
+// class E2ETestPage extends Page {
+//   constructor(driver, platform) {
+//     super(driver, `http://localhost:3333/src/components/tabs/test/basic?ionicplatform=${platform}`);
+//   }
+// }
+
+// platforms.forEach(platform => {
+//   describe('tabs/basic', () => {
+//     register('should init', driver => {
+//       const page = new E2ETestPage(driver, platform);
+//       return page.navigate();
+//     });
+
+//     register('should check each tab', async (driver, testContext) => {
+//       testContext.timeout(60000);
+//       const page = new E2ETestPage(driver, platform);
+
+//       await waitForTransition(300);
+
+//       const tabTwoButton = await waitAndGetElementById(driver, 'tab-t-0-1');
+//       tabTwoButton.click();
+//       await waitForTransition(600);
+
+//       const tabThreeButton = await waitAndGetElementById(driver, 'tab-t-0-2');
+//       tabThreeButton.click();
+//       await waitForTransition(600);
+//     });
+//   });
+// });
--- a/core/src/components/tabs/test/placements/index.html
+++ b/core/src/components/tabs/test/placements/index.html
@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html dir="ltr">
+<head>
+  <meta charset="UTF-8">
+  <title>Tab - Basic</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+  <script src="/dist/ionic.js"></script>
+</head>
+<body>
+
+  <ion-app>
+    <ion-tabs tabbar-placement="top">
+      <ion-tab icon="star">
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab One</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          Tab One
+        </ion-content>
+
+      </ion-tab>
+
+      <ion-tab icon="globe">
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab Two</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          Tab Two
+        </ion-content>
+
+      </ion-tab>
+
+      <ion-tab icon="logo-facebook">
+
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Tab Three</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content padding>
+          Tab Three
+        </ion-content>
+
+      </ion-tab>
+
+      <ion-tab disabled icon="chatboxes" component="page-one"></ion-tab>
+    </ion-tabs>
+  </ion-app>
+</body>
+</html>
--- a/core/src/components/tabs/test/placements/readme.md
+++ b/core/src/components/tabs/test/placements/readme.md
@ -0,0 +1,11 @@
+# page-tab
+
+
+
+<!-- Auto Generated Below -->
+
+
+
+----------------------------------------------
+
+*Built by [StencilJS](https://stenciljs.com/)*
--- a/core/src/components/tabs/test/translucent/translucent-page-tab.tsx
+++ b/core/src/components/tabs/test/translucent/translucent-page-tab.tsx
@ -45,14 +45,14 @@ export class TranslucentPageTab {
      <ion-content fullscreen={true}>
        <ion-grid>
          <ion-row>
-            <ion-col col-6><f class='red'></f></ion-col>
-            <ion-col col-6><f class='green'></f></ion-col>
-            <ion-col col-6><f class='blue'></f></ion-col>
-            <ion-col col-6><f class='yellow'></f></ion-col>
-            <ion-col col-6><f class='pink'></f></ion-col>
-            <ion-col col-6><f class='purple'></f></ion-col>
-            <ion-col col-6><f class='black'></f></ion-col>
-            <ion-col col-6><f class='orange'></f></ion-col>
+            <ion-col col-6><f class="red"></f></ion-col>
+            <ion-col col-6><f class="green"></f></ion-col>
+            <ion-col col-6><f class="blue"></f></ion-col>
+            <ion-col col-6><f class="yellow"></f></ion-col>
+            <ion-col col-6><f class="pink"></f></ion-col>
+            <ion-col col-6><f class="purple"></f></ion-col>
+            <ion-col col-6><f class="black"></f></ion-col>
+            <ion-col col-6><f class="orange"></f></ion-col>
          </ion-row>
        </ion-grid>
      </ion-content>
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@ -203,12 +203,12 @@ export class Toast implements OverlayInterface {
    };
    return (
      <div class={wrapperClass}>
-        <div class='toast-container'>
+        <div class="toast-container">
          {this.message
-            ? <div class='toast-message'>{this.message}</div>
+            ? <div class="toast-message">{this.message}</div>
            : null}
          {this.showCloseButton
-            ? <ion-button fill='clear' color='light' class='toast-button' onClick={() => this.dismiss()}>
+            ? <ion-button fill="clear" color="light" class="toast-button" onClick={() => this.dismiss()}>
                {this.closeButtonText || 'Close'}
              </ion-button>
            : null}
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@ -192,13 +192,13 @@ export class Toggle implements CheckboxInput {
    return [
      <ion-gesture {...this.gestureConfig}
        disabled={this.disabled} tabIndex={-1}>
-        <div class='toggle-icon'>
-          <div class='toggle-inner'/>
+        <div class="toggle-icon">
+          <div class="toggle-inner"/>
        </div>
-        <div class='toggle-cover'/>
+        <div class="toggle-cover"/>
      </ion-gesture>,
      <input
-        type='checkbox'
+        type="checkbox"
        onChange={this.onChange.bind(this)}
        onFocus={this.onFocus.bind(this)}
        onBlur={this.onBlur.bind(this)}
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@ -53,13 +53,13 @@ export class Toolbar {

    return [
      <div class={backgroundCss}></div>,
-      <slot name='start'></slot>,
-      <slot name='secondary'></slot>,
+      <slot name="start"></slot>,
+      <slot name="secondary"></slot>,
      <div class={contentCss}>
        <slot></slot>
      </div>,
-      <slot name='primary'></slot>,
-      <slot name='end'></slot>
+      <slot name="primary"></slot>,
+      <slot name="end"></slot>
    ];
  }
 }