Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[joy-ui][typography] Update docs after lineHeight changes #39366

Merged
merged 8 commits into from
Oct 12, 2023

Conversation

zanivan
Copy link
Contributor

@zanivan zanivan commented Oct 9, 2023

Updated the 'Title and body' demo on the Typography docs page. After changes made on #38462, the lineHeight from Typography no longer fits with SVG icons, so I tweaked the demo to make sense with the current version.

👉 https://deploy-preview-39366--material-ui.netlify.app/joy-ui/react-typography/#title-and-body

Before After
Screenshot 2023-10-09 at 16 27 56 Screenshot 2023-10-12 at 09 09 19

Sorry, something went wrong.

Verified

This commit was signed with the committer’s verified signature.
rosstimson-causaly Ross Timson
@zanivan zanivan added docs Improvements or additions to the documentation component: Typography The React component. package: joy-ui Specific to @mui/joy labels Oct 9, 2023
@zanivan zanivan self-assigned this Oct 9, 2023
@mui-bot
Copy link

mui-bot commented Oct 9, 2023

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against c4b4b0e

@zannager zannager requested a review from siriwatknp October 10, 2023 16:26
@zanivan zanivan requested a review from danilo-leal October 11, 2023 18:15
Copy link
Contributor

@danilo-leal danilo-leal left a comment

Choose a reason for hiding this comment

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

Looking good! Left just some minor considerations 🤙

@@ -41,8 +41,6 @@ The `title-*` and `body-*` are commonly used in components.

We recommend to combine the title and body with the same or lower size when using them together. For example, `title-lg` and `body-lg` or `title-md` and `body-sm`.
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
We recommend to combine the title and body with the same or lower size when using them together. For example, `title-lg` and `body-lg` or `title-md` and `body-sm`.
Aside from the heading typographic levels, the Typography component provides `title-*` and `body-*` type levels.
To ensure a good UI balance and information hierarchy, we recommend combining them using the same size or a lower one.
For example, using `title-lg` with `body-lg` or `title-md` with `body-sm`.

I know you haven't touched this, but it's a good opportunity to revise this small paragraph a bit. I can't get the previous sentence (i.e., "The title-* and body-* are...") in the suggestion, but I'm considering it for it! It's a tricky sentence — @samuelsycamore might be able to shed some more light!

@siriwatknp
Copy link
Member

Those icons are gone, is it expected? The image in the description still contain icons.

@zanivan
Copy link
Contributor Author

zanivan commented Oct 12, 2023

Those icons are gone, is it expected? The image in the description still contain icons.

As @danilo-leal suggested here, since we won't have line-heights matching icons, I chose to have them removed to simplify the demo. The PR description is now updated 😉

Copy link
Contributor

@danilo-leal danilo-leal left a comment

Choose a reason for hiding this comment

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

Tiny edit suggestions, but overall, it looks good!

@zanivan zanivan merged commit 70ce3c2 into mui:master Oct 12, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Oct 13, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Oct 13, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Oct 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: Typography The React component. docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants