Skip to content

RE-166: Fix MUI Heading gutterBottom styles#74033

Open
artem-vavilov wants to merge 1 commit into
stagingfrom
RE-166/heading-styles-fix
Open

RE-166: Fix MUI Heading gutterBottom styles#74033
artem-vavilov wants to merge 1 commit into
stagingfrom
RE-166/heading-styles-fix

Conversation

@artem-vavilov

@artem-vavilov artem-vavilov commented Jul 22, 2026

Copy link
Copy Markdown
Member

Fixes the MUI Typography component styles so heading bottom margins are once again controlled by the gutterBottom prop.

Before After
headings-before headings-after
heading-1-before heading-1-after
heading-2-before heading-2-after

Links

@artem-vavilov
artem-vavilov requested a review from a team as a code owner July 22, 2026 17:08
@artem-vavilov artem-vavilov changed the title RE-166: Fix MUI gutterBottom styles RE-166: Fix MUI Typography gutterBottom styles Jul 22, 2026
@markabarrett

Copy link
Copy Markdown

LGTM. Thank you, Artem!

@artem-vavilov artem-vavilov changed the title RE-166: Fix MUI Typography gutterBottom styles RE-166: Fix MUI Heading gutterBottom styles Jul 22, 2026

@bethanyaconnor bethanyaconnor left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will potentially affect a number of places, right? That seems okay, just want to confirm.

@github-actions

Copy link
Copy Markdown

🖼️ Storybook Visual Comparison Report

⚠️⚠️⚠️ Detected Storybook eyes differences, see report!

A difference was found in our Storybook front-end visual comparison testing against the staging baseline.
This difference was detected in Applitools Eyes and is viewable in the link above.

Remediation steps:

  1. Open the report
  2. Determine whether the differences are expected based on this PR's changes
    a. If expected: Before merging this PR, accept the new baselines and re-run this action, it should pass.
    b. If not expected: Push updates to this PR to correct the differences.

@artem-vavilov

artem-vavilov commented Jul 22, 2026

Copy link
Copy Markdown
Member Author

This will potentially affect a number of places, right? That seems okay, just want to confirm.

Yes. By default, MUI Typography does not add bottom margin because gutterBottom is false. The previous update accidentally forced bottom margin onto all heading variants. This fix keeps the margin controlled by the gutterBottom prop, so headings only get bottom spacing when gutterBottom is explicitly set.

Most of the heading components we use have gutterBottom enabled, meaning they are supposed to have a bottom margin anyway. Only a few should be affected, and I believe they are the two that were caught by the eyes tests earlier.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants