From c582e6e3ec939aa53db8a9c8214ee4d9a3a73130 Mon Sep 17 00:00:00 2001
From: Cyrille Perois <cperois@outlook.com>
Date: Tue, 4 Jun 2019 10:49:36 +0200
Subject: [PATCH] fix(Chip): Better alignment

---
 react/Chip/Readme.md        | 16 ++++++++++++++++
 stylus/components/chip.styl |  6 +++---
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/react/Chip/Readme.md b/react/Chip/Readme.md
index 5ac8824b66..e9915a85d8 100644
--- a/react/Chip/Readme.md
+++ b/react/Chip/Readme.md
@@ -119,3 +119,19 @@ const ContactChip = ({ contact }) => (
   </div>
 </div>
 ```
+
+### Complete example
+
+```
+<Chip
+  size="small"
+  variant="outlined"
+  theme="primary"
+  onClick={() => alert('you clicked')}
+>
+  <Icon icon="file" size={16} style={{ marginRight: '0.5rem' }} />
+  1 invoice
+  <Chip.Separator />
+  <Icon icon="openwith" size={16} />
+</Chip>
+```
diff --git a/stylus/components/chip.styl b/stylus/components/chip.styl
index a364c44379..583b4e2c1a 100644
--- a/stylus/components/chip.styl
+++ b/stylus/components/chip.styl
@@ -23,13 +23,13 @@ $round-chip
 
 $small-size-chip
     height $chip-height-small
-    padding (($chip-height-small - $chip-font-size-small) / 2)
+    padding 0 (($chip-height-small - $chip-font-size-small) / 2)
     border-radius ($chip-height-small / 2)
     font-size $chip-font-size-small
 
 $normal-size-chip
     height $chip-height-normal
-    padding (($chip-height-normal - $chip-font-size-normal) / 2)
+    padding 0 (($chip-height-normal - $chip-font-size-normal) / 2)
     border-radius ($chip-height-normal / 2)
 
 $outlined-variant-chip
@@ -80,7 +80,7 @@ $chip-separator
     width rem(1)
     border-left rem(1) solid var(--silver)
     display inline-block
-    height 100%
+    height 40%
     margin-left rem(8)
     margin-right rem(8)