From b3d89f43ac54ef1f7c0c2ff6f4edce92e2bd937d Mon Sep 17 00:00:00 2001
From: Mariela Kasovska <mariela.kasovska@sumup.com>
Date: Wed, 22 Apr 2020 17:15:42 +0300
Subject: [PATCH] fix(components): reduce icon margin on Tag (#573)

---
 src/__snapshots__/storyshots.spec.js.snap        |  8 ++++----
 src/components/Tag/Tag.js                        | 16 +++++++++++-----
 .../Tag/__snapshots__/Tag.spec.js.snap           |  2 +-
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap
index e54275c3dc..118e9eae8a 100644
--- a/src/__snapshots__/storyshots.spec.js.snap
+++ b/src/__snapshots__/storyshots.spec.js.snap
@@ -11439,7 +11439,7 @@ exports[`Storyshots Components/Tag Removable 1`] = `
   overflow: initial;
   height: 16px;
   width: 16px;
-  margin-left: 8px;
+  margin-left: 4px;
 }
 
 .circuit-4:focus,
@@ -11598,7 +11598,7 @@ exports[`Storyshots Components/Tag With Prefix 1`] = `
 }
 
 .circuit-0 {
-  margin-right: 8px;
+  margin-right: 4px;
 }
 
 .circuit-0: svg {
@@ -11636,7 +11636,7 @@ exports[`Storyshots Components/Tag With Suffix 1`] = `
 }
 
 .circuit-0 {
-  margin-left: 8px;
+  margin-left: 4px;
 }
 
 .circuit-0: svg {
@@ -16665,7 +16665,7 @@ label + .circuit-3 {
   overflow: initial;
   height: 16px;
   width: 16px;
-  margin-left: 8px;
+  margin-left: 4px;
 }
 
 .circuit-11:focus,
diff --git a/src/components/Tag/Tag.js b/src/components/Tag/Tag.js
index 188f08907b..e31f1c3313 100644
--- a/src/components/Tag/Tag.js
+++ b/src/components/Tag/Tag.js
@@ -82,7 +82,7 @@ const TagElement = styled('div')`
 
 const prefixStyles = ({ theme, selected }) => css`
   label: tag__prefix;
-  margin-right: ${theme.spacings.byte};
+  margin-right: ${theme.spacings.bit};
   ${selected}: {
     label: tag__prefix--selected;
     svg {
@@ -93,7 +93,7 @@ const prefixStyles = ({ theme, selected }) => css`
 
 const suffixStyles = ({ theme, selected }) => css`
   label: tag__suffix;
-  margin-left: ${theme.spacings.byte};
+  margin-left: ${theme.spacings.bit};
   ${selected}: {
     label: tag__suffix--selected;
     svg {
@@ -104,7 +104,7 @@ const suffixStyles = ({ theme, selected }) => css`
 
 const closeButtonStyles = ({ theme }) => css`
   label: tag__close-btn;
-  margin-left: ${theme.spacings.byte};
+  margin-left: ${theme.spacings.bit};
 `;
 
 const selectedCloseButtonStyles = ({ theme, selected }) =>
@@ -165,10 +165,16 @@ const Tag = ({
   ...props
 }) => {
   const prefixElement = Prefix && (
-    <Prefix css={theme => prefixStyles({ theme, selected })} />
+    <Prefix
+      selected={selected}
+      css={theme => prefixStyles({ theme, selected })}
+    />
   );
   const suffixElement = Suffix && (
-    <Suffix css={theme => suffixStyles({ theme, selected })} />
+    <Suffix
+      selected={selected}
+      css={theme => suffixStyles({ theme, selected })}
+    />
   );
 
   return (
diff --git a/src/components/Tag/__snapshots__/Tag.spec.js.snap b/src/components/Tag/__snapshots__/Tag.spec.js.snap
index d189683bc4..ff758d4f1a 100644
--- a/src/components/Tag/__snapshots__/Tag.spec.js.snap
+++ b/src/components/Tag/__snapshots__/Tag.spec.js.snap
@@ -92,7 +92,7 @@ exports[`Tag when is selected should change the close icon color 1`] = `
   overflow: initial;
   height: 16px;
   width: 16px;
-  margin-left: 8px;
+  margin-left: 4px;
 }
 
 .circuit-4:focus,