Skip to content

Commit

Permalink
Material Ui demo tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
danilo-leal committed Sep 25, 2023
1 parent 4d50319 commit 23a60e9
Show file tree
Hide file tree
Showing 6 changed files with 27 additions and 36 deletions.
3 changes: 1 addition & 2 deletions docs/data/material/guides/right-to-left/Direction.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ export default function Direction() {
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<div dir="rtl">
<TextField label="Name" variant="standard" />
<input type="text" placeholder="Name" />
<TextField label="Name" variant="outlined" />
</div>
</ThemeProvider>
</CacheProvider>
Expand Down
3 changes: 1 addition & 2 deletions docs/data/material/guides/right-to-left/Direction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ export default function Direction() {
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<div dir="rtl">
<TextField label="Name" variant="standard" />
<input type="text" placeholder="Name" />
<TextField label="Name" variant="outlined" />
</div>
</ThemeProvider>
</CacheProvider>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<CacheProvider value={cacheRtl}>
<ThemeProvider theme={theme}>
<div dir="rtl">
<TextField label="Name" variant="standard" />
<input type="text" placeholder="Name" />
<TextField label="Name" variant="outlined" />
</div>
</ThemeProvider>
</CacheProvider>
15 changes: 7 additions & 8 deletions docs/data/material/guides/right-to-left/RtlOptOutStylis.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { styled } from '@mui/material/styles';
import FormControlLabel from '@mui/material/FormControlLabel';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';

const Root = styled('div')((props) => ({
Expand Down Expand Up @@ -38,19 +39,17 @@ export default function RtlOptOutStylis() {
};

return (
<React.Fragment>
<div>
<FormControlLabel
control={<Switch checked={rtl} onChange={handleChange} />}
label="RTL"
/>
</div>
<Box sx={{ display: 'flex', gap: 2, width: '100%' }}>
<FormControlLabel
control={<Switch checked={rtl} onChange={handleChange} />}
label="Toggle right-to-left styles"
/>
<CacheProvider value={rtl ? rtlCache : ltrCache}>
<Root {...(rtl ? { dir: 'rtl' } : {})}>
<AffectedText>Affected</AffectedText>
<UnaffectedText>Unaffected</UnaffectedText>
</Root>
</CacheProvider>
</React.Fragment>
</Box>
);
}
15 changes: 7 additions & 8 deletions docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { styled } from '@mui/material/styles';
import FormControlLabel from '@mui/material/FormControlLabel';
import Box from '@mui/material/Box';
import Switch from '@mui/material/Switch';

const Root = styled('div')((props) => ({
Expand Down Expand Up @@ -38,19 +39,17 @@ export default function RtlOptOutStylis() {
};

return (
<React.Fragment>
<div>
<FormControlLabel
control={<Switch checked={rtl} onChange={handleChange} />}
label="RTL"
/>
</div>
<Box sx={{ display: 'flex', gap: 2, width: '100%' }}>
<FormControlLabel
control={<Switch checked={rtl} onChange={handleChange} />}
label="Toggle right-to-left styles"
/>
<CacheProvider value={rtl ? rtlCache : ltrCache}>
<Root {...(rtl ? { dir: 'rtl' } : {})}>
<AffectedText>Affected</AffectedText>
<UnaffectedText>Unaffected</UnaffectedText>
</Root>
</CacheProvider>
</React.Fragment>
</Box>
);
}
24 changes: 10 additions & 14 deletions docs/data/material/guides/right-to-left/RtlOptOutStylis.tsx.preview
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
<React.Fragment>
<div>
<FormControlLabel
control={<Switch checked={rtl} onChange={handleChange} />}
label="RTL"
/>
</div>
<CacheProvider value={rtl ? rtlCache : ltrCache}>
<Root {...(rtl ? { dir: 'rtl' } : {})}>
<AffectedText>Affected</AffectedText>
<UnaffectedText>Unaffected</UnaffectedText>
</Root>
</CacheProvider>
</React.Fragment>
<FormControlLabel
control={<Switch checked={rtl} onChange={handleChange} />}
label="Toggle right-to-left styles"
/>
<CacheProvider value={rtl ? rtlCache : ltrCache}>
<Root {...(rtl ? { dir: 'rtl' } : {})}>
<AffectedText>Affected</AffectedText>
<UnaffectedText>Unaffected</UnaffectedText>
</Root>
</CacheProvider>

0 comments on commit 23a60e9

Please sign in to comment.