fix(text): variant loss with child component

[hbriese]

Motivation

When a component is used as a child to Text i.e. <Text><MyComponent /></Text> the variant specified in the text is ignored.
i.e.

function Custom() {
  return <>{'<Custom /> nested in headlineMedium'}</>;
}

function Example() {
  return (
    <Text>
      <Custom />
    </Text>
  );
}

This is due to logic inside of the Text component trying to deal with nested Text components. This logic however applies to all components and breaks rendering components within Text.

Related issue

#4172

Test plan

1. Text.test.tsx contains tests for regressions - nested text with variant should override parent's variant
2. Added test to Text.test.tsx - nested non-text component should not override parent's variant

Before

After

[callstack-bot]

Hey @hbriese, thank you for your pull request 🤗. The documentation from this branch can be viewed here.