Add italic support to Text

[craigcarlyle]

🚀 Feature request

Motivation

We currently have to rely on an em container or CSS to italicize text for the Text component:

<Text tone="secondary">
  <em>Lorem ipsum</em>
</Text>

Example

<Text italic tone="secondary">Lorem ipsum</Text>

[gnapse]

Hmmm, I'm not sure we should do this. Here's another alternative:

<Text as="em" tone="secondary">
  Lorem ipsum
</Text>

which has the advantage that it will render a more semantic <em> element, instead of a span or div that happens to have a font-style: italic style applied to it.

If by any chance this does not work today, we can easily adapt the Text component styles to make sure that when the element is em, it applies this italic style.

/* in text/text.module.css */
em.text {
  font-style: italic;
}

[craigcarlyle]

The as="em" solution works for me. @frankieyan if you're also happy with that I'll close this off.