Skip to content

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

Merged
ZeeshanTamboli merged 3 commits intomui:nextfrom
MatheusEli:fix-docs-tabs
May 28, 2024
Merged

[docs][material-ui][Tabs] Improve the Basic Tabs demo#42374
ZeeshanTamboli merged 3 commits intomui:nextfrom
MatheusEli:fix-docs-tabs

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. scope: tabs Changes related to the tabs. 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

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
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

docs Improvements or additions to the documentation. needs cherry-pick The PR should be cherry-picked to master after merge. scope: tabs Changes related to the tabs.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants