From 32f1b81c46128d818ac31cf1212423a55923ecfe Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 7 Aug 2018 16:58:57 +0200
Subject: [PATCH 01/16] -added image shorthand to the label component

---
 .../Label/Variations/LabelExampleIcon.tsx     | 11 -----------
 .../LabelExampleIconAsShorthand.shorthand.tsx |  6 ++----
 .../Variations/LabelExampleIconPosition.tsx   | 11 -----------
 .../LabelExampleImage.shorthand.tsx           | 14 ++++++++++++++
 .../LabelExampleOnIconClick.shorthand.tsx     |  6 ++----
 .../components/Label/Variations/index.tsx     |  5 +++++
 src/components/Image/Image.tsx                |  6 +++++-
 src/components/Label/Label.tsx                | 19 +++++++++++++++++--
 src/components/Label/labelRules.ts            | 17 +++++++++++++++--
 src/components/Label/labelVariables.ts        |  4 ++--
 10 files changed, 62 insertions(+), 37 deletions(-)
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleIcon.tsx
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleIconPosition.tsx
 create mode 100644 docs/src/examples/components/Label/Variations/LabelExampleImage.shorthand.tsx

diff --git a/docs/src/examples/components/Label/Variations/LabelExampleIcon.tsx b/docs/src/examples/components/Label/Variations/LabelExampleIcon.tsx
deleted file mode 100644
index 3b67504038..0000000000
--- a/docs/src/examples/components/Label/Variations/LabelExampleIcon.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Label, Icon } from '@stardust-ui/react'
-
-const LabelExampleIcon = () => (
-  <Label>
-    <Icon name="coffee" xSpacing="after" variables={() => ({ color: 'rgba(0, 0, 0, 0.6)' })} />
-    Label containing icon
-  </Label>
-)
-
-export default LabelExampleIcon
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleIconAsShorthand.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleIconAsShorthand.shorthand.tsx
index 17dfd19c08..04abc95525 100644
--- a/docs/src/examples/components/Label/Variations/LabelExampleIconAsShorthand.shorthand.tsx
+++ b/docs/src/examples/components/Label/Variations/LabelExampleIconAsShorthand.shorthand.tsx
@@ -1,12 +1,10 @@
 import React from 'react'
 import { Label } from '@stardust-ui/react'
 
