[V3][RL] Make spinner easier to use

LifeSG · Oct 17, 2024 · 2e37066 · 2e37066
1 parent 082932c
commit 2e37066
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 126 deletions.
diff --git a/src/button/button.style.tsx b/src/button/button.style.tsx
@@ -149,32 +149,6 @@ export const Main = styled.button<MainStyleProps>`
     }}
 `;
 
-export const Spinner = styled(ComponentLoadingSpinner)<MainStyleProps>`
+export const Spinner = styled(ComponentLoadingSpinner)`
     margin-right: 0.5rem;
-    ${(props) => {
-        let color = props.$buttonIsDanger
-            ? Colour["text-error"]
-            : Colour["text-primary"](props);
-        switch (props.$buttonStyle) {
-            case "secondary":
-            case "light":
-            case "link":
-                break;
-            case "disabled":
-                color = Colour["text-disabled"](props);
-                break;
-            default:
-                color = Colour["text-inverse"](props);
-                break;
-        }
-
-        return css`
-            #inner1,
-            #inner2,
-            #inner3,
-            #inner4 {
-                border-color: ${color} transparent transparent transparent;
-            }
-        `;
-    }}
 `;
diff --git a/src/button/button.tsx b/src/button/button.tsx
@@ -32,7 +32,7 @@ const DefaultComponent = (props: ButtonProps, ref: ButtonRef) => {
             {...mainStyle}
             {...otherProps}
         >
-            {loading && <Spinner {...mainStyle} />}
+            {loading && <Spinner />}
             <span>{children}</span>
         </Main>
     );
@@ -62,7 +62,7 @@ const SmallComponent = (props: ButtonProps, ref: ButtonRef) => {
             {...mainStyle}
             {...otherProps}
         >
-            {loading && <Spinner {...mainStyle} size={16} />}
+            {loading && <Spinner />}
             <span>{children}</span>
         </Main>
     );
@@ -92,7 +92,7 @@ const LargeComponent = (props: ButtonProps, ref: ButtonRef) => {
             {...mainStyle}
             {...otherProps}
         >
-            {loading && <Spinner {...mainStyle} size={16} />}
+            {loading && <Spinner />}
             <span>{children}</span>
         </Main>
     );

diff --git a/src/shared/component-loading-spinner/component-loading-spinner.style.tsx b/src/shared/component-loading-spinner/component-loading-spinner.style.tsx
@@ -1,19 +1,12 @@
-import { V2_Color } from "../../v2_color/color";
 import styled, { keyframes } from "styled-components";
 
 // =============================================================================
 // STYLE INTERFACES, transient props are denoted with $
 // See more https://styled-components.com/docs/api#transient-props
 // =============================================================================
 interface StyleProps {
-    $size: number;
-    $color?: string;
-}
-
-interface InnerStyleProps {
-    $borderWidth: number;
-    $size: number;
-    $color?: string;
+    $size?: number;
+    $color?: string | ((props: any) => string);
 }
 
 // =============================================================================
@@ -22,8 +15,9 @@ interface InnerStyleProps {
 export const OuterRing = styled.div<StyleProps>`
     display: inline-block;
     position: relative;
-    width: ${(props) => props.$size}px;
-    height: ${(props) => props.$size}px;
+    width: ${({ $size }) => ($size ? `${$size}px` : "1em")};
+    height: ${({ $size }) => ($size ? `${$size}px` : "1em")};
+    color: ${(props) => props.$color || "currentColor"};
 `;
 
 const rotate = keyframes`
@@ -35,18 +29,16 @@ const rotate = keyframes`
 	}
 `;
 
-export const InnerRing1 = styled.div<InnerStyleProps>`
+export const InnerRing1 = styled.div`
     box-sizing: border-box;
     display: block;
     position: absolute;
-    width: ${(props) => props.$size}px;
-    height: ${(props) => props.$size}px;
-    margin: ${(props) => props.$borderWidth}px;
-    border-width: ${(props) => props.$borderWidth}px;
+    width: 100%;
+    height: 100%;
+    border-width: 2px;
     border-style: solid;
     border-radius: 50%;
