From a4a6fe39b8b661f6aa39f00f3d48067c882632d2 Mon Sep 17 00:00:00 2001
From: Alexis Duran <alexis.duranm@gmail.com>
Date: Fri, 21 May 2021 21:34:17 +0200
Subject: [PATCH] fix: Inline spinner breaking button siblings (#77)

* fix(spinner): allow to behave as icon by wrapping <span />

closes #22

* docs(release): add reference to latest changes

* test(spinner): update tests after new span wrap
---
 docs/release-notes.mdx                        |  1 +
 .../InlineSpinner/InlineSpinner.tsx           |  8 +++-
 .../__snapshots__/InlineSpinner.spec.tsx.snap | 42 ++++++++-----------
 3 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/docs/release-notes.mdx b/docs/release-notes.mdx
index b44863ccc..64de9062e 100644
--- a/docs/release-notes.mdx
+++ b/docs/release-notes.mdx
@@ -16,6 +16,7 @@ import { TitleCard } from './components/TitleCard';
 
 #### 🐛 Bug Fixes
 - `Select` to have cursor pointer not-allowed
+- `InlineSpinner` to behave closer to other icons when placed alongside text
 
 
 #### 📖 Documentation
diff --git a/src/components/InlineSpinner/InlineSpinner.tsx b/src/components/InlineSpinner/InlineSpinner.tsx
index c70a124f7..c6387cf36 100644
--- a/src/components/InlineSpinner/InlineSpinner.tsx
+++ b/src/components/InlineSpinner/InlineSpinner.tsx
@@ -36,7 +36,7 @@ const rotation = keyframes`
     }
 `;
 
-const InlineSpinner: React.FC<InlineSpinnerProps> = styled.div<InlineSpinnerProps>`
+const InlineSpinnerIcon: React.FC<InlineSpinnerProps> = styled.div<InlineSpinnerProps>`
     display: inline-block;
     box-sizing: border-box;
     width: 1.25rem;
@@ -50,6 +50,12 @@ const InlineSpinner: React.FC<InlineSpinnerProps> = styled.div<InlineSpinnerProp
     ${compose(margin, sizeVariant)}
 `;
 
+const InlineSpinner = () => (
+    <span>
+        <InlineSpinnerIcon />
+    </span>
+);
+
 InlineSpinner.defaultProps = {
     color: Colors.AUTHENTIC_BLUE_900,
     size: 'medium'
diff --git a/src/components/InlineSpinner/__snapshots__/InlineSpinner.spec.tsx.snap b/src/components/InlineSpinner/__snapshots__/InlineSpinner.spec.tsx.snap
index 2861d2131..c0c10d1fa 100644
--- a/src/components/InlineSpinner/__snapshots__/InlineSpinner.spec.tsx.snap
+++ b/src/components/InlineSpinner/__snapshots__/InlineSpinner.spec.tsx.snap
@@ -7,20 +7,18 @@ exports[`InlineSpinner renders in a custom color 1`] = `
   width: 1.25rem;
   height: 1.25rem;
   vertical-align: text-bottom;
-  border: 0.125rem solid #069D4F;
+  border: 0.125rem solid;
   border-right-color: transparent;
   border-radius: 50%;
   -webkit-animation: wdnds 750ms linear infinite;
   animation: wdnds 750ms linear infinite;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-width: 0.125rem;
 }
 
-<div
-  class="c0"
-  color="#069D4F"
-/>
+<span>
+  <div
+    class="c0"
+  />
+</span>
 `;
 
 exports[`InlineSpinner renders the default variant 1`] = `
@@ -30,20 +28,18 @@ exports[`InlineSpinner renders the default variant 1`] = `
   width: 1.25rem;
   height: 1.25rem;
   vertical-align: text-bottom;
-  border: 0.125rem solid #001E3E;
+  border: 0.125rem solid;
   border-right-color: transparent;
   border-radius: 50%;
   -webkit-animation: wdnds 750ms linear infinite;
   animation: wdnds 750ms linear infinite;
-  width: 1.25rem;
-  height: 1.25rem;
-  border-width: 0.125rem;
 }
 
-<div
-  class="c0"
-  color="#001E3E"
-/>
+<span>
+  <div
+    class="c0"
+  />
+</span>
 `;
 
 exports[`InlineSpinner renders the small size 1`] = `
@@ -53,18 +49,16 @@ exports[`InlineSpinner renders the small size 1`] = `
   width: 1.25rem;
   height: 1.25rem;
   vertical-align: text-bottom;
-  border: 0.125rem solid #001E3E;
+  border: 0.125rem solid;
   border-right-color: transparent;
   border-radius: 50%;
   -webkit-animation: wdnds 750ms linear infinite;
   animation: wdnds 750ms linear infinite;
-  width: 1rem;
-  height: 1rem;
-  border-width: 0.1rem;
 }
 
-<div
-  class="c0"
-  color="#001E3E"
-/>
+<span>
+  <div
+    class="c0"
+  />
+</span>
 `;