refactor: add the loader color prop

artsy · Sep 16, 2024 · 55d2d6a · 55d2d6a
1 parent 24196d6
commit 55d2d6a
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 65 deletions.
diff --git a/src/elements/Button/Button.stories.tsx b/src/elements/Button/Button.stories.tsx
@@ -89,9 +89,15 @@ export const VariantsLoading = () => (
   <DataList
     data={variants}
     renderItem={({ item: variant }) => (
-      <Button variant={variant} loading onPress={() => console.log(`tapped ${variant}`)}>
-        {variant}
-      </Button>
+      <Wrap if={variant === "outlineLight"} key={`variant_loading_${variant}`}>
+        <Flex backgroundColor="black100" p={1}>
+          <Wrap.Content>
+            <Button variant={variant} loading onPress={() => console.log(`tapped ${variant}`)}>
+              {variant}
+            </Button>
+          </Wrap.Content>
+        </Flex>
+      </Wrap>
     )}
   />
 )

diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx
@@ -167,6 +167,7 @@ export const Button = ({
 
   const textAnim = useAnimatedStyle(() => {
     const colors = colorsForVariantAndState[variant]
+
     if (loading) {
       return { color: colors.loading.text }
     }
@@ -180,9 +181,7 @@ export const Button = ({
       textDecorationLine: pressAnimationProgress.value > 0 ? "underline" : "none",
     }
   })
-
-  console.log("longestTextMeasurements", longestTextMeasurements)
-  console.log(Math.ceil(longestTextMeasurements.width))
+  const loaderColor = colorsForVariantAndState[variant].loading.loader
 
   return (
     <Pressable
@@ -216,61 +215,48 @@ export const Button = ({
               alignItems="center"
               justifyContent="center"
             >
-              {!loading ? (
+              {iconPosition === "left-start" && !!icon ? (
+                <Box position="absolute" left={0}>
+                  {icon}
+                  <Spacer x={0.5} />
+                </Box>
+              ) : null}
+              {iconPosition === "left" && !!icon ? (
                 <>
-                  {iconPosition === "left-start" && !!icon ? (
-                    <Box position="absolute" left={0}>
-                      {icon}
-                      <Spacer x={0.5} />
-                    </Box>
-                  ) : null}
-                  {iconPosition === "left" && !!icon ? (
-                    <>
-                      {icon}
-                      <Spacer x={0.5} />
-                    </>
-                  ) : null}
-                  <AText
-                    style={[
-                      { width: Math.ceil(longestTextMeasurements.width) },
-                      textStyle,
-                      textAnim,
-                    ]}
-                    textAlign="center"
-                    selectable={false}
-                  >
-                    {children}
-                  </AText>
-                  <MeasuredView setMeasuredState={setLongestTextMeasurements}>
-                    <Text color="red" style={textStyle}>
-                      {longestText ? longestText : children}
-                    </Text>
-                  </MeasuredView>
-                  {iconPosition === "right" && !!icon ? (
-                    <>
-                      <Spacer x={0.5} />
-                      {icon}
-                    </>
-                  ) : null}
+                  {icon}
+                  <Spacer x={0.5} />
                 </>
-              ) : (
+              ) : null}
+              <AText
+                style={[{ width: Math.ceil(longestTextMeasurements.width) }, textStyle, textAnim]}
+                textAlign="center"
+                selectable={false}
+              >
+                {children}
+              </AText>
+              <MeasuredView setMeasuredState={setLongestTextMeasurements}>
+                <Text color="red" style={textStyle}>
+                  {longestText ? longestText : children}
+                </Text>
+              </MeasuredView>
+              {iconPosition === "right" && !!icon && (
                 <>
-                  <MeasuredView setMeasuredState={setLongestTextMeasurements}>
-                    <Text color="red" style={textStyle}>
-                      {longestText ? longestText : children}
-                    </Text>
-                  </MeasuredView>
-                  <Box
-                    position="absolute"
-                    width={Math.ceil(longestTextMeasurements.width)}
-                    height="100%"
-                    alignItems="center"
-                    justifyContent="center"
-                  >
-                    <Spinner size={size} color="black100" />
-                  </Box>
+                  <Spacer x={0.5} />
+                  {icon}
                 </>
               )}
+
+              {loading && (
+                <Box
+                  position="absolute"
+                  width="100%"
+                  height="100%"
+                  alignItems="center"
+                  justifyContent="center"
+                >
+                  <Spinner size={size} color={loaderColor} />
+                </Box>
+              )}
             </Flex>
           </AFlex>
         </Flex>

diff --git a/src/elements/Button/colors.ts b/src/elements/Button/colors.ts
@@ -6,7 +6,7 @@ type State = "disabled" | "pressed" | "active" | "loading"
 
 export const useColorsForVariantAndState = (): Record<
   NoUndefined<ButtonProps["variant"]>,
-  Record<State, { bg: string; border: string; text: string }>
+  Record<State, { bg: string; border: string; text: string; loader?: string }>
 > => {
   const color = useColor()
 
@@ -18,7 +18,8 @@ export const useColorsForVariantAndState = (): Record<
       loading: {
         bg: color("black100"),
         border: color("black100"),
-        text: color("white100"),
+        text: "rgba(0, 0, 0, 0)",
+        loader: "white100",
       },
     },
     fillLight: {
@@ -29,19 +30,34 @@ export const useColorsForVariantAndState = (): Record<
         border: color("white100"),
         text: color("black100"),
       },
-      loading: { bg: color("white100"), border: color("white100"), text: color("black100") },
+      loading: {
+        bg: color("white100"),
+        border: color("white100"),
+        text: "rgba(0, 0, 0, 0)",
+        loader: "black100",
+      },
     },
     fillGray: {
       disabled: { bg: color("black30"), border: color("black30"), text: color("white100") },
       pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
       active: { bg: color("black10"), border: color("black10"), text: color("black100") },
-      loading: { bg: color("black10"), border: color("black10"), text: color("black100") },
+      loading: {
+        bg: color("black10"),
+        border: color("black10"),
+        text: "rgba(0, 0, 0, 0)",
+        loader: "black100",
+      },
     },
     fillSuccess: {
       disabled: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
       pressed: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
       active: { bg: color("blue10"), border: color("blue10"), text: color("white100") },
-      loading: { bg: color("blue100"), border: color("blue100"), text: color("white100") },
+      loading: {
+        bg: color("blue100"),
+        border: color("blue100"),
+        text: "rgba(0, 0, 0, 0)",
+        loader: "white100",
+      },
     },
     outline: {
       disabled: {
@@ -55,7 +71,12 @@ export const useColorsForVariantAndState = (): Record<
         border: color("black60"),
         text: color("black100"),
       },
-      loading: { bg: color("white100"), border: color("black60"), text: color("black100") },
+      loading: {
+        bg: color("white100"),
+        border: color("black60"),
+        text: "rgba(0, 0, 0, 0)",
+        loader: "black100",
+      },
     },
     outlineGray: {
       disabled: {
@@ -69,7 +90,12 @@ export const useColorsForVariantAndState = (): Record<
         border: color("black60"),
         text: color("black100"),
       },
-      loading: { bg: color("white100"), border: color("black30"), text: color("black100") },
+      loading: {
+        bg: color("white100"),
+        border: color("black30"),
+        text: "rgba(0, 0, 0, 0)",
+        loader: "black100",
+      },
     },
     outlineLight: {
       disabled: {
@@ -83,13 +109,23 @@ export const useColorsForVariantAndState = (): Record<
         border: color("white100"),
         text: color("white100"),
       },
-      loading: { bg: "rgba(0,0,0,0)", border: color("white100"), text: color("white100") },
+      loading: {
+        bg: "rgba(0,0,0,0)",
+        border: color("white100"),
+        text: "rgba(0, 0, 0, 0)",
+        loader: "white100",
+      },
     },
     text: {
       disabled: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black30") },
       pressed: { bg: color("black10"), border: color("black10"), text: color("blue100") },
       active: { bg: "rgba(0, 0, 0, 0)", border: "rgba(0, 0, 0, 0)", text: color("black100") },
-      loading: { bg: color("white100"), border: color("white100"), text: color("blue100") },
+      loading: {
+        bg: color("white100"),
+        border: color("white100"),
+        text: "rgba(0, 0, 0, 0)",
+        loader: "blue100",
+      },
     },
   }
 }