-class LabelExampleIconAsShorthand extends React.Component<{}, { display: string }> {
+class LabelExampleIconAsShorthand extends React.Component<any, any> {
   constructor(props) {
     super(props)
-    this.state = {
-      display: 'inline-block',
-    }
+    this.state = {}
   }
 
   public hide = () => {
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleIconPosition.tsx b/docs/src/examples/components/Label/Variations/LabelExampleIconPosition.tsx
deleted file mode 100644
index 9a13b97fe9..0000000000
--- a/docs/src/examples/components/Label/Variations/LabelExampleIconPosition.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Label, Icon } from '@stardust-ui/react'
-
-const LabelExampleIconPosition = () => (
-  <Label circular>
-    Label with icon after the content
-    <Icon name="close" xSpacing="before" variables={() => ({ color: 'rgba(0, 0, 0, 0.6)' })} />
-  </Label>
-)
-
-export default LabelExampleIconPosition
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleImage.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleImage.shorthand.tsx
new file mode 100644
index 0000000000..fbd60092eb
--- /dev/null
+++ b/docs/src/examples/components/Label/Variations/LabelExampleImage.shorthand.tsx
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleImageShorthand = () => (
+  <Label
+    circular
+    icon="close"
+    iconPosition="end"
+    content="John Doe"
+    image={{ src: 'public/images/avatar/small/matt.jpg', avatar: true }}
+  />
+)
+
+export default LabelExampleImageShorthand
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx
index cf64f6e54a..1a87f411e8 100644
--- a/docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx
+++ b/docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx
@@ -1,12 +1,10 @@
 import React from 'react'
 import { Label } from '@stardust-ui/react'
 
-class LabelExampleIconShorthand extends React.Component<{}, { display: string }> {
+class LabelExampleIconShorthand extends React.Component<any, any> {
   constructor(props) {
     super(props)
-    this.state = {
-      display: 'inline-block',
-    }
+    this.state = {}
   }
 
   public hide = () => {
diff --git a/docs/src/examples/components/Label/Variations/index.tsx b/docs/src/examples/components/Label/Variations/index.tsx
index 39e4f62452..84e0f2d3c7 100644
--- a/docs/src/examples/components/Label/Variations/index.tsx
+++ b/docs/src/examples/components/Label/Variations/index.tsx
@@ -29,6 +29,11 @@ const Variations = () => (
       description="The Icon component inside the Label can be defined with customizing it's prop"
       examplePath="components/Label/Variations/LabelExampleIconAsShorthand"
     />
+    <ComponentExample
+      title="Image"
+      description="The Label can contain an image"
+      examplePath="components/Label/Variations/LabelExampleImage"
+    />
   </ExampleSection>
 )
 
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index 86a98bb25c..7c629d2db6 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -1,7 +1,7 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { customPropTypes, UIComponent } from '../../lib'
+import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 import imageRules from './imageRules'
 import imageVariables from './imageVariables'
 
@@ -9,6 +9,8 @@ import imageVariables from './imageVariables'
  * An image is a graphic representation of something.
  */
 class Image extends UIComponent<any, any> {
+  static create: Function
+
   static className = 'ui-image'
 
   static displayName = 'Image'
@@ -41,4 +43,6 @@ class Image extends UIComponent<any, any> {
   }
 }
 
+Image.create = createShorthandFactory(Image, src => ({ src }))
+
 export default Image
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 231770095d..4baae620c5 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -4,7 +4,7 @@ import * as _ from 'lodash'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
-import { Icon } from '../..'
+import { Icon, Image } from '../..'
 import labelRules from './labelRules'
 import labelVariables from './labelVariables'
 import callable from '../../lib/callable'
@@ -41,6 +41,9 @@ class Label extends UIComponent<any, any> {
     /** An icon label can format an Icon to appear before or after the text in the label */
     iconPosition: PropTypes.oneOf(['start', 'end']),
 
+    /** Label can have an icon. */
+    image: customPropTypes.some([PropTypes.string, PropTypes.object]),
+
     /**
      * Function called when the icon is clicked.
      *
@@ -58,6 +61,7 @@ class Label extends UIComponent<any, any> {
     'content',
     'icon',
     'iconPosition',
+    'image',
     'onIconClick',
   ]
 
@@ -94,7 +98,7 @@ class Label extends UIComponent<any, any> {
   }
 
   renderComponent({ ElementType, classes, rest }) {
-    const { children, content, icon, iconPosition } = this.props
+    const { children, content, icon, iconPosition, image } = this.props
     const getContent = (): React.ReactNode => {
       const iconAtEnd = iconPosition === 'end'
       const iconAtStart = !iconAtEnd
@@ -110,8 +114,19 @@ class Label extends UIComponent<any, any> {
         },
       )
 
+      const imageElement = Image.create(
+        {
+          className: classes.image,
+          ...(typeof image === 'string' ? { src: image } : { ...image }),
+        },
+        {
+          generateKey: false,
+        },
+      )
+
       return (
         <React.Fragment>
+          {image && imageElement}
           {iconAtStart && icon && iconElement}
           {content}
           {iconAtEnd && icon && iconElement}
diff --git a/src/components/Label/labelRules.ts b/src/components/Label/labelRules.ts
index 0f451a9cb5..c7383ad9e6 100644
--- a/src/components/Label/labelRules.ts
+++ b/src/components/Label/labelRules.ts
@@ -2,21 +2,34 @@ import { pxToRem } from '../../lib'
 
 export default {
   root: ({ props, variables }) => ({
+    height: pxToRem(20),
+    margin: `${pxToRem(4)} 0 0 ${pxToRem(4)}`,
     padding: variables.padding,
-    fontWeight: '500',
+    display: 'inline-block',
+    fontSize: pxToRem(14),
+    lineHeight: pxToRem(20),
+    verticalAlign: 'middle',
     backgroundColor: 'rgb(232, 232, 232)',
     color: variables.color,
     borderRadius: pxToRem(3),
     ...(props.circular && {
       borderRadius: variables.circularRadius,
     }),
+    overflow: 'hidden',
   }),
   icon: ({ props }) => ({
     position: 'relative',
-    top: '-0.15em',
+    top: `-${pxToRem(2)}`,
     ...((props.onIconClick ||
       (props.icon && typeof props.icon === 'object' && props.icon.onClick)) && {
       cursor: 'pointer',
     }),
   }),
+  image: () => ({
+    height: `${pxToRem(20)} !important`,
+    width: `${pxToRem(20)} !important`,
+    verticalAlign: 'top',
+    position: 'relative',
+    left: `-${pxToRem(4)}`,
+  }),
 }
diff --git a/src/components/Label/labelVariables.ts b/src/components/Label/labelVariables.ts
index f590cd856d..10c5abd434 100644
--- a/src/components/Label/labelVariables.ts
+++ b/src/components/Label/labelVariables.ts
@@ -2,8 +2,8 @@ import { pxToRem } from '../../lib'
 
 export default () => {
   const vars: any = {}
-  vars.circularRadius = pxToRem(5000)
-  vars.padding = `${pxToRem(6)} ${pxToRem(8)}`
+  vars.circularRadius = pxToRem(9999)
+  vars.padding = `0 ${pxToRem(4)} 0 ${pxToRem(4)}`
   vars.color = 'rgba(0, 0, 0, 0.6)'
   return vars
 }

From 500810f0fb57e10780243ead31c169efae0a49d9 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 7 Aug 2018 17:12:08 +0200
Subject: [PATCH 02/16] -update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index aad51e66a5..40df55be43 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Update styles for Menu underlined primary @miroslavstastny ([#20](https://github.com/stardust-ui/react/pull/20))
 - Add Avatar `getInitials` prop and `presenceIndicatorBackground` variable @mnajdova ([#38](https://github.com/stardust-ui/react/pull/38))
 - Add 'fluid' variant and size variables to Image @kuzhelov ([#54](https://github.com/stardust-ui/react/pull/54))
+- Add Label `image` shorthand prop @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55))  
   
 <!--------------------------------[ v0.2.5 ]------------------------------- -->
 ## [v0.2.5](https://github.com/stardust-ui/react/tree/v0.2.5) (2018-08-03)

From e31bdbc284870893d08c1d0728e1936da46e93be Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 7 Aug 2018 17:35:19 +0200
Subject: [PATCH 03/16] -extract label height in a method

---
 src/components/Label/labelRules.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Label/labelRules.ts b/src/components/Label/labelRules.ts
index c7383ad9e6..b19adf9869 100644
--- a/src/components/Label/labelRules.ts
+++ b/src/components/Label/labelRules.ts
@@ -1,13 +1,17 @@
 import { pxToRem } from '../../lib'
 
+const getLabelHeight = () => {
+  return pxToRem(20)
+}
+
 export default {
   root: ({ props, variables }) => ({
-    height: pxToRem(20),
+    height: getLabelHeight(),
     margin: `${pxToRem(4)} 0 0 ${pxToRem(4)}`,
     padding: variables.padding,
     display: 'inline-block',
     fontSize: pxToRem(14),
-    lineHeight: pxToRem(20),
+    lineHeight: getLabelHeight(),
     verticalAlign: 'middle',
     backgroundColor: 'rgb(232, 232, 232)',
     color: variables.color,
@@ -26,8 +30,8 @@ export default {
     }),
   }),
   image: () => ({
-    height: `${pxToRem(20)} !important`,
-    width: `${pxToRem(20)} !important`,
+    height: `${getLabelHeight()} !important`,
+    width: `${getLabelHeight()} !important`,
     verticalAlign: 'top',
     position: 'relative',
     left: `-${pxToRem(4)}`,

From c1a7117e61dd84226d9bbecfd9fa017397f35df3 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 9 Aug 2018 12:59:26 +0200
Subject: [PATCH 04/16] -replaced image, icon, iconPosition with start and end
 -updated and restructured the examples for the Label component

---
 .../LabelExample.shorthand.tsx                |  0
 .../Label/{Types => Content}/LabelExample.tsx |  0
 .../Content/LabelExampleEnd.shorthand.tsx     | 11 +++
 .../Content/LabelExampleStart.shorthand.tsx   | 11 +++
 .../LabelExampleStartEnd.shorthand.tsx        | 34 +++++++
 .../components/Label/Content/index.tsx        | 30 ++++++
 .../examples/components/Label/Types/index.tsx | 15 ---
 .../Variations/LabelExampleIcon.shorthand.tsx |  6 --
 .../LabelExampleIconPosition.shorthand.tsx    |  8 --
 .../LabelExampleIconProps.shorthand.tsx       | 31 ------
 .../LabelExampleImage.shorthand.tsx           | 14 ---
 .../LabelExampleOnIconClick.shorthand.tsx     | 29 ------
 .../components/Label/Variations/index.tsx     | 25 -----
 docs/src/examples/components/Label/index.tsx  |  4 +-
 src/components/Label/Label.tsx                | 94 ++++---------------
 .../teams/components/Label/labelStyles.ts     | 37 ++++----
 .../teams/components/Label/labelVariables.ts  |  2 +
 test/specs/components/Label/Label-test.tsx    | 13 ---
 18 files changed, 128 insertions(+), 236 deletions(-)
 rename docs/src/examples/components/Label/{Types => Content}/LabelExample.shorthand.tsx (100%)
 rename docs/src/examples/components/Label/{Types => Content}/LabelExample.tsx (100%)
 create mode 100644 docs/src/examples/components/Label/Content/LabelExampleEnd.shorthand.tsx
 create mode 100644 docs/src/examples/components/Label/Content/LabelExampleStart.shorthand.tsx
 create mode 100644 docs/src/examples/components/Label/Content/LabelExampleStartEnd.shorthand.tsx
 create mode 100644 docs/src/examples/components/Label/Content/index.tsx
 delete mode 100644 docs/src/examples/components/Label/Types/index.tsx
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleIcon.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleIconPosition.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleIconProps.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleImage.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx

diff --git a/docs/src/examples/components/Label/Types/LabelExample.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExample.shorthand.tsx
similarity index 100%
rename from docs/src/examples/components/Label/Types/LabelExample.shorthand.tsx
rename to docs/src/examples/components/Label/Content/LabelExample.shorthand.tsx
diff --git a/docs/src/examples/components/Label/Types/LabelExample.tsx b/docs/src/examples/components/Label/Content/LabelExample.tsx
similarity index 100%
rename from docs/src/examples/components/Label/Types/LabelExample.tsx
rename to docs/src/examples/components/Label/Content/LabelExample.tsx
diff --git a/docs/src/examples/components/Label/Content/LabelExampleEnd.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleEnd.shorthand.tsx
new file mode 100644
index 0000000000..9b135657e2
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/LabelExampleEnd.shorthand.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Label, Icon } from '@stardust-ui/react'
+
+const LabelExampleEndShorthand = () => (
+  <Label
+    content="I have a closing icon"
+    end={<Icon name="close" variables={{ color: 'rgba(0, 0, 0, 0.6)' }} xSpacing="both" />}
+  />
+)
+
+export default LabelExampleEndShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleStart.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleStart.shorthand.tsx
new file mode 100644
index 0000000000..f45207d06b
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/LabelExampleStart.shorthand.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Label, Icon } from '@stardust-ui/react'
+
+const LabelExampleStartShorthand = () => (
+  <Label
+    content="Have a coffee!"
+    start={<Icon name="coffee" variables={{ color: 'rgba(0, 0, 0, 0.6)' }} xSpacing="both" />}
+  />
+)
+
+export default LabelExampleStartShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleStartEnd.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleStartEnd.shorthand.tsx
new file mode 100644
index 0000000000..9acb29432e
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/LabelExampleStartEnd.shorthand.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Label, Image, Icon } from '@stardust-ui/react'
+
+class LabelExampleStartEndShorthand extends React.Component {
+  state = { hidden: false }
+
+  hide = () => {
+    this.setState({ hidden: true })
+    setTimeout(() => this.setState({ hidden: false }), 2000)
+  }
+
+  render() {
+    const { hidden } = this.state
+
+    if (hidden) return 'Returning in 2 seconds...'
+
+    return (
+      <Label
+        content="John Doe"
+        circular
+        start={
+          <Image
+            src="public/images/avatar/small/matt.jpg"
+            avatar
+            variables={{ avatarSize: '20px' }}
+          />
+        }
+        end={<Icon name="close" variables={{ color: 'rgba(0, 0, 0, 0.6)' }} onClick={this.hide} />}
+      />
+    )
+  }
+}
+
+export default LabelExampleStartEndShorthand
diff --git a/docs/src/examples/components/Label/Content/index.tsx b/docs/src/examples/components/Label/Content/index.tsx
new file mode 100644
index 0000000000..7b7e547ab4
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Content = () => (
+  <ExampleSection title="Content">
+    <ComponentExample
+      title="Label"
+      description="A label."
+      examplePath="components/Label/Content/LabelExample"
+    />
+    <ComponentExample
+      title="Start"
+      description="A label can contain media displayed at the start of it."
+      examplePath="components/Label/Content/LabelExampleStart"
+    />
+    <ComponentExample
+      title="End"
+      description="A label can contain media displayed at the start of it."
+      examplePath="components/Label/Content/LabelExampleEnd"
+    />
+    <ComponentExample
+      title="Start & End"
+      description="A label can contain media displayed both on the start and end end."
+      examplePath="components/Label/Content/LabelExampleStartEnd"
+    />
+  </ExampleSection>
+)
+
+export default Content
diff --git a/docs/src/examples/components/Label/Types/index.tsx b/docs/src/examples/components/Label/Types/index.tsx
deleted file mode 100644
index 4142db1e7f..0000000000
--- a/docs/src/examples/components/Label/Types/index.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react'
-import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
-import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
-
-const Types = () => (
-  <ExampleSection title="Types">
-    <ComponentExample
-      title="Label"
-      description="A label."
-      examplePath="components/Label/Types/LabelExample"
-    />
-  </ExampleSection>
-)
-
-export default Types
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleIcon.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleIcon.shorthand.tsx
deleted file mode 100644
index d40bb3855b..0000000000
--- a/docs/src/examples/components/Label/Variations/LabelExampleIcon.shorthand.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import React from 'react'
-import { Label } from '@stardust-ui/react'
-
-const LabelExampleIconShorthand = () => <Label icon="coffee" content="Label containing icon" />
-
-export default LabelExampleIconShorthand
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleIconPosition.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleIconPosition.shorthand.tsx
deleted file mode 100644
index 69dad03c31..0000000000
--- a/docs/src/examples/components/Label/Variations/LabelExampleIconPosition.shorthand.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import React from 'react'
-import { Label } from '@stardust-ui/react'
-
-const LabelExampleIconPositionShorthand = () => (
-  <Label circular icon="close" iconPosition="end" content="Label with icon after the content" />
-)
-
-export default LabelExampleIconPositionShorthand
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleIconProps.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleIconProps.shorthand.tsx
deleted file mode 100644
index 04abc95525..0000000000
--- a/docs/src/examples/components/Label/Variations/LabelExampleIconProps.shorthand.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import { Label } from '@stardust-ui/react'
-
-class LabelExampleIconAsShorthand extends React.Component<any, any> {
-  constructor(props) {
-    super(props)
-    this.state = {}
-  }
-
-  public hide = () => {
-    this.setState({ display: 'none' })
-  }
-
-  public render() {
-    const { display } = this.state
-    return (
-      <Label
-        circular
-        style={{ display }}
-        icon={{
-          name: 'close',
-          onClick: this.hide,
-        }}
-        iconPosition="end"
-        content="Removable label"
-      />
-    )
-  }
-}
-
-export default LabelExampleIconAsShorthand
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleImage.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleImage.shorthand.tsx
deleted file mode 100644
index fbd60092eb..0000000000
--- a/docs/src/examples/components/Label/Variations/LabelExampleImage.shorthand.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react'
-import { Label } from '@stardust-ui/react'
-
-const LabelExampleImageShorthand = () => (
-  <Label
-    circular
-    icon="close"
-    iconPosition="end"
-    content="John Doe"
-    image={{ src: 'public/images/avatar/small/matt.jpg', avatar: true }}
-  />
-)
-
-export default LabelExampleImageShorthand
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx b/docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx
deleted file mode 100644
index d2292f0b65..0000000000
--- a/docs/src/examples/components/Label/Variations/LabelExampleOnIconClick.shorthand.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import { Label } from '@stardust-ui/react'
-
-class LabelExampleOnIconClickShorthand extends React.Component {
-  state = { hidden: false }
-
-  hide = () => {
-    this.setState({ hidden: true })
-    setTimeout(() => this.setState({ hidden: false }), 2000)
-  }
-
-  render() {
-    const { hidden } = this.state
-
-    if (hidden) return 'Returning in 2 seconds...'
-
-    return (
-      <Label
-        circular
-        content="Removable label"
-        icon="close"
-        iconPosition="end"
-        onIconClick={this.hide}
-      />
-    )
-  }
-}
-
-export default LabelExampleOnIconClickShorthand
diff --git a/docs/src/examples/components/Label/Variations/index.tsx b/docs/src/examples/components/Label/Variations/index.tsx
index c8b5925685..9ce0989539 100644
--- a/docs/src/examples/components/Label/Variations/index.tsx
+++ b/docs/src/examples/components/Label/Variations/index.tsx
@@ -9,31 +9,6 @@ const Variations = () => (
       description="A label can be circular."
       examplePath="components/Label/Variations/LabelExampleCircular"
     />
-    <ComponentExample
-      title="Icon"
-      description="The label can contain an icon."
-      examplePath="components/Label/Variations/LabelExampleIcon"
-    />
-    <ComponentExample
-      title="Icon position"
-      description="The icon inside the label can be aligned before or after the content."
-      examplePath="components/Label/Variations/LabelExampleIconPosition"
-    />
-    <ComponentExample
-      title="Clickable icon"
-      description="The icon inside the label can be clickable."
-      examplePath="components/Label/Variations/LabelExampleOnIconClick"
-    />
-    <ComponentExample
-      title="Icon props"
-      description="You can define the Icon props inside the Label."
-      examplePath="components/Label/Variations/LabelExampleIconProps"
-    />
-    <ComponentExample
-      title="Image"
-      description="The Label can contain an image"
-      examplePath="components/Label/Variations/LabelExampleImage"
-    />
   </ExampleSection>
 )
 
diff --git a/docs/src/examples/components/Label/index.tsx b/docs/src/examples/components/Label/index.tsx
index 0bbe416146..83d4865f48 100644
--- a/docs/src/examples/components/Label/index.tsx
+++ b/docs/src/examples/components/Label/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import Types from './Types'
+import Content from './Content'
 import Variations from './Variations'
 
 const LabelExamples = () => (
   <div>
-    <Types />
+    <Content />
     <Variations />
   </div>
 )
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 7dc45b764c..2c6ce4c99c 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,16 +1,15 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
-import * as _ from 'lodash'
 
 import {
-  callable,
   childrenExist,
   createShorthandFactory,
   customPropTypes,
+  pxToRem,
   UIComponent,
 } from '../../lib'
 
-import { Icon } from '../..'
+import { Layout } from '../..'
 import labelStyles from '../../themes/teams/components/Label/labelStyles'
 import labelVariables from '../../themes/teams/components/Label/labelVariables'
 
@@ -40,93 +39,38 @@ class Label extends UIComponent<any, any> {
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
 
-    /** Label can have an icon. */
-    icon: customPropTypes.some([PropTypes.string, PropTypes.object]),
+    start: PropTypes.any,
 
-    /** An icon label can format an Icon to appear before or after the text in the label */
-    iconPosition: PropTypes.oneOf(['start', 'end']),
-
-    /**
-     * Function called when the icon is clicked.
-     *
-     * @param {SyntheticEvent} event - React's original SyntheticEvent.
-     * @param {object} data - All props.
-     */
-    onIconClick: PropTypes.func,
+    end: PropTypes.any,
   }
 
-  static handledProps = [
-    'as',
-    'children',
-    'circular',
-    'className',
-    'content',
-    'icon',
-    'iconPosition',
-    'onIconClick',
-  ]
+  static handledProps = ['as', 'children', 'circular', 'className', 'content', 'end', 'start']
 
   static defaultProps = {
-    as: 'label',
+    as: 'span',
   }
 
   static styles = labelStyles
 
   static variables = labelVariables
 
-  handleIconOverrides = predefinedProps => {
-    const { onIconClick, iconPosition, content, variables: labelPropVariables } = this.props
-    const { onClick, variables, xSpacing } = predefinedProps
-
-    const iconVariables = callable(variables)()
-    const labelVariables = labelPropVariables
-      ? callable(labelPropVariables)()
-      : callable(Label.variables)()
-
-    return {
-      onClick: e => {
-        _.invoke(predefinedProps, 'onClick', e)
-        _.invoke(this.props, 'onIconClick', e, this.props)
-      },
-      ...((onClick || onIconClick) && { tabIndex: '0' }),
-      ...((!iconVariables || !iconVariables.color) && {
-        variables: { color: labelVariables.color },
-      }),
-      ...(!xSpacing && {
-        xSpacing: !content ? 'none' : iconPosition === 'end' ? 'before' : 'after',
-      }),
-    }
-  }
-
   renderComponent({ ElementType, classes, rest }) {
-    const { children, content, icon, iconPosition } = this.props
-    const getContent = (): React.ReactNode => {
-      const iconAtEnd = iconPosition === 'end'
-      const iconAtStart = !iconAtEnd
-
-      const iconElement = Icon.create(
-        {
-          className: classes.icon,
-          ...(typeof icon === 'string' ? { name: icon } : { ...icon }),
-        },
-        {
-          generateKey: false,
-          overrideProps: this.handleIconOverrides,
-        },
-      )
-
-      return (
-        <React.Fragment>
-          {iconAtStart && icon && iconElement}
-          {content}
-          {iconAtEnd && icon && iconElement}
-        </React.Fragment>
-      )
-    }
+    const { children, content, start, end } = this.props
 
     return (
       <ElementType {...rest} className={classes.root}>
-        {childrenExist(children) ? children : getContent()}
+        {childrenExist(children) ? (
+          children
+        ) : (
+          <Layout
+            main={content}
+            start={start}
+            end={end}
+            gap={pxToRem(3)}
+            startCSS={Label.styles.start()}
+            endCSS={Label.styles.end()}
+          />
+        )}
       </ElementType>
     )
   }
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index c948e7a0d1..d97482d073 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -4,36 +4,37 @@ const getLabelHeight = () => {
   return pxToRem(20)
 }
 
+const mediaStyle = {
+  display: 'flex',
+  alignItems: 'center',
+}
+
 export default {
-  root: ({ props, variables }) => ({
-    height: getLabelHeight(),
-    margin: `${pxToRem(4)} 0 0 ${pxToRem(4)}`,
+  root: ({ props: { start, end, circular }, variables }) => ({
     padding: variables.padding,
+    ...(start && {
+      paddingLeft: variables.startPaddingLeft,
+    }),
+    ...(end && {
+      paddingRight: variables.endPaddingRight,
+    }),
     display: 'inline-block',
+    height: getLabelHeight(),
+    margin: `${pxToRem(4)} 0 0 ${pxToRem(4)}`,
     fontSize: pxToRem(14),
     lineHeight: getLabelHeight(),
-    verticalAlign: 'middle',
     backgroundColor: 'rgb(232, 232, 232)',
     color: variables.color,
     borderRadius: pxToRem(3),
-    ...(props.circular && {
+    ...(circular && {
       borderRadius: variables.circularRadius,
     }),
     overflow: 'hidden',
   }),
-  icon: ({ props }) => ({
-    position: 'relative',
-    top: `-${pxToRem(2)}`,
-    ...((props.onIconClick ||
-      (props.icon && typeof props.icon === 'object' && props.icon.onClick)) && {
-      cursor: 'pointer',
-    }),
+  start: () => ({
+    ...mediaStyle,
   }),
-  image: () => ({
-    height: `${getLabelHeight()} !important`,
-    width: `${getLabelHeight()} !important`,
-    verticalAlign: 'top',
-    position: 'relative',
-    left: `-${pxToRem(4)}`,
+  end: () => ({
+    ...mediaStyle,
   }),
 }
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index 8ce0a266f5..cd1b959809 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -5,5 +5,7 @@ export default () => {
   vars.circularRadius = pxToRem(9999)
   vars.padding = `0 ${pxToRem(4)} 0 ${pxToRem(4)}`
   vars.color = 'rgba(0, 0, 0, 0.6)'
+  vars.startPaddingLeft = '0px'
+  vars.endPaddingRight = '0px'
   return vars
 }
diff --git a/test/specs/components/Label/Label-test.tsx b/test/specs/components/Label/Label-test.tsx
index 0ae3c3e079..14e747a8db 100644
--- a/test/specs/components/Label/Label-test.tsx
+++ b/test/specs/components/Label/Label-test.tsx
@@ -2,20 +2,7 @@ import * as React from 'react'
 import { isConformant } from 'test/specs/commonTests'
 
 import Label from 'src/components/Label/Label'
-import { mountWithProvider } from '../../../utils'
 
 describe('Label', () => {
   isConformant(Label)
-
-  describe('onIconClick', () => {
-    it('calls onIconClick when the icon is clicked', () => {
-      const onClick = jest.fn()
-      const button = mountWithProvider(
-        <Label icon={{ name: 'close', key: 'icon-key' }} onIconClick={onClick} />,
-      ).find('Icon[name="close"]')
-      button.simulate('click')
-
-      expect(onClick).toHaveBeenCalled()
-    })
-  })
 })

From 3249b01dc8d57fcd632b546e3b95530034d1af21 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 9 Aug 2018 13:06:14 +0200
Subject: [PATCH 05/16] -updated changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 09de9f74ee..0b0c96ea73 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Add Label `start` and `end` props, removed `icon`, `iconPosition`, `onIconClick` props @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55)) 
+
 <!--------------------------------[ v0.2.6 ]------------------------------- -->
 ## [v0.2.6](https://github.com/stardust-ui/react/tree/v0.2.6) (2018-08-09)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.2.5...v0.2.6)

From d1cbd919a3104e5aea03b812a4c64d56d45fd241 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 9 Aug 2018 15:09:26 +0200
Subject: [PATCH 06/16] -updated layout styles to align the content int he
 start and end in middle -added some variables in the Label component

---
 src/components/Label/Label.tsx                   |  9 +--------
 src/themes/teams/components/Label/labelStyles.ts | 16 +++-------------
 .../teams/components/Label/labelVariables.ts     |  1 +
 .../teams/components/Layout/layoutStyles.ts      |  4 ++++
 4 files changed, 9 insertions(+), 21 deletions(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 2c6ce4c99c..cd8ec79be9 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -62,14 +62,7 @@ class Label extends UIComponent<any, any> {
         {childrenExist(children) ? (
           children
         ) : (
-          <Layout
-            main={content}
-            start={start}
-            end={end}
-            gap={pxToRem(3)}
-            startCSS={Label.styles.start()}
-            endCSS={Label.styles.end()}
-          />
+          <Layout main={content} start={start} end={end} gap={pxToRem(3)} />
         )}
       </ElementType>
     )
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index d97482d073..b85441d43e 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -4,11 +4,6 @@ const getLabelHeight = () => {
   return pxToRem(20)
 }
 
-const mediaStyle = {
-  display: 'flex',
-  alignItems: 'center',
-}
-
 export default {
   root: ({ props: { start, end, circular }, variables }) => ({
     padding: variables.padding,
@@ -18,12 +13,13 @@ export default {
     ...(end && {
       paddingRight: variables.endPaddingRight,
     }),
-    display: 'inline-block',
+    display: 'inline-flex',
+    alignItems: 'center',
     height: getLabelHeight(),
     margin: `${pxToRem(4)} 0 0 ${pxToRem(4)}`,
     fontSize: pxToRem(14),
     lineHeight: getLabelHeight(),
-    backgroundColor: 'rgb(232, 232, 232)',
+    backgroundColor: variables.backgroundColor,
     color: variables.color,
     borderRadius: pxToRem(3),
     ...(circular && {
@@ -31,10 +27,4 @@ export default {
     }),
     overflow: 'hidden',
   }),
-  start: () => ({
-    ...mediaStyle,
-  }),
-  end: () => ({
-    ...mediaStyle,
-  }),
 }
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index cd1b959809..2ffc5c6ef8 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -5,6 +5,7 @@ export default () => {
   vars.circularRadius = pxToRem(9999)
   vars.padding = `0 ${pxToRem(4)} 0 ${pxToRem(4)}`
   vars.color = 'rgba(0, 0, 0, 0.6)'
+  vars.backgroundColor = 'rgb(232, 232, 232)'
   vars.startPaddingLeft = '0px'
   vars.endPaddingRight = '0px'
   return vars
diff --git a/src/themes/teams/components/Layout/layoutStyles.ts b/src/themes/teams/components/Layout/layoutStyles.ts
index 9d1d307102..5fb2c1b6d4 100644
--- a/src/themes/teams/components/Layout/layoutStyles.ts
+++ b/src/themes/teams/components/Layout/layoutStyles.ts
@@ -53,6 +53,8 @@ const layoutStyles = {
   start: ({ props }) => ({
     ...(props.debug && debugArea()),
     ...(props.truncateStart && truncateStyle),
+    display: 'inline-flex',
+    alignItems: 'center',
     ...props.startCSS,
   }),
 
@@ -65,6 +67,8 @@ const layoutStyles = {
   end: ({ props }) => ({
     ...(props.debug && debugArea()),
     ...(props.truncateEnd && truncateStyle),
+    display: 'inline-flex',
+    alignItems: 'center',
     ...props.endCSS,
   }),
 }

From ba3b5be6d9f4a40af76a6b25e96a48ae0dc666c2 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 13 Aug 2018 11:58:26 +0200
Subject: [PATCH 07/16] -refactoring Label to work with icon, iconPosition,
 image and imagePosition props

---
 ...lExampleContentCustomization.shorthand.tsx |  34 ++++++
 .../Content/LabelExampleEnd.shorthand.tsx     |  11 --
 .../Content/LabelExampleIcon.shorthand.tsx    |   6 +
 .../LabelExampleIconPosition.shorthand.tsx    |   8 ++
 .../Content/LabelExampleImage.shorthand.tsx   |   8 ++
 .../LabelExampleImagePosition.shorthand.tsx   |   8 ++
 .../Content/LabelExampleStart.shorthand.tsx   |  11 --
 .../LabelExampleStartEnd.shorthand.tsx        |  34 ------
 .../components/Label/Content/index.tsx        |  28 +++--
 src/components/Image/Image.tsx                |   6 +-
 src/components/Label/Label.tsx                | 112 ++++++++++++++++--
 .../teams/components/Label/labelStyles.ts     |  30 ++---
 .../teams/components/Label/labelVariables.ts  |   1 +
 13 files changed, 206 insertions(+), 91 deletions(-)
 create mode 100644 docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Label/Content/LabelExampleEnd.shorthand.tsx
 create mode 100644 docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
 create mode 100644 docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
 create mode 100644 docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx
 create mode 100644 docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Label/Content/LabelExampleStart.shorthand.tsx
 delete mode 100644 docs/src/examples/components/Label/Content/LabelExampleStartEnd.shorthand.tsx

diff --git a/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
new file mode 100644
index 0000000000..a818f06a31
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/LabelExampleContentCustomization.shorthand.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+class LabelExampleContentCustomizationShorthand extends React.Component {
+  state = { hidden: false }
+
+  hide = () => {
+    this.setState({ hidden: true })
+    setTimeout(() => this.setState({ hidden: false }), 2000)
+  }
+
+  render() {
+    const { hidden } = this.state
+
+    if (hidden) return 'Returning in 2 seconds...'
+
+    return (
+      <Label
+        content="You can remove me!"
+        circular
+        image={{
+          src: 'public/images/avatar/small/matt.jpg',
+          avatar: true,
+        }}
+        icon={{
+          name: 'close',
+          onClick: this.hide,
+        }}
+      />
+    )
+  }
+}
+
+export default LabelExampleContentCustomizationShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleEnd.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleEnd.shorthand.tsx
deleted file mode 100644
index 9b135657e2..0000000000
--- a/docs/src/examples/components/Label/Content/LabelExampleEnd.shorthand.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Label, Icon } from '@stardust-ui/react'
-
-const LabelExampleEndShorthand = () => (
-  <Label
-    content="I have a closing icon"
-    end={<Icon name="close" variables={{ color: 'rgba(0, 0, 0, 0.6)' }} xSpacing="both" />}
-  />
-)
-
-export default LabelExampleEndShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
new file mode 100644
index 0000000000..804d24c52e
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/LabelExampleIcon.shorthand.tsx
@@ -0,0 +1,6 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleIconShorthand = <Label content="Label with icon" icon="close" />
+
+export default LabelExampleIconShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
new file mode 100644
index 0000000000..f2b9ca1184
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/LabelExampleIconPosition.shorthand.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleIconPositionShorthand = (
+  <Label content="Have a coffee!" icon="coffee" iconPosition="start" />
+)
+
+export default LabelExampleIconPositionShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx
new file mode 100644
index 0000000000..eb82161e09
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/LabelExampleImage.shorthand.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleImageShorthand = () => (
+  <Label content="John Doe" image="public/images/avatar/small/matt.jpg" />
+)
+
+export default LabelExampleImageShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx
new file mode 100644
index 0000000000..14c7993747
--- /dev/null
+++ b/docs/src/examples/components/Label/Content/LabelExampleImagePosition.shorthand.tsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Label } from '@stardust-ui/react'
+
+const LabelExampleImageShorthand = () => (
+  <Label content="John Doe" image="public/images/avatar/small/matt.jpg" imagePosition="end" />
+)
+
+export default LabelExampleImageShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleStart.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleStart.shorthand.tsx
deleted file mode 100644
index f45207d06b..0000000000
--- a/docs/src/examples/components/Label/Content/LabelExampleStart.shorthand.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-import { Label, Icon } from '@stardust-ui/react'
-
-const LabelExampleStartShorthand = () => (
-  <Label
-    content="Have a coffee!"
-    start={<Icon name="coffee" variables={{ color: 'rgba(0, 0, 0, 0.6)' }} xSpacing="both" />}
-  />
-)
-
-export default LabelExampleStartShorthand
diff --git a/docs/src/examples/components/Label/Content/LabelExampleStartEnd.shorthand.tsx b/docs/src/examples/components/Label/Content/LabelExampleStartEnd.shorthand.tsx
deleted file mode 100644
index 9acb29432e..0000000000
--- a/docs/src/examples/components/Label/Content/LabelExampleStartEnd.shorthand.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react'
-import { Label, Image, Icon } from '@stardust-ui/react'
-
-class LabelExampleStartEndShorthand extends React.Component {
-  state = { hidden: false }
-
-  hide = () => {
-    this.setState({ hidden: true })
-    setTimeout(() => this.setState({ hidden: false }), 2000)
-  }
-
-  render() {
-    const { hidden } = this.state
-
-    if (hidden) return 'Returning in 2 seconds...'
-
-    return (
-      <Label
-        content="John Doe"
-        circular
-        start={
-          <Image
-            src="public/images/avatar/small/matt.jpg"
-            avatar
-            variables={{ avatarSize: '20px' }}
-          />
-        }
-        end={<Icon name="close" variables={{ color: 'rgba(0, 0, 0, 0.6)' }} onClick={this.hide} />}
-      />
-    )
-  }
-}
-
-export default LabelExampleStartEndShorthand
diff --git a/docs/src/examples/components/Label/Content/index.tsx b/docs/src/examples/components/Label/Content/index.tsx
index 7b7e547ab4..64cafbca7e 100644
--- a/docs/src/examples/components/Label/Content/index.tsx
+++ b/docs/src/examples/components/Label/Content/index.tsx
@@ -10,19 +10,29 @@ const Content = () => (
       examplePath="components/Label/Content/LabelExample"
     />
     <ComponentExample
-      title="Start"
-      description="A label can contain media displayed at the start of it."
-      examplePath="components/Label/Content/LabelExampleStart"
+      title="Image"
+      description="A label can contain image."
+      examplePath="components/Label/Content/LabelExampleImage"
     />
     <ComponentExample
-      title="End"
-      description="A label can contain media displayed at the start of it."
-      examplePath="components/Label/Content/LabelExampleEnd"
+      title="Image position"
+      description="The image in the Label can be positioned to appear in the ending of the Label."
+      examplePath="components/Label/Content/LabelExampleImagePosition"
     />
     <ComponentExample
-      title="Start & End"
-      description="A label can contain media displayed both on the start and end end."
-      examplePath="components/Label/Content/LabelExampleStartEnd"
+      title="Icon"
+      description="A label can contain icon."
+      examplePath="components/Label/Content/LabelExampleIcon"
+    />
+    <ComponentExample
+      title="Icon position"
+      description="The icon in the Label can be positioned to appear in the starting of the Label."
+      examplePath="components/Label/Content/LabelExampleIconPosition"
+    />
+    <ComponentExample
+      title="Content customization"
+      description="The content props in the label can be customized."
+      examplePath="components/Label/Content/LabelExampleContentCustomization"
     />
   </ExampleSection>
 )
diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx
index acbd1ad0c3..12e10729e9 100644
--- a/src/components/Image/Image.tsx
+++ b/src/components/Image/Image.tsx
@@ -1,13 +1,15 @@
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { customPropTypes, UIComponent } from '../../lib'
+import { createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 import { ImageBehavior } from '../../lib/accessibility'
 
 /**
  * An image is a graphic representation of something.
  */
 class Image extends UIComponent<any, any> {
+  static create: Function
+
   static className = 'ui-image'
 
   static displayName = 'Image'
@@ -59,4 +61,6 @@ class Image extends UIComponent<any, any> {
   }
 }
 
+Image.create = createShorthandFactory(Image, src => ({ src }))
+
 export default Image
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index cd8ec79be9..c830797f04 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -9,9 +9,7 @@ import {
   UIComponent,
 } from '../../lib'
 
-import { Layout } from '../..'
-import labelStyles from '../../themes/teams/components/Label/labelStyles'
-import labelVariables from '../../themes/teams/components/Label/labelVariables'
+import { Icon, Image, Layout } from '../..'
 
 /**
  * A label displays content classification
@@ -39,23 +37,115 @@ class Label extends UIComponent<any, any> {
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
 
-    start: PropTypes.any,
+    /** Label can have an icon. */
+    icon: customPropTypes.itemShorthand,
 
-    end: PropTypes.any,
+    /** An icon label can format an Icon to appear before or after the text in the label */
+    iconPosition: PropTypes.oneOf(['start', 'end']),
+
+    /** Label can have an icon. */
+    image: customPropTypes.itemShorthand,
+
+    /** An icon label can format an Icon to appear before or after the text in the label */
+    imagePosition: PropTypes.oneOf(['start', 'end']),
   }
 
-  static handledProps = ['as', 'children', 'circular', 'className', 'content', 'end', 'start']
+  static handledProps = [
+    'as',
+    'children',
+    'circular',
+    'className',
+    'content',
+    'icon',
+    'iconPosition',
+    'image',
+    'imagePosition',
+  ]
 
   static defaultProps = {
     as: 'span',
+    imagePosition: 'start',
+    iconPosition: 'end',
   }
 
-  static styles = labelStyles
-
-  static variables = labelVariables
+  handleIconOverrides = iconProps => {
+    return {
+      ...(iconProps.onClick && { tabIndex: '0' }),
+      ...(!iconProps.xSpacing && {
+        xSpacing: 'none',
+      }),
+    }
+  }
 
-  renderComponent({ ElementType, classes, rest }) {
-    const { children, content, start, end } = this.props
+  renderComponent({ ElementType, classes, rest, variables, styles }) {
+    const { children, content, icon, iconPosition, image, imagePosition } = this.props
+
+    const imageElement =
+      image &&
+      Image.create(image, {
+        defaultProps: { styles: { root: styles.image } },
+        generateKey: false,
+      })
+
+    const iconElement =
+      icon &&
+      Icon.create(icon, {
+        defaultProps: {
+          styles: {
+            root: styles.icon,
+          },
+          ...(!(icon.variables && icon.variables.color) && {
+            variables: {
+              color: variables.color,
+            },
+          }),
+        },
+        generateKey: false,
+        overrideProps: this.handleIconOverrides,
+      })
+
+    let start = null
+    let end = null
+
+    // Default positioning of the image and icon
+    if (image && imagePosition === 'start') {
+      start = imageElement
+    }
+    if (icon && iconPosition === 'end') {
+      end = iconElement
+    }
+
+    // Custom positioning of the icon and image
+    if (icon && iconPosition === 'start') {
+      if (image && imagePosition === 'start') {
+        start = (
+          <React.Fragment>
+            {imageElement}
+            {iconElement}
+          </React.Fragment>
+        )
+      } else {
+        start = iconElement
+      }
+    }
+    if (image && imagePosition === 'end') {
+      if (icon && iconPosition === 'end') {
+        end = (
+          <React.Fragment>
+            {iconElement}
+            {imageElement}
+          </React.Fragment>
+        )
+      } else {
+        end = imageElement
+      }
+    }
+
+    if (icon && iconPosition === 'start' && imagePosition !== 'start') {
+      start = iconElement
+    } else if (icon && iconPosition === 'end' && (!image || imagePosition !== 'end')) {
+      end = iconElement
+    }
 
     return (
       <ElementType {...rest} className={classes.root}>
diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index 7d93d6b53d..6fbc6e70d9 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -1,25 +1,23 @@
 import { pxToRem } from '../../../../lib'
 import { ICSSInJSStyle } from '../../../../../types/theme'
 
-const getLabelHeight = () => {
-  return pxToRem(20)
-}
-
-export default {
-  root: ({ props: { start, end, circular }, variables }): ICSSInJSStyle => ({
+const labelStyles = {
+  root: ({ props: { image, imagePosition, circular }, variables }): ICSSInJSStyle => ({
     padding: variables.padding,
-    ...(start && {
-      paddingLeft: variables.startPaddingLeft,
-    }),
-    ...(end && {
-      paddingRight: variables.endPaddingRight,
-    }),
+    ...(image &&
+      imagePosition === 'start' && {
+        paddingLeft: variables.startPaddingLeft,
+      }),
+    ...(image &&
+      imagePosition === 'end' && {
+        paddingRight: variables.endPaddingRight,
+      }),
     display: 'inline-flex',
     alignItems: 'center',
-    height: getLabelHeight(),
+    height: variables.height,
     margin: `${pxToRem(4)} 0 0 ${pxToRem(4)}`,
     fontSize: pxToRem(14),
-    lineHeight: getLabelHeight(),
+    lineHeight: variables.height,
     backgroundColor: variables.backgroundColor,
     color: variables.color,
     borderRadius: pxToRem(3),
@@ -28,6 +26,10 @@ export default {
     }),
     overflow: 'hidden',
   }),
+  image: ({ variables }): ICSSInJSStyle => ({
+    height: variables.height,
+    width: variables.height,
+  }),
 }
 
 export default labelStyles
diff --git a/src/themes/teams/components/Label/labelVariables.ts b/src/themes/teams/components/Label/labelVariables.ts
index 2ffc5c6ef8..2ed7f03612 100644
--- a/src/themes/teams/components/Label/labelVariables.ts
+++ b/src/themes/teams/components/Label/labelVariables.ts
@@ -8,5 +8,6 @@ export default () => {
   vars.backgroundColor = 'rgb(232, 232, 232)'
   vars.startPaddingLeft = '0px'
   vars.endPaddingRight = '0px'
+  vars.height = pxToRem(20)
   return vars
 }

From b3001e45f111c697242ddc183abb66700e83440b Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 13 Aug 2018 12:02:55 +0200
Subject: [PATCH 08/16] -fixes

---
 src/components/Label/Label.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index c830797f04..ee7f4f3c57 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -141,12 +141,6 @@ class Label extends UIComponent<any, any> {
       }
     }
 
-    if (icon && iconPosition === 'start' && imagePosition !== 'start') {
-      start = iconElement
-    } else if (icon && iconPosition === 'end' && (!image || imagePosition !== 'end')) {
-      end = iconElement
-    }
-
     return (
       <ElementType {...rest} className={classes.root}>
         {childrenExist(children) ? (

From 12652e9ab349d8436fe1a8698ef67bd6045038c5 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 13 Aug 2018 12:04:45 +0200
Subject: [PATCH 09/16] -updated CHANGELOG

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 670c4f50fb..1579beb1b1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -25,6 +25,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `color` variables to Header and Header.Description @kuzhelov ([#72](https://github.com/stardust-ui/react/pull/72))
+- Add Label `image` and `imagePosition`, removed `onIconClick` prop  @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55/))
 
 <!--------------------------------[ v0.2.6 ]------------------------------- -->
 ## [v0.2.6](https://github.com/stardust-ui/react/tree/v0.2.6) (2018-08-09)

From 4ca94e66c28f48a5b4662d798e946044360a40aa Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 13 Aug 2018 12:16:36 +0200
Subject: [PATCH 10/16] -added test for handling the tabIndex property set to
 the icon with onClick handler

---
 test/specs/components/Label/Label-test.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/test/specs/components/Label/Label-test.tsx b/test/specs/components/Label/Label-test.tsx
index 14e747a8db..b70928ea43 100644
--- a/test/specs/components/Label/Label-test.tsx
+++ b/test/specs/components/Label/Label-test.tsx
@@ -2,7 +2,18 @@ import * as React from 'react'
 import { isConformant } from 'test/specs/commonTests'
 
 import Label from 'src/components/Label/Label'
+import { mountWithProvider } from '../../../utils'
 
 describe('Label', () => {
   isConformant(Label)
+
+  describe('icon', () => {
+    it('sets tabIndex="0" if the icon has onClick prop', () => {
+      const icon = mountWithProvider(
+        <Label icon={{ name: 'close', key: 'icon-key', onClick: () => {} }} />,
+      ).find('Icon[name="close"]')
+
+      expect(icon.prop('tabIndex')).toEqual('0')
+    })
+  })
 })

From 74a2819e6fffeb4bd3d33a739f7cea0dfc9564b7 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 23 Aug 2018 10:40:09 +0200
Subject: [PATCH 11/16] -merge conflicts

---
 .../src/examples/components/Label/Variations/LabelExampleIcon.tsx | 0
 .../components/Label/Variations/LabelExampleIconPosition.tsx      | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleIcon.tsx
 delete mode 100644 docs/src/examples/components/Label/Variations/LabelExampleIconPosition.tsx

diff --git a/docs/src/examples/components/Label/Variations/LabelExampleIcon.tsx b/docs/src/examples/components/Label/Variations/LabelExampleIcon.tsx
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/docs/src/examples/components/Label/Variations/LabelExampleIconPosition.tsx b/docs/src/examples/components/Label/Variations/LabelExampleIconPosition.tsx
deleted file mode 100644
index e69de29bb2..0000000000

From 58c47bac43a598a9100d6eae7c06986c75ec41ff Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 23 Aug 2018 10:59:29 +0200
Subject: [PATCH 12/16] -handling cursor pointer if the icon has onClick prop

---
 src/themes/teams/components/Label/labelStyles.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index 6fbc6e70d9..bc7dff6f06 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -30,6 +30,13 @@ const labelStyles = {
     height: variables.height,
     width: variables.height,
   }),
+  icon: ({ props }): ICSSInJSStyle => ({
+    ...(props.icon &&
+      typeof props.icon === 'object' &&
+      props.icon.onClick && {
+        cursor: 'pointer',
+      }),
+  }),
 }
 
 export default labelStyles

From 211f372355181fb1edbe297fbfd74213fce24cb1 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 23 Aug 2018 11:24:04 +0200
Subject: [PATCH 13/16] -remove margin from the label styles

---
 src/themes/teams/components/Label/labelStyles.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/themes/teams/components/Label/labelStyles.ts b/src/themes/teams/components/Label/labelStyles.ts
index bc7dff6f06..d7069344c2 100644
--- a/src/themes/teams/components/Label/labelStyles.ts
+++ b/src/themes/teams/components/Label/labelStyles.ts
@@ -15,7 +15,6 @@ const labelStyles = {
     display: 'inline-flex',
     alignItems: 'center',
     height: variables.height,
-    margin: `${pxToRem(4)} 0 0 ${pxToRem(4)}`,
     fontSize: pxToRem(14),
     lineHeight: variables.height,
     backgroundColor: variables.backgroundColor,

From ad24d4f2fdb547b2fb52232d27e382f95ac00525 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 27 Aug 2018 18:34:30 +0200
Subject: [PATCH 14/16] -updated with latest master, fixed changelog, added
 shorthand tests

---
 CHANGELOG.md                               | 2 +-
 src/components/Label/Label.tsx             | 4 ++--
 test/specs/components/Label/Label-test.tsx | 7 +++++++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 829db062e0..b27b1fd712 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `descriptionColor` to Header @kuzhelov ([#78](https://github.com/stardust-ui/react/pull/78))
 - Add accessibility behavior description @kolaps33 ([#74](https://github.com/stardust-ui/react/pull/74))
 - Add strict null checks for generated TS types @smykhailov ([#108](https://github.com/stardust-ui/react/pull/108))
+- Add Label `image` and `imagePosition`, removed `onIconClick` prop  @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55/))
 
 <!--------------------------------[ v0.3.0 ]------------------------------- -->
 ## [v0.3.0](https://github.com/stardust-ui/react/tree/v0.3.0) (2018-08-22)
@@ -65,7 +66,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `color` variables to Header and Header.Description @kuzhelov ([#72](https://github.com/stardust-ui/react/pull/72))
 - Add `ItemLayout` component @mnajdova ([#60](https://github.com/stardust-ui/react/pull/60))
 - Add Input `clearable` prop @alinais ([#37](https://github.com/stardust-ui/react/pull/37))
-- Add Label `image` and `imagePosition`, removed `onIconClick` prop  @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55/))
 
 <!--------------------------------[ v0.2.6 ]------------------------------- -->
 ## [v0.2.6](https://github.com/stardust-ui/react/tree/v0.2.6) (2018-08-09)
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index a1cfb6f37a..2bc9c07f4f 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -112,8 +112,8 @@ class Label extends UIComponent<any, any> {
         overrideProps: this.handleIconOverrides,
       })
 
-    let start = null
-    let end = null
+    let start: React.ReactNode = null
+    let end: React.ReactNode = null
 
     // Default positioning of the image and icon
     if (image && imagePosition === 'start') {
diff --git a/test/specs/components/Label/Label-test.tsx b/test/specs/components/Label/Label-test.tsx
index b70928ea43..c220d32db6 100644
--- a/test/specs/components/Label/Label-test.tsx
+++ b/test/specs/components/Label/Label-test.tsx
@@ -2,10 +2,17 @@ import * as React from 'react'
 import { isConformant } from 'test/specs/commonTests'
 
 import Label from 'src/components/Label/Label'
+import Icon from 'src/components/Icon/Icon'
+import Image from 'src/components/Image/Image'
 import { mountWithProvider } from '../../../utils'
+import { implementsShorthandProp } from '../../commonTests'
+
+const labelImplementsShorthandProp = implementsShorthandProp(Label)
 
 describe('Label', () => {
   isConformant(Label)
+  labelImplementsShorthandProp('icon', Icon, { mapsValueToProp: 'name' })
+  labelImplementsShorthandProp('image', Image, { mapsValueToProp: 'src' })
 
   describe('icon', () => {
     it('sets tabIndex="0" if the icon has onClick prop', () => {

From bc1d0e68b07778ad4de65b5f84b60fe7037b3299 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 3 Sep 2018 11:03:41 +0200
Subject: [PATCH 15/16] -merge conflicts

---
 src/components/Label/Label.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 994655865b..4e117ea782 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -13,12 +13,7 @@ import { Icon, Image, Layout } from '../..'
 import { Accessibility } from '../../lib/accessibility/interfaces'
 
 import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
-import {
-  Extendable,
-  ReactChildren,
-  ItemShorthand,
-  ComponentEventHandler,
-} from '../../../types/utils'
+import { Extendable, ReactChildren, ItemShorthand } from '../../../types/utils'
 
 export interface ILabelProps {
   accessibility?: Accessibility
@@ -30,7 +25,8 @@ export interface ILabelProps {
   fluid?: boolean
   icon?: ItemShorthand
   iconPosition?: 'start' | 'end'
-  onIconClick?: ComponentEventHandler<ILabelProps>
+  image?: ItemShorthand
+  imagePosition?: 'start' | 'end'
   styles?: IComponentPartStylesInput
   variables?: ComponentVariablesInput
 }
@@ -126,7 +122,11 @@ class Label extends UIComponent<Extendable<ILabelProps>, any> {
           styles: {
             root: styles.icon,
           },
-          ...(!(icon.variables && icon.variables.color) && {
+          ...(!(
+            typeof icon === 'object' &&
+            (icon as any).variables &&
+            (icon as any).variables.color
+          ) && {
             variables: {
               color: variables.color,
             },

From e31fed7a1e73d35f4cc14083fa73447d8bb77714 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 3 Sep 2018 11:18:40 +0200
Subject: [PATCH 16/16] -fixed changelog

---
 CHANGELOG.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f989169c1f..850d25fcfe 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Correct Teams theme site variables @sergiorv ([#110](https://github.com/stardust-ui/react/pull/110))
 
+### Features
+- Add Label `image` and `imagePosition`, removed `onIconClick` prop  @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55/))
+
 <!--------------------------------[ v0.5.0 ]------------------------------- -->
 ## [v0.5.0](https://github.com/stardust-ui/react/tree/v0.5.0) (2018-08-30)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.4.0...v0.5.0)
@@ -31,9 +34,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Adjust layout and rendered HTML of Input @kuzhelov ([#127](https://github.com/stardust-ui/react/pull/127))
 - Fix Button component's layout and icon color @kuzhelov ([#135](https://github.com/stardust-ui/react/pull/135))
 
-### Features
-- Add Label `image` and `imagePosition`, removed `onIconClick` prop  @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55/))
-
 <!--------------------------------[ v0.4.0 ]------------------------------- -->
 ## [v0.4.0](https://github.com/stardust-ui/react/tree/v0.4.0) (2018-08-29)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.3.0...v0.4.0)