etn-ccis / blui-react-native-themes

Brightlayer UI themes for Eaton applications
BSD 3-Clause "New" or "Revised" License
1 stars 2 forks source link

Text variants not working correctly on Android #89

Closed joebochill closed 7 months ago

joebochill commented 8 months ago

Describe the bug / expected behavior

On Android, all of the text are rendered using the Regular font. Android does not support setting fontWeight as a number (they only support 'bold') for custom fonts.

What are the steps to reproduce?

  1. Render a text variant which is supposed to have a bold/semibold weight (e.g., headlineLarge)
  2. Observe that the font is not bold

Screenshots / Screen recording

Here is how the Text variants look:

iOS (correct) Android (incorrect)

Code snippet / Link to minimum reproduction example

<Text variant={'bodyLarge'}>bodyLarge</Text>
<Text variant={'bodyMedium'}>bodyMedium</Text>
<Text variant={'bodySmall'}>bodySmall</Text>
<Text variant={'displayLarge'}>displayLarge</Text>
<Text variant={'displayMedium'}>displayMedium</Text>
<Text variant={'displaySmall'}>displaySmall</Text>
<Text variant={'headlineLarge'}>headlineLarge</Text>
<Text variant={'headlineMedium'}>headlineMedium</Text>
<Text variant={'headlineSmall'}>headlineSmall</Text>
<Text variant={'labelLarge'}>labelLarge</Text>
<Text variant={'labelMedium'}>labelMedium</Text>
<Text variant={'labelSmall'}>labelSmall</Text>
<Text variant={'titleLarge'}>titleLarge</Text>
<Text variant={'titleMedium'}>titleMedium</Text>
<Text variant={'titleSmall'}>titleSmall</Text>

Your environment information

This only affects Android.

Suggested fix

Instead of setting fontWeight in our theme, we must switch the fontFamily to the correct file (e.g., if we need a bold font , we must set the fontFamily to OpenSans-Bold instead of OpenSans-Regular with fontWeight: '700').

Anything else to add?

We need to add information into our Readme that explains that if you need to change the fontWeight of a Text element, it must be done through the fontFamily property and not the fontWeight property.

Strangely, if you try to manually add a bold style to the font, it stops using Open Sans entirely (notice the 'g') — even worse:

<Text variant={'titleSmall'} style={{fontWeight: 'bold'}}>titlegSmall</Text>

image

joebochill commented 8 months ago

The Label variants do appear to have a change already since they are set to use the SemiBold font.