From 3e285c50acd679a0367df359f2c3dec30a5f88b5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Mon, 9 Jul 2018 18:24:26 -0400
Subject: [PATCH] docs(label): add usage examples and update readme

---
 core/src/components/label/label.tsx           | 10 +--
 core/src/components/label/readme.md           |  3 +-
 core/src/components/label/usage/angular.md    | 54 ++++++++++++++
 core/src/components/label/usage/javascript.md | 74 +++++++++++++------
 4 files changed, 108 insertions(+), 33 deletions(-)
 create mode 100644 core/src/components/label/usage/angular.md

diff --git a/core/src/components/label/label.tsx b/core/src/components/label/label.tsx
index 4d70f19eee..dc9884c1a3 100644
--- a/core/src/components/label/label.tsx
+++ b/core/src/components/label/label.tsx
@@ -1,12 +1,4 @@
-import {
-  Component,
-  Element,
-  Event,
-  EventEmitter,
-  Method,
-  Prop,
-  Watch
-} from '@stencil/core';
+import { Component, Element, Event, EventEmitter, Method, Prop, Watch } from '@stencil/core';
 import { Color, Mode, StyleEvent } from '../../interface';
 import { createColorClasses } from '../../utils/theme';
 
diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md
index 988ee4922a..22821cfdda 100644
--- a/core/src/components/label/readme.md
+++ b/core/src/components/label/readme.md
@@ -1,7 +1,6 @@
 # ion-label
 
-Label is a wrapper element that can be used in combination with `ion-item` and `ion-input`.
-The position of the label can be controlled to be either stacked, inline, or floating.
+Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.
 
 
 <!-- Auto Generated Below -->
diff --git a/core/src/components/label/usage/angular.md b/core/src/components/label/usage/angular.md
new file mode 100644
index 0000000000..684ac17e89
--- /dev/null
+++ b/core/src/components/label/usage/angular.md
@@ -0,0 +1,54 @@
+```html
+<!-- Default Label -->
+<ion-label>Label</ion-label>
+
+<!-- Label Colors -->
+<ion-label color="primary">Primary Label</ion-label>
+<ion-label color="secondary">Secondary Label</ion-label>
+<ion-label color="danger">Danger Label</ion-label>
+<ion-label color="light">Light Label</ion-label>
+<ion-label color="dark">Dark Label</ion-label>
+
+<!-- Item Labels -->
+<ion-item>
+  <ion-label>Default Item</ion-label>
+</ion-item>
+
+<ion-item text-wrap>
+  <ion-label>
+    Multi-line text that should wrap when it is too long
+    to fit on one line in the item.
+  </ion-label>
+</ion-item>
+
+<!-- Input Labels -->
+<ion-item>
+  <ion-label>Default Input</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="fixed">Fixed</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="floating">Floating</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Stacked</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Toggle</ion-label>
+  <ion-toggle slot="end" checked></ion-toggle>
+</ion-item>
+
+<ion-item>
+  <ion-checkbox slot="start" checked></ion-checkbox>
+  <ion-label>Checkbox</ion-label>
+</ion-item>
+```
diff --git a/core/src/components/label/usage/javascript.md b/core/src/components/label/usage/javascript.md
index 3469a73c1a..684ac17e89 100644
--- a/core/src/components/label/usage/javascript.md
+++ b/core/src/components/label/usage/javascript.md
@@ -1,24 +1,54 @@
 ```html
-<ion-list>
-  <ion-item>
-    <ion-label>Default</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label text-wrap>Wrap label this label just goes on and on and on</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label position="fixed">Fixed</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label position="floating">Floating</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-  <ion-item>
-    <ion-label position="stacked">Stacked</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-</ion-list>
+<!-- Default Label -->
+<ion-label>Label</ion-label>
+
+<!-- Label Colors -->
+<ion-label color="primary">Primary Label</ion-label>
+<ion-label color="secondary">Secondary Label</ion-label>
+<ion-label color="danger">Danger Label</ion-label>
+<ion-label color="light">Light Label</ion-label>
+<ion-label color="dark">Dark Label</ion-label>
+
+<!-- Item Labels -->
+<ion-item>
+  <ion-label>Default Item</ion-label>
+</ion-item>
+
+<ion-item text-wrap>
+  <ion-label>
+    Multi-line text that should wrap when it is too long
+    to fit on one line in the item.
+  </ion-label>
+</ion-item>
+
+<!-- Input Labels -->
+<ion-item>
+  <ion-label>Default Input</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="fixed">Fixed</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="floating">Floating</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label position="stacked">Stacked</ion-label>
+  <ion-input></ion-input>
+</ion-item>
+
+<ion-item>
+  <ion-label>Toggle</ion-label>
+  <ion-toggle slot="end" checked></ion-toggle>
+</ion-item>
+
+<ion-item>
+  <ion-checkbox slot="start" checked></ion-checkbox>
+  <ion-label>Checkbox</ion-label>
+</ion-item>
 ```