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][joy-ui] Fix color inversion demos #39403

Merged
merged 3 commits into from
Oct 13, 2023

Conversation

danilo-leal
Copy link
Contributor

@danilo-leal danilo-leal commented Oct 11, 2023

This PR fixes some regressions caused by my previous PR on the same page/demos — #39306 🫠

Before After
Screen Shot 2023-10-11 at 17 00 41 Screen Shot 2023-10-11 at 17 00 50

👉 https://deploy-preview-39403--material-ui.netlify.app/joy-ui/main-features/color-inversion/

Sorry, something went wrong.

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@danilo-leal danilo-leal added docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy labels Oct 11, 2023
@danilo-leal danilo-leal self-assigned this Oct 11, 2023
@mui-bot
Copy link

mui-bot commented Oct 11, 2023

@danilo-leal
Copy link
Contributor Author

danilo-leal commented Oct 11, 2023

Screen Shot 2023-10-11 at 17 28 25

@siriwatknp there's this demo here that I added in the previous PR, using color inversion with the styled API. For some reason, the button is not being picked up... can't figure out why, regardless of the markup structure being the same as the other demo using the sx prop. Would love to have some help here!

@danilo-leal
Copy link
Contributor Author

@siriwatknp can you take a quick look at the comment/demo above?! 😬 👆

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
@siriwatknp
Copy link
Member

siriwatknp commented Oct 13, 2023

@danilo-leal I found a tiny typescript bug while fixing the demo so I pushed the fix in the latest commit. Let me know if you want me to revert and create another PR.

By the way, to use color inversion effectively it should be applied to an array:

// sx
- <Box sx={{ …styles, …applyColorInversion('neutral') }}>
+ <Box sx={[{ …styles }, applyColorInversion('neutral')]}>

// styled
- styled('div')({ …styles, …applyColorInversion('neutral') })
+ styled('div')([{ …styles }, applyColorInversion('neutral')])

@danilo-leal danilo-leal merged commit 372cf83 into mui:master Oct 13, 2023
@danilo-leal danilo-leal deleted the fix-joy-color-inversion-demo branch October 13, 2023 11:25
mnajdova pushed a commit to mnajdova/material-ui that referenced this pull request Oct 17, 2023
Co-authored-by: siriwatknp <siriwatkunaporn@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 package: joy-ui Specific to @mui/joy
Projects
Status: Recently completed
Development

Successfully merging this pull request may close these issues.

None yet

3 participants