-
-
Notifications
You must be signed in to change notification settings - Fork 31.6k
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] Add support for Tailwind CSS and plain CSS demos #37319
Conversation
Signed-off-by: Marija Najdova <mnajdova@gmail.com>
Signed-off-by: Marija Najdova <mnajdova@gmail.com>
Netlify deploy previewBundle size report |
@@ -339,7 +373,10 @@ export default function Demo(props) { | |||
} | |||
} | |||
|
|||
if (!demoOptions.demo.endsWith('.js') && demoOptions.hideToolbar !== true) { | |||
if ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The new demos structure uses the folder name as a prop, so we need to adjust this check.
docs/src/modules/components/Demo.js
Outdated
|
||
const demoData = useDemoData(codeVariant, demo, githubLocation, styleSolution); | ||
|
||
const showSelect = demo.rawTailwind || demo.rawTailwindTS; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Once we support plain CSS, we should update this check.
Signed-off-by: Marija Najdova <mnajdova@gmail.com>
Signed-off-by: Marija Najdova <mnajdova@gmail.com>
This is looking good, I really liked the new toolbar! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 This looks good to me! the CodeSandbox works great.
Signed-off-by: Marija Najdova <mnajdova@gmail.com>
I love the new design of the demo, very clean, close to https://vercel.com/design/button I think that it would be great to update Joy UI, the background feels a bit annoying, it moves the demo a bit further away to how it will feel once rendered in your app. @mnajdova There is one issue with the warnings, it floods now on HEAD in dev mode 😁, we really need to fix it. |
@oliviertassinari thanks, glad you enjoyed it! I was already keen on rolling back with the tiled patterns on Joy ⎯ on it 🤙 |
Beyond, the warnings ⬆️, I think that we should remove the Tailwind CSS dev tool pollution to properly understand the styles in the dev tools, for example: maybe by scoping them to a specific div or only importing Tailwind CSS entry points in pages that demo it. It is also important because Tailwind CSS styles slow the page when loading unused CSS: https://youtu.be/nWcexTnvIKI?si=dOaSJEMNi5aQJesf&t=1313. |
This PR adds support for Tailwind CSS and plan CSS demos (in Base UI - the new infrastructure), but we can move this everywhere. For each demo that supports multiple styling solutions we should have a directory in the structure:
If this structure exists, a select component with the styling options will appear above the demo preview.
I am using the default Tailwind CSS setup - it is added globally on the docs. For the CodeSandbox and StackBlitz demos, I am simply loading the tailwind CDN - https://tailwindcss.com/docs/installation/play-cdn - this seemed like the easiest solution.
Preview: https://deploy-preview-37319--material-ui.netlify.app/base/react-button/#basics
To-dos: