From 24196d6f95275b53e1c95dd62a1b4cb71007f3f4 Mon Sep 17 00:00:00 2001
From: George Kartalis <g.kartalis7@gmail.com>
Date: Mon, 16 Sep 2024 14:26:26 +0200
Subject: [PATCH 1/3] wip button

---
 src/elements/Button/Button.stories.tsx |   1 +
 src/elements/Button/Button.tsx         | 108 ++++++++++++++-----------
 src/elements/Button/FollowButton.tsx   |   5 +-
 src/elements/Button/colors.ts          |  14 +++-
 4 files changed, 81 insertions(+), 47 deletions(-)

diff --git a/src/elements/Button/Button.stories.tsx b/src/elements/Button/Button.stories.tsx
index d6538f4..97d5a56 100644
--- a/src/elements/Button/Button.stories.tsx
+++ b/src/elements/Button/Button.stories.tsx
@@ -118,6 +118,7 @@ export const TheFollowButton = () => {
 
   return (
     <List>
+      <FollowButton loading isFollowed={follow} onPress={() => setFollow((v) => !v)} />
       <FollowButton isFollowed={follow} onPress={() => setFollow((v) => !v)} />
       <FollowButton followCount={4} isFollowed={follow} onPress={() => setFollow((v) => !v)} />
       <FollowButton followCount={40} isFollowed={follow} onPress={() => setFollow((v) => !v)} />
diff --git a/src/elements/Button/Button.tsx b/src/elements/Button/Button.tsx
index b854f57..8bd6abd 100644
--- a/src/elements/Button/Button.tsx
+++ b/src/elements/Button/Button.tsx
@@ -117,8 +117,6 @@ export const Button = ({
     }
   })()
 
-  const spinnerColor = variant === "text" ? "blue100" : "white100"
-
   const handlePress = (event: GestureResponderEvent) => {
     if (onPress === undefined || onPress === null) {
       return
@@ -145,6 +143,14 @@ export const Button = ({
         borderColor: colors.disabled.border,
       }
     }
+
+    if (loading) {
+      return {
+        backgroundColor: colors.loading.bg,
+        borderColor: colors.loading.border,
+      }
+    }
+
     return {
       backgroundColor: interpolateColor(
         pressAnimationProgress.value,
@@ -162,7 +168,7 @@ export const Button = ({
   const textAnim = useAnimatedStyle(() => {
     const colors = colorsForVariantAndState[variant]
     if (loading) {
-      return { color: "rgba(0, 0, 0, 0)" }
+      return { color: colors.loading.text }
     }
 
     return {
@@ -175,6 +181,9 @@ export const Button = ({
     }
   })
 
+  console.log("longestTextMeasurements", longestTextMeasurements)
+  console.log(Math.ceil(longestTextMeasurements.width))
+
   return (
     <Pressable
       disabled={disabled}
@@ -207,52 +216,61 @@ export const Button = ({
               alignItems="center"
               justifyContent="center"
             >
-              {iconPosition === "left-start" && !!icon ? (
-                <Box position="absolute" left={0}>
-                  {icon}
-                  <Spacer x={0.5} />
-                </Box>
-              ) : null}
-
-              {iconPosition === "left" && !!icon ? (
+              {!loading ? (
                 <>
-                  {icon}
-                  <Spacer x={0.5} />
+                  {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}
                 </>
-              ) : 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}
+                  <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>
                 </>
-              ) : null}
-
-              {loading ? (
-                <Box
-                  position="absolute"
-                  width="100%"
-                  height="100%"
-                  alignItems="center"
-                  justifyContent="center"
-                >
-                  <Spinner size={size} color={spinnerColor} />
-                </Box>
-              ) : null}
+              )}
             </Flex>
           </AFlex>
         </Flex>
diff --git a/src/elements/Button/FollowButton.tsx b/src/elements/Button/FollowButton.tsx
index e79adac..5d47eb2 100644
--- a/src/elements/Button/FollowButton.tsx
+++ b/src/elements/Button/FollowButton.tsx
@@ -1,6 +1,7 @@
 import { CheckIcon } from "../../svgs/CheckIcon"
 import { formatLargeNumber } from "../../utils/formatLargeNumber"
 import { Button, ButtonProps } from "../Button"
+import { Spinner } from "../Spinner"
 import { Text } from "../Text"
 
 type FollowButtonProps = Omit<
@@ -28,7 +29,9 @@ export const FollowButton = ({
       loading={loading}
       {...restProps}
     >
-      {!loading && (
+      {loading ? (
+        <Spinner size="small" />
+      ) : (
         <>
           <Text variant="xs">{isFollowed ? "Following" : "Follow"}</Text>
           {!!followCount && followCount > 1 && (
diff --git a/src/elements/Button/colors.ts b/src/elements/Button/colors.ts
index c97cc19..8e23261 100644
--- a/src/elements/Button/colors.ts
+++ b/src/elements/Button/colors.ts
@@ -2,7 +2,7 @@ import { ButtonProps } from "./Button"
 import { useColor } from "../../utils/hooks"
 import { NoUndefined } from "../../utils/types"
 
-type State = "disabled" | "pressed" | "active"
+type State = "disabled" | "pressed" | "active" | "loading"
 
 export const useColorsForVariantAndState = (): Record<
   NoUndefined<ButtonProps["variant"]>,
@@ -15,6 +15,11 @@ export const useColorsForVariantAndState = (): Record<
       disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
       pressed: { bg: color("blue100"), border: color("blue100"), text: color("onPrimaryHigh") },
       active: { bg: color("primary"), border: color("primary"), text: color("onPrimaryHigh") },
+      loading: {
+        bg: color("black100"),
+        border: color("black100"),
+        text: color("white100"),
+      },
     },
     fillLight: {
       disabled: { bg: color("black30"), border: color("black30"), text: color("onPrimaryHigh") },
@@ -24,16 +29,19 @@ export const useColorsForVariantAndState = (): Record<
         border: color("white100"),
         text: color("black100"),
       },
+      loading: { bg: color("white100"), border: color("white100"), text: color("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") },
     },
     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") },
     },
     outline: {
       disabled: {
@@ -47,6 +55,7 @@ export const useColorsForVariantAndState = (): Record<
         border: color("black60"),
         text: color("black100"),
       },
+      loading: { bg: color("white100"), border: color("black60"), text: color("black100") },
     },
     outlineGray: {
       disabled: {
@@ -60,6 +69,7 @@ export const useColorsForVariantAndState = (): Record<
         border: color("black60"),
         text: color("black100"),
       },
+      loading: { bg: color("white100"), border: color("black30"), text: color("black100") },
     },
     outlineLight: {
       disabled: {
@@ -73,11 +83,13 @@ export const useColorsForVariantAndState = (): Record<
         border: color("white100"),
         text: color("white100"),
       },
+      loading: { bg: "rgba(0,0,0,0)", border: color("white100"), text: color("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") },
     },
   }
 }

From 55d2d6aee77510be79f27f3058ade240be4088f3 Mon Sep 17 00:00:00 2001
From: araujobarret <araujobarret@gmail.com>
Date: Mon, 16 Sep 2024 17:05:54 +0200
Subject: [PATCH 2/3] refactor: add the loader color prop

---
 src/elements/Button/Button.stories.tsx | 12 +++-
 src/elements/Button/Button.tsx         | 92 +++++++++++---------------
 src/elements/Button/colors.ts          | 54 ++++++++++++---
 3 files changed, 93 insertions(+), 65 deletions(-)

diff --git a/src/elements/Button/Button.stories.tsx b/src/elements/Button/Button.stories.tsx
index 97d5a56..6fd5637 100644
--- 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
index 8bd6abd..f48ecd9 100644
--- 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
index 8e23261..0eae284 100644
--- 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",
+      },
     },
   }
 }

From 1929b176415957b76225f13fcc4c32fa78316f59 Mon Sep 17 00:00:00 2001
From: araujobarret <araujobarret@gmail.com>
Date: Mon, 16 Sep 2024 17:38:13 +0200
Subject: [PATCH 3/3] refactor: shifts the loader to the button, follow button
 only toggles it on/off

---
 src/elements/Button/FollowButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/elements/Button/FollowButton.tsx b/src/elements/Button/FollowButton.tsx
index 5d47eb2..59aab4f 100644
--- a/src/elements/Button/FollowButton.tsx
+++ b/src/elements/Button/FollowButton.tsx
@@ -1,7 +1,6 @@
 import { CheckIcon } from "../../svgs/CheckIcon"
 import { formatLargeNumber } from "../../utils/formatLargeNumber"
 import { Button, ButtonProps } from "../Button"
-import { Spinner } from "../Spinner"
 import { Text } from "../Text"
 
 type FollowButtonProps = Omit<
@@ -20,6 +19,7 @@ export const FollowButton = ({
   loading,
   ...restProps
 }: FollowButtonProps) => {
+  const label = isFollowed ? "Following" : "Follow"
   return (
     <Button
       variant={isFollowed ? "outline" : "outlineGray"}
@@ -29,11 +29,11 @@ export const FollowButton = ({
       loading={loading}
       {...restProps}
     >
-      {loading ? (
-        <Spinner size="small" />
+      {!!loading ? (
+        `${label} ${followCount && followCount > 1 ? formatLargeNumber(followCount, 1) : ""}`
       ) : (
         <>
-          <Text variant="xs">{isFollowed ? "Following" : "Follow"}</Text>
+          <Text variant="xs">{label}</Text>
           {!!followCount && followCount > 1 && (
             <Text variant="xs" color="black60">
               {" " + formatLargeNumber(followCount, 1)}