fix: Avoid double spacing when hiding artwork in rail (#11343)

artsy · Jan 6, 2025 · 2279785 · 2279785
1 parent 81e2460
commit 2279785
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 69 deletions.
diff --git a/src/app/Components/ArtworkRail/ArtworkRail.tsx b/src/app/Components/ArtworkRail/ArtworkRail.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, SkeletonBox, SkeletonText, Spacer } from "@artsy/palette-mobile"
+import { Flex, SkeletonBox, SkeletonText, Spacer } from "@artsy/palette-mobile"
 import {
   ArtworkRail_artworks$data,
   ArtworkRail_artworks$key,
@@ -65,22 +65,20 @@ export const ArtworkRail: React.FC<ArtworkRailProps> = memo(
     const renderItem: ListRenderItem<Artwork> = useCallback(
       ({ item, index }) => {
         return (
-          <Box pr={2}>
-            <ArtworkRailCard
-              testID={`artwork-${item.slug}`}
-              artwork={item}
-              showPartnerName={showPartnerName}
-              hideArtistName={hideArtistName}
-              dark={dark}
-              onPress={() => {
-                onPress?.(item, index)
-              }}
-              showSaveIcon={showSaveIcon}
-              hideIncreasedInterestSignal={hideIncreasedInterestSignal}
-              hideCuratorsPickSignal={hideCuratorsPickSignal}
-              {...otherProps}
-            />
-          </Box>
+          <ArtworkRailCard
+            testID={`artwork-${item.slug}`}
+            artwork={item}
+            showPartnerName={showPartnerName}
+            hideArtistName={hideArtistName}
+            dark={dark}
+            onPress={() => {
+              onPress?.(item, index)
+            }}
+            showSaveIcon={showSaveIcon}
+            hideIncreasedInterestSignal={hideIncreasedInterestSignal}
+            hideCuratorsPickSignal={hideCuratorsPickSignal}
+            {...otherProps}
+          />
         )
       },
       [hideArtistName, onPress, showPartnerName]

diff --git a/src/app/Components/ArtworkRail/ArtworkRailCard.tsx b/src/app/Components/ArtworkRail/ArtworkRailCard.tsx
@@ -1,4 +1,4 @@
-import { Flex, Spacer } from "@artsy/palette-mobile"
+import { Box, Flex, Spacer } from "@artsy/palette-mobile"
 import { ArtworkRailCard_artwork$key } from "__generated__/ArtworkRailCard_artwork.graphql"
 import { CreateArtworkAlertModal } from "app/Components/Artist/ArtistArtworks/CreateArtworkAlertModal"
 import {
@@ -103,57 +103,59 @@ export const ArtworkRailCard: React.FC<ArtworkRailCardProps> = ({
             SalePriceComponent,
           }}
         >
-          <TouchableHighlight
-            underlayColor={backgroundColor}
-            activeOpacity={0.8}
-            onPress={onPress}
-            testID={testID}
-          >
-            <Flex
-              height={
-                containerHeight ?? ARTWORK_RAIL_CARD_IMAGE_HEIGHT + artworkRailCardMetaDataHeight
-              }
-              justifyContent="flex-start"
-              minWidth={ARTWORK_RAIL_CARD_MIN_WIDTH}
-              maxWidth={ARTWORK_RAIL_CARD_MAX_WIDTH}
+          <Box pr={2}>
+            <TouchableHighlight
+              underlayColor={backgroundColor}
+              activeOpacity={0.8}
+              onPress={onPress}
+              testID={testID}
             >
-              <ArtworkRailCardImage artwork={artwork} />
-
-              <Spacer y={1} />
-
-              <ArtworkRailCardMeta
-                artwork={artwork}
-                contextModule={contextModule}
-                contextScreen={contextScreen}
-                contextScreenOwnerId={contextScreenOwnerId}
-                contextScreenOwnerSlug={contextScreenOwnerSlug}
-                contextScreenOwnerType={contextScreenOwnerType}
-                dark={dark}
-                hideArtistName={hideArtistName}
-                hideCuratorsPickSignal={hideCuratorsPickSignal}
-                hideIncreasedInterestSignal={hideIncreasedInterestSignal}
-                lotLabel={lotLabel}
-                SalePriceComponent={SalePriceComponent}
-                showPartnerName={showPartnerName}
-                showSaveIcon={showSaveIcon}
-                backgroundColor={backgroundColor}
-              />
-
-              {!!enableNewSaveAndFollowOnArtworkCard &&
-                !!(enableNewSaveCTA || enableNewSaveAndFollowCTAs) && <Spacer y={0.5} />}
-
-              <ArtworkItemCTAs
-                artwork={artwork}
-                showSaveIcon={showSaveIcon}
-                dark={dark}
-                contextModule={contextModule}
-                contextScreen={contextScreen}
-                contextScreenOwnerId={contextScreenOwnerId}
-                contextScreenOwnerSlug={contextScreenOwnerSlug}
-                contextScreenOwnerType={contextScreenOwnerType}
-              />
-            </Flex>
-          </TouchableHighlight>
+              <Flex
+                height={
+                  containerHeight ?? ARTWORK_RAIL_CARD_IMAGE_HEIGHT + artworkRailCardMetaDataHeight
+                }
+                justifyContent="flex-start"
+                minWidth={ARTWORK_RAIL_CARD_MIN_WIDTH}
+                maxWidth={ARTWORK_RAIL_CARD_MAX_WIDTH}
+              >
+                <ArtworkRailCardImage artwork={artwork} />
+
+                <Spacer y={1} />
+
+                <ArtworkRailCardMeta
+                  artwork={artwork}
+                  contextModule={contextModule}
+                  contextScreen={contextScreen}
+                  contextScreenOwnerId={contextScreenOwnerId}
+                  contextScreenOwnerSlug={contextScreenOwnerSlug}
+                  contextScreenOwnerType={contextScreenOwnerType}
+                  dark={dark}
+                  hideArtistName={hideArtistName}
+                  hideCuratorsPickSignal={hideCuratorsPickSignal}
+                  hideIncreasedInterestSignal={hideIncreasedInterestSignal}
+                  lotLabel={lotLabel}
+                  SalePriceComponent={SalePriceComponent}
+                  showPartnerName={showPartnerName}
+                  showSaveIcon={showSaveIcon}
+                  backgroundColor={backgroundColor}
+                />
+
+                {!!enableNewSaveAndFollowOnArtworkCard &&
+                  !!(enableNewSaveCTA || enableNewSaveAndFollowCTAs) && <Spacer y={0.5} />}
+
+                <ArtworkItemCTAs
+                  artwork={artwork}
+                  showSaveIcon={showSaveIcon}
+                  dark={dark}
+                  contextModule={contextModule}
+                  contextScreen={contextScreen}
+                  contextScreenOwnerId={contextScreenOwnerId}
+                  contextScreenOwnerSlug={contextScreenOwnerSlug}
+                  contextScreenOwnerType={contextScreenOwnerType}
+                />
+              </Flex>
+            </TouchableHighlight>
+          </Box>
         </ContextMenuArtwork>
 
         <CreateArtworkAlertModal

diff --git a/src/app/store/config/features.ts b/src/app/store/config/features.ts
@@ -75,7 +75,6 @@ export const features = {
     readyForRelease: true,
     echoFlagKey: "AREnableNewAuctionsRailCard",
   },
-  // TODO: need to refresh it, not released yet but marked as ready since 3 months
   AREnableLongPressOnArtworkCards: {
     description: "Enable Context Menu on artwork cards",
     readyForRelease: true,