Added a spacer between icon and badge (#684)

folio-org · Oct 31, 2018 · a0e44a9 · a0e44a9
1 parent c3e50a3
commit a0e44a9
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git 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
@@ -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
@@ -38,7 +38,7 @@
 
   &.marginBottom0 {
     /* stylelint-disable-next-line length-zero-no-unit */
-    margin-bottom: 0px;
+    margin-bottom: 0;
   }
 }