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

[docs][material-ui][Tabs] Improve the Basic Tabs demo #42374

Merged
merged 3 commits into from
May 28, 2024

Conversation

MatheusEli
Copy link
Contributor

@MatheusEli MatheusEli commented May 24, 2024

A continuation of #42253

To prevent the validateDOMNesting warning that occurs when users place certain elements inside Tabs, we can remove the Typography component from BasicTabs demo. Users don't realize Typography renders a p tag, leading to warnings when they copy and paste the demo code into their applications

The p tag can only contain inline elements. This means that placing a div tag inside it is inappropriate since the div tag is a block element. Improper nesting can cause issues such as rendering extra tags, which can affect the JavaScript and CSS. This is why we encounter the validateDOMNesting warning #21015

@oliviertassinari oliviertassinari added docs Improvements or additions to the documentation component: tabs This is the name of the generic UI component, not the React module! labels May 24, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title [material-ui][docs] Fix the Basic Tabs demo [docs][material-ui] Fix the Basic Tabs demo May 24, 2024
@mui-bot
Copy link

mui-bot commented May 24, 2024

Netlify deploy preview

https://deploy-preview-42374--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against daecbf0

@ZeeshanTamboli ZeeshanTamboli added the package: material-ui Specific to @mui/material label May 24, 2024
Copy link
Member

@ZeeshanTamboli ZeeshanTamboli left a comment

Choose a reason for hiding this comment

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

Okay, this looks fine to me. Argos detected the change: https://app.argos-ci.com/mui/material-ui/builds/28226/91645046, which is expected. I'd like others' opinions on this. For reviewers, please see the discussion in #42253. And also the discussion in issue #21015.

Copy link
Member

@michaldudak michaldudak left a comment

Choose a reason for hiding this comment

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

The code looks OK. The rendered text now has a different font, but it's actually OK, as it's more inline with Material Design (and less with our custom theme).

@ZeeshanTamboli ZeeshanTamboli changed the title [docs][material-ui] Fix the Basic Tabs demo [docs][material-ui][Tabs] Improve the Basic Tabs demo May 28, 2024
@ZeeshanTamboli ZeeshanTamboli added the needs cherry-pick The PR should be cherry-picked to master after merge label May 28, 2024
@ZeeshanTamboli ZeeshanTamboli merged commit 74d6294 into mui:next May 28, 2024
20 checks passed
github-actions bot pushed a commit that referenced this pull request May 28, 2024
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024
Co-authored-by: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tabs This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation needs cherry-pick The PR should be cherry-picked to master after merge package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants