[docs] Improve mui-treasury integration #21054
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Member
siriwatknp
commented
May 16, 2020
siriwatknp
commented
- I have followed (at least) the PR section of the contributing guide.
Details of bundle changes.Comparing: 758a8ad...788051e Details of page changes
|
eps1lon
reviewed
May 16, 2020
oliviertassinari
changed the title
siriwatknp
force-pushed
the
mui-treasury-links
branch
from
0bbcb3e to
22da8ff
Compare
|
@siriwatknp Yes, please leave the translations untouched for next time. In any case, the changes will be overridden. No much harm outside the wasted time in the first place. |
I don't think this link is relevant. It should be about layout positioning, not styles
|
@oliviertassinari thanks, I just updated the PR. please check it again |
oliviertassinari
approved these changes
May 16, 2020
There was a problem hiding this comment.
Great :). Regarding the demos themselves, I think that what would be really cool is to explain how/expose the same capability with the theme. I think that most of the audience would, at 80%?, use the theme context:
import React from 'react';
import { Switch, createMuiTheme, ThemeProvider } from '@material-ui/core';
import { switchTheme, checkboxTheme } from '@mui-treasury/theme/iOS';
const theme = createMuiTheme({}, switchTheme, checkboxTheme);
export default function IosSwitchStyle() {
const [toggled, setToggled] = React.useState(false);
return (
<ThemeProvider theme={theme}>
<Switch
checked={toggled}
onChange={e => setToggled(e.target.checked)}
/>
<Switch
checked={!toggled}
onChange={e => setToggled(!e.target.checked)}
/>
</ThemeProvider>
);
}rather than wrapping each component:
import React from 'react';
import Switch from '@material-ui/core/Switch';
import { useSwitchStyles } from '@mui-treasury/theme/iOS';
export default function IosSwitchStyle() {
const [toggled, setToggled] = React.useState(false);
const iosStyles = useSwitchStyles();
return (
<div>
<Switch
classes={iosStyles}
checked={toggled}
onChange={e => setToggled(e.target.checked)}
/>
<Switch
classes={iosStyles}
checked={!toggled}
onChange={e => setToggled(!e.target.checked)}
/>
</div>
);
}But both are important.
|
Good point! I will focus on improving documentation for components & styles next week, will put that in the list. |
oliviertassinari
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.