fix(components): reduce icon margin on Tag (#573)

sumup-oss · Apr 22, 2020 · b3d89f4 · b3d89f4 · vercel · Apr 22, 2020
1 parent 03aa6ca
commit b3d89f4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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,