From 278366df0d5a9ba3904bd9a804c332c384994199 Mon Sep 17 00:00:00 2001 From: Luke Walczak Date: Mon, 17 Oct 2022 10:50:08 +0200 Subject: [PATCH] fix: set default font properties for Text component without variant (#3409) --- src/components/Typography/Text.tsx | 9 ++++++- .../__tests__/Typography/Text.test.js | 18 ++++++++++++-- .../__snapshots__/Avatar.test.js.snap | 8 +++++++ .../__snapshots__/Banner.test.js.snap | 12 ++++++++++ .../__snapshots__/DataTable.test.js.snap | 24 +++++++++++++++++++ .../__snapshots__/ListAccordion.test.js.snap | 16 +++++++++++++ .../__snapshots__/ListItem.test.js.snap | 22 +++++++++++++++++ .../__snapshots__/ListSection.test.js.snap | 12 ++++++++++ .../__snapshots__/Snackbar.test.js.snap | 4 ++++ 9 files changed, 122 insertions(+), 3 deletions(-) diff --git a/src/components/Typography/Text.tsx b/src/components/Typography/Text.tsx index e7422463e6..dd1914a836 100644 --- 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 & { @@ -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 index 4b298dd20c..c8564162b4 100644 --- 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 = ( <> {content} @@ -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( + {content} + ); + 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 index 76a2a61e9c..9b55cb65a5 100644 --- 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 index a80c538074..e1b6caeccc 100644 --- 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 index c1f5e2652a..72567d0352 100644 --- 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 index 04e2b71f21..806a52c5a9 100644 --- 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", diff --git a/src/components/__tests__/__snapshots__/ListItem.test.js.snap b/src/components/__tests__/__snapshots__/ListItem.test.js.snap index 1136a9fd99..8809ae314e 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap @@ -63,6 +63,8 @@ exports[`renders list item with custom description 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -350,6 +352,8 @@ exports[`renders list item with custom title and description styles 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -380,6 +384,8 @@ exports[`renders list item with custom title and description styles 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -471,6 +477,8 @@ exports[`renders list item with left and right items 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -499,6 +507,8 @@ exports[`renders list item with left and right items 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -661,6 +671,8 @@ exports[`renders list item with left item 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -747,6 +759,8 @@ exports[`renders list item with right item 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -836,6 +850,8 @@ exports[`renders list item with title and description 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -864,6 +880,8 @@ exports[`renders list item with title and description 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -950,6 +968,8 @@ exports[`renders with a description with typeof number 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -980,6 +1000,8 @@ exports[`renders with a description with typeof number 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap index b2f808c0b6..21a5293fa6 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap @@ -309,6 +309,8 @@ exports[`renders list section with custom title style 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -431,6 +433,8 @@ exports[`renders list section with custom title style 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -762,6 +766,8 @@ exports[`renders list section with subheader 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -884,6 +890,8 @@ exports[`renders list section with subheader 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -1177,6 +1185,8 @@ exports[`renders list section without subheader 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -1299,6 +1309,8 @@ exports[`renders list section without subheader 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap index 4b4dc5d477..c1a6ae5710 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap @@ -300,6 +300,8 @@ exports[`renders snackbar with action button 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -549,6 +551,8 @@ exports[`renders snackbar with content 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr",