Usage of typography in components needs a face-lift

[mimarz]

Typography is a troubled little child....

We have inconsistent usage of the typography inside components in addition to what we communicate outwards our users should do.

We either encourage use of the Typography component

<Typography /> used directly

<Card>
    <CardHeader>
    <CardHeaderTitle>
        <Typography variant="h5">An interactive example</Typography>
        <Typography variant="body_short">
        With some short content.
        </Typography>
    </CardHeaderTitle>
    <Button variant="ghost_icon">
        <Icon name="more_verticle" title="more action" size={48}></Icon>
    </Button>
    </CardHeader>
</Card>

Or predefine typography via named components

Here Dialog.Title is just a simple wrapper for typography. <Typography /> could be used instead.

<Dialog>
    <Title>title</Title>
    <CustomContent >
    some content...
    </CustomContent>
    <Actions>
        some action component...
    </Actions>
</Dialog>

Inside named components they either wrap the Typography and set the variant to or replicate functionality of Typography component using the typographyTemplate

Possible actions

• We should conform on how we handle typography
  • Refactor typography as a hook maybe?
  • Should components wrap <Typography /> or alternatively use the typo hook?
  • How do we keep using typographyTemplate?
• Update affected components
• Should we keep using named components for stuff like Dialog or encourage use of <Typygraphy />

[wenche]

Quick comment: I might also be difficult to understand the use of typography Accordion in storybook, where we according to the props tables have headerLevel on both Accordion, AccordionItem and AccordionHeader

[wenche]

The <Typography> component also gives you a p tag in too many of your componenents. Take this example (that I actually don't quite understand the use of props in myself 🤯 )

  <Typography group="input" variant="label" color="currentColor">
    ($)
  </Typography>

Semantically this text should be wrapped in a span and not a p tag.

[mimarz]

The "group" + "variant" combo also serves some confusion as we cant dynamically decide the types for "variant" based on selected "group" 🙄