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
freenowtech · May 21, 2021 · a4a6fe3 · a4a6fe3
1 parent acb4c8e
commit a4a6fe3
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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>
 `;