From 0680fe925145fbff927f1b0a73b3dd6f3ccee46e Mon Sep 17 00:00:00 2001
From: Manu MA <manu.valladolid@gmail.com>
Date: Fri, 2 Nov 2018 17:30:37 +0100
Subject: [PATCH] docs(all): add global config docs (#16193)

* docs(all): add global config docs

fixes #16109

* lint issue

* add tabButtonLayout

* tabs docs
---
 core/src/components.d.ts                      |  38 ++--
 .../infinite-scroll-content.tsx               |   2 +-
 .../infinite-scroll-content/readme.md         |   8 +-
 .../components/loading/loading-interface.ts   |   2 +-
 core/src/components/loading/loading.tsx       |   4 +-
 core/src/components/loading/readme.md         |  30 +--
 .../components/loading/test/basic/index.html  |   2 +-
 .../loading/test/preview/index.html           |   2 +-
 .../loading/test/standalone/index.html        |   2 +-
 core/src/components/loading/usage/angular.md  |   2 +-
 .../components/loading/usage/javascript.md    |   2 +-
 .../components/refresher-content/readme.md    |  12 +-
 .../refresher-content/refresher-content.tsx   |   6 +-
 core/src/components/split-pane/split-pane.tsx |   4 +-
 .../components/tab-bar/tab-bar-interface.ts   |   6 +-
 core/src/components/tab-bar/tab-bar.ios.scss  |   2 +-
 core/src/components/tab-bar/tab-bar.tsx       |   6 +-
 core/src/components/tab-button/readme.md      |  16 +-
 core/src/components/tab-button/tab-button.tsx |  16 +-
 core/src/components/tabs/readme.md            |   1 +
 core/src/components/tabs/tabs.tsx             |  10 +-
 core/src/components/tabs/usage/angular.md     |  44 ++--
 core/src/components/tabs/usage/javascript.md  |   1 +
 core/src/utils/config.ts                      | 189 ++++++++++++++----
 24 files changed, 267 insertions(+), 140 deletions(-)

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index eca38edccd..e77e31b0e6 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -56,9 +56,9 @@ import {
   Side,
   SpinnerTypes,
   StyleEvent,
-  TabbarChangedDetail,
-  TabbarClickDetail,
-  TabbarLayout,
+  TabBarChangedDetail,
+  TabButtonClickDetail,
+  TabButtonLayout,
   TextFieldTypes,
   TextInputChangeEvent,
   ToastOptions,
@@ -1632,7 +1632,7 @@ export namespace Components {
     /**
     * An animated SVG spinner that shows while loading.
     */
-    'loadingSpinner'?: SpinnerTypes;
+    'loadingSpinner'?: SpinnerTypes | null;
     /**
     * Optional text to display while loading.
     */
@@ -1642,7 +1642,7 @@ export namespace Components {
     /**
     * An animated SVG spinner that shows while loading.
     */
-    'loadingSpinner'?: SpinnerTypes;
+    'loadingSpinner'?: SpinnerTypes | null;
     /**
     * Optional text to display while loading.
     */
@@ -2316,7 +2316,7 @@ export namespace Components {
     /**
     * The name of the spinner to display.
     */
-    'spinner'?: SpinnerTypes | 'hide';
+    'spinner'?: SpinnerTypes | null;
     /**
     * If `true`, the loading indicator will be translucent.
     */
@@ -2391,7 +2391,7 @@ export namespace Components {
     /**
     * The name of the spinner to display.
     */
-    'spinner'?: SpinnerTypes | 'hide';
+    'spinner'?: SpinnerTypes | null;
     /**
     * If `true`, the loading indicator will be translucent.
     */
@@ -3492,7 +3492,7 @@ export namespace Components {
     /**
     * A static icon to display when you begin to pull down
     */
-    'pullingIcon'?: string;
+    'pullingIcon'?: string | null;
     /**
     * The text you want to display when you begin to pull down
     */
@@ -3500,7 +3500,7 @@ export namespace Components {
     /**
     * An animated SVG spinner that shows when refreshing begins
     */
-    'refreshingSpinner'?: SpinnerTypes;
+    'refreshingSpinner'?: SpinnerTypes | null;
     /**
     * The text you want to display when performing a refresh
     */
@@ -3510,7 +3510,7 @@ export namespace Components {
     /**
     * A static icon to display when you begin to pull down
     */
-    'pullingIcon'?: string;
+    'pullingIcon'?: string | null;
     /**
     * The text you want to display when you begin to pull down
     */
@@ -3518,7 +3518,7 @@ export namespace Components {
     /**
     * An animated SVG spinner that shows when refreshing begins
     */
-    'refreshingSpinner'?: SpinnerTypes;
+    'refreshingSpinner'?: SpinnerTypes | null;
     /**
     * The text you want to display when performing a refresh
     */
@@ -4442,7 +4442,7 @@ export namespace Components {
     /**
     * Set the layout of the text and icon in the tab bar.
     */
-    'layout': TabbarLayout;
+    'layout': TabButtonLayout;
     /**
     * The mode determines which platform styles to use.
     */
@@ -4464,12 +4464,12 @@ export namespace Components {
     /**
     * Set the layout of the text and icon in the tab bar.
     */
-    'layout'?: TabbarLayout;
+    'layout'?: TabButtonLayout;
     /**
     * The mode determines which platform styles to use.
     */
     'mode'?: Mode;
-    'onIonTabBarChanged'?: (event: CustomEvent<TabbarChangedDetail>) => void;
+    'onIonTabBarChanged'?: (event: CustomEvent<TabBarChangedDetail>) => void;
     /**
     * The selected tab component
     */
@@ -4494,9 +4494,9 @@ export namespace Components {
     */
     'href'?: string;
     /**
-    * Set the layout of the text and icon in the tabbar.
+    * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
     */
-    'layout': TabbarLayout;
+    'layout'?: TabButtonLayout;
     /**
     * The mode determines which platform styles to use.
     */
@@ -4520,9 +4520,9 @@ export namespace Components {
     */
     'href'?: string;
     /**
-    * Set the layout of the text and icon in the tabbar.
+    * Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
     */
-    'layout'?: TabbarLayout;
+    'layout'?: TabButtonLayout;
     /**
     * The mode determines which platform styles to use.
     */
@@ -4530,7 +4530,7 @@ export namespace Components {
     /**
     * Emitted when the tab bar is clicked
     */
-    'onIonTabButtonClick'?: (event: CustomEvent<TabbarClickDetail>) => void;
+    'onIonTabButtonClick'?: (event: CustomEvent<TabButtonClickDetail>) => void;
     /**
     * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
     */
diff --git a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
index 2573c11248..f425e56019 100644
--- a/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
+++ b/core/src/components/infinite-scroll-content/infinite-scroll-content.tsx
@@ -19,7 +19,7 @@ export class InfiniteScrollContent implements ComponentInterface {
   /**
    * An animated SVG spinner that shows while loading.
    */
-  @Prop({ mutable: true }) loadingSpinner?: SpinnerTypes;
+  @Prop({ mutable: true }) loadingSpinner?: SpinnerTypes | null;
 
   /**
    * Optional text to display while loading.
diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md
index e6139b8e17..7515af7b56 100644
--- a/core/src/components/infinite-scroll-content/readme.md
+++ b/core/src/components/infinite-scroll-content/readme.md
@@ -7,10 +7,10 @@ The `ion-infinite-scroll-content` component is the default child used by the `io
 
 ## Properties
 
-| Property         | Attribute         | Description                                       | Type                                                                                      | Default     |
-| ---------------- | ----------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
-| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` |
-| `loadingText`    | `loading-text`    | Optional text to display while loading.           | `string \| undefined`                                                                     | `undefined` |
+| Property         | Attribute         | Description                                       | Type                                                                                              | Default     |
+| ---------------- | ----------------- | ------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
+| `loadingSpinner` | `loading-spinner` | An animated SVG spinner that shows while loading. | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
+| `loadingText`    | `loading-text`    | Optional text to display while loading.           | `string \| undefined`                                                                             | `undefined` |
 
 
 ----------------------------------------------
diff --git a/core/src/components/loading/loading-interface.ts b/core/src/components/loading/loading-interface.ts
index af3934a78b..c345e90c08 100644
--- a/core/src/components/loading/loading-interface.ts
+++ b/core/src/components/loading/loading-interface.ts
@@ -1,7 +1,7 @@
 import { AnimationBuilder, Mode, SpinnerTypes } from '../../interface';
 
 export interface LoadingOptions {
-  spinner?: SpinnerTypes | 'hide';
+  spinner?: SpinnerTypes | null;
   message?: string;
   cssClass?: string | string[];
   showBackdrop?: boolean;
diff --git a/core/src/components/loading/loading.tsx b/core/src/components/loading/loading.tsx
index d651700f3f..72b2c29116 100644
--- a/core/src/components/loading/loading.tsx
+++ b/core/src/components/loading/loading.tsx
@@ -79,7 +79,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
   /**
    * The name of the spinner to display.
    */
-  @Prop({ mutable: true }) spinner?: SpinnerTypes | 'hide';
+  @Prop({ mutable: true }) spinner?: SpinnerTypes | null;
 
   /**
    * If `true`, the loading indicator will be translucent.
@@ -203,7 +203,7 @@ export class Loading implements ComponentInterface, OverlayInterface {
     return [
       <ion-backdrop visible={this.showBackdrop} tappable={false} />,
       <div class="loading-wrapper" role="dialog">
-        {this.spinner !== 'hide' && (
+        {this.spinner && (
           <div class="loading-spinner">
             <ion-spinner name={this.spinner} />
           </div>
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index 28752e6557..3b4689f460 100644
--- a/core/src/components/loading/readme.md
+++ b/core/src/components/loading/readme.md
@@ -18,21 +18,21 @@ The loading indicator can be dismissed automatically after a specific amount of
 
 ## Properties
 
-| Property          | Attribute          | Description                                                                                                      | Type                                                                                                | Default     |
-| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ----------- |
-| `animated`        | `animated`         | If `true`, the loading indicator will animate.                                                                   | `boolean`                                                                                           | `true`      |
-| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked.                                 | `boolean`                                                                                           | `false`     |
-| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined`                                                                   | `undefined` |
-| `duration`        | `duration`         | Number of milliseconds to wait before dismissing the loading indicator.                                          | `number`                                                                                            | `0`         |
-| `enterAnimation`  | --                 | Animation to use when the loading indicator is presented.                                                        | `AnimationBuilder \| undefined`                                                                     | `undefined` |
-| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                           | `boolean`                                                                                           | `true`      |
-| `leaveAnimation`  | --                 | Animation to use when the loading indicator is dismissed.                                                        | `AnimationBuilder \| undefined`                                                                     | `undefined` |
-| `message`         | `message`          | Optional text content to display in the loading indicator.                                                       | `string \| undefined`                                                                               | `undefined` |
-| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                | `"ios" \| "md"`                                                                                     | `undefined` |
-| `overlayIndex`    | `overlay-index`    |                                                                                                                  | `number`                                                                                            | `undefined` |
-| `showBackdrop`    | `show-backdrop`    | If `true`, a backdrop will be displayed behind the loading indicator.                                            | `boolean`                                                                                           | `true`      |
-| `spinner`         | `spinner`          | The name of the spinner to display.                                                                              | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "hide" \| "lines" \| "lines-small" \| undefined` | `undefined` |
-| `translucent`     | `translucent`      | If `true`, the loading indicator will be translucent.                                                            | `boolean`                                                                                           | `false`     |
+| Property          | Attribute          | Description                                                                                                      | Type                                                                                              | Default     |
+| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
+| `animated`        | `animated`         | If `true`, the loading indicator will animate.                                                                   | `boolean`                                                                                         | `true`      |
+| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked.                                 | `boolean`                                                                                         | `false`     |
+| `cssClass`        | `css-class`        | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined`                                                                 | `undefined` |
+| `duration`        | `duration`         | Number of milliseconds to wait before dismissing the loading indicator.                                          | `number`                                                                                          | `0`         |
+| `enterAnimation`  | --                 | Animation to use when the loading indicator is presented.                                                        | `AnimationBuilder \| undefined`                                                                   | `undefined` |
+| `keyboardClose`   | `keyboard-close`   | If `true`, the keyboard will be automatically dismissed when the overlay is presented.                           | `boolean`                                                                                         | `true`      |
+| `leaveAnimation`  | --                 | Animation to use when the loading indicator is dismissed.                                                        | `AnimationBuilder \| undefined`                                                                   | `undefined` |
+| `message`         | `message`          | Optional text content to display in the loading indicator.                                                       | `string \| undefined`                                                                             | `undefined` |
+| `mode`            | `mode`             | The mode determines which platform styles to use.                                                                | `"ios" \| "md"`                                                                                   | `undefined` |
+| `overlayIndex`    | `overlay-index`    |                                                                                                                  | `number`                                                                                          | `undefined` |
+| `showBackdrop`    | `show-backdrop`    | If `true`, a backdrop will be displayed behind the loading indicator.                                            | `boolean`                                                                                         | `true`      |
+| `spinner`         | `spinner`          | The name of the spinner to display.                                                                              | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
+| `translucent`     | `translucent`      | If `true`, the loading indicator will be translucent.                                                            | `boolean`                                                                                         | `false`     |
 
 
 ## Events
diff --git a/core/src/components/loading/test/basic/index.html b/core/src/components/loading/test/basic/index.html
index 941491c6c2..856be7c10f 100644
--- a/core/src/components/loading/test/basic/index.html
+++ b/core/src/components/loading/test/basic/index.html
@@ -23,7 +23,7 @@
         <ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
         <ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
diff --git a/core/src/components/loading/test/preview/index.html b/core/src/components/loading/test/preview/index.html
index 50ff3ca08f..2418b28715 100644
--- a/core/src/components/loading/test/preview/index.html
+++ b/core/src/components/loading/test/preview/index.html
@@ -23,7 +23,7 @@
         <ion-button id="basic" expand="block" onclick="presentLoading()">Show Loading</ion-button>
         <ion-button id="default" expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...'})">Show Default Loading</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</ion-button>
-        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
+        <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Please wait...', spinner: null})">Show Loading with no spinner</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true})">Show Loading with translucent</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Please wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({backdropDismiss: true})">Show Backdrop Click Loading</ion-button>
diff --git a/core/src/components/loading/test/standalone/index.html b/core/src/components/loading/test/standalone/index.html
index 660ff03aa3..427cc75108 100644
--- a/core/src/components/loading/test/standalone/index.html
+++ b/core/src/components/loading/test/standalone/index.html
@@ -13,7 +13,7 @@
 <body>
   <button id="basic" onclick="presentLoading()">Show Loading</button>
   <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
-  <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</button>
+  <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: null})">Show Loading with no spinner</button>
   <button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
   <button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
 
diff --git a/core/src/components/loading/usage/angular.md b/core/src/components/loading/usage/angular.md
index e3216c54a9..634b58920e 100644
--- a/core/src/components/loading/usage/angular.md
+++ b/core/src/components/loading/usage/angular.md
@@ -20,7 +20,7 @@ export class LoadingExample {
 
   async presentLoadingWithOptions() {
     const loading = await this.loadingController.create({
-      spinner: 'hide',
+      spinner: null,
       duration: 5000,
       message: 'Please wait...',
       translucent: true,
diff --git a/core/src/components/loading/usage/javascript.md b/core/src/components/loading/usage/javascript.md
index bfbcecafd9..926ad79d1b 100644
--- a/core/src/components/loading/usage/javascript.md
+++ b/core/src/components/loading/usage/javascript.md
@@ -15,7 +15,7 @@ async function presentLoadingWithOptions() {
   await loadingController.componentOnReady();
 
   const loading = await loadingController.create({
-    spinner: 'hide',
+    spinner: null,
     duration: 5000,
     message: 'Please wait...',
     translucent: true,
diff --git a/core/src/components/refresher-content/readme.md b/core/src/components/refresher-content/readme.md
index 62e5782071..d936d71b15 100644
--- a/core/src/components/refresher-content/readme.md
+++ b/core/src/components/refresher-content/readme.md
@@ -9,12 +9,12 @@ The refresher content contains the text, icon and spinner to display during a pu
 
 ## Properties
 
-| Property            | Attribute            | Description                                               | Type                                                                                      | Default     |
-| ------------------- | -------------------- | --------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- |
-| `pullingIcon`       | `pulling-icon`       | A static icon to display when you begin to pull down      | `string \| undefined`                                                                     | `undefined` |
-| `pullingText`       | `pulling-text`       | The text you want to display when you begin to pull down  | `string \| undefined`                                                                     | `undefined` |
-| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| undefined` | `undefined` |
-| `refreshingText`    | `refreshing-text`    | The text you want to display when performing a refresh    | `string \| undefined`                                                                     | `undefined` |
+| Property            | Attribute            | Description                                               | Type                                                                                              | Default     |
+| ------------------- | -------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ----------- |
+| `pullingIcon`       | `pulling-icon`       | A static icon to display when you begin to pull down      | `null \| string \| undefined`                                                                     | `undefined` |
+| `pullingText`       | `pulling-text`       | The text you want to display when you begin to pull down  | `string \| undefined`                                                                             | `undefined` |
+| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
+| `refreshingText`    | `refreshing-text`    | The text you want to display when performing a refresh    | `string \| undefined`                                                                             | `undefined` |
 
 
 ----------------------------------------------
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index dc3e595818..49b622cf7d 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -12,7 +12,7 @@ export class RefresherContent implements ComponentInterface {
   /**
    * A static icon to display when you begin to pull down
    */
-  @Prop({ mutable: true }) pullingIcon?: string;
+  @Prop({ mutable: true }) pullingIcon?: string | null;
 
   /**
    * The text you want to display when you begin to pull down
@@ -22,14 +22,14 @@ export class RefresherContent implements ComponentInterface {
   /**
    * An animated SVG spinner that shows when refreshing begins
    */
-  @Prop({ mutable: true }) refreshingSpinner?: SpinnerTypes;
+  @Prop({ mutable: true }) refreshingSpinner?: SpinnerTypes | null;
 
   /**
    * The text you want to display when performing a refresh
    */
   @Prop() refreshingText?: string;
 
-  componentDidLoad() {
+  componentWillLoad() {
     if (this.pullingIcon === undefined) {
       this.pullingIcon = this.config.get('refreshingIcon', 'arrow-down');
     }
diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx
index 4a622cb5ad..1a6121648b 100644
--- a/core/src/components/split-pane/split-pane.tsx
+++ b/core/src/components/split-pane/split-pane.tsx
@@ -108,7 +108,9 @@ export class SplitPane implements ComponentInterface {
     }
 
     // Listen on media query
-    const callback = (q: MediaQueryList) => this.visible = q.matches;
+    const callback = (q: MediaQueryList) => {
+      this.visible = q.matches;
+    };
     const mediaList = this.win.matchMedia(mediaQuery);
     mediaList.addListener(callback);
     this.rmL = () => mediaList.removeListener(callback);
diff --git a/core/src/components/tab-bar/tab-bar-interface.ts b/core/src/components/tab-bar/tab-bar-interface.ts
index 72ed222586..3a77b6235a 100644
--- a/core/src/components/tab-bar/tab-bar-interface.ts
+++ b/core/src/components/tab-bar/tab-bar-interface.ts
@@ -1,10 +1,10 @@
-export type TabbarLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
+export type TabButtonLayout = 'icon-top' | 'icon-start' | 'icon-end' | 'icon-bottom' | 'icon-hide' | 'label-hide';
 
-export interface TabbarChangedDetail {
+export interface TabBarChangedDetail {
   tab?: string;
 }
 
-export interface TabbarClickDetail {
+export interface TabButtonClickDetail {
   tab?: string;
   href?: string;
 }
diff --git a/core/src/components/tab-bar/tab-bar.ios.scss b/core/src/components/tab-bar/tab-bar.ios.scss
index 4179ce9bba..227667e8c4 100644
--- a/core/src/components/tab-bar/tab-bar.ios.scss
+++ b/core/src/components/tab-bar/tab-bar.ios.scss
@@ -12,7 +12,7 @@
   height: 50px;
 }
 
-// iOS Translucent Tabbar
+// iOS Translucent Tab bar
 // --------------------------------------------------
 
 :host(.tabbar-translucent) {
diff --git a/core/src/components/tab-bar/tab-bar.tsx b/core/src/components/tab-bar/tab-bar.tsx
index 295235e9c3..4099f3442d 100644
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -1,6 +1,6 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State, Watch } from '@stencil/core';
 
-import { Color, Mode, TabbarChangedDetail, TabbarLayout } from '../../interface';
+import { Color, Mode, TabBarChangedDetail, TabButtonLayout } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
 @Component({
@@ -35,7 +35,7 @@ export class TabBar implements ComponentInterface {
   /**
    * Set the layout of the text and icon in the tab bar.
    */
-  @Prop() layout: TabbarLayout = 'icon-top';
+  @Prop() layout: TabButtonLayout = 'icon-top';
 
   /**
    * The selected tab component
@@ -54,7 +54,7 @@ export class TabBar implements ComponentInterface {
   @Prop() translucent = false;
 
   /** @internal */
-  @Event() ionTabBarChanged!: EventEmitter<TabbarChangedDetail>;
+  @Event() ionTabBarChanged!: EventEmitter<TabBarChangedDetail>;
 
   @Listen('body:keyboardWillHide')
   protected onKeyboardWillHide() {
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index f5aac125d6..32b50d4120 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -10,14 +10,14 @@ See the [Tabs API Docs](../Tabs/) for more details on configuring Tabs.
 
 ## Properties
 
-| Property   | Attribute  | Description                                                                                                                                                                                                                                                            | Type                                                                                       | Default      |
-| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------ |
-| `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                                                      | `undefined`  |
-| `disabled` | `disabled` | The selected tab component                                                                                                                                                                                                                                             | `boolean`                                                                                  | `false`      |
-| `href`     | `href`     | The URL which will be used as the `href` within this tab's button anchor.                                                                                                                                                                                              | `string \| undefined`                                                                      | `undefined`  |
-| `layout`   | `layout`   | Set the layout of the text and icon in the tabbar.                                                                                                                                                                                                                     | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide"` | `'icon-top'` |
-| `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                                                            | `undefined`  |
-| `tab`      | `tab`      | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.                                                                                                                              | `string \| undefined`                                                                      | `undefined`  |
+| Property   | Attribute  | Description                                                                                                                                                                                                                                                            | Type                                                                                                    | Default     |
+| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
+| `color`    | `color`    | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined`                                                                                   | `undefined` |
+| `disabled` | `disabled` | The selected tab component                                                                                                                                                                                                                                             | `boolean`                                                                                               | `false`     |
+| `href`     | `href`     | The URL which will be used as the `href` within this tab's button anchor.                                                                                                                                                                                              | `string \| undefined`                                                                                   | `undefined` |
+| `layout`   | `layout`   | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.                                                                                                                                                                                       | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
+| `mode`     | `mode`     | The mode determines which platform styles to use.                                                                                                                                                                                                                      | `"ios" \| "md"`                                                                                         | `undefined` |
+| `tab`      | `tab`      | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.                                                                                                                              | `string \| undefined`                                                                                   | `undefined` |
 
 
 ----------------------------------------------
diff --git a/core/src/components/tab-button/tab-button.tsx b/core/src/components/tab-button/tab-button.tsx
index 29100dd256..d4106e69dc 100644
--- a/core/src/components/tab-button/tab-button.tsx
+++ b/core/src/components/tab-button/tab-button.tsx
@@ -1,8 +1,7 @@
 import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi, State } from '@stencil/core';
 
-import { Color, Mode, TabbarClickDetail, TabbarLayout } from '../../interface';
+import { Color, Config, Mode, TabBarChangedDetail, TabButtonClickDetail, TabButtonLayout } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
-import { TabbarChangedDetail } from '../tab-bar/tab-bar-interface';
 
 @Component({
   tag: 'ion-tab-button',
@@ -18,6 +17,7 @@ export class TabButton implements ComponentInterface {
 
   @Prop({ context: 'queue' }) queue!: QueueApi;
   @Prop({ context: 'document' }) doc!: Document;
+  @Prop({ context: 'config' }) config!: Config;
 
   /**
    * The selected tab component
@@ -37,9 +37,10 @@ export class TabButton implements ComponentInterface {
   @Prop() color?: Color;
 
   /**
-   * Set the layout of the text and icon in the tabbar.
+   * Set the layout of the text and icon in the tab bar.
+   * It defaults to `'icon-top'`.
    */
-  @Prop() layout: TabbarLayout = 'icon-top';
+  @Prop() layout?: TabButtonLayout;
 
   /**
    * The URL which will be used as the `href` within this tab's button anchor.
@@ -61,10 +62,10 @@ export class TabButton implements ComponentInterface {
    * Emitted when the tab bar is clicked
    * @internal
    */
-  @Event() ionTabButtonClick!: EventEmitter<TabbarClickDetail>;
+  @Event() ionTabButtonClick!: EventEmitter<TabButtonClickDetail>;
 
   @Listen('parent:ionTabBarChanged')
-  onTabbarChanged(ev: CustomEvent<TabbarChangedDetail>) {
+  onTabBarChanged(ev: CustomEvent<TabBarChangedDetail>) {
     this.selected = this.tab === ev.detail.tab;
   }
 
@@ -80,6 +81,9 @@ export class TabButton implements ComponentInterface {
   }
 
   componentWillLoad() {
+    if (this.layout === undefined) {
+      this.layout = this.config.get('tabButtonLayout', 'icon-top');
+    }
     if (this.tab === undefined) {
       console.warn(`ion-tab-button needs a tab name, so it can be selected.
   <ion-tab-button tab="TAB_NAME">`);
diff --git a/core/src/components/tabs/readme.md b/core/src/components/tabs/readme.md
index f24191af71..66e1759ad1 100644
--- a/core/src/components/tabs/readme.md
+++ b/core/src/components/tabs/readme.md
@@ -17,6 +17,7 @@ In order to do so, an `ion-tab-bar` should be provided as a direct child of `ion
     <ion-tab-button tab="home">
       <ion-label>Home</ion-label>
       <ion-icon name="home"></ion-icon>
+      <ion-badge>6</ion-badge>
     </ion-tab-button>
 
     <ion-tab-button tab="settings">
diff --git a/core/src/components/tabs/tabs.tsx b/core/src/components/tabs/tabs.tsx
index 8a39825c84..c699d2f30e 100644
--- a/core/src/components/tabs/tabs.tsx
+++ b/core/src/components/tabs/tabs.tsx
@@ -1,6 +1,6 @@
 import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State } from '@stencil/core';
 
-import { Config, NavOutlet, RouteID, RouteWrite, TabbarClickDetail } from '../../interface';
+import { Config, NavOutlet, RouteID, RouteWrite, TabButtonClickDetail } from '../../interface';
 
 @Component({
   tag: 'ion-tabs',
@@ -58,15 +58,15 @@ export class Tabs implements NavOutlet {
   }
 
   componentWillUpdate() {
-    const tabbar = this.el.querySelector('ion-tab-bar');
-    if (tabbar) {
+    const tabBar = this.el.querySelector('ion-tab-bar');
+    if (tabBar) {
       const tab = this.selectedTab ? this.selectedTab.tab : undefined;
-      tabbar.selectedTab = tab;
+      tabBar.selectedTab = tab;
     }
   }
 
   @Listen('ionTabButtonClick')
-  protected onTabClicked(ev: CustomEvent<TabbarClickDetail>) {
+  protected onTabClicked(ev: CustomEvent<TabButtonClickDetail>) {
     const { href, tab } = ev.detail;
     const selectedTab = this.tabs.find(t => t.tab === tab);
     if (this.useRouter && href !== undefined) {
diff --git a/core/src/components/tabs/usage/angular.md b/core/src/components/tabs/usage/angular.md
index 7c73f0f28f..bab7ae521b 100644
--- a/core/src/components/tabs/usage/angular.md
+++ b/core/src/components/tabs/usage/angular.md
@@ -1,28 +1,6 @@
 ```html
 <ion-tabs>
 
-  <ion-tab-bar slot="bottom">
-    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
-      <ion-icon name="calendar"></ion-icon>
-      <ion-label>Schedule</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
-      <ion-icon name="contacts"></ion-icon>
-      <ion-label>Speakers</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
-      <ion-icon name="map"></ion-icon>
-      <ion-label>Map</ion-label>
-    </ion-tab-button>
-
-    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
-      <ion-icon name="information-circle"></ion-icon>
-      <ion-label>About</ion-label>
-    </ion-tab-button>
-  </ion-tab-bar>
-
   <ion-tab tab="schedule">
     <ion-router-outlet name="schedule"></ion-router-outlet>
   </ion-tab>
@@ -39,5 +17,27 @@
     <ion-router-outlet name="about"></ion-router-outlet>
   </ion-tab>
 
+  <ion-tab-bar slot="bottom">
+    <ion-tab-button tab="schedule" href="/app/tabs/(schedule:schedule)">
+      <ion-icon name="calendar"></ion-icon>
+      <ion-label>Schedule</ion-label>
+      <ion-badge>6</ion-badge>
+    </ion-tab-button>
+
+    <ion-tab-button tab="speakers" href="/app/tabs/(speakers:speakers)">
+      <ion-icon name="contacts"></ion-icon>
+      <ion-label>Speakers</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="map" href="/app/tabs/(map:map)">
+      <ion-icon name="map"></ion-icon>
+      <ion-label>Map</ion-label>
+    </ion-tab-button>
+
+    <ion-tab-button tab="about" href="/app/tabs/(about:about)">
+      <ion-icon name="information-circle"></ion-icon>
+      <ion-label>About</ion-label>
+    </ion-tab-button>
+  </ion-tab-bar>
 </ion-tabs>
 ```
diff --git a/core/src/components/tabs/usage/javascript.md b/core/src/components/tabs/usage/javascript.md
index 5ad3af3fe0..acfd0e84ec 100644
--- a/core/src/components/tabs/usage/javascript.md
+++ b/core/src/components/tabs/usage/javascript.md
@@ -13,6 +13,7 @@
     <ion-tab-button tab="tab-schedule">
       <ion-icon name="calendar"></ion-icon>
       <ion-label>Schedule</ion-label>
+      <ion-badge>6</ion-badge>
     </ion-tab-button>
     <ion-tab-button tab="tab-speaker">
       <ion-icon name="contacts"></ion-icon>
diff --git a/core/src/utils/config.ts b/core/src/utils/config.ts
index 88832f54c1..6a8587caab 100644
--- a/core/src/utils/config.ts
+++ b/core/src/utils/config.ts
@@ -1,55 +1,174 @@
-import { AnimationBuilder, Mode } from '../interface';
+import { AnimationBuilder, Mode, SpinnerTypes, TabButtonLayout } from '../interface';
 
 export interface IonicConfig {
   /**
-   * The mode determines which platform styles to use.
+   * When it's set to `false`, disables all animation and transition across the app.
+   * Can be useful to make ionic smoother in slow devices, when animations can't run smoothly.
+   */
+  animated?: boolean;
+
+  /**
+   * The mode determines which platform styles to use for the whole application.
    */
   mode?: Mode;
-  persistConfig?: boolean;
+
+  /**
+   * Wherever ionic will respond to hardware go back buttons in an Android device.
+   * Defaults to `true` when ionic runs in a mobile device.
+   */
   hardwareBackButton?: boolean;
+
+  /**
+   * Whenever clicking the top status bar should cause the scroll to top in an application.
+   * Defaults to `true` when ionic runs in a mobile device.
+   */
   statusTap?: boolean;
 
-  inputShims?: boolean;
+  /**
+   * Overrides the default icon in all `<ion-back-button>` components.
+   */
   backButtonIcon?: string;
+
+  /**
+   * Overrides the default text in all `<ion-back-button>` components.
+   */
   backButtonText?: string;
-  spinner?: string;
-  loadingSpinner?: string;
+
+  /**
+   * Overrides the default icon in all `<ion-menu-button>` components.
+   */
   menuIcon?: string;
-  animated?: boolean;
-  pickerSpinner?: string;
-  refreshingIcon?: string;
-  refreshingSpinner?: string;
+
+  /**
+   * Overrides the default menu type for all `<ion-menu>` components.
+   * By default the menu type is chosen based in the app's mode.
+   */
   menuType?: string;
+
+  /**
+   * Overrides the default spinner in all `<ion-spinner>` components.
+   * By default the spinner type is chosen based in the mode (ios or md).
+   */
+  spinner?: SpinnerTypes;
+
+  /**
+   * Overrides the default spinner for all `ion-loading` overlays, ie. the ones
+   * created with `ion-loading-controller`.
+   */
+  loadingSpinner?: SpinnerTypes | null;
+
+  /**
+   * Overrides the default icon in all `<ion-refresh-content>` components.
+   */
+  refreshingIcon?: string;
+
+  /**
+   * Overrides the default spinner type in all `<ion-refresh-content>` components.
+   */
+  refreshingSpinner?: SpinnerTypes | null;
+
+  /**
+   * Overrides the default spinner type in all `<ion-infinite-scroll-content>` components.
+   */
+  infiniteLoadingSpinner?: SpinnerTypes | null;
+
+  /**
+   * Global switch that disables or enables "swipe-to-go-back" gesture across all
+   * `ion-nav` in your application.
+   */
+  swipeBackEnabled?: boolean;
+
+  /**
+   * Overrides the default "layout" of all `ion-bar-button` across the whole application.
+   */
+  tabButtonLayout?: TabButtonLayout;
+
+  /**
+   * Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application.
+   * This prop allows to replace the default transition and provide a custom one that applies to all navigation outlets.
+   */
+  navAnimation?: AnimationBuilder;
+
+  /**
+   * Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation".
+   */
+  actionSheetEnter?: AnimationBuilder;
+
+  /**
+   * Provides a custom enter animation for all `ion-alert`, overriding the default "animation".
+   */
+  alertEnter?: AnimationBuilder;
+
+  /**
+   * Provides a custom enter animation for all `ion-loading`, overriding the default "animation".
+   */
+  loadingEnter?: AnimationBuilder;
+
+  /**
+   * Provides a custom enter animation for all `ion-modal`, overriding the default "animation".
+   */
+  modalEnter?: AnimationBuilder;
+
+  /**
+   * Provides a custom enter animation for all `ion-popover`, overriding the default "animation".
+   */
+  popoverEnter?: AnimationBuilder;
+
+  /**
+   * Provides a custom enter animation for all `ion-toast`, overriding the default "animation".
+   */
+  toastEnter?: AnimationBuilder;
+
+  /**
+   * Provides a custom enter animation for all `ion-picker`, overriding the default "animation".
+   */
+  pickerEnter?: AnimationBuilder;
+
+  /**
+   * Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation".
+   */
+  actionSheetLeave?: AnimationBuilder;
+
+  /**
+   * Provides a custom leave animation for all `ion-alert`, overriding the default "animation".
+   */
+  alertLeave?: AnimationBuilder;
+
+  /**
+   * Provides a custom leave animation for all `ion-loading`, overriding the default "animation".
+   */
+  loadingLeave?: AnimationBuilder;
+
+  /**
+   * Provides a custom leave animation for all `ion-modal`, overriding the default "animation".
+   */
+  modalLeave?: AnimationBuilder;
+
+  /**
+   * Provides a custom leave animation for all `ion-popover`, overriding the default "animation".
+   */
+  popoverLeave?: AnimationBuilder;
+
+  /**
+   * Provides a custom leave animation for all `ion-toast`, overriding the default "animation".
+   */
+  toastLeave?: AnimationBuilder;
+
+  /**
+   * Provides a custom leave animation for all `ion-picker`, overriding the default "animation".
+   */
+  pickerLeave?: AnimationBuilder;
+
+  // PRIVATE configs
+  keyboardHeight?: number;
+  inputShims?: boolean;
   scrollPadding?: string;
   inputBlurring?: string;
   scrollAssist?: boolean;
   hideCaretOnScroll?: string;
-  infiniteLoadingSpinner?: string;
-  keyboardHeight?: number;
-  swipeBackEnabled?: boolean;
-
-  tabbarPlacement?: string;
-  tabbarLayout?: string;
-  tabbarHighlight?: boolean;
-
-  navAnimation?: AnimationBuilder;
-
-  actionSheetEnter?: AnimationBuilder;
-  alertEnter?: AnimationBuilder;
-  loadingEnter?: AnimationBuilder;
-  modalEnter?: AnimationBuilder;
-  popoverEnter?: AnimationBuilder;
-  toastEnter?: AnimationBuilder;
-  pickerEnter?: AnimationBuilder;
-
-  actionSheetLeave?: AnimationBuilder;
-  alertLeave?: AnimationBuilder;
-  loadingLeave?: AnimationBuilder;
-  modalLeave?: AnimationBuilder;
-  popoverLeave?: AnimationBuilder;
-  toastLeave?: AnimationBuilder;
-  pickerLeave?: AnimationBuilder;
 
+  // INTERNAL configs
+  persistConfig?: boolean;
   _forceStatusbarPadding?: boolean;
   _testing?: boolean;
 }