Material-ui: Improve handling of Typography spacing

[maciej-gurban]

Hi! I was upgrading to 3.x.x and noticed that Typography now has paragraph prop and thought I'd share why it might not satisfy the most common scenarios fully.

Based on use-cases in our projects so far, we've created a thin wrapper around Typography which allows us to apply custom bottom margins. We accept 3 values for the bottom margin (we override gutterBottom for this purpose) - small, medium and large equal to one, two and three spacing units.

The large bottom margins gets applied to headings in various scenarios where we want to create more spacing between heading text and content of a page section. Some examples: page header, or a custom modal.

The medium one provides spacing equal to the one provided by paragraph prop and is used for the same purpose, with minor distinction - we also apply it to small headings to create spacing between the heading and paragraph text, in which case it would be wrong to add a paragraph prop to a heading because that's not what it is.

Lastly, the small bottom margin is useful for where gutterBottom would be used.

I was wondering whether you'd be open to discussing how to address the use-cases. We try to minimize the number of places where styles need to be custom and injected to a component, and so being able to build simple layouts of heading + text without writing a line of styles has rather great value to us.

[mbrookes]

Forgive me for not fully understanding, but what feature are you proposing?

[maciej-gurban]

Apologies for not being clearer.

What I'm saying is that since we provide gutterBottom and paragraph to provide certain marginBottom, perhaps it would be worth looking into what the most common uses cases are. Our teams use MUI heavily, and providing these 3 types of bottom spacing was very useful in minimizing custom styling work needed for simple layouts involving Typography.

I'm asking whether you think providing something like gutterBottom with small, medium, large would work for general userbase of this MUI.

[eps1lon]

I would wait for user upvotes. If we hear about this more often or see a common pattern evolve we can introduce it but right now I don't see the need if this can be easily achieved in userland. Unless you are saying that this is currently not possible or requires complex wrapper components.

[n-batalha]

I'm not sure what would be the best API (*), but I arrived here looking for what is the "right way" of configuring margins for non-interface text, such as content in articles/blog posts as I expected this would be quite common. The normal html style is fine out of the box but with Typography I have to reconfigure it (the paragraph space not always sufficing).

(*) edit: I haven't read much about rhythm and best defaults yet but it seems related 0, 1.

[oliviertassinari]

@joshwooding typography.js has some interesting bias. I think that it's interesting to consider them in the v4 typography effort. For instance, they have a line-height that is rem based when Bootstrap is em based.

@n-batalha Our theme.spacing() method tries to achieve the same goal: rhythm in the layout.

@maciej-gurban One possible resolution to this problem is to make our core components use the @material-ui/system package. You would then have access to a mb={x} property. Useful when the default margin button isn't enough.

[n-batalha]

Just some thoughts below, in that this for me falls under a more general need.

There is a need (for me) to write long text content (articles, blog posts).

In this content there are more sizes required of padding/margins as per good typography conventions (see Matej's book), that would be a multiple of line height for vertical rhythm. There are more such conventions, such as not providing a margin/padding between paragraphs but instead indent the second paragraph (like books):

p + p {
  text-indent: 1em;
}

One can do custom components and use theming like @oliviertassinari mentions, but I guess my open question is if this isn't a common enough need that the support for long text content would warrant a shared solution here. Gutenberg (which btw seems unmaintained, not recommending) tries to do this but it provides a global style. Same as Typography.JS. Kyle explains the advantage of this out-of-the box set of configs based on a simple API, not requiring the user to configure so much himself, nor even understanding good typography in depth.

For such long content, normally available/written with Markdown, in the material-ui case and when not keen on using such global styles, one can use things like mdjx or remark-react where one provides a mapping of html tags to be replaced by the respective React components, based on original Markdown tags (e.g. ## --> <h3> --> <Typography variant='h3'>). What's missing for me is the coding of the "good typography practices" into reusable React components (using the theme config). Whatever this is, it then at least needs to match muiTypography (*) font scale, line heights etc, muiTypography doesn't seem made for this use case out of the box. Given how Typography.JS, and Remark/MDX seem popular in the Gatsby community, perhaps it's worth it. I'd love to implement if I have time, and if no one can tell me why this is a bad idea (already exists?). Maybe even not tied to material-ui, except via a plugin for the boilerplate setting via mui theme.

(*) muiTypography = Material UI Typography

[KyruCabading]

To start, could we expose gutterBottom in the global theme object? I see right now it's fixed by em which requires the wrapper if you want to change the margin for every Typography component.

In Typography.js

gutterBottom: {
    marginBottom: '0.35em',
  },

There's a question on it on stackoverflow looking at the same feature.
https://stackoverflow.com/questions/56371614/material-ui-typeography-gutterbottom-increase-margin

[oliviertassinari]

@KyruCabading It's already exposed. It doesn't require a wrapper, you can target the CSS class name or use theme.overrides.MuiTypography.gutterBottom.