From 1bfe405e6f47431d72bec830b5793776a61a8a67 Mon Sep 17 00:00:00 2001 From: lukewalczak Date: Tue, 11 Oct 2022 21:34:58 +0200 Subject: [PATCH] fix: set default font properties for Text component without variant --- 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 | 6 +++++ 9 files changed, 124 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 3af9866c25..710d7e959d 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", @@ -368,6 +370,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", @@ -494,6 +498,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", @@ -760,6 +766,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", @@ -1167,6 +1175,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", @@ -1292,6 +1302,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 5cdda36fee..039bc1fe02 100644 --- a/src/components/__tests__/__snapshots__/DataTable.test.js.snap +++ b/src/components/__tests__/__snapshots__/DataTable.test.js.snap @@ -40,6 +40,8 @@ exports[`renders data table cell 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -107,6 +109,8 @@ exports[`renders data table header 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -170,6 +174,8 @@ exports[`renders data table header 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -225,6 +231,8 @@ exports[`renders data table pagination 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -500,6 +508,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", @@ -999,6 +1009,8 @@ exports[`renders data table pagination with label 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -1286,6 +1298,8 @@ exports[`renders data table pagination with options select 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -1496,6 +1510,8 @@ exports[`renders data table pagination with options select 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -2041,6 +2057,8 @@ exports[`renders data table title with press handler 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -2141,6 +2159,8 @@ exports[`renders data table title with sort icon 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -2211,6 +2231,8 @@ exports[`renders right aligned data table cell 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -2264,6 +2286,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 23f8c12b30..c505fba26d 100644 --- a/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap +++ b/src/components/__tests__/__snapshots__/ListAccordion.test.js.snap @@ -72,6 +72,8 @@ exports[`renders expanded accordion 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -182,6 +184,8 @@ exports[`renders expanded accordion 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -313,6 +317,8 @@ exports[`renders list accordion with children 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -440,6 +446,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", @@ -470,6 +478,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", @@ -638,6 +648,8 @@ exports[`renders list accordion with left items 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -765,6 +777,8 @@ exports[`renders multiline list accordion 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -793,6 +807,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 7c6cc7deb1..4a1f11f3c1 100644 --- a/src/components/__tests__/__snapshots__/ListItem.test.js.snap +++ b/src/components/__tests__/__snapshots__/ListItem.test.js.snap @@ -59,6 +59,8 @@ exports[`renders list item with custom description 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -338,6 +340,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", @@ -368,6 +372,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", @@ -455,6 +461,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", @@ -483,6 +491,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", @@ -641,6 +651,8 @@ exports[`renders list item with left item 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -723,6 +735,8 @@ exports[`renders list item with right item 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -808,6 +822,8 @@ exports[`renders list item with title and description 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -836,6 +852,8 @@ exports[`renders list item with title and description 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -918,6 +936,8 @@ exports[`renders with a description with typeof number 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -948,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", diff --git a/src/components/__tests__/__snapshots__/ListSection.test.js.snap b/src/components/__tests__/__snapshots__/ListSection.test.js.snap index 0fadd2c08a..96e1c94a80 100644 --- a/src/components/__tests__/__snapshots__/ListSection.test.js.snap +++ b/src/components/__tests__/__snapshots__/ListSection.test.js.snap @@ -305,6 +305,8 @@ exports[`renders list section with custom title style 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -423,6 +425,8 @@ exports[`renders list section with custom title style 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -750,6 +754,8 @@ exports[`renders list section with subheader 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -868,6 +874,8 @@ exports[`renders list section with subheader 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -1157,6 +1165,8 @@ exports[`renders list section without subheader 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -1275,6 +1285,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 5483c5afac..e21428f94c 100644 --- a/src/components/__tests__/__snapshots__/Snackbar.test.js.snap +++ b/src/components/__tests__/__snapshots__/Snackbar.test.js.snap @@ -80,6 +80,8 @@ exports[`renders snackbar with Text as a child 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -187,6 +189,8 @@ exports[`renders snackbar with action button 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr", @@ -433,6 +437,8 @@ exports[`renders snackbar with content 1`] = ` }, Object { "color": "rgba(28, 27, 31, 1)", + "fontFamily": "System", + "fontWeight": "400", }, Object { "writingDirection": "ltr",