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-infra] Add color-scheme to document in iframe demos #45406

Merged
merged 3 commits into from
Feb 25, 2025

Conversation

KenanYusuf
Copy link
Member

@KenanYusuf KenanYusuf commented Feb 25, 2025

Problem

Originally reported here.

When dark mode is enabled and we have scrollable demos displayed in an iframe, users see the following:

Screenshot 2025-02-25 at 09 28 04

Solution

Adding the color-scheme to the document element:

Screenshot 2025-02-25 at 09 28 22

Can be tested locally by making the following changes:

diff --git a/docs/data/material/components/buttons/BasicButtons.tsx b/docs/data/material/components/buttons/BasicButtons.tsx
index 60eb1dfe1e..253383b5b6 100644
--- a/docs/data/material/components/buttons/BasicButtons.tsx
+++ b/docs/data/material/components/buttons/BasicButtons.tsx
@@ -4,7 +4,13 @@ import Button from '@mui/material/Button';
 
 export default function BasicButtons() {
   return (
-    <Stack spacing={2} direction="row">
+    <Stack spacing={2} direction="column" sx={{ overflow: 'auto' }}>
+      <Button variant="text">Text</Button>
+      <Button variant="contained">Contained</Button>
+      <Button variant="outlined">Outlined</Button>
+      <Button variant="text">Text</Button>
+      <Button variant="contained">Contained</Button>
+      <Button variant="outlined">Outlined</Button>
       <Button variant="text">Text</Button>
       <Button variant="contained">Contained</Button>
       <Button variant="outlined">Outlined</Button>
diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md
index 0b1b19fe71..2303128192 100644
--- a/docs/data/material/components/buttons/buttons.md
+++ b/docs/data/material/components/buttons/buttons.md
@@ -26,7 +26,7 @@ Buttons communicate actions that users can take. They are typically placed throu
 
 The `Button` comes with three variants: text (default), contained, and outlined.
 
-{{"demo": "BasicButtons.js"}}
+{{"demo": "BasicButtons.js","iframe": true}}
 
 ### Text button

@KenanYusuf KenanYusuf added bug 🐛 Something doesn't work scope: docs-infra Specific to the docs-infra product labels Feb 25, 2025
@KenanYusuf KenanYusuf requested a review from a team February 25, 2025 09:35
@mui-bot
Copy link

mui-bot commented Feb 25, 2025

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against ccc421a

Copy link
Member

@aarongarciah aarongarciah left a comment

Choose a reason for hiding this comment

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

Nice!

@KenanYusuf KenanYusuf merged commit c72a313 into mui:master Feb 25, 2025
22 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work scope: docs-infra Specific to the docs-infra product
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants