fix: set default font properties for Text component without variant (#…

…3409)
callstack · Oct 17, 2022 · 278366d · 278366d
1 parent 74659c6
commit 278366d
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 3 deletions.
diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx
@@ -8,6 +8,7 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../../core/theming';
+import { tokens } from '../../styles/themes/v3/tokens';
 import { Font, MD3TypescaleKey, ThemeProp } from '../../types';
 
 export type Props = React.ComponentProps<typeof NativeText> & {
@@ -128,7 +129,13 @@ const Text: React.ForwardRefRenderFunction<{}, Props> = (
       />
     );
   } else {
-    const font = !theme.isV3 ? theme.fonts?.regular : {};
+    const { brandRegular, weightRegular } = tokens.md.ref.typeface;
+    const font = theme.isV3
+      ? {
+          fontFamily: brandRegular,
+          fontWeight: weightRegular,
+        }
+      : theme.fonts?.regular;
     const textStyle = {
       ...font,
       color: theme.isV3 ? theme.colors?.onSurface : theme.colors.text,

diff --git a/src/components/__tests__/Typography/Text.test.js b/src/components/__tests__/Typography/Text.test.js
@@ -1,12 +1,14 @@
 import * as React from 'react';
 
+import { render } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
 
+import { tokens } from '../../../styles/themes/v3/tokens';
 import Text from '../../Typography/Text.tsx';
 
-it('renders every variant of Text with children as content', () => {
-  const content = 'Something rendered as a child content';
+const content = 'Something rendered as a child content';
 
+it('renders every variant of Text with children as content', () => {
   const variants = (
     <>
       <Text variant="displayLarge">{content}</Text>
@@ -35,3 +37,15 @@ it('renders every variant of Text with children as content', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders v3 Text component without variant with default fontWeight and fontFamily', () => {
+  const { getByTestId } = render(
+    <Text testID="text-without-variant">{content}</Text>
+  );
+  const { brandRegular, weightRegular } = tokens.md.ref.typeface;
+
+  expect(getByTestId('text-without-variant')).toHaveStyle({
+    fontFamily: brandRegular,
+    fontWeight: weightRegular,
+  });
+});
diff --git a/src/components/__tests__/__snapshots__/Avatar.test.js.snap b/src/components/__tests__/__snapshots__/Avatar.test.js.snap
@@ -139,6 +139,8 @@ exports[`renders avatar with text 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -190,6 +192,8 @@ exports[`renders avatar with text and custom background color 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -241,6 +245,8 @@ exports[`renders avatar with text and custom colors 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -292,6 +298,8 @@ exports[`renders avatar with text and custom size 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",

diff --git a/src/components/__tests__/__snapshots__/Banner.test.js.snap b/src/components/__tests__/__snapshots__/Banner.test.js.snap
@@ -90,6 +90,8 @@ exports[`render visible banner, with custom theme 1`] = `
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
+                    "fontFamily": "System",
+                    "fontWeight": "400",
                   },
                   Object {
                     "writingDirection": "ltr",
@@ -372,6 +374,8 @@ exports[`renders hidden banner, without action buttons and without image 1`] = `
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
+                    "fontFamily": "System",
+                    "fontWeight": "400",
                   },
                   Object {
                     "writingDirection": "ltr",
@@ -498,6 +502,8 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
+                    "fontFamily": "System",
+                    "fontWeight": "400",
                   },
                   Object {
                     "writingDirection": "ltr",
@@ -768,6 +774,8 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
+                    "fontFamily": "System",
+                    "fontWeight": "400",
                   },
                   Object {
                     "writingDirection": "ltr",
@@ -1183,6 +1191,8 @@ exports[`renders visible banner, without action buttons and with image 1`] = `
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
+                    "fontFamily": "System",
+                    "fontWeight": "400",
                   },
                   Object {
                     "writingDirection": "ltr",
@@ -1308,6 +1318,8 @@ exports[`renders visible banner, without action buttons and without image 1`] =
                   },
                   Object {
                     "color": "rgba(28, 27, 31, 1)",
+                    "fontFamily": "System",
+                    "fontWeight": "400",
                   },
                   Object {
                     "writingDirection": "ltr",

diff --git a/src/components/__tests__/__snapshots__/DataTable.test.js.snap b/src/components/__tests__/__snapshots__/DataTable.test.js.snap
@@ -44,6 +44,8 @@ exports[`renders data table cell 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -111,6 +113,8 @@ exports[`renders data table header 1`] = `
           },
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
+            "fontWeight": "400",
           },
           Object {
             "writingDirection": "ltr",
@@ -174,6 +178,8 @@ exports[`renders data table header 1`] = `
           },
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
+            "fontWeight": "400",
           },
           Object {
             "writingDirection": "ltr",
@@ -229,6 +235,8 @@ exports[`renders data table pagination 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -518,6 +526,8 @@ exports[`renders data table pagination with fast-forward buttons 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -1045,6 +1055,8 @@ exports[`renders data table pagination with label 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -1346,6 +1358,8 @@ exports[`renders data table pagination with options select 1`] = `
           },
           Object {
             "color": "rgba(28, 27, 31, 1)",
+            "fontFamily": "System",
+            "fontWeight": "400",
           },
           Object {
             "writingDirection": "ltr",
@@ -1560,6 +1574,8 @@ exports[`renders data table pagination with options select 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -2133,6 +2149,8 @@ exports[`renders data table title with press handler 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -2233,6 +2251,8 @@ exports[`renders data table title with sort icon 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -2307,6 +2327,8 @@ exports[`renders right aligned data table cell 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",
@@ -2360,6 +2382,8 @@ exports[`renders right aligned data table title 1`] = `
         },
         Object {
           "color": "rgba(28, 27, 31, 1)",
+          "fontFamily": "System",
+          "fontWeight": "400",
         },
         Object {
           "writingDirection": "ltr",

diff --git a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap
@@ -76,6 +76,8 @@ exports[`renders expanded accordion 1`] = `
                 },
                 Object {
                   "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
                 },
                 Object {
                   "writingDirection": "ltr",
@@ -190,6 +192,8 @@ exports[`renders expanded accordion 1`] = `
               },
               Object {
                 "color": "rgba(28, 27, 31, 1)",
+                "fontFamily": "System",
+                "fontWeight": "400",
               },
               Object {
                 "writingDirection": "ltr",
@@ -325,6 +329,8 @@ exports[`renders list accordion with children 1`] = `
                 },
                 Object {
                   "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
                 },
                 Object {
                   "writingDirection": "ltr",
@@ -456,6 +462,8 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                 },
                 Object {
                   "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
                 },
                 Object {
                   "writingDirection": "ltr",
@@ -486,6 +494,8 @@ exports[`renders list accordion with custom title and description styles 1`] = `
                 },
                 Object {
                   "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
                 },
                 Object {
                   "writingDirection": "ltr",
@@ -658,6 +668,8 @@ exports[`renders list accordion with left items 1`] = `
                 },
                 Object {
                   "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
                 },
                 Object {
                   "writingDirection": "ltr",
@@ -789,6 +801,8 @@ exports[`renders multiline list accordion 1`] = `
                 },
                 Object {
                   "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
                 },
                 Object {
                   "writingDirection": "ltr",
@@ -817,6 +831,8 @@ exports[`renders multiline list accordion 1`] = `
                 },
                 Object {
                   "color": "rgba(28, 27, 31, 1)",
+                  "fontFamily": "System",
+                  "fontWeight": "400",
                 },
                 Object {
                   "writingDirection": "ltr",