Set spinner default to inherit color

ensdomains · Sep 8, 2023 · 0eb670d · 0eb670d
1 parent bd02860
commit 0eb670d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git a/components/src/components/atoms/Button/Button.tsx b/components/src/components/atoms/Button/Button.tsx
@@ -307,25 +307,21 @@ export const Button = React.forwardRef(
         {children}
       </ContentContainer>
     )
-    const spinnerColor = disabled ? 'greyPrimary' : 'backgroundPrimary'
 
     let childContent: ReactNodeNoStrings
     if (shape === 'circle' || shape === 'square') {
-      childContent = loading ? <Spinner color={spinnerColor} /> : labelContent
+      childContent = loading ? <Spinner /> : labelContent
     } else {
       const hasPrefix = !!prefix
       const hasNoPrefixNoSuffix = !hasPrefix && !suffix
       const hasSuffixNoPrefix = !hasPrefix && !!suffix
 
       let prefixOrLoading = prefix
-      if (loading && hasPrefix)
-        prefixOrLoading = <Spinner color={spinnerColor} />
-      else if (loading && hasNoPrefixNoSuffix)
-        prefixOrLoading = <Spinner color={spinnerColor} />
+      if (loading && hasPrefix) prefixOrLoading = <Spinner />
+      else if (loading && hasNoPrefixNoSuffix) prefixOrLoading = <Spinner />
 
       let suffixOrLoading = suffix
-      if (loading && hasSuffixNoPrefix)
-        suffixOrLoading = <Spinner color={spinnerColor} />
+      if (loading && hasSuffixNoPrefix) suffixOrLoading = <Spinner />
 
       childContent = (
         <>

diff --git a/components/src/components/atoms/Spinner/Spinner.tsx b/components/src/components/atoms/Spinner/Spinner.tsx
@@ -21,12 +21,14 @@ const rotate = keyframes`
   }
 `
 
-const Container = styled.div<{ $size: Size; $color: Colors }>(
+const Container = styled.div<{ $size: Size; $color?: Colors }>(
   ({ theme, $color, $size }) => css`
     animation: ${rotate} 1.1s linear infinite;
 
-    color: ${theme.colors[$color]};
-    stroke: ${theme.colors[$color]};
+    ${$color &&
+    css`
+      color: ${theme.colors[$color]};
+    `}
 
     ${() => {
       switch ($size) {
@@ -55,6 +57,7 @@ const Container = styled.div<{ $size: Size; $color: Colors }>(
 
     svg {
       display: block;
+      stroke: currentColor;
       height: 100%;
       width: 100%;
     }