Simplify loading indicator styles (#3719)

Leverage currentColor for loading indicator dots -- makes styling easier, and more consistent, for consumers
JedWatson · Aug 16, 2019 · 270cc01 · 270cc01
1 parent c22a4b2
commit 270cc01
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 22 deletions.
diff --git a/.changeset/five-lions-melt/changes.json b/.changeset/five-lions-melt/changes.json
@@ -0,0 +1 @@
+{ "releases": [{ "name": "react-select", "type": "patch" }], "dependents": [] }
diff --git a/.changeset/five-lions-melt/changes.md b/.changeset/five-lions-melt/changes.md
@@ -0,0 +1 @@
+Leverage currentColor for loading indicator dots -- makes styling easier, and more consistent, for consumers
diff --git a/packages/react-select/src/components/indicators.js b/packages/react-select/src/components/indicators.js
@@ -177,18 +177,18 @@ export const loadingIndicatorCSS = ({
   verticalAlign: 'middle',
 });
 
-type DotProps = { color: string, delay: number, offset: boolean };
-const LoadingDot = ({ color, delay, offset }: DotProps) => (
+type DotProps = { delay: number, offset: boolean };
+const LoadingDot = ({ delay, offset }: DotProps) => (
   <span
     css={{
       animation: `${loadingDotAnimations} 1s ease-in-out ${delay}ms infinite;`,
-      backgroundColor: color,
-      borderRadius: '1em;',
-      display: 'inline-block;',
-      marginLeft: offset ? '1em;' : null,
-      height: '1em;',
-      verticalAlign: 'top;',
-      width: '1em;',
+      backgroundColor: 'currentColor',
+      borderRadius: '1em',
+      display: 'inline-block',
+      marginLeft: offset ? '1em' : null,
+      height: '1em',
+      verticalAlign: 'top',
+      width: '1em',
     }}
   />
 );
@@ -205,16 +205,7 @@ export type LoadingIconProps = {
     size: number,
   };
 export const LoadingIndicator = (props: LoadingIconProps) => {
-  const {
-    className,
-    cx,
-    getStyles,
-    innerProps,
-    isFocused,
-    isRtl,
-    theme: { colors },
-  } = props;
-  const color = isFocused ? colors.neutral80 : colors.neutral20;
+  const { className, cx, getStyles, innerProps, isRtl } = props;
 
   return (
     <div
@@ -228,9 +219,9 @@ export const LoadingIndicator = (props: LoadingIconProps) => {
         className
       )}
     >
-      <LoadingDot color={color} delay={0} offset={isRtl} />
-      <LoadingDot color={color} delay={160} offset />
-      <LoadingDot color={color} delay={320} offset={!isRtl} />
+      <LoadingDot delay={0} offset={isRtl} />
+      <LoadingDot delay={160} offset />
+      <LoadingDot delay={320} offset={!isRtl} />
     </div>
   );
 };