React - Text component - fontSize not computed when variant prop is defined in styled-components' attrs method

[ofreyssinet-ledger]

Hey fellow devs, I’ve just noticed a small bug while using the Text component on LLD, don’t know why I didn’t notice it earlier:

If we pass variant as a regular prop in rendering (e.g in a component that returns <Text variant="h1" />), the fontSize will be applied normally, but if we pass it as prop in a styled component’s attrs like so:

import {Text} from "@ledgerhq/react-ui"
const SomeText = styled(Text).attrs(() => ({variant: "h1"}))``;

the fontFamily and fontWeight are working properly it seems, but the fontSize is not computed at all (it isn’t just overriden or sth like that, i checked the inspector)

Anyone has a clue why? 🧐 I guess it has something to do with how our styled-system is setup but it’s a mystery to me

[jelbaz-ledger]

Pinging @nparigi-ledger since I think that he worked on it quite a bit

[rkoleci]

assign this to me. I'd like to give it a try.

[elbywan]

Hey @rkoleci,

You're more than welcome to make a PR if you'd like to contribute on this topic 👍 .