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][base] Add Tailwind CSS + plain CSS demo on the Menu page #38618

Merged
merged 3 commits into from
Sep 4, 2023

Conversation

alisasanib
Copy link
Contributor

Part of #37222

@mui-bot
Copy link

mui-bot commented Aug 23, 2023

Netlify deploy preview

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 90f4033

@zannager zannager added docs Improvements or additions to the documentation package: base-ui Specific to @mui/base labels Aug 24, 2023
@zannager zannager requested a review from mnajdova August 24, 2023 08:25
@@ -19,7 +19,7 @@ export default function MenuIntroduction() {
<StyledMenuItem onClick={createHandleMenuClick('Profile')}>
Profile
</StyledMenuItem>
<StyledMenuItem onClick={createHandleMenuClick('My account')}>
<StyledMenuItem onClick={createHandleMenuClick('Language settings')}>
Copy link
Member

Choose a reason for hiding this comment

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

Nice catch! :)

return (
<div className={`${isDarkMode ? 'dark' : ''}`}>
<Dropdown>
<MenuButton className="cursor-pointer text-sm min-h-[calc(1.5em+22px)] font-sans box-border rounded-xl font-semibold px-3.5 py-2 leading-normal bg-white dark:bg-slate-900 border border-solid border-slate-300 dark:border-slate-700 text-slate-900 dark:text-slate-300 hover:bg-slate-50 hover:dark:bg-slate-800 hover:border-slate-300 dark:hover:border-slate-600 focus-visible:border-purple-500 focus-visible:hover:border-purple-500 focus-visible:dark:hover:border-purple-500 focus-visible:outline-0 focus-visible:shadow-outline-purple">
Copy link
Member

Choose a reason for hiding this comment

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

We should create our own version of the MenuButton and the MenuItem componetn similar as done with the Menu. It would simplify a lot the demo code.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Thanks @mnajdova, I just added the custom version of MenuButton and MenuItem for both demos. Please let me know if it addresses your comment :)

Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

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

Looks great, thanks!

@mnajdova mnajdova merged commit ef35fe4 into mui:master Sep 4, 2023
18 checks passed
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Sep 8, 2023
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Sep 8, 2023
anon-phantom pushed a commit to anon-phantom/material-ui that referenced this pull request Sep 11, 2023
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 package: base-ui Specific to @mui/base
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants