search

iTwin / iTwinUI-react

A react component library for iTwinUI.
https://github.com/iTwin/iTwinUI
Other
84 stars 23 forks source link

Small: Wrong HTML tag #734

Closed g-miranda closed 2 years ago

g-miranda commented 2 years ago

Describe the bug (actual behavior)

When Small is used inside another Typography (for example Body) a warning is raised:

image

Expected behavior

According to HTML standards for p:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

The <Small> component is expected to generate the <small> tag.

Reproduction

<Body>
  Some <Small>text</Small>
</Body>

Additional information

References: W3C - Paragraphs: the P element W3C - Block-level and inline elements MDN Content Categories MDN page for small

mayank99 commented 2 years ago

Hi @g-miranda, thanks for the issue. I've created #735 to fix this, however I would recommend you to use the <Text> component because it gives you more control over the rendered element through as prop.

<Text variant='body' as='p'>
  Some <Text variant='small' as='small'>text</Text>
<Text>
g-miranda commented 2 years ago

Hi @mayank99. Thank you for the suggestion, I'll do that.