feat(gap): replace gap calls with our spacing tokens (#11043)

* refactor: change gap values to spacing token * feat: bump palette and fix 15px gap on artwork rail placeholder * feat: adjust rebased changes
artsy · Oct 30, 2024 · ff385a9 · ff385a9
1 parent b1e8d3d
commit ff385a9
Show file tree

Hide file tree

Showing 30 changed files with 76 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -110,7 +110,7 @@
   },
   "dependencies": {
     "@artsy/cohesion": "4.214.0",
-    "@artsy/palette-mobile": "13.2.42",
+    "@artsy/palette-mobile": "13.2.43",
     "@artsy/to-title-case": "1.1.0",
     "@braze/react-native-sdk": "11.0.0",
     "@expo/react-native-action-sheet": "4.0.1",

diff --git a/src/app/Components/ArtworkRail/ArtworkRail.tsx b/src/app/Components/ArtworkRail/ArtworkRail.tsx
@@ -144,7 +144,7 @@ export const ArtworkRailPlaceholder: React.FC = () => {
   const cards = !isTablet() ? 2 : 6
 
   return (
-    <Flex gap={15} flexDirection="row">
+    <Flex gap={2} flexDirection="row">
       {Array.from({ length: cards }).map((_, index) => (
         <Flex key={index}>
           {enableArtworkRailRedesignImageAspectRatio ? (

diff --git a/src/app/Components/Bidding/Screens/CreditCardForm.tsx b/src/app/Components/Bidding/Screens/CreditCardForm.tsx
@@ -118,7 +118,7 @@ export const CreditCardForm: React.FC<CreditCardFormProps> = ({
         keyboardDismissMode="on-drag"
         keyboardShouldPersistTaps="handled"
       >
-        <Flex gap={1}>
+        <Flex>
           <>
             <CreditCardField onCardChange={handleOnCardChange} />
 

diff --git a/src/app/Components/Stack.tsx b/src/app/Components/Stack.tsx
@@ -1,7 +1,7 @@
 import { Spacer, SpacingUnit, Flex, Join } from "@artsy/palette-mobile"
 
 /**
- * @deprecated Please use `<Flex gap={space(1)}>` instead
+ * @deprecated Please use `<Flex gap={1}>` instead
  */
 export const Stack: React.FC<
   { spacing?: SpacingUnit; horizontal?: boolean } & React.ComponentPropsWithoutRef<typeof Flex>

diff --git a/src/app/Scenes/Activity/ActivityEmptyView.tsx b/src/app/Scenes/Activity/ActivityEmptyView.tsx
@@ -78,7 +78,7 @@ export const ActivityEmptyView: React.FC<ActivityEmptyViewProps> = ({ type, refr
             {entity.message}
           </Text>
           <Spacer y={2} />
-          <Flex flexDirection="row" gap={10}>
+          <Flex flexDirection="row" gap={1}>
             <Text variant="xs" color="black60">
               {entity.geStartedMessage}
             </Text>

diff --git a/src/app/Scenes/Activity/components/NotificationCommercialButtons.tsx b/src/app/Scenes/Activity/components/NotificationCommercialButtons.tsx
@@ -1,5 +1,5 @@
 import { ActionType, ContextModule, OwnerType, TappedViewWork } from "@artsy/cohesion"
-import { Button, Flex, useSpace, Join, Spacer } from "@artsy/palette-mobile"
+import { Button, Flex, Join, Spacer } from "@artsy/palette-mobile"
 import { BuyNowButton_artwork$key } from "__generated__/BuyNowButton_artwork.graphql"
 import { MyProfileEditModal_me$key } from "__generated__/MyProfileEditModal_me.graphql"
 import { NotificationCommercialButtonsQuery } from "__generated__/NotificationCommercialButtonsQuery.graphql"
@@ -66,7 +66,6 @@ export const CommercialButtons: React.FC<{
   const artworkData = useFragment(artworkFragment, artwork)
 
   const [showCreateArtworkAlertModal, setShowCreateArtworkAlertModal] = useState(false)
-  const space = useSpace()
 
   const { hasEnded } = getTimer(partnerOffer?.endAt || "")
   const noLongerAvailable = !partnerOffer?.isAvailable
@@ -154,7 +153,7 @@ export const CommercialButtons: React.FC<{
   }
 
   return (
-    <Flex mx={2} gap={space(1)}>
+    <Flex mx={2} gap={1}>
       {renderComponent}
     </Flex>
   )

diff --git a/src/app/Scenes/Articles/News/ArticlesCards.tsx b/src/app/Scenes/Articles/News/ArticlesCards.tsx
@@ -1,5 +1,5 @@
 import { ActionType, ContextModule, OwnerType, TappedNewsSection } from "@artsy/cohesion"
-import { Flex, Separator, Text, Touchable, useSpace } from "@artsy/palette-mobile"
+import { Flex, Separator, Text, Touchable } from "@artsy/palette-mobile"
 import { ArticlesCards_viewer$key } from "__generated__/ArticlesCards_viewer.graphql"
 import { navigate } from "app/system/navigation/navigate"
 import { graphql, useFragment } from "react-relay"
@@ -12,7 +12,6 @@ export interface ArticleNewsProps {
 export const ArticlesCards: React.FC<ArticleNewsProps> = ({ viewer }) => {
   const tracking = useTracking()
   const data = useFragment(ArticlesNewsFragment, viewer)
-  const space = useSpace()
 
   if (!data.articles) {
     return null
@@ -24,13 +23,13 @@ export const ArticlesCards: React.FC<ArticleNewsProps> = ({ viewer }) => {
   }
 
   return (
-    <Flex m={2} p={2} border="1px solid" borderColor="black30" gap={space(2)}>
+    <Flex m={2} p={2} border="1px solid" borderColor="black30" gap={2}>
       <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
         <Text variant="lg-display">News</Text>
         <Text variant="lg-display">{date}</Text>
       </Flex>
       {data.articles.map((article, index) => (
-        <Flex key={index} gap={space(2)}>
+        <Flex key={index} gap={2}>
           <Touchable onPress={() => handleOnPress(article.href ?? "")}>
             <Flex flexDirection="row" alignItems="center">
               <Text variant="sm-display" numberOfLines={3}>

diff --git a/src/app/Scenes/CollectionsByCategory/Body.tsx b/src/app/Scenes/CollectionsByCategory/Body.tsx
@@ -1,4 +1,4 @@
-import { Flex, Separator, Skeleton, SkeletonText, Text, useSpace } from "@artsy/palette-mobile"
+import { Flex, Separator, Skeleton, SkeletonText, Text } from "@artsy/palette-mobile"
 import { useRoute } from "@react-navigation/native"
 import { FlashList } from "@shopify/flash-list"
 import { BodyCollectionsByCategoryQuery } from "__generated__/BodyCollectionsByCategoryQuery.graphql"
@@ -20,7 +20,6 @@ interface BodyProps {
 }
 
 export const Body: React.FC<BodyProps> = ({ viewer }) => {
-  const space = useSpace()
   const data = useFragment(fragment, viewer)
   const { params } = useRoute<CollectionsByCategoriesRouteProp>()
   const category = params.props.category
@@ -30,8 +29,8 @@ export const Body: React.FC<BodyProps> = ({ viewer }) => {
   }
 
   return (
-    <Flex gap={space(4)}>
-      <Flex gap={space(2)}>
+    <Flex gap={4}>
+      <Flex gap={2}>
         <Text variant="xl" px={2}>
           {category}
         </Text>
@@ -73,12 +72,10 @@ const fragment = graphql`
 `
 
 const BodyPlaceholder: React.FC = () => {
-  const space = useSpace()
-
   return (
     <Skeleton>
-      <Flex gap={space(4)}>
-        <Flex gap={space(2)} px={2}>
+      <Flex gap={4}>
+        <Flex gap={2} px={2}>
           <SkeletonText variant="xl">Category</SkeletonText>
 
           <SkeletonText>Category description text</SkeletonText>

diff --git a/src/app/Scenes/CollectionsByCategory/CollectionsByCategory.tsx b/src/app/Scenes/CollectionsByCategory/CollectionsByCategory.tsx
@@ -1,5 +1,5 @@
 import { OwnerType } from "@artsy/cohesion"
-import { Flex, Screen, useSpace } from "@artsy/palette-mobile"
+import { Flex, Screen } from "@artsy/palette-mobile"
 import { RouteProp, useRoute } from "@react-navigation/native"
 import { BodyWithSuspense } from "app/Scenes/CollectionsByCategory/Body"
 import { FooterWithSuspense } from "app/Scenes/CollectionsByCategory/Footer"
@@ -25,7 +25,6 @@ export type CollectionsByCategoriesRouteProp = RouteProp<
 
 export const CollectionsByCategory: FC = () => {
   const { params } = useRoute<CollectionsByCategoriesRouteProp>()
-  const space = useSpace()
 
   const category = params.props.category
 
@@ -40,7 +39,7 @@ export const CollectionsByCategory: FC = () => {
         <Screen.Header onBack={goBack} title={category} animated />
         <Screen.Body fullwidth flex={1}>
           <Screen.ScrollView>
-            <Flex gap={space(4)}>
+            <Flex gap={4}>
               <BodyWithSuspense />
 
               <FooterWithSuspense homeViewSectionId={params.props.homeViewSectionId} />

diff --git a/src/app/Scenes/CollectionsByCategory/CollectionsChips.tsx b/src/app/Scenes/CollectionsByCategory/CollectionsChips.tsx
@@ -52,7 +52,7 @@ export const CollectionsChips: React.FC<CollectionsChipsProps> = ({
         contentContainerStyle={{ paddingRight: space(2) }}
         keyExtractor={(item, index) => `item_${index}_${item[0]?.internalID}`}
         renderItem={({ item }) => (
-          <Flex gap={space(1)}>
+          <Flex gap={1}>
             {item.map((item, index) => {
               return (
                 <Flex minWidth={CHIP_WIDTH} key={`collectionChips-row-${index}`}>

diff --git a/src/app/Scenes/CollectionsByCategory/Footer.tsx b/src/app/Scenes/CollectionsByCategory/Footer.tsx
@@ -1,4 +1,4 @@
-import { Flex, Skeleton, SkeletonText, Text, Touchable, useSpace } from "@artsy/palette-mobile"
+import { Flex, Skeleton, SkeletonText, Text, Touchable } from "@artsy/palette-mobile"
 import { useRoute } from "@react-navigation/native"
 import { FooterCollectionsByCategoryQuery } from "__generated__/FooterCollectionsByCategoryQuery.graphql"
 import { Footer_homeViewSectionCards$key } from "__generated__/Footer_homeViewSectionCards.graphql"
@@ -17,7 +17,6 @@ interface FooterProps {
 export const Footer: FC<FooterProps> = ({ cards, homeViewSectionId }) => {
   const { params } = useRoute<CollectionsByCategoriesRouteProp>()
   const data = useFragment(fragment, cards)
-  const space = useSpace()
 
   const category = decodeURI(params.props.category)
 
@@ -34,7 +33,7 @@ export const Footer: FC<FooterProps> = ({ cards, homeViewSectionId }) => {
   }
 
   return (
-    <Flex backgroundColor="black100" p={2} gap={space(2)}>
+    <Flex backgroundColor="black100" p={2} gap={2}>
       <Text color="white100">Explore more categories</Text>
 
       {categories.map((c, index) => (
@@ -65,11 +64,9 @@ const fragment = graphql`
 `
 
 const FooterPlaceholder: FC = () => {
-  const space = useSpace()
-
   return (
     <Skeleton>
-      <Flex p={2} gap={space(2)}>
+      <Flex p={2} gap={2}>
         <SkeletonText>Explore more categories</SkeletonText>
 
         {Array.from({ length: 5 }).map((_, index) => (

diff --git a/src/app/Scenes/CompleteMyProfile/ChangesSummary.tsx b/src/app/Scenes/CompleteMyProfile/ChangesSummary.tsx
@@ -4,7 +4,6 @@ import {
   Screen,
   Spacer,
   Text,
-  useSpace,
   CheckCircleFillIcon,
   CheckCircleIcon,
 } from "@artsy/palette-mobile"
@@ -14,7 +13,6 @@ import { navigate } from "app/system/navigation/navigate"
 import { FC } from "react"
 
 export const ChangesSummary: FC = () => {
-  const space = useSpace()
   const { saveAndExit } = useCompleteProfile()
   const isLoading = CompleteMyProfileStore.useStoreState((state) => state.isLoading)
   const steps = CompleteMyProfileStore.useStoreState((state) => state.steps)
@@ -39,7 +37,7 @@ export const ChangesSummary: FC = () => {
   return (
     <Screen safeArea={false}>
       <Screen.Body pt={2}>
-        <Flex py={2} gap={space(2)}>
+        <Flex py={2} gap={2}>
           <Text variant="lg-display">
             {isCompleted ? "Thank you for completing your profile." : "You’re almost there!"}
           </Text>
@@ -62,9 +60,9 @@ export const ChangesSummary: FC = () => {
             )}
           </Text>
 
-          <Flex gap={space(1)}>
+          <Flex gap={1}>
             {steps.includes("LocationStep") && (
-              <Flex flexDirection="row" alignItems="center" gap={space(1)}>
+              <Flex flexDirection="row" alignItems="center" gap={1}>
                 {hasLocation ? (
                   <CheckCircleFillIcon fill="green100" />
                 ) : (
@@ -77,7 +75,7 @@ export const ChangesSummary: FC = () => {
             )}
 
             {steps.includes("ProfessionStep") && (
-              <Flex flexDirection="row" alignItems="center" gap={space(1)}>
+              <Flex flexDirection="row" alignItems="center" gap={1}>
                 {hasProfession ? (
                   <CheckCircleFillIcon fill="green100" />
                 ) : (
@@ -90,7 +88,7 @@ export const ChangesSummary: FC = () => {
             )}
 
             {steps.includes("AvatarStep") && (
-              <Flex flexDirection="row" alignItems="center" gap={space(1)}>
+              <Flex flexDirection="row" alignItems="center" gap={1}>
                 {hasIconUrl ? (
                   <CheckCircleFillIcon fill="green100" />
                 ) : (
@@ -103,7 +101,7 @@ export const ChangesSummary: FC = () => {
             )}
 
             {steps.includes("IdentityVerificationStep") && (
-              <Flex flexDirection="row" alignItems="center" gap={space(1)}>
+              <Flex flexDirection="row" alignItems="center" gap={1}>
                 {hasIsIdentityVerified ? (
                   <CheckCircleFillIcon fill="green100" />
                 ) : (

diff --git a/src/app/Scenes/CompleteMyProfile/Header.tsx b/src/app/Scenes/CompleteMyProfile/Header.tsx
@@ -6,7 +6,6 @@ import {
   Text,
   Touchable,
   useScreenDimensions,
-  useSpace,
 } from "@artsy/palette-mobile"
 import { RouteProp, useRoute } from "@react-navigation/native"
 import {
@@ -18,7 +17,6 @@ import { useCompleteProfile } from "app/Scenes/CompleteMyProfile/hooks/useComple
 import { FC } from "react"
 
 export const Header: FC = () => {
-  const space = useSpace()
   const { progress, currentStep, lastStep, saveAndExit, goBack } = useCompleteProfile()
   const steps = CompleteMyProfileStore.useStoreState((state) => state.steps)
   const progressStateWithoutUndefined = CompleteMyProfileStore.useStoreState(
@@ -32,11 +30,7 @@ export const Header: FC = () => {
   const isCompleted = completedStepsLength === steps.length - 1
 
   return (
-    <Flex
-      backgroundColor="white100"
-      pb={1}
-      style={{ paddingTop: safeAreaInsets.top, paddingHorizontal: space(2) }}
-    >
+    <Flex backgroundColor="white100" pb={1} px={2} style={{ paddingTop: safeAreaInsets.top }}>
       <Flex py={1} justifyContent="space-between" flexDirection="row">
         {!isChangesSummary ? (
           <Text variant="xs">{`${currentStep} of ${lastStep}`}</Text>
@@ -53,7 +47,7 @@ export const Header: FC = () => {
         )}
       </Flex>
 
-      <Flex flexDirection="row" alignItems="center" gap={space(1)}>
+      <Flex flexDirection="row" alignItems="center" gap={1}>
         <ProgressBar
           height={4}
           trackColor={!isCompleted && !isChangesSummary ? "blue100" : "green100"}

diff --git a/src/app/Scenes/CompleteMyProfile/IdentityVerificationStep.tsx b/src/app/Scenes/CompleteMyProfile/IdentityVerificationStep.tsx
@@ -1,4 +1,4 @@
-import { Text, Screen, Button, Spacer, Flex, useSpace, CheckIcon } from "@artsy/palette-mobile"
+import { Text, Screen, Button, Spacer, Flex, CheckIcon } from "@artsy/palette-mobile"
 import { IdentityVerificationStep_me$key } from "__generated__/IdentityVerificationStep_me.graphql"
 import { CompleteMyProfileStore } from "app/Scenes/CompleteMyProfile/CompleteMyProfileProvider"
 import { Footer } from "app/Scenes/CompleteMyProfile/Footer"
@@ -10,7 +10,6 @@ import { FC } from "react"
 import { graphql, useFragment } from "react-relay"
 
 export const IdentityVerificationStep: FC = () => {
-  const space = useSpace()
   const { goNext } = useCompleteProfile()
   const { me } = useCompleteMyProfileSteps()
   const data = useFragment<IdentityVerificationStep_me$key>(fragment, me)
@@ -38,7 +37,7 @@ export const IdentityVerificationStep: FC = () => {
 
               <Spacer y={1} />
 
-              <Flex gap={space(2)}>
+              <Flex gap={2}>
                 <Text color="black60">
                   Send an ID verification email and follow the link and instructions to verify your
                   account.

diff --git a/src/app/Scenes/CompleteMyProfile/ImageSelector.tsx b/src/app/Scenes/CompleteMyProfile/ImageSelector.tsx
@@ -5,7 +5,6 @@ import {
   Button,
   CheckCircleFillIcon,
   AddCircleIcon,
-  useSpace,
   Image,
   Skeleton,
   SkeletonBox,
@@ -26,7 +25,6 @@ interface ImageSelectorProps {
 
 export const ImageSelector: FC<ImageSelectorProps> = ({ src, onImageSelect }) => {
   const [isLoading, setIsLoading] = useState(false)
-  const space = useSpace()
   const { showActionSheetWithOptions } = useActionSheet()
   const { me } = useCompleteMyProfileSteps()
   const data = useFragment<ImageSelector_me$key>(fragment, me)
@@ -61,7 +59,7 @@ export const ImageSelector: FC<ImageSelectorProps> = ({ src, onImageSelect }) =>
 
   return (
     <Touchable aria-label="Choose a photo" accessibilityRole="button" onPress={handleImagePress}>
-      <Flex alignItems="center" gap={space(2)}>
+      <Flex alignItems="center" gap={2}>
         <Flex alignItems="center">
           <Flex
             alignItems="center"

diff --git a/src/app/Scenes/Fair/Fair.tsx b/src/app/Scenes/Fair/Fair.tsx
@@ -6,7 +6,6 @@ import {
   SkeletonBox,
   useScreenDimensions,
   SkeletonText,
-  useSpace,
   ShareIcon,
 } from "@artsy/palette-mobile"
 import { FairQuery } from "__generated__/FairQuery.graphql"
@@ -180,7 +179,6 @@ export const FairScreen: React.FC<FairQueryRendererProps> = ({ fairID }) => (
 
 export const FairPlaceholder: React.FC = () => {
   const { safeAreaInsets } = useScreenDimensions()
-  const space = useSpace()
 
   return (
     <Flex top={safeAreaInsets.top}>
@@ -189,7 +187,7 @@ export const FairPlaceholder: React.FC = () => {
           <SkeletonBox width={18} height={18} />
         </Flex>
 
-        <Flex gap={space(2)}>
+        <Flex gap={2}>
           <SkeletonBox height={400} width="100%" />
 
           <SkeletonText mx={2}>Fair Text Long Placeholder</SkeletonText>

diff --git a/src/app/Scenes/Fair/FairOverview.tsx b/src/app/Scenes/Fair/FairOverview.tsx
@@ -43,7 +43,7 @@ export const FairOverview: FC<FairOverviewProps> = ({ fair }) => {
   return (
     <Tabs.ScrollView style={{ paddingTop: space(2) }}>
       {!isEmpty ? (
-        <Flex gap={space(2)}>
+        <Flex gap={2}>
           {!!previewText && (
             <ReadMore textStyle="new" content={previewText} maxChars={truncatedTextLimit()} />
           )}