-    border-color: ${(props) => props.$color || V2_Color.Neutral[8](props)}
-        transparent transparent transparent;
+    border-color: currentColor transparent transparent transparent;
     animation: ${rotate} 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
 `;
 

diff --git a/src/shared/component-loading-spinner/component-loading-spinner.tsx b/src/shared/component-loading-spinner/component-loading-spinner.tsx
@@ -10,47 +10,37 @@ import {
 /**
  * This component is mainly used within components and is not to be confused
  * with the main loading spinner in animations/loading-spinner
+ *
+ * By default it inherits the font size and color of the parent container.
+ *
+ * The color can be customised via the prop or through styled-components.
+ *
+ * Example:
+ * ```
+ * styled(ComponentLoadingSpinner)`
+ *   color: red;
+ * `
+ * ```
  */
 export interface ComponentLoadingSpinnerProps {
     className?: string | undefined;
     /** Measurement in px */
     size?: number | undefined;
-    color?: string | undefined;
+    /** rgb/hex value or Color token */
+    color?: string | ((props: any) => string) | undefined;
 }
 
 export const ComponentLoadingSpinner = ({
     color,
     className,
-    size = 18,
+    size,
 }: ComponentLoadingSpinnerProps): JSX.Element => {
-    const borderWidth = 2;
-
     return (
         <OuterRing className={className} $size={size} $color={color}>
-            <InnerRing1
-                id="inner1"
-                $size={size - borderWidth}
-                $borderWidth={borderWidth}
-                $color={color}
-            />
-            <InnerRing2
-                id="inner2"
-                $size={size - borderWidth}
-                $borderWidth={borderWidth}
-                $color={color}
-            />
-            <InnerRing3
-                id="inner3"
-                $size={size - borderWidth}
-                $borderWidth={borderWidth}
-                $color={color}
-            />
-            <InnerRing4
-                id="inner4"
-                $size={size - borderWidth}
-                $borderWidth={borderWidth}
-                $color={color}
-            />
+            <InnerRing1 id="inner1" />
+            <InnerRing2 id="inner2" />
+            <InnerRing3 id="inner3" />
+            <InnerRing4 id="inner4" />
         </OuterRing>
     );
 };
diff --git a/src/shared/dropdown-list-v2/dropdown-list.styles.tsx b/src/shared/dropdown-list-v2/dropdown-list.styles.tsx
@@ -6,6 +6,7 @@ import styled, { css } from "styled-components";
 import { V2_Color } from "../../v2_color";
 import { V2_MediaQuery } from "../../v2_media";
 import { V2_TextStyleHelper } from "../../v2_text";
+import { ComponentLoadingSpinner } from "../component-loading-spinner/component-loading-spinner";
 import { DropdownVariantType } from "../dropdown-list/types";
 import { BasicButton } from "../input-wrapper/input-wrapper";
 
@@ -150,14 +151,12 @@ export const SelectAllButton = styled(DropdownCommonButton)`
     padding: 0.5rem 1rem;
 `;
 
-export const ResultStateContainer = styled.div`
+export const ResultStateContainer = styled.div<ListStyleProps>`
     width: 100%;
     display: flex;
     padding: 1rem 0.5rem;
     align-items: center;
-`;
 
