Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text variants not working correctly on Android #89

Closed
joebochill opened this issue Mar 21, 2024 · 1 comment · Fixed by #90
Closed

Text variants not working correctly on Android #89

joebochill opened this issue Mar 21, 2024 · 1 comment · Fixed by #90
Assignees
Labels
brightlayer-ui Used to identify Brightlayer UI platform issues for easy filtering bug Something isn't working high-priority Issues that should be fixed sooner than later

Comments

@joebochill
Copy link
Collaborator

joebochill commented Mar 21, 2024

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 joebochill added bug Something isn't working high-priority Issues that should be fixed sooner than later needs-review Issues that we would like to revisit/review brightlayer-ui Used to identify Brightlayer UI platform issues for easy filtering labels Mar 21, 2024
@joebochill
Copy link
Collaborator Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
brightlayer-ui Used to identify Brightlayer UI platform issues for easy filtering bug Something isn't working high-priority Issues that should be fixed sooner than later
Development

Successfully merging a pull request may close this issue.

3 participants