From 3cdc696847c1a93a19b972732487531a83ef2d15 Mon Sep 17 00:00:00 2001
From: mhartington <mikehartington@gmail.com>
Date: Wed, 30 May 2018 12:40:43 -0400
Subject: [PATCH] docs(): update usage and examples

---
 core/src/components.d.ts                      | 88 +++++++++++-------
 .../action-sheet-controller.tsx               |  6 +-
 .../action-sheet-controller/readme.md         | 52 ++---------
 .../alert-controller/alert-controller.tsx     |  8 +-
 .../src/components/alert-controller/readme.md |  6 ++
 core/src/components/alert/alert.tsx           |  4 +-
 core/src/components/alert/readme.md           |  4 +-
 .../animation-controller.tsx                  |  3 +
 .../components/animation-controller/readme.md |  4 +
 core/src/components/avatar/usage/angular.md   |  6 +-
 .../components/back-button/back-button.tsx    |  5 +-
 core/src/components/back-button/readme.md     | 10 +--
 .../components/back-button/usage/angular.md   |  5 +-
 core/src/components/backdrop/usage/angular.md |  6 +-
 core/src/components/badge/badge.tsx           |  8 +-
 core/src/components/badge/readme.md           | 10 +--
 core/src/components/button/button.tsx         |  5 +-
 core/src/components/button/readme.md          | 10 +--
 .../components/card-content/card-content.tsx  |  2 -
 core/src/components/card-content/readme.md    |  2 -
 .../components/card-header/card-header.tsx    |  6 +-
 core/src/components/card-header/readme.md     |  2 -
 .../card-subtitle/card-subtitle.tsx           |  7 +-
 core/src/components/card-subtitle/readme.md   |  2 -
 core/src/components/card-title/card-title.tsx |  8 +-
 core/src/components/card-title/readme.md      |  2 -
 .../src/components/card/test/basic/index.html | 90 +++++++++----------
 core/src/components/card/usage/javascript.md  | 11 +++
 core/src/components/checkbox/checkbox.tsx     |  5 +-
 core/src/components/checkbox/readme.md        | 45 +---------
 core/src/components/checkbox/usage/angular.md | 42 +++++++++
 .../components/checkbox/usage/javascript.md   | 35 ++++++++
 core/src/components/chip-button/readme.md     | 31 -------
 .../chip-button/usage/javascript.md           | 26 ++++++
 core/src/components/chip/chip.tsx             |  1 -
 core/src/components/chip/readme.md            | 53 -----------
 core/src/components/chip/usage/javascript.md  | 48 ++++++++++
 core/src/components/content/readme.md         |  7 --
 core/src/components/content/usage/angular.md  |  9 ++
 .../components/content/usage/javascript.md    | 11 +++
 core/src/components/fab-button/fab-button.tsx | 37 ++++----
 core/src/components/fab-button/readme.md      | 41 +--------
 .../components/fab-button/usage/javascript.md | 23 +++++
 43 files changed, 389 insertions(+), 397 deletions(-)
 create mode 100644 core/src/components/card/usage/javascript.md
 create mode 100644 core/src/components/checkbox/usage/angular.md
 create mode 100644 core/src/components/checkbox/usage/javascript.md
 create mode 100644 core/src/components/chip-button/usage/javascript.md
 create mode 100644 core/src/components/chip/usage/javascript.md
 create mode 100644 core/src/components/content/usage/angular.md
 create mode 100644 core/src/components/content/usage/javascript.md
 create mode 100644 core/src/components/fab-button/usage/javascript.md

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index e90f2d7570..622bc0a73c 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -14,7 +14,8 @@ declare global {
   namespace JSXElements {}
 
   interface HTMLStencilElement extends HTMLElement {
-    componentOnReady(): Promise<this|null>;
+    componentOnReady(): Promise<this>;
+    componentOnReady(done: (ele?: this) => void): void;
 
     forceUpdate(): void;
   }
@@ -104,8 +105,17 @@ declare global {
 
   namespace StencilComponents {
     interface IonActionSheetController {
+      /**
+       * Create an action sheet overlay with action sheet options.
+       */
       'create': (opts?: ActionSheetOptions | undefined) => Promise<HTMLIonActionSheetElement | null>;
+      /**
+       * Dismiss the open action sheet overlay.
+       */
       'dismiss': (data?: any, role?: string | undefined, actionSheetId?: number) => Promise<void>;
+      /**
+       * Get the most recently opened action sheet overlay.
+       */
       'getTop': () => HTMLIonActionSheetElement;
     }
   }
@@ -298,8 +308,17 @@ declare global {
 
   namespace StencilComponents {
     interface IonAlertController {
+      /**
+       * Create an alert overlay with alert options
+       */
       'create': (opts?: AlertOptions | undefined) => Promise<HTMLIonAlertElement | null>;
+      /**
+       * Dismiss the open alert overlay.
+       */
       'dismiss': (data?: any, role?: string | undefined, alertId?: number) => Promise<void>;
+      /**
+       * Get the most recently opened alert overlay.
+       */
       'getTop': () => HTMLIonAlertElement;
     }
   }
@@ -372,11 +391,11 @@ declare global {
       'message': string;
       'mode': Mode;
       /**
-       * Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circustances.  ``` const {data, role} = await alert.onDidDismiss(); ```
+       * Returns a promise that resolves when the alert did dismiss. It also accepts a callback that is called in the same circumstances.  ``` const {data, role} = await alert.onDidDismiss(); ```
        */
       'onDidDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
       /**
-       * Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circustances.  ``` const {data, role} = await alert.onWillDismiss(); ```
+       * Returns a promise that resolves when the alert will dismiss. It also accepts a callback that is called in the same circumstances.  ``` const {data, role} = await alert.onWillDismiss(); ```
        */
       'onWillDismiss': (callback?: ((detail: OverlayEventDetail) => void) | undefined) => Promise<OverlayEventDetail>;
       'overlayId': number;
@@ -545,6 +564,9 @@ declare global {
 
   namespace StencilComponents {
     interface IonAnimationController {
+      /**
+       * Creates an animation instance
+       */
       'create': (animationBuilder?: AnimationBuilder | undefined, baseEl?: any, opts?: any) => Promise<Animation>;
     }
   }
@@ -645,7 +667,7 @@ declare global {
   namespace StencilComponents {
     interface IonBackButton {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color the button should be.
        */
       'color': Color;
       /**
@@ -657,7 +679,7 @@ declare global {
        */
       'icon': string;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode': Mode;
       /**
@@ -687,7 +709,7 @@ declare global {
   namespace JSXElements {
     export interface IonBackButtonAttributes extends HTMLAttributes {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color the button should be.
        */
       'color'?: Color;
       /**
@@ -699,7 +721,7 @@ declare global {
        */
       'icon'?: string;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode'?: Mode;
       /**
@@ -775,11 +797,11 @@ declare global {
   namespace StencilComponents {
     interface IonBadge {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color the badge should be
        */
       'color': Color;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode': Mode;
     }
@@ -805,11 +827,11 @@ declare global {
   namespace JSXElements {
     export interface IonBadgeAttributes extends HTMLAttributes {
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color the badge should be
        */
       'color'?: Color;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode'?: Mode;
     }
@@ -826,7 +848,7 @@ declare global {
        */
       'buttonType': string;
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use for the button.
        */
       'color': Color;
       /**
@@ -846,7 +868,7 @@ declare global {
        */
       'href': string;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode': Mode;
       /**
@@ -896,7 +918,7 @@ declare global {
        */
       'buttonType'?: string;
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use for the button.
        */
       'color'?: Color;
       /**
@@ -916,7 +938,7 @@ declare global {
        */
       'href'?: string;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode'?: Mode;
       /**
@@ -990,7 +1012,7 @@ declare global {
   namespace StencilComponents {
     interface IonCardContent {
       /**
-       * The color to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the text.
        */
       'color': Color;
       /**
@@ -1020,7 +1042,7 @@ declare global {
   namespace JSXElements {
     export interface IonCardContentAttributes extends HTMLAttributes {
       /**
-       * The color to use for the text. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the text.
        */
       'color'?: Color;
       /**
@@ -1037,7 +1059,7 @@ declare global {
   namespace StencilComponents {
     interface IonCardHeader {
       /**
-       * The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the background.
        */
       'color': Color;
       /**
@@ -1071,7 +1093,7 @@ declare global {
   namespace JSXElements {
     export interface IonCardHeaderAttributes extends HTMLAttributes {
       /**
-       * The color to use for the background. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the background.
        */
       'color'?: Color;
       /**
@@ -1092,7 +1114,7 @@ declare global {
   namespace StencilComponents {
     interface IonCardSubtitle {
       /**
-       * The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the text color.
        */
       'color': Color;
       /**
@@ -1122,7 +1144,7 @@ declare global {
   namespace JSXElements {
     export interface IonCardSubtitleAttributes extends HTMLAttributes {
       /**
-       * The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the text color.
        */
       'color'?: Color;
       /**
@@ -1139,7 +1161,7 @@ declare global {
   namespace StencilComponents {
     interface IonCardTitle {
       /**
-       * The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the text color.
        */
       'color': Color;
       /**
@@ -1169,7 +1191,7 @@ declare global {
   namespace JSXElements {
     export interface IonCardTitleAttributes extends HTMLAttributes {
       /**
-       * The color to use for the text color. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the text color.
        */
       'color'?: Color;
       /**
@@ -1237,7 +1259,7 @@ declare global {
        */
       'checked': boolean;
       /**
-       * The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the checkbox.
        */
       'color': Color;
       /**
@@ -1253,7 +1275,7 @@ declare global {
        */
       'name': string;
       /**
-       * the value of the checkbox.
+       * The value of the checkbox.
        */
       'value': string;
     }
@@ -1283,7 +1305,7 @@ declare global {
        */
       'checked'?: boolean;
       /**
-       * The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use for the checkbox.
        */
       'color'?: Color;
       /**
@@ -1315,7 +1337,7 @@ declare global {
        */
       'onIonStyle'?: (event: CustomEvent<StyleEvent>) => void;
       /**
-       * the value of the checkbox.
+       * The value of the checkbox.
        */
       'value'?: string;
     }
@@ -1399,7 +1421,7 @@ declare global {
   namespace StencilComponents {
     interface IonChip {
       /**
-       * The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use.
        */
       'color': Color;
       /**
@@ -1429,7 +1451,7 @@ declare global {
   namespace JSXElements {
     export interface IonChipAttributes extends HTMLAttributes {
       /**
-       * The color to use. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+       * The color to use.
        */
       'color'?: Color;
       /**
@@ -1735,7 +1757,7 @@ declare global {
        */
       'activated': boolean;
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use for the button.
        */
       'color': Color;
       /**
@@ -1747,7 +1769,7 @@ declare global {
        */
       'href': string;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode': Mode;
       'show': boolean;
@@ -1782,7 +1804,7 @@ declare global {
        */
       'activated'?: boolean;
       /**
-       * The color to use from your Sass `$colors` map. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information, see [Theming your App](/docs/theming/theming-your-app).
+       * The color to use for the button.
        */
       'color'?: Color;
       /**
@@ -1794,7 +1816,7 @@ declare global {
        */
       'href'?: string;
       /**
-       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+       * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`.
        */
       'mode'?: Mode;
       'show'?: boolean;
diff --git a/core/src/components/action-sheet-controller/action-sheet-controller.tsx b/core/src/components/action-sheet-controller/action-sheet-controller.tsx
index a6b72e8ba6..c62b02521a 100644
--- a/core/src/components/action-sheet-controller/action-sheet-controller.tsx
+++ b/core/src/components/action-sheet-controller/action-sheet-controller.tsx
@@ -27,7 +27,7 @@ export class ActionSheetController implements OverlayController {
     removeLastOverlay(this.actionSheets);
   }
 
-  /*
+  /**
    * Create an action sheet overlay with action sheet options.
    */
   @Method()
@@ -35,7 +35,7 @@ export class ActionSheetController implements OverlayController {
     return createOverlay(this.doc.createElement('ion-action-sheet'), opts);
   }
 
-  /*
+  /**
    * Dismiss the open action sheet overlay.
    */
   @Method()
@@ -43,7 +43,7 @@ export class ActionSheetController implements OverlayController {
     return dismissOverlay(data, role, this.actionSheets, actionSheetId);
   }
 
-  /*
+  /**
    * Get the most recently opened action sheet overlay.
    */
   @Method()
diff --git a/core/src/components/action-sheet-controller/readme.md b/core/src/components/action-sheet-controller/readme.md
index 57cbf4a465..b76922c43e 100644
--- a/core/src/components/action-sheet-controller/readme.md
+++ b/core/src/components/action-sheet-controller/readme.md
@@ -2,52 +2,6 @@
 
 Action Sheet controllers programmatically control the action sheet component. Action Sheets can be created and dismissed from the action sheet controller. View the [Action Sheet](../../action-sheet/ActionSheet) documentation for a full list of options to pass upon creation.
 
-```javascript
-async function presentBasic() {
-  const actionSheetController = document.querySelector('ion-action-sheet-controller');
-  await actionSheetController.componentOnReady();
-
-  const actionSheetElement = await actionSheetController.create({
-    header: "Albums",
-    buttons: [{
-      text: 'Delete',
-      role: 'destructive',
-      icon: 'trash',
-      handler: () => {
-        console.log('Delete clicked');
-      }
-    }, {
-      text: 'Share',
-      icon: 'share',
-      handler: () => {
-        console.log('Share clicked');
-      }
-    }, {
-      text: 'Play (open modal)',
-      icon: 'arrow-dropright-circle',
-      handler: () => {
-        console.log('Play clicked');
-      }
-    }, {
-      text: 'Favorite',
-      icon: 'heart',
-      handler: () => {
-        console.log('Favorite clicked');
-      }
-    }, {
-      text: 'Cancel',
-      icon: 'close',
-      role: 'cancel',
-      handler: () => {
-        console.log('Cancel clicked');
-      }
-    }]
-  });
-  await actionSheetElement.present();
-}
-```
-
-
 <!-- Auto Generated Below -->
 
 
@@ -55,12 +9,18 @@ async function presentBasic() {
 
 #### create()
 
+Create an action sheet overlay with action sheet options.
+
 
 #### dismiss()
 
+Dismiss the open action sheet overlay.
+
 
 #### getTop()
 
+Get the most recently opened action sheet overlay.
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/alert-controller/alert-controller.tsx b/core/src/components/alert-controller/alert-controller.tsx
index 632a47df60..d3bcf6b78f 100644
--- a/core/src/components/alert-controller/alert-controller.tsx
+++ b/core/src/components/alert-controller/alert-controller.tsx
@@ -27,15 +27,15 @@ export class AlertController implements OverlayController {
     removeLastOverlay(this.alerts);
   }
 
-  /*
-   * Create an alert overlay with alert options.
+  /**
+   * Create an alert overlay with alert options
    */
   @Method()
   create(opts?: AlertOptions): Promise<HTMLIonAlertElement | null> {
     return createOverlay(this.doc.createElement('ion-alert'), opts);
   }
 
-  /*
+  /**
    * Dismiss the open alert overlay.
    */
   @Method()
@@ -43,7 +43,7 @@ export class AlertController implements OverlayController {
     return dismissOverlay(data, role, this.alerts, alertId);
   }
 
-  /*
+  /**
    * Get the most recently opened alert overlay.
    */
   @Method()
diff --git a/core/src/components/alert-controller/readme.md b/core/src/components/alert-controller/readme.md
index b5197d9dbe..deb5ee3347 100644
--- a/core/src/components/alert-controller/readme.md
+++ b/core/src/components/alert-controller/readme.md
@@ -26,12 +26,18 @@ async function presentAlert() {
 
 #### create()
 
+Create an alert overlay with alert options
+
 
 #### dismiss()
 
+Dismiss the open alert overlay.
+
 
 #### getTop()
 
+Get the most recently opened alert overlay.
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx
index 38cfe14eae..1056eaea7e 100644
--- a/core/src/components/alert/alert.tsx
+++ b/core/src/components/alert/alert.tsx
@@ -193,7 +193,7 @@ export class Alert implements OverlayInterface {
 
   /**
    * Returns a promise that resolves when the alert did dismiss. It also accepts a callback
-   * that is called in the same circustances.
+   * that is called in the same circumstances.
    *
    * ```
    * const {data, role} = await alert.onDidDismiss();
@@ -206,7 +206,7 @@ export class Alert implements OverlayInterface {
 
   /**
    * Returns a promise that resolves when the alert will dismiss. It also accepts a callback
-   * that is called in the same circustances.
+   * that is called in the same circumstances.
    *
    * ```
    * const {data, role} = await alert.onWillDismiss();
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index 091a6610a0..b175e6d03e 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -255,7 +255,7 @@ Dismiss the alert overlay after it has been presented.
 #### onDidDismiss()
 
 Returns a promise that resolves when the alert did dismiss. It also accepts a callback
-that is called in the same circustances.
+that is called in the same circumstances.
 
 ```
 const {data, role} = await alert.onDidDismiss();
@@ -265,7 +265,7 @@ const {data, role} = await alert.onDidDismiss();
 #### onWillDismiss()
 
 Returns a promise that resolves when the alert will dismiss. It also accepts a callback
-that is called in the same circustances.
+that is called in the same circumstances.
 
 ```
 const {data, role} = await alert.onWillDismiss();
diff --git a/core/src/components/animation-controller/animation-controller.tsx b/core/src/components/animation-controller/animation-controller.tsx
index 1d1c899203..2bcb6d2d4c 100644
--- a/core/src/components/animation-controller/animation-controller.tsx
+++ b/core/src/components/animation-controller/animation-controller.tsx
@@ -8,6 +8,9 @@ import { Animator } from './animator';
 })
 export class AnimationControllerImpl implements AnimationController {
 
+  /**
+   * Creates an animation instance
+   */
   @Method()
   create(animationBuilder?: AnimationBuilder, baseEl?: any, opts?: any): Promise<Animation> {
     if (animationBuilder) {
diff --git a/core/src/components/animation-controller/readme.md b/core/src/components/animation-controller/readme.md
index a3b65f4844..dc55bfb4e5 100644
--- a/core/src/components/animation-controller/readme.md
+++ b/core/src/components/animation-controller/readme.md
@@ -1,5 +1,7 @@
 # ion-animation-controller
+Internal to `ionic/core`.
 
+Used to create an animation instance.
 
 
 <!-- Auto Generated Below -->
@@ -9,6 +11,8 @@
 
 #### create()
 
+Creates an animation instance
+
 
 
 ----------------------------------------------
diff --git a/core/src/components/avatar/usage/angular.md b/core/src/components/avatar/usage/angular.md
index 6255ae3e9b..4f7cbeeaae 100644
--- a/core/src/components/avatar/usage/angular.md
+++ b/core/src/components/avatar/usage/angular.md
@@ -1,18 +1,18 @@
 ```html
 <ion-avatar>
-  <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  <img [src]="user.img">
 </ion-avatar>
 
 <ion-chip>
   <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    <img [src]="user.img">
   </ion-avatar>
   <ion-label>Chip Avatar</ion-label>
 </ion-chip>
 
 <ion-item>
   <ion-avatar slot="start">
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+    <img [src]="user.img">
   </ion-avatar>
   <ion-label>Item Avatar</ion-label>
 </ion-item>
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 5de7ebe4b6..167657c66c 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -20,16 +20,13 @@ export class BackButton {
   @Prop({ context: 'window' }) win!: Window;
 
   /**
-   * The color to use from your Sass `$colors` map.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   * The color the button should be.
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;
 
diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md
index 9ade5dc1e3..f0bbcc2e5b 100644
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -14,9 +14,7 @@ To change what is displayed in the back button, use the `text` and `icon` proper
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color the button should be.
 
 
 #### defaultHref
@@ -39,7 +37,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### text
@@ -55,9 +52,7 @@ The text to display in the back button.
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color the button should be.
 
 
 #### default-href
@@ -80,7 +75,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### text
diff --git a/core/src/components/back-button/usage/angular.md b/core/src/components/back-button/usage/angular.md
index 64bee569c9..fd13ee590f 100644
--- a/core/src/components/back-button/usage/angular.md
+++ b/core/src/components/back-button/usage/angular.md
@@ -21,7 +21,10 @@
 <ion-header>
   <ion-toolbar>
     <ion-buttons slot="start">
-      <ion-back-button text="Volver" icon="close"></ion-back-button>
+      <ion-back-button
+          [text]="buttonText"
+          [icon]="buttonIcon">
+      </ion-back-button>
     </ion-buttons>
   </ion-toolbar>
 </ion-header>
diff --git a/core/src/components/backdrop/usage/angular.md b/core/src/components/backdrop/usage/angular.md
index 85c6a85333..8e454fe310 100644
--- a/core/src/components/backdrop/usage/angular.md
+++ b/core/src/components/backdrop/usage/angular.md
@@ -12,7 +12,11 @@
 <ion-backdrop stopPropagation="false"></ion-backdrop>
 
 <!-- Backdrop that sets dynamic properties -->
-<ion-backdrop [tappable]="enableBackdropDismiss" [visible]="showBackdrop" [stopPropagation]="shouldPropagate"></ion-backdrop>
+<ion-backdrop
+  [tappable]="enableBackdropDismiss"
+  [visible]="showBackdrop"
+  [stopPropagation]="shouldPropagate">
+</ion-backdrop>
 ```
 
 ```typescript
diff --git a/core/src/components/badge/badge.tsx b/core/src/components/badge/badge.tsx
index 515af1ecad..444e10a38f 100644
--- a/core/src/components/badge/badge.tsx
+++ b/core/src/components/badge/badge.tsx
@@ -1,7 +1,6 @@
 import { Component, Prop } from '@stencil/core';
 import { Color, Mode } from '../../interface';
 
-
 @Component({
   tag: 'ion-badge',
   styleUrls: {
@@ -13,19 +12,14 @@ import { Color, Mode } from '../../interface';
   }
 })
 export class Badge {
-
   /**
-   * The color to use from your Sass `$colors` map.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   * The color the badge should be
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;
-
 }
diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md
index d782f806d6..d66bc264d4 100644
--- a/core/src/components/badge/readme.md
+++ b/core/src/components/badge/readme.md
@@ -12,9 +12,7 @@ Badges are inline block elements that usually appear near another element. Typic
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color the badge should be
 
 
 #### mode
@@ -23,7 +21,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 ## Attributes
@@ -32,9 +29,7 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color the badge should be
 
 
 #### mode
@@ -43,7 +38,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 429fe38844..9274ebd90f 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -18,16 +18,13 @@ export class Button {
   @State() keyFocus = false;
 
   /**
-   * The color to use from your Sass `$colors` map.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   * The color to use for the button.
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;
 
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index 9c2fa2b93d..92a70a44b5 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -49,9 +49,7 @@ Possible values are: `"button"`, `"bar-button"`.
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color to use for the button.
 
 
 #### disabled
@@ -92,7 +90,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### routerDirection
@@ -149,9 +146,7 @@ Possible values are: `"button"`, `"bar-button"`.
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color to use for the button.
 
 
 #### disabled
@@ -192,7 +187,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### router-direction
diff --git a/core/src/components/card-content/card-content.tsx b/core/src/components/card-content/card-content.tsx
index c8d6b76ed2..69f3e647ee 100644
--- a/core/src/components/card-content/card-content.tsx
+++ b/core/src/components/card-content/card-content.tsx
@@ -14,7 +14,6 @@ import { Color, Mode } from '../../interface';
 export class CardContent {
   /**
    * The color to use for the text.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
   @Prop() color?: Color;
 
@@ -23,5 +22,4 @@ export class CardContent {
    * Possible values are: `"ios"` or `"md"`.
    */
   @Prop() mode!: Mode;
-
 }
diff --git a/core/src/components/card-content/readme.md b/core/src/components/card-content/readme.md
index 299943cdfd..f35f81747b 100644
--- a/core/src/components/card-content/readme.md
+++ b/core/src/components/card-content/readme.md
@@ -14,7 +14,6 @@ It is recommended that any text content for a card should be placed in an `ion-c
 string
 
 The color to use for the text.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
@@ -32,7 +31,6 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 The color to use for the text.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
diff --git a/core/src/components/card-header/card-header.tsx b/core/src/components/card-header/card-header.tsx
index 98dfb0733b..bd5d6197b6 100644
--- a/core/src/components/card-header/card-header.tsx
+++ b/core/src/components/card-header/card-header.tsx
@@ -16,7 +16,6 @@ import { createThemedClasses } from '../../utils/theme';
 export class CardHeader {
   /**
    * The color to use for the background.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
   @Prop() color?: Color;
 
@@ -32,7 +31,9 @@ export class CardHeader {
   @Prop() translucent = false;
 
   hostData() {
-    const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'card-header-translucent') : {};
+    const themedClasses = this.translucent
+      ? createThemedClasses(this.mode, this.color, 'card-header-translucent')
+      : {};
 
     const hostClasses = {
       ...themedClasses
@@ -42,5 +43,4 @@ export class CardHeader {
       class: hostClasses
     };
   }
-
 }
diff --git a/core/src/components/card-header/readme.md b/core/src/components/card-header/readme.md
index f28cee5b96..3f92e722ba 100644
--- a/core/src/components/card-header/readme.md
+++ b/core/src/components/card-header/readme.md
@@ -12,7 +12,6 @@
 string
 
 The color to use for the background.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
@@ -37,7 +36,6 @@ If true, the card header will be translucent. Defaults to `false`.
 string
 
 The color to use for the background.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
diff --git a/core/src/components/card-subtitle/card-subtitle.tsx b/core/src/components/card-subtitle/card-subtitle.tsx
index e65199a8a9..d1581d5562 100644
--- a/core/src/components/card-subtitle/card-subtitle.tsx
+++ b/core/src/components/card-subtitle/card-subtitle.tsx
@@ -1,7 +1,6 @@
-import { Component, Prop} from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 import { Color, Mode } from '../../interface';
 
-
 @Component({
   tag: 'ion-card-subtitle',
   styleUrls: {
@@ -15,7 +14,6 @@ import { Color, Mode } from '../../interface';
 export class CardSubtitle {
   /**
    * The color to use for the text color.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
   @Prop() color?: Color;
 
@@ -27,9 +25,8 @@ export class CardSubtitle {
 
   hostData() {
     return {
-      'role': 'heading',
+      role: 'heading',
       'aria-level': '3'
     };
   }
-
 }
diff --git a/core/src/components/card-subtitle/readme.md b/core/src/components/card-subtitle/readme.md
index 8ab895951e..eb638612b4 100644
--- a/core/src/components/card-subtitle/readme.md
+++ b/core/src/components/card-subtitle/readme.md
@@ -12,7 +12,6 @@
 string
 
 The color to use for the text color.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
@@ -30,7 +29,6 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 The color to use for the text color.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
diff --git a/core/src/components/card-title/card-title.tsx b/core/src/components/card-title/card-title.tsx
index 0441e41132..6eb87c0655 100644
--- a/core/src/components/card-title/card-title.tsx
+++ b/core/src/components/card-title/card-title.tsx
@@ -1,7 +1,6 @@
-import { Component, Prop} from '@stencil/core';
+import { Component, Prop } from '@stencil/core';
 import { Color, Mode } from '../../interface';
 
-
 @Component({
   tag: 'ion-card-title',
   styleUrls: {
@@ -13,10 +12,8 @@ import { Color, Mode } from '../../interface';
   }
 })
 export class CardTitle {
-
   /**
    * The color to use for the text color.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
   @Prop() color?: Color;
 
@@ -28,9 +25,8 @@ export class CardTitle {
 
   hostData() {
     return {
-      'role': 'heading',
+      role: 'heading',
       'aria-level': '2'
     };
   }
-
 }
diff --git a/core/src/components/card-title/readme.md b/core/src/components/card-title/readme.md
index 659e26795c..c88b6b7a3d 100644
--- a/core/src/components/card-title/readme.md
+++ b/core/src/components/card-title/readme.md
@@ -13,7 +13,6 @@
 string
 
 The color to use for the text color.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
@@ -31,7 +30,6 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 The color to use for the text color.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
diff --git a/core/src/components/card/test/basic/index.html b/core/src/components/card/test/basic/index.html
index 4290b8064e..a4d42332d2 100644
--- a/core/src/components/card/test/basic/index.html
+++ b/core/src/components/card/test/basic/index.html
@@ -11,60 +11,58 @@
 <body>
   <ion-app>
 
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Card - Basic</ion-title>
-        </ion-toolbar>
-      </ion-header>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Card - Basic</ion-title>
+      </ion-toolbar>
+    </ion-header>
 
-      <ion-content id="content">
-        <ion-card>
-          <ion-card-header>
-            <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
-            <ion-card-title>Card Title</ion-card-title>
-          </ion-card-header>
+    <ion-content id="content">
+      <ion-card>
+        <ion-card-header>
+          <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
+          <ion-card-title>Card Title</ion-card-title>
+        </ion-card-header>
 
-          <ion-card-content>
-            Keep close to Nature's heart... and break clear away, once in awhile,
-            and climb a mountain or spend a week in the woods. Wash your spirit clean.
-          </ion-card-content>
-        </ion-card>
+        <ion-card-content>
+          Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
+        </ion-card-content>
+      </ion-card>
 
-        <ion-card>
-          <ion-item>
-            <ion-icon name="pin" slot="start"></ion-icon>
-            <ion-label>ion-item in a card, icon left, button right</ion-label>
-            <ion-button fill="outline" slot="end">View</ion-button>
-          </ion-item>
+      <ion-card>
+        <ion-item>
+          <ion-icon name="pin" slot="start"></ion-icon>
+          <ion-label>ion-item in a card, icon left, button right</ion-label>
+          <ion-button fill="outline" slot="end">View</ion-button>
+        </ion-item>
 
-          <ion-card-content>
-            This is content, without any paragraph or header tags,
-            within an ion-card-content element.
-          </ion-card-content>
-        </ion-card>
+        <ion-card-content>
+          This is content, without any paragraph or header tags, within an ion-card-content element.
+        </ion-card-content>
+      </ion-card>
 
-        <ion-card>
-          <ion-item href="#" class="activated">
-            <ion-icon name="wifi" slot="start"></ion-icon>
-            <ion-label>Card Link Item 1 .activated</ion-label>
-          </ion-item>
+      <ion-card>
+        <ion-item href="#" class="activated">
+          <ion-icon name="wifi" slot="start"></ion-icon>
+          <ion-label>Card Link Item 1 .activated</ion-label>
+        </ion-item>
 
-          <ion-item href="#">
-            <ion-icon name="wine" slot="start"></ion-icon>
-            <ion-label>Card Link Item 2</ion-label>
-          </ion-item>
+        <ion-item href="#">
+          <ion-icon name="wine" slot="start"></ion-icon>
+          <ion-label>Card Link Item 2</ion-label>
+        </ion-item>
 
-          <ion-item class="activated">
-            <ion-icon name="warning" slot="start"></ion-icon>
-            <ion-label>Card Button Item 1 .activated</ion-label>
-          </ion-item>
+        <ion-item class="activated">
+          <ion-icon name="warning" slot="start"></ion-icon>
+          <ion-label>Card Button Item 1 .activated</ion-label>
+        </ion-item>
 
-          <ion-item>
-            <ion-icon name="walk" slot="start"></ion-icon>
-            <ion-label>Card Button Item 2</ion-label>
-          </ion-item>
-        </ion-card>
-      </ion-content>
+        <ion-item>
+          <ion-icon name="walk" slot="start"></ion-icon>
+          <ion-label>Card Button Item 2</ion-label>
+        </ion-item>
+      </ion-card>
+    </ion-content>
 
   </ion-app>
   <style>
diff --git a/core/src/components/card/usage/javascript.md b/core/src/components/card/usage/javascript.md
new file mode 100644
index 0000000000..3281700fcf
--- /dev/null
+++ b/core/src/components/card/usage/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-card>
+  <ion-card-header>
+    <ion-card-title>Hello There</ion-card-title>
+    <ion-card-subtitle>Some subtext</ion-card-subtitle>
+  </ion-card-header>
+  <ion-card-content>
+    <h1>General Kenobi</h1>
+  </ion-card-content>
+</ion-card>
+```
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 9c2555a863..c999416281 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -23,8 +23,7 @@ export class Checkbox implements CheckboxInput {
   @State() keyFocus = false;
 
   /**
-   * The color to use.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+   * The color to use for the checkbox.
    */
   @Prop() color?: Color;
 
@@ -50,7 +49,7 @@ export class Checkbox implements CheckboxInput {
   @Prop() disabled = false;
 
   /**
-   * the value of the checkbox.
+   * The value of the checkbox.
    */
   @Prop() value = 'on';
 
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index 9e8fe388ba..ca31b0eb6d 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -3,41 +3,6 @@
 Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
 
 
-```html
-<!-- Default Checkbox -->
-<ion-checkbox></ion-checkbox>
-
-<!-- Disabled Checkbox -->
-<ion-checkbox disabled></ion-checkbox>
-
-<!-- Checked Checkbox -->
-<ion-checkbox checked></ion-checkbox>
-
-<!-- Checkbox Colors -->
-<ion-checkbox color="primary"></ion-checkbox>
-<ion-checkbox color="secondary"></ion-checkbox>
-<ion-checkbox color="danger"></ion-checkbox>
-<ion-checkbox color="light"></ion-checkbox>
-<ion-checkbox color="dark"></ion-checkbox>
-
-<!-- Checkboxes in a List -->
-<ion-list>
-  <ion-item>
-    <ion-label>Pepperoni</ion-label>
-    <ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Sausage</ion-label>
-    <ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
-  </ion-item>
-
-  <ion-item>
-    <ion-label>Mushrooms</ion-label>
-    <ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
-  </ion-item>
-</ion-list>
-```
 
 
 <!-- Auto Generated Below -->
@@ -56,8 +21,7 @@ If true, the checkbox is selected. Defaults to `false`.
 
 string
 
-The color to use.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+The color to use for the checkbox.
 
 
 #### disabled
@@ -86,7 +50,7 @@ The name of the control, which is submitted with the form data.
 
 string
 
-the value of the checkbox.
+The value of the checkbox.
 
 
 ## Attributes
@@ -102,8 +66,7 @@ If true, the checkbox is selected. Defaults to `false`.
 
 string
 
-The color to use.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+The color to use for the checkbox.
 
 
 #### disabled
@@ -132,7 +95,7 @@ The name of the control, which is submitted with the form data.
 
 string
 
-the value of the checkbox.
+The value of the checkbox.
 
 
 ## Events
diff --git a/core/src/components/checkbox/usage/angular.md b/core/src/components/checkbox/usage/angular.md
new file mode 100644
index 0000000000..496621b648
--- /dev/null
+++ b/core/src/components/checkbox/usage/angular.md
@@ -0,0 +1,42 @@
+```html
+<!-- Default Checkbox -->
+<ion-checkbox></ion-checkbox>
+
+<!-- Disabled Checkbox -->
+<ion-checkbox disabled="true"></ion-checkbox>
+
+<!-- Checked Checkbox -->
+<ion-checkbox checked="true"></ion-checkbox>
+
+<!-- Checkbox Colors -->
+<ion-checkbox color="primary"></ion-checkbox>
+<ion-checkbox color="secondary"></ion-checkbox>
+<ion-checkbox color="danger"></ion-checkbox>
+<ion-checkbox color="light"></ion-checkbox>
+<ion-checkbox color="dark"></ion-checkbox>
+
+<!-- Checkboxes in a List -->
+<ion-list>
+  <ion-item *ngFor="let entry of form">
+    <ion-label>{{entry.val}}</ion-label>
+    <ion-checkbox slot="end" [(ngModel)]="entry.isChecked"></ion-checkbox>
+  </ion-item>
+</ion-list>
+```
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-page-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss']
+})
+export class HomePage {
+  public form = [
+      { val: 'Pepperoni', isChecked: true },
+      { val: 'Sausage', isChecked: false },
+      { val: 'Mushroom', isChecked: false }
+    ];
+}
+```
diff --git a/core/src/components/checkbox/usage/javascript.md b/core/src/components/checkbox/usage/javascript.md
new file mode 100644
index 0000000000..ec86e6d61b
--- /dev/null
+++ b/core/src/components/checkbox/usage/javascript.md
@@ -0,0 +1,35 @@
+```html
+<!-- Default Checkbox -->
+<ion-checkbox></ion-checkbox>
+
+<!-- Disabled Checkbox -->
+<ion-checkbox disabled></ion-checkbox>
+
+<!-- Checked Checkbox -->
+<ion-checkbox checked></ion-checkbox>
+
+<!-- Checkbox Colors -->
+<ion-checkbox color="primary"></ion-checkbox>
+<ion-checkbox color="secondary"></ion-checkbox>
+<ion-checkbox color="danger"></ion-checkbox>
+<ion-checkbox color="light"></ion-checkbox>
+<ion-checkbox color="dark"></ion-checkbox>
+
+<!-- Checkboxes in a List -->
+<ion-list>
+  <ion-item>
+    <ion-label>Pepperoni</ion-label>
+    <ion-checkbox slot="end" value="pepperoni" checked></ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Sausage</ion-label>
+    <ion-checkbox slot="end" value="sausage" disabled></ion-checkbox>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Mushrooms</ion-label>
+    <ion-checkbox slot="end" value="mushrooms"></ion-checkbox>
+  </ion-item>
+</ion-list>
+```
diff --git a/core/src/components/chip-button/readme.md b/core/src/components/chip-button/readme.md
index 1d0b22091f..0da0733247 100644
--- a/core/src/components/chip-button/readme.md
+++ b/core/src/components/chip-button/readme.md
@@ -1,38 +1,7 @@
 # ion-chip-button
 
-
 A chip-button is an inset button that is placed inside of a chip.
 
-
-```html
-
-<ion-chip>
-  <ion-label>Button Chip</ion-label>
-  <ion-chip-button fill="clear" color="light">
-    <ion-icon name="close-circle"></ion-icon>
-  </ion-chip-button>
-</ion-chip>
-
-<ion-chip>
-  <ion-icon name="pin" color="primary"></ion-icon>
-  <ion-label>Icon Chip</ion-label>
-  <ion-chip-button>
-    <ion-icon name="close"></ion-icon>
-  </ion-chip-button>
-</ion-chip>
-
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Avatar Chip</ion-label>
-  <ion-chip-button fill="clear" color="dark">
-    <ion-icon name="close-circle"></ion-icon>
-  </ion-chip-button>
-</ion-chip>
-```
-
-
 <!-- Auto Generated Below -->
 
 
diff --git a/core/src/components/chip-button/usage/javascript.md b/core/src/components/chip-button/usage/javascript.md
new file mode 100644
index 0000000000..964ea06b3c
--- /dev/null
+++ b/core/src/components/chip-button/usage/javascript.md
@@ -0,0 +1,26 @@
+```html
+<ion-chip>
+  <ion-label>Button Chip</ion-label>
+  <ion-chip-button fill="clear" color="light">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin" color="primary"></ion-icon>
+  <ion-label>Icon Chip</ion-label>
+  <ion-chip-button>
+    <ion-icon name="close"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Avatar Chip</ion-label>
+  <ion-chip-button fill="clear" color="dark">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+```
diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx
index d664274ca9..09e2cf083a 100644
--- a/core/src/components/chip/chip.tsx
+++ b/core/src/components/chip/chip.tsx
@@ -15,7 +15,6 @@ import { Color, Mode } from '../../interface';
 export class Chip {
   /**
    * The color to use.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
    */
   @Prop() color?: Color;
 
diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md
index 1283a76753..3396551660 100644
--- a/core/src/components/chip/readme.md
+++ b/core/src/components/chip/readme.md
@@ -2,57 +2,6 @@
 
 Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, buttons, and icons.
 
-
-```html
-<ion-chip>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-label color="secondary">Secondary Label</ion-label>
-</ion-chip>
-
-<ion-chip color="secondary">
-  <ion-label color="dark">Secondary w/ Dark label</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-icon name="pin"></ion-icon>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-icon name="heart" color="dark"></ion-icon>
-  <ion-label>Default</ion-label>
-</ion-chip>
-
-<ion-chip>
-  <ion-label>Button Chip</ion-label>
-  <ion-chip-button fill="clear" color="light">
-    <ion-icon name="close-circle"></ion-icon>
-  </ion-chip-button>
-</ion-chip>
-
-<ion-chip>
-  <ion-icon name="pin" color="primary"></ion-icon>
-  <ion-label>Icon Chip</ion-label>
-  <ion-chip-button>
-    <ion-icon name="close"></ion-icon>
-  </ion-chip-button>
-</ion-chip>
-
-<ion-chip>
-  <ion-avatar>
-    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
-  </ion-avatar>
-  <ion-label>Avatar Chip</ion-label>
-  <ion-chip-button fill="clear" color="dark">
-    <ion-icon name="close-circle"></ion-icon>
-  </ion-chip-button>
-</ion-chip>
-```
-
-
 <!-- Auto Generated Below -->
 
 
@@ -63,7 +12,6 @@ Chips represent complex entities in small blocks, such as a contact. A chip can
 string
 
 The color to use.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
@@ -81,7 +29,6 @@ Possible values are: `"ios"` or `"md"`.
 string
 
 The color to use.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
 
 
 #### mode
diff --git a/core/src/components/chip/usage/javascript.md b/core/src/components/chip/usage/javascript.md
new file mode 100644
index 0000000000..7eaabb19bd
--- /dev/null
+++ b/core/src/components/chip/usage/javascript.md
@@ -0,0 +1,48 @@
+```html
+<ion-chip>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-label color="secondary">Secondary Label</ion-label>
+</ion-chip>
+
+<ion-chip color="secondary">
+  <ion-label color="dark">Secondary w/ Dark label</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin"></ion-icon>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="heart" color="dark"></ion-icon>
+  <ion-label>Default</ion-label>
+</ion-chip>
+
+<ion-chip>
+  <ion-label>Button Chip</ion-label>
+  <ion-chip-button fill="clear" color="light">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+
+<ion-chip>
+  <ion-icon name="pin" color="primary"></ion-icon>
+  <ion-label>Icon Chip</ion-label>
+  <ion-chip-button>
+    <ion-icon name="close"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+
+<ion-chip>
+  <ion-avatar>
+    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
+  </ion-avatar>
+  <ion-label>Avatar Chip</ion-label>
+  <ion-chip-button fill="clear" color="dark">
+    <ion-icon name="close-circle"></ion-icon>
+  </ion-chip-button>
+</ion-chip>
+```
diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md
index 581ba66cea..95388b2dbf 100644
--- a/core/src/components/content/readme.md
+++ b/core/src/components/content/readme.md
@@ -4,13 +4,6 @@ Content component provides an easy to use content area with some useful methods
 to control the scrollable area. There should only be one content in a single
 view component.
 
-```html
-<ion-content>
-  Add your content here!
-</ion-content>
-
-```
-
 <!-- Auto Generated Below -->
 
 
diff --git a/core/src/components/content/usage/angular.md b/core/src/components/content/usage/angular.md
new file mode 100644
index 0000000000..8ad00d381f
--- /dev/null
+++ b/core/src/components/content/usage/angular.md
@@ -0,0 +1,9 @@
+```html
+<ion-content
+  [scrollEvents]="true"
+  (ionScrollStart)="logScrollStart()"
+  (ionScroll)="logScrolling($event)"
+  (ionScrollEnd)="logScrollEnd()">
+</ion-content>
+```
+
diff --git a/core/src/components/content/usage/javascript.md b/core/src/components/content/usage/javascript.md
new file mode 100644
index 0000000000..0198784d38
--- /dev/null
+++ b/core/src/components/content/usage/javascript.md
@@ -0,0 +1,11 @@
+```html
+<ion-content></ion-content>
+```
+
+```javascript
+var content = document.querySelector('ion-content');
+content.scrollEvents = true;
+content.addEventListener('ionScrollStart', () => console.log('scroll start'));
+content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail));
+content.addEventListener('ionScrollEnd', () => console.log('scroll end'));
+```
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 9e093c9814..fc6ae496e5 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -2,7 +2,6 @@ import { Component, Element, Prop } from '@stencil/core';
 import { Color, CssClassMap, Mode } from '../../interface';
 import { createThemedClasses, getElementClassMap } from '../../utils/theme';
 
-
 @Component({
   tag: 'ion-fab-button',
   styleUrls: {
@@ -11,22 +10,18 @@ import { createThemedClasses, getElementClassMap } from '../../utils/theme';
   }
 })
 export class FabButton {
-
   private inList = false;
 
   @Element() el!: HTMLElement;
 
   /**
-   * The color to use from your Sass `$colors` map.
-   * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information, see [Theming your App](/docs/theming/theming-your-app).
+   * The color to use for the button.
    */
   @Prop() color?: Color;
 
   /**
    * The mode determines which platform styles to use.
    * Possible values are: `"ios"` or `"md"`.
-   * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
    */
   @Prop() mode!: Mode;
 
@@ -57,7 +52,7 @@ export class FabButton {
     const parentNode = this.el.parentNode;
     const parentTag = parentNode ? parentNode.nodeName : null;
 
-    this.inList = (parentTag === 'ION-FAB-LIST');
+    this.inList = parentTag === 'ION-FAB-LIST';
   }
 
   /**
@@ -67,34 +62,38 @@ export class FabButton {
     return {
       'fab-button-in-list': this.inList,
       [`fab-button-${this.mode}-in-list`]: this.inList,
-      [`fab-button-translucent-${this.mode}-in-list`]: (this.inList && this.translucent),
+      [`fab-button-translucent-${this.mode}-in-list`]:
+        this.inList && this.translucent,
       'fab-button-close-active': this.activated,
-      'fab-button-show': this.show,
+      'fab-button-show': this.show
     };
   }
 
   render() {
-    const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button');
-    const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {};
+    const themedClasses = createThemedClasses(
+      this.mode,
+      this.color,
+      'fab-button'
+    );
+    const translucentClasses = this.translucent
+      ? createThemedClasses(this.mode, this.color, 'fab-button-translucent')
+      : {};
     const hostClasses = getElementClassMap(this.el.classList);
     const TagType = this.href ? 'a' : 'button';
     const fabClasses = {
       ...this.getFabClassMap(),
       ...themedClasses,
       ...translucentClasses,
-      ...hostClasses,
+      ...hostClasses
     };
 
     return (
-      <TagType
-        class={fabClasses}
-        disabled={this.disabled}
-        href={this.href}>
-        <ion-icon name="close" class="fab-button-close-icon"></ion-icon>
+      <TagType class={fabClasses} disabled={this.disabled} href={this.href}>
+        <ion-icon name="close" class="fab-button-close-icon" />
         <span class="fab-button-inner">
-          <slot></slot>
+          <slot />
         </span>
-        { this.mode === 'md' && <ion-ripple-effect tapClick={true}/> }
+        {this.mode === 'md' && <ion-ripple-effect tapClick={true} />}
       </TagType>
     );
   }
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index f1dcb6a6ea..2150616cf0 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -1,38 +1,9 @@
 # ion-fab-button
 
-Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content:
-
-```html
-<ion-content>
-  <!-- Fixed Floating Action Button that does not scroll with the content -->
-  <ion-fab>
-    <ion-fab-button>Button</ion-fab-button>
-  </ion-fab>
-
-  <!-- Default Floating Action Button that scrolls with the content.-->
-  <ion-fab-button>Button</ion-fab-button>
-</ion-content>
-```
+Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `<ion-fab-button>FAB</ion-fab-button>`. They need to be wrapped with an `<ion-fab>` component in order to be fixed over the content.
 
 If the FAB button is not wrapped with `<ion-fab>`, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:
 
-```html
-<ion-content>
-  <ion-fab-button>Default</ion-fab-button>
-
-  <!-- Mini -->
-  <ion-fab-button mini>Mini</ion-fab-button>
-
-  <!-- Colors -->
-  <ion-fab-button color="primary">Primary</ion-fab-button>
-  <ion-fab-button color="secondary">Secondary</ion-fab-button>
-  <ion-fab-button color="danger">Danger</ion-fab-button>
-  <ion-fab-button color="light">Light</ion-fab-button>
-  <ion-fab-button color="dark">Dark</ion-fab-button>
-</ion-content>
-```
-
-
 <!-- Auto Generated Below -->
 
 
@@ -49,9 +20,7 @@ If true, the fab button will be show a close icon. Defaults to `false`.
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color to use for the button.
 
 
 #### disabled
@@ -75,7 +44,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### show
@@ -103,9 +71,7 @@ If true, the fab button will be show a close icon. Defaults to `false`.
 
 string
 
-The color to use from your Sass `$colors` map.
-Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-For more information, see [Theming your App](/docs/theming/theming-your-app).
+The color to use for the button.
 
 
 #### disabled
@@ -129,7 +95,6 @@ string
 
 The mode determines which platform styles to use.
 Possible values are: `"ios"` or `"md"`.
-For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
 
 
 #### show
diff --git a/core/src/components/fab-button/usage/javascript.md b/core/src/components/fab-button/usage/javascript.md
new file mode 100644
index 0000000000..21aa6270f9
--- /dev/null
+++ b/core/src/components/fab-button/usage/javascript.md
@@ -0,0 +1,23 @@
+```html
+<ion-content>
+
+  <!-- Fixed Floating Action Button that does not scroll with the content -->
+  <ion-fab>
+    <ion-fab-button>Button</ion-fab-button>
+  </ion-fab>
+
+  <!-- Default Floating Action Button that scrolls with the content.-->
+  <ion-fab-button>Default</ion-fab-button>
+
+  <!-- Mini -->
+  <ion-fab-button mini>Mini</ion-fab-button>
+
+  <!-- Colors -->
+  <ion-fab-button color="primary">Primary</ion-fab-button>
+  <ion-fab-button color="secondary">Secondary</ion-fab-button>
+  <ion-fab-button color="danger">Danger</ion-fab-button>
+  <ion-fab-button color="light">Light</ion-fab-button>
+  <ion-fab-button color="dark">Dark</ion-fab-button>
+
+</ion-content>
+```