-export const ResultStateText = styled.div<ListStyleProps>`
     ${(props) =>
         V2_TextStyleHelper.getTextStyle(
             props.$variant === "small" ? "BodySmall" : "Body",
@@ -176,3 +175,8 @@ export const LabelIcon = styled(ExclamationCircleFillIcon)<ListStyleProps>`
     margin-right: 0.625rem;
     color: ${V2_Color.Validation.Red.Icon};
 `;
+
+export const Spinner = styled(ComponentLoadingSpinner)`
+    margin-right: 0.625rem;
+    color: ${V2_Color.Primary};
+`;
diff --git a/src/shared/dropdown-list-v2/dropdown-list.tsx b/src/shared/dropdown-list-v2/dropdown-list.tsx
@@ -1,7 +1,6 @@
 import find from "lodash/find";
 import isEqual from "lodash/isEqual";
 import React, { useContext, useEffect, useRef, useState } from "react";
-import { Spinner } from "../../button/button.style";
 import {
     useCompare,
     useEvent,
@@ -19,10 +18,10 @@ import {
     ListItem,
     Listbox,
     ResultStateContainer,
-    ResultStateText,
     SelectAllButton,
     SelectAllContainer,
     SelectedIndicator,
+    Spinner,
     TryAgainButton,
     UnselectedIndicator,
 } from "./dropdown-list.styles";
@@ -384,29 +383,29 @@ export const DropdownList = <T, V>({
             itemsLoadState === "success"
         ) {
             return (
-                <ResultStateContainer data-testid="list-no-results">
+                <ResultStateContainer
+                    data-testid="list-no-results"
+                    $variant={variant}
+                >
                     <LabelIcon
                         data-testid="no-result-icon"
                         $variant={variant}
                     />
-                    <ResultStateText $variant={variant}>
-                        No results found.
-                    </ResultStateText>
+                    No results found.
                 </ResultStateContainer>
             );
         }
     };
 
     const renderLoading = () => {
         if (onRetry && itemsLoadState === "loading") {
-            const spinnerSize = variant === "small" ? 16 : 18;
-
             return (
-                <ResultStateContainer data-testid="list-loading">
-                    <Spinner $buttonStyle="secondary" size={spinnerSize} />
-                    <ResultStateText $variant={variant}>
-                        Loading...
-                    </ResultStateText>
+                <ResultStateContainer
+                    data-testid="list-loading"
+                    $variant={variant}
+                >
+                    <Spinner />
+                    Loading...
                 </ResultStateContainer>
             );
         }
@@ -415,15 +414,15 @@ export const DropdownList = <T, V>({
     const renderTryAgain = () => {
         if (onRetry && itemsLoadState === "fail") {
             return (
-                <ResultStateContainer data-testid="list-fail">
+                <ResultStateContainer
+                    data-testid="list-fail"
+                    $variant={variant}
+                >
                     <LabelIcon
                         data-testid="load-error-icon"
                         $variant={variant}
                     />
-                    <ResultStateText $variant={variant}>
-                        Failed to load.
-                    </ResultStateText>
-                    &nbsp;
+                    Failed to load.&nbsp;
                     <TryAgainButton
                         onClick={handleTryAgain}
                         type="button"

diff --git a/src/shared/dropdown-list/dropdown-list.styles.tsx b/src/shared/dropdown-list/dropdown-list.styles.tsx
@@ -5,6 +5,7 @@ import { Checkbox } from "../../checkbox";
 import { V2_Color } from "../../v2_color";
 import { V2_MediaQuery } from "../../v2_media";
 import { V2_TextStyleHelper } from "../../v2_text";
+import { ComponentLoadingSpinner } from "../component-loading-spinner/component-loading-spinner";
 import {
     DropdownVariantType,
     IconProps,
@@ -270,14 +271,12 @@ export const DropdownCommonButton = styled.button<LabelProps>`
     }}
 `;
 
-export const ResultStateContainer = styled.div`
+export const ResultStateContainer = styled.div<ResultStateProps>`
     width: 100%;
     display: flex;
     padding: 1rem 0.5rem;
     align-items: center;
-`;
 
-export const ResultStateText = styled.div<ResultStateProps>`
     ${(props) =>
         V2_TextStyleHelper.getTextStyle(
             props.$variant === "small" ? "BodySmall" : "Body",
@@ -296,3 +295,8 @@ export const LabelIcon = styled(ExclamationCircleFillIcon)<IconProps>`
     margin-right: 0.625rem;
     color: ${V2_Color.Validation.Red.Icon};
 `;
+
+export const Spinner = styled(ComponentLoadingSpinner)`
+    margin-right: 0.625rem;
+    color: ${V2_Color.Primary};
+`;