Skip to content

Commit

Permalink
[docs] Fix Tabs examples typography & standardise code (#9366)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbrookes @oliviertassinari
mbrookes authored and oliviertassinari committed Dec 6, 2017
1 parent a3deba9 commit 0e38596
Show file tree
Hide file tree
Showing 14 changed files with 44 additions and 29 deletions.
2 changes: 1 addition & 1 deletion docs/src/pages/customization/FontSizeTheme.js
View file
Expand Up @@ -15,7 +15,7 @@ function theme() {
function FontSizeTheme() {
return (
<MuiThemeProvider theme={theme}>
<Typography type="body1">body1</Typography>
<Typography>body1</Typography>
</MuiThemeProvider>
);
}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/customization/TypographyTheme.js
View file
Expand Up @@ -25,7 +25,7 @@ function TypographyTheme() {
return (
<MuiThemeProvider theme={theme}>
<div>
<Typography type="body1">body1</Typography>
<Typography>body1</Typography>
<Button>Button</Button>
</div>
</MuiThemeProvider>
Expand Down
8 changes: 2 additions & 6 deletions docs/src/pages/demos/cards/SimpleCard.js
View file
Expand Up @@ -35,15 +35,11 @@ function SimpleCard(props) {
<div>
<Card className={classes.card}>
<CardContent>
<Typography type="body1" className={classes.title}>
Word of the Day
</Typography>
<Typography className={classes.title}>Word of the Day</Typography>
<Typography type="headline" component="h2">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography type="body1" className={classes.pos}>
adjective
</Typography>
<Typography className={classes.pos}>adjective</Typography>
<Typography component="p">
well meaning and kindly.<br />
{'"a benevolent smile"'}
Expand Down
4 changes: 1 addition & 3 deletions docs/src/pages/demos/drawers/MiniDrawer.js
View file
Expand Up @@ -151,9 +151,7 @@ class MiniDrawer extends React.Component {
</div>
</Drawer>
<main className={classes.content}>
<Typography type="body1" noWrap>
{'You think water moves fast? You should see ice.'}
</Typography>
<Typography noWrap>{'You think water moves fast? You should see ice.'}</Typography>
</main>
</div>
</div>
Expand Down
4 changes: 1 addition & 3 deletions docs/src/pages/demos/drawers/PermanentDrawer.js
View file
Expand Up @@ -122,9 +122,7 @@ class PermanentDrawer extends React.Component {
</AppBar>
{before}
<main className={classes.content}>
<Typography type="body1">
{'You think water moves fast? You should see ice.'}
</Typography>
<Typography>{'You think water moves fast? You should see ice.'}</Typography>
</main>
{after}
</div>
Expand Down
4 changes: 1 addition & 3 deletions docs/src/pages/demos/drawers/PersistentDrawer.js
View file
Expand Up @@ -208,9 +208,7 @@ class PersistentDrawer extends React.Component {
[classes[`contentShift-${anchor}`]]: open,
})}
>
<Typography type="body1">
{'You think water moves fast? You should see ice.'}
</Typography>
<Typography>{'You think water moves fast? You should see ice.'}</Typography>
</main>
{after}
</div>
Expand Down
4 changes: 1 addition & 3 deletions docs/src/pages/demos/drawers/ResponsiveDrawer.js
View file
Expand Up @@ -132,9 +132,7 @@ class ResponsiveDrawer extends React.Component {
</Drawer>
</Hidden>
<main className={classes.content}>
<Typography type="body1" noWrap>
{'You think water moves fast? You should see ice.'}
</Typography>
<Typography noWrap>{'You think water moves fast? You should see ice.'}</Typography>
</main>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/demos/paper/PaperSheet.js
View file
Expand Up @@ -22,7 +22,7 @@ function PaperSheet(props) {
<Typography type="headline" component="h3">
This is a sheet of paper.
</Typography>
<Typography type="body1" component="p">
<Typography component="p">
Paper can be used to build surface or other elements for your application.
</Typography>
</Paper>
Expand Down
7 changes: 6 additions & 1 deletion docs/src/pages/demos/tabs/BasicTabs.js
View file
Expand Up @@ -6,9 +6,14 @@ import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import Typography from 'material-ui/Typography';

function TabContainer(props) {
return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
return (
<Typography component="div" style={{ padding: 8 * 3 }}>
{props.children}
</Typography>
);
}

TabContainer.propTypes = {
Expand Down
7 changes: 6 additions & 1 deletion docs/src/pages/demos/tabs/BasicTabsWrappedLabel.js
View file
Expand Up @@ -6,9 +6,14 @@ import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import Typography from 'material-ui/Typography';

function TabContainer(props) {
return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
return (
<Typography component="div" style={{ padding: 8 * 3 }}>
{props.children}
</Typography>
);
}

TabContainer.propTypes = {
Expand Down
8 changes: 5 additions & 3 deletions docs/src/pages/demos/tabs/FullWidthTabs.js
View file
Expand Up @@ -7,12 +7,13 @@ import { withStyles } from 'material-ui/styles';
import SwipeableViews from 'react-swipeable-views';
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import Typography from 'material-ui/Typography';

function TabContainer({ children, dir }) {
return (
<div dir={dir} style={{ padding: 8 * 3 }}>
<Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
{children}
</div>
</Typography>
);
}

Expand All @@ -24,6 +25,7 @@ TabContainer.propTypes = {
const styles = theme => ({
root: {
backgroundColor: theme.palette.background.paper,
width: 500,
},
});

Expand All @@ -44,7 +46,7 @@ class FullWidthTabs extends React.Component {
const { classes, theme } = this.props;

return (
<div className={classes.root} style={{ width: 500 }}>
<div className={classes.root}>
<AppBar position="static" color="default">
<Tabs
value={this.state.value}
Expand Down
7 changes: 6 additions & 1 deletion docs/src/pages/demos/tabs/ScrollableTabsButtonAuto.js
View file
Expand Up @@ -6,9 +6,14 @@ import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Tabs, { Tab } from 'material-ui/Tabs';
import Typography from 'material-ui/Typography';

function TabContainer(props) {
return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
return (
<Typography component="div" style={{ padding: 8 * 3 }}>
{props.children}
</Typography>
);
}

TabContainer.propTypes = {
Expand Down
7 changes: 6 additions & 1 deletion docs/src/pages/demos/tabs/ScrollableTabsButtonForce.js
View file
Expand Up @@ -13,9 +13,14 @@ import HelpIcon from 'material-ui-icons/Help';
import ShoppingBasket from 'material-ui-icons/ShoppingBasket';
import ThumbDown from 'material-ui-icons/ThumbDown';
import ThumbUp from 'material-ui-icons/ThumbUp';
import Typography from 'material-ui/Typography';

function TabContainer(props) {
return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
return (
<Typography component="div" style={{ padding: 8 * 3 }}>
{props.children}
</Typography>
);
}

TabContainer.propTypes = {
Expand Down
7 changes: 6 additions & 1 deletion docs/src/pages/demos/tabs/ScrollableTabsButtonPrevent.js
View file
Expand Up @@ -13,9 +13,14 @@ import HelpIcon from 'material-ui-icons/Help';
import ShoppingBasket from 'material-ui-icons/ShoppingBasket';
import ThumbDown from 'material-ui-icons/ThumbDown';
import ThumbUp from 'material-ui-icons/ThumbUp';
import Typography from 'material-ui/Typography';

function TabContainer(props) {
return <div style={{ padding: 8 * 3 }}>{props.children}</div>;
return (
<Typography component="div" style={{ padding: 8 * 3 }}>
{props.children}
</Typography>
);
}

TabContainer.propTypes = {
Expand Down

0 comments on commit 0e38596

Please sign in to comment.