refactor: Remove sans serif components from palette (#7034)

Co-authored-by: Pavlos Vinieratos <[email protected]>
artsy · Jul 5, 2022 · 6edf1e3 · 6edf1e3
1 parent 3d9bddb
commit 6edf1e3
Show file tree

Hide file tree

Showing 14 changed files with 75 additions and 369 deletions.
diff --git a/src/app/Components/ArtworkGrids/FilteredArtworkGridZeroState.tsx b/src/app/Components/ArtworkGrids/FilteredArtworkGridZeroState.tsx
@@ -1,7 +1,5 @@
-import { themeGet } from "@styled-system/theme-get"
 import { ArtworksFiltersStore } from "app/Components/ArtworkFilter/ArtworkFilterStore"
-import { Button, Flex, Sans } from "palette"
-import styled from "styled-components/native"
+import { Button, Flex, Text } from "palette"
 
 export interface ZeroStateProps {
   id?: string
@@ -18,7 +16,9 @@ export const FilteredArtworkGridZeroState: React.FC<ZeroStateProps> = (props) =>
 
   return (
     <Flex flexDirection="column" px={4}>
-      <ZeroStateMessage size="3">No results found{"\n"}Please try another search.</ZeroStateMessage>
+      <Text textAlign="center" color="black100" variant="sm">
+        No results found{"\n"}Please try another search.
+      </Text>
       <Flex m="0 auto" pt={2}>
         {!hideClearButton && (
           <Button
@@ -38,8 +38,3 @@ export const FilteredArtworkGridZeroState: React.FC<ZeroStateProps> = (props) =>
     </Flex>
   )
 }
-
-const ZeroStateMessage = styled(Sans)`
-  color: ${themeGet("colors.black100")};
-  text-align: center;
-`
diff --git a/src/app/Components/ReadMore.tsx b/src/app/Components/ReadMore.tsx
@@ -8,7 +8,6 @@ import {
   Flex,
   LinkText,
   nbsp,
-  Sans,
   Text as PaletteText,
   TextProps as PaletteTextProps,
 } from "palette"
@@ -45,9 +44,8 @@ export const ReadMore = React.memo(
     const tracking = useTracking()
     const useNewTextStyles = textStyle === "new"
     const basicRules = defaultRules({ modal: presentLinksModally, useNewTextStyles })
-    const TextComponent: React.ComponentType<PaletteTextProps> = (
-      textStyle === "new" ? PaletteText : Sans
-    ) as any
+    const TextComponent: React.ComponentType<PaletteTextProps> = PaletteText
+
     const textProps: PaletteTextProps = { variant: "xs" }
     const rules = {
       ...basicRules,
@@ -158,14 +156,14 @@ function truncate({
 
     if (React.isValidElement(node)) {
       // TODO: find a way to make the rendering extensible while allowing textDepth to be tracked.
-      // Right now we assume that only these two Text nodes will be used.
-      if (node.type === Sans || node.type === PaletteText) {
+      // Right now we assume that only PaletteText will be used.
+      if (node.type === PaletteText) {
         textDepth += 1
       }
       const children = React.Children.toArray((node.props as any).children)
       const truncatedChildren = traverse(children) as React.ReactNode[]
 
-      if (node.type === Sans || node.type === PaletteText) {
+      if (node.type === PaletteText) {
         if (textDepth === 1 && maxChars === offset) {
           truncatedChildren.push(
             <>

diff --git a/src/app/Components/ScrollableTabBar.tsx b/src/app/Components/ScrollableTabBar.tsx
@@ -1,5 +1,5 @@
 import { themeGet } from "@styled-system/theme-get"
-import { Sans } from "palette"
+import { Text } from "palette"
 import React from "react"
 import { Animated, Dimensions, LayoutRectangle, ScrollView, View } from "react-native"
 import styled from "styled-components/native"
@@ -46,10 +46,6 @@ interface ScrollableTabProps {
   tabLabel: string
 }
 
-const TabLabel = styled(Sans)<{ isActive: boolean }>`
-  color: ${(p) => (p.isActive ? themeGet("colors.black100") : themeGet("colors.black30"))};
-`
-
 export const ScrollableTab: React.FC<ScrollableTabProps> = ({ children }) => (
   <View style={{ flex: 1, overflow: "hidden" }}>{children}</View>
 )
@@ -101,9 +97,9 @@ export default class ScrollableTabBar extends React.Component<
         }}
       >
         <TabButton active={isTabActive}>
-          <TabLabel size="3" isActive={isTabActive}>
+          <Text variant="sm" color={isTabActive ? "black100" : "black30"}>
             {name}
-          </TabLabel>
+          </Text>
         </TabButton>
       </Button>
     )

diff --git a/src/app/Components/SearchInput.tests.tsx b/src/app/Components/SearchInput.tests.tsx
@@ -59,9 +59,9 @@ describe("SearchInput", () => {
   })
 
   it(`doesn't render "Cancel" button when "enableCancelButton" is not passed`, () => {
-    const { queryAllByText } = renderWithWrappers(<TestWrapper />)
-    // Cancel text is wrapped by Sans and Animated.Text so we get 2 elements here
-    expect(queryAllByText("Cancel")).toHaveLength(0)
+    const { queryByText } = renderWithWrappers(<TestWrapper />)
+
+    expect(queryByText("Cancel")).toBeNull()
   })
 
   it(`renders "Cancel" button when "enableCancelButton" is passed`, () => {

diff --git a/src/app/Scenes/Artwork/Components/ArtworkExtraLinks/FaqAndSpecialistSection.tsx b/src/app/Scenes/Artwork/Components/ArtworkExtraLinks/FaqAndSpecialistSection.tsx
@@ -32,11 +32,16 @@ const FaqAndSpecialistSection: React.FC<FaqAndSpecialistSectionProps> = ({ artwo
     return (
       <Text variant="xs" color="black60">
         Have a question?{" "}
-        <Text style={{ textDecorationLine: "underline" }} onPress={() => handleReadOurFAQTap()}>
+        <Text
+          variant="xs"
+          style={{ textDecorationLine: "underline" }}
+          onPress={() => handleReadOurFAQTap()}
+        >
           Read our FAQ
         </Text>{" "}
         or{" "}
         <Text
+          variant="xs"
           style={{ textDecorationLine: "underline" }}
           onPress={() => handleAskASpecialistTap("[email protected]")}
         >

diff --git a/src/app/Scenes/City/CityPicker.tsx b/src/app/Scenes/City/CityPicker.tsx
@@ -2,7 +2,7 @@ import { themeGet } from "@styled-system/theme-get"
 import { CircleWhiteCheckIcon } from "app/Icons/CircleWhiteCheckIcon"
 import { LegacyNativeModules } from "app/NativeModules/LegacyNativeModules"
 import { ProvideScreenTracking, Schema } from "app/utils/track"
-import { Box, Flex, SansV1Props, Separator, Serif, SerifV1Props, Text } from "palette"
+import { Box, Flex, Separator, Text, TextProps } from "palette"
 import React, { useEffect, useState } from "react"
 import { TouchableOpacity } from "react-native"
 import { useScreenDimensions } from "shared/hooks"
@@ -60,13 +60,13 @@ export const CityPicker: React.FC<Props> = (props) => {
             <Box key={i}>
               <TouchableOpacity onPress={() => selectCity(city, i)}>
                 <Flex flexDirection="row" justifyContent="space-between" alignItems="center">
-                  <Serif
+                  <Text
                     mt={1}
-                    size={dimensions(screenHeight)[size].cityFontSize}
+                    variant={dimensions(screenHeight)[size].cityFontSize}
                     lineHeight={dimensions(screenHeight)[size].lineHeight}
                   >
                     {city}
-                  </Serif>
+                  </Text>
                   {selectedCity === city && (
                     <Box mb={2} mt={2}>
                       <CircleWhiteCheckIcon width={26} height={26} />
@@ -103,21 +103,25 @@ const LogoContainer = styled(Flex)`
   margin-top: 25px;
 `
 
-type FontSize = SansV1Props["size"] & SerifV1Props["size"]
-const dimensions = (size: number) => ({
+const dimensions = (
+  size: number
+): Record<
+  string,
+  { cityFontSize: TextProps["variant"]; logoFontSize: TextProps["variant"]; lineHeight: number }
+> => ({
   small: {
-    cityFontSize: "4" as FontSize,
-    logoFontSize: "2" as FontSize,
+    cityFontSize: "md",
+    logoFontSize: "xs",
     lineHeight: size / 14,
   },
   standard: {
-    cityFontSize: "8" as FontSize,
-    logoFontSize: "3" as FontSize,
+    cityFontSize: "lg",
+    logoFontSize: "sm",
     lineHeight: size / 12,
   },
   large: {
-    cityFontSize: "8" as FontSize,
-    logoFontSize: "3" as FontSize,
+    cityFontSize: "lg",
+    logoFontSize: "sm",
     lineHeight: size / 11,
   },
 })
diff --git a/src/app/Scenes/City/Components/EventList.tsx b/src/app/Scenes/City/Components/EventList.tsx
@@ -124,19 +124,19 @@ export class EventList extends React.Component<Props> {
       case "saved":
         return (
           <Box py={2} mx={2}>
-            <SimpleMessage textSize="3t">{`You haven’t saved any shows in ${cityName}. When you save shows, they will show up here.`}</SimpleMessage>
+            <SimpleMessage>{`You haven’t saved any shows in ${cityName}. When you save shows, they will show up here.`}</SimpleMessage>
           </Box>
         )
       case "fairs":
         return (
           <Box py={2} mx={2}>
-            <SimpleMessage textSize="3t">{`There are currently no active fairs. Check back later to view fairs in ${cityName}.`}</SimpleMessage>
+            <SimpleMessage>{`There are currently no active fairs. Check back later to view fairs in ${cityName}.`}</SimpleMessage>
           </Box>
         )
       default:
         return (
           <Box py={2} mx={2}>
-            <SimpleMessage textSize="3t">{`There are currently no active ${type.toLowerCase()} shows. Check back later to view shows in ${cityName}.`}</SimpleMessage>
+            <SimpleMessage>{`There are currently no active ${type.toLowerCase()} shows. Check back later to view shows in ${cityName}.`}</SimpleMessage>
           </Box>
         )
     }

diff --git a/src/app/utils/renderMarkdown.tests.tsx b/src/app/utils/renderMarkdown.tests.tsx
@@ -3,7 +3,7 @@ import { navigate } from "app/navigation/navigate"
 import { extractText } from "app/tests/extractText"
 import { renderWithWrappers } from "app/tests/renderWithWrappers"
 import { readFileSync } from "fs"
-import { Flex, Serif } from "palette"
+import { Flex, Text } from "palette"
 import { join } from "path"
 import React from "react"
 import { defaultRules, renderMarkdown } from "./renderMarkdown"
@@ -63,9 +63,9 @@ describe("renderMarkdown", () => {
         // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
         react: (node, output, state) => {
           return (
-            <Serif size="3t" color="black60" key={state.key}>
+            <Text variant="sm" color="black60" key={state.key}>
               {output(node.content, state)}
-            </Serif>
+            </Text>
           )
         },
       },
@@ -89,9 +89,9 @@ describe("renderMarkdown", () => {
         // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
         react: (node, output, state) => {
           return (
-            <Serif size="3t" color="black60" key={state.key}>
+            <Text variant="sm" color="black60" key={state.key}>
               {output(node.content, state)}
-            </Serif>
+            </Text>
           )
         },
       },
@@ -118,9 +118,9 @@ describe("renderMarkdown", () => {
         // @ts-expect-error STRICTNESS_MIGRATION --- 🚨 Unsafe legacy code 🚨 Please delete this and fix any type errors if you have time 🙏
         react: (node, output, state) => {
           return (
-            <Serif size="3t" color="black60" key={state.key}>
+            <Text variant="sm" color="black60" key={state.key}>
               {output(node.content, state)}
-            </Serif>
+            </Text>
           )
         },
       },