Merge pull request #1024 from drazik/chip-alignment

fix(Chip): Better alignment
cozy · Jun 4, 2019 · 9d10c09 · 9d10c09
2 parents 36e8530 + c582e6e
commit 9d10c09
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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)