From a0e44a9e7a5ed7dbbfc23aa734aa77d9f838ab9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rasmus=20W=C3=B8lk?=
 <640976+rasmuswoelk@users.noreply.github.com>
Date: Wed, 31 Oct 2018 13:14:08 +0100
Subject: [PATCH] Added a spacer between icon and badge (#684)

---
 lib/IconButton/IconButton.css | 21 ++++++++++++++++-----
 lib/IconButton/IconButton.js  |  2 +-
 lib/Selection/Selection.css   |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/lib/IconButton/IconButton.css b/lib/IconButton/IconButton.css
index c61587c17..6146fd52d 100644
--- a/lib/IconButton/IconButton.css
+++ b/lib/IconButton/IconButton.css
@@ -16,11 +16,6 @@
   background: none;
   color: var(--color-icon);
 
-  /* Let the button expand in width if we have a badge */
-  &.hasBadge {
-    width: auto;
-  }
-
   & + .iconButton {
     margin-left: 0.25em;
   }
@@ -50,3 +45,19 @@
     }
   }
 }
+
+/**
+ * With badge
+ */
+
+/* Let the button expand in width if we have a badge */
+.iconButton.hasBadge {
+  width: auto;
+}
+
+/* Add spacing between icon and badge */
+.hasBadge .icon::after {
+  content: '';
+  width: 0.3em;
+  display: inline-block;
+}
diff --git a/lib/IconButton/IconButton.js b/lib/IconButton/IconButton.js
index bdcc68780..25409796a 100644
--- a/lib/IconButton/IconButton.js
+++ b/lib/IconButton/IconButton.js
@@ -68,7 +68,7 @@ const IconButton = React.forwardRef(({
   return (
     <Element {...buttonProps}>
       <span className={classNames(css.iconButtonInner, css[`${size}Offset`])} {...rest}>
-        <Icon icon={icon} size={iconSize} iconClassName={iconClassName} />
+        <Icon icon={icon} size={iconSize} iconRootClass={css.icon} iconClassName={iconClassName} />
         { badgeCount !== undefined && <Badge size="medium" color={badgeColor}>{badgeCount}</Badge> }
       </span>
     </Element>
diff --git a/lib/Selection/Selection.css b/lib/Selection/Selection.css
index 7a25a67ba..dc1aab724 100644
--- a/lib/Selection/Selection.css
+++ b/lib/Selection/Selection.css
@@ -38,7 +38,7 @@
 
   &.marginBottom0 {
     /* stylelint-disable-next-line length-zero-no-unit */
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 }