Skip to content

Commit 376412d

Browse files
srilmanJoe Shelby
srilman
authored and
Joe Shelby
committed
[Toolbar] Add dense variant (mui#12075)
* Address issue mui#11619. Added option for a dense Toolbar. * Fixed actual errors with page * Added type definitions to toolbar dense feature * ready to be merged
1 parent c1be207 commit 376412d

20 files changed

+93
-25
lines changed

‎docs/src/pages/demos/app-bar/ButtonAppBar.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const styles = {
1313
flexGrow: 1,
1414
},
1515
flex: {
16-
flex: 1,
16+
flexGrow: 1,
1717
},
1818
menuButton: {
1919
marginLeft: -12,
@@ -31,7 +31,7 @@ function ButtonAppBar(props) {
3131
<MenuIcon />
3232
</IconButton>
3333
<Typography variant="title" color="inherit" className={classes.flex}>
34-
Title
34+
News
3535
</Typography>
3636
<Button color="inherit">Login</Button>
3737
</Toolbar>

‎docs/src/pages/demos/app-bar/DenseAppBar.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { withStyles } from '@material-ui/core/styles';
4+
import AppBar from '@material-ui/core/AppBar';
5+
import Toolbar from '@material-ui/core/Toolbar';
6+
import Typography from '@material-ui/core/Typography';
7+
import IconButton from '@material-ui/core/IconButton';
8+
import MenuIcon from '@material-ui/icons/Menu';
9+
10+
const styles = {
11+
root: {
12+
flexGrow: 1,
13+
},
14+
menuButton: {
15+
marginLeft: -18,
16+
marginRight: 10,
17+
},
18+
};
19+
20+
function DenseAppBar(props) {
21+
const { classes } = props;
22+
return (
23+
<div className={classes.root}>
24+
<AppBar position="static">
25+
<Toolbar variant="dense">
26+
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
27+
<MenuIcon />
28+
</IconButton>
29+
<Typography variant="title" color="inherit">
30+
Photos
31+
</Typography>
32+
</Toolbar>
33+
</AppBar>
34+
</div>
35+
);
36+
}
37+
38+
DenseAppBar.propTypes = {
39+
classes: PropTypes.object.isRequired,
40+
};
41+
42+
export default withStyles(styles)(DenseAppBar);

‎docs/src/pages/demos/app-bar/MenuAppBar.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const styles = {
1818
flexGrow: 1,
1919
},
2020
flex: {
21-
flex: 1,
21+
flexGrow: 1,
2222
},
2323
menuButton: {
2424
marginLeft: -12,
@@ -65,7 +65,7 @@ class MenuAppBar extends React.Component {
6565
<MenuIcon />
6666
</IconButton>
6767
<Typography variant="title" color="inherit" className={classes.flex}>
68-
Title
68+
Photos
6969
</Typography>
7070
{auth && (
7171
<div>

‎docs/src/pages/demos/app-bar/SimpleAppBar.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ function SimpleAppBar(props) {
1818
<AppBar position="static" color="default">
1919
<Toolbar>
2020
<Typography variant="title" color="inherit">
21-
Title
21+
Photos
2222
</Typography>
2323
</Toolbar>
2424
</AppBar>

‎docs/src/pages/demos/app-bar/app-bar.md

+4
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@ It can transform into a contextual action bar.
2222
## App Bar with menu
2323

2424
{{"demo": "pages/demos/app-bar/MenuAppBar.js"}}
25+
26+
## Dense (desktop only)
27+
28+
{{"demo": "pages/demos/app-bar/DenseAppBar.js"}}

‎packages/material-ui/src/Button/Button.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ Button.propTypes = {
287287
*/
288288
type: PropTypes.string,
289289
/**
290-
* The type of button.
290+
* The variant to use.
291291
*/
292292
variant: PropTypes.oneOf([
293293
'text',

‎packages/material-ui/src/CircularProgress/CircularProgress.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -171,8 +171,8 @@ CircularProgress.propTypes = {
171171
*/
172172
value: PropTypes.number,
173173
/**
174-
* The variant of progress indicator. Use indeterminate
175-
* when there is no progress value.
174+
* The variant to use.
175+
* Use indeterminate when there is no progress value.
176176
*/
177177
variant: PropTypes.oneOf(['determinate', 'indeterminate', 'static']),
178178
};

‎packages/material-ui/src/Drawer/Drawer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -234,7 +234,7 @@ Drawer.propTypes = {
234234
PropTypes.shape({ enter: PropTypes.number, exit: PropTypes.number }),
235235
]),
236236
/**
237-
* The variant of drawer.
237+
* The variant to use.
238238
*/
239239
variant: PropTypes.oneOf(['permanent', 'persistent', 'temporary']),
240240
};

‎packages/material-ui/src/LinearProgress/LinearProgress.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -239,8 +239,8 @@ LinearProgress.propTypes = {
239239
*/
240240
valueBuffer: PropTypes.number,
241241
/**
242-
* The variant of progress indicator. Use indeterminate or query
243-
* when there is no progress value.
242+
* The variant to use.
243+
* Use indeterminate or query when there is no progress value.
244244
*/
245245
variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query']),
246246
};

‎packages/material-ui/src/MobileStepper/MobileStepper.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ MobileStepper.propTypes = {
128128
*/
129129
steps: PropTypes.number.isRequired,
130130
/**
131-
* The type of mobile stepper to use.
131+
* The variant to use.
132132
*/
133133
variant: PropTypes.oneOf(['text', 'dots', 'progress']),
134134
};

‎packages/material-ui/src/Toolbar/Toolbar.d.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@ import { StandardProps } from '..';
33

44
export interface ToolbarProps
55
extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ToolbarClassKey> {
6+
variant?: 'regular' | 'dense';
67
disableGutters?: boolean;
78
}
89

9-
export type ToolbarClassKey = 'root' | 'gutters';
10+
export type ToolbarClassKey = 'root' | 'gutters' | 'regular' | 'dense';
1011

1112
declare const Toolbar: React.ComponentType<ToolbarProps>;
1213

‎packages/material-ui/src/Toolbar/Toolbar.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,23 @@ import withStyles from '../styles/withStyles';
55

66
export const styles = theme => ({
77
root: {
8-
...theme.mixins.toolbar,
98
position: 'relative',
109
display: 'flex',
1110
alignItems: 'center',
1211
},
1312
gutters: theme.mixins.gutters(),
13+
regular: theme.mixins.toolbar,
14+
dense: {
15+
minHeight: 48,
16+
},
1417
});
1518

1619
function Toolbar(props) {
17-
const { children, classes, className: classNameProp, disableGutters, ...other } = props;
20+
const { children, classes, className: classNameProp, disableGutters, variant, ...other } = props;
1821

1922
const className = classNames(
2023
classes.root,
24+
classes[variant],
2125
{
2226
[classes.gutters]: !disableGutters,
2327
},
@@ -49,10 +53,15 @@ Toolbar.propTypes = {
4953
* If `true`, disables gutter padding.
5054
*/
5155
disableGutters: PropTypes.bool,
56+
/**
57+
* The variant to use.
58+
*/
59+
variant: PropTypes.oneOf(['regular', 'dense']),
5260
};
5361

5462
Toolbar.defaultProps = {
5563
disableGutters: false,
64+
variant: 'regular',
5665
};
5766

5867
export default withStyles(styles, { name: 'MuiToolbar' })(Toolbar);

‎packages/material-ui/src/Toolbar/Toolbar.test.js

+7-5
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,12 @@ describe('<Toolbar />', () => {
2929
it('should disable the gutters', () => {
3030
const wrapper = shallow(<Toolbar disableGutters>foo</Toolbar>);
3131
assert.strictEqual(wrapper.hasClass(classes.root), true);
32-
assert.strictEqual(
33-
wrapper.hasClass(classes.gutters),
34-
false,
35-
'should not have the gutters class',
36-
);
32+
assert.strictEqual(wrapper.hasClass(classes.gutters), false);
33+
});
34+
35+
it('should condense itself', () => {
36+
const wrapper = shallow(<Toolbar variant="dense">foo</Toolbar>);
37+
assert.strictEqual(wrapper.hasClass(classes.root), true);
38+
assert.strictEqual(wrapper.hasClass(classes.dense), true);
3739
});
3840
});

‎pages/api/button.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ title: Button API
2626
| <span class="prop-name">href</span> | <span class="prop-type">string |   | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. |
2727
| <span class="prop-name">mini</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, and `variant` is `'fab'`, will use mini floating action button styling. |
2828
| <span class="prop-name">size</span> | <span class="prop-type">enum:&nbsp;'small'&nbsp;&#124;<br>&nbsp;'medium'&nbsp;&#124;<br>&nbsp;'large'<br> | <span class="prop-default">'medium'</span> | The size of the button. `small` is equivalent to the dense button styling. |
29-
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'<br> | <span class="prop-default">'text'</span> | The type of button. |
29+
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'<br> | <span class="prop-default">'text'</span> | The variant to use. |
3030

3131
Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)).
3232

‎pages/api/circular-progress.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ attribute to `true` on that region until it has finished loading.
2424
| <span class="prop-name">size</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;string<br> | <span class="prop-default">40</span> | The size of the circle. |
2525
| <span class="prop-name">thickness</span> | <span class="prop-type">number | <span class="prop-default">3.6</span> | The thickness of the circle. |
2626
| <span class="prop-name">value</span> | <span class="prop-type">number | <span class="prop-default">0</span> | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. |
27-
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'determinate'&nbsp;&#124;<br>&nbsp;'indeterminate'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'indeterminate'</span> | The variant of progress indicator. Use indeterminate when there is no progress value. |
27+
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'determinate'&nbsp;&#124;<br>&nbsp;'indeterminate'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'indeterminate'</span> | The variant to use. Use indeterminate when there is no progress value. |
2828

2929
Any other properties supplied will be spread to the root element (native element).
3030

‎pages/api/drawer.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ when `variant="temporary"` is set.
2626
| <span class="prop-name">PaperProps</span> | <span class="prop-type">object |   | Properties applied to the [`Paper`](/api/paper) element. |
2727
| <span class="prop-name">SlideProps</span> | <span class="prop-type">object |   | Properties applied to the [`Slide`](/api/slide) element. |
2828
| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{ enter?: number, exit?: number }<br> | <span class="prop-default">{ enter: duration.enteringScreen, exit: duration.leavingScreen }</span> | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
29-
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'permanent'&nbsp;&#124;<br>&nbsp;'persistent'&nbsp;&#124;<br>&nbsp;'temporary'<br> | <span class="prop-default">'temporary'</span> | The variant of drawer. |
29+
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'permanent'&nbsp;&#124;<br>&nbsp;'persistent'&nbsp;&#124;<br>&nbsp;'temporary'<br> | <span class="prop-default">'temporary'</span> | The variant to use. |
3030

3131
Any other properties supplied will be spread to the root element (native element).
3232

‎pages/api/linear-progress.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ attribute to `true` on that region until it has finished loading.
2323
| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'<br> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
2424
| <span class="prop-name">value</span> | <span class="prop-type">number |   | The value of the progress indicator for the determinate and buffer variants. Value between 0 and 100. |
2525
| <span class="prop-name">valueBuffer</span> | <span class="prop-type">number |   | The value for the buffer variant. Value between 0 and 100. |
26-
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'determinate'&nbsp;&#124;<br>&nbsp;'indeterminate'&nbsp;&#124;<br>&nbsp;'buffer'&nbsp;&#124;<br>&nbsp;'query'<br> | <span class="prop-default">'indeterminate'</span> | The variant of progress indicator. Use indeterminate or query when there is no progress value. |
26+
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'determinate'&nbsp;&#124;<br>&nbsp;'indeterminate'&nbsp;&#124;<br>&nbsp;'buffer'&nbsp;&#124;<br>&nbsp;'query'<br> | <span class="prop-default">'indeterminate'</span> | The variant to use. Use indeterminate or query when there is no progress value. |
2727

2828
Any other properties supplied will be spread to the root element (native element).
2929

‎pages/api/mobile-stepper.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ title: MobileStepper API
2121
| <span class="prop-name">nextButton</span> | <span class="prop-type">node |   | A next button element. For instance, it can be be a `Button` or a `IconButton`. |
2222
| <span class="prop-name">position</span> | <span class="prop-type">enum:&nbsp;'bottom'&nbsp;&#124;<br>&nbsp;'top'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'bottom'</span> | Set the positioning type. |
2323
| <span class="prop-name required">steps *</span> | <span class="prop-type">number |   | The total steps. |
24-
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'text'&nbsp;&#124;<br>&nbsp;'dots'&nbsp;&#124;<br>&nbsp;'progress'<br> | <span class="prop-default">'dots'</span> | The type of mobile stepper to use. |
24+
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'text'&nbsp;&#124;<br>&nbsp;'dots'&nbsp;&#124;<br>&nbsp;'progress'<br> | <span class="prop-default">'dots'</span> | The variant to use. |
2525

2626
Any other properties supplied will be spread to the root element ([Paper](/api/paper)).
2727

‎pages/api/toolbar.md

+3
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ title: Toolbar API
1818
| <span class="prop-name">children</span> | <span class="prop-type">node |   | Toolbar children, usually a mixture of `IconButton`, `Button` and `Typography`. |
1919
| <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
2020
| <span class="prop-name">disableGutters</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, disables gutter padding. |
21+
| <span class="prop-name">variant</span> | <span class="prop-type">enum:&nbsp;'regular'&nbsp;&#124;<br>&nbsp;'dense'<br> | <span class="prop-default">'regular'</span> | The variant to use. |
2122

2223
Any other properties supplied will be spread to the root element (native element).
2324

@@ -27,6 +28,8 @@ You can override all the class names injected by Material-UI thanks to the `clas
2728
This property accepts the following keys:
2829
- `root`
2930
- `gutters`
31+
- `regular`
32+
- `dense`
3033

3134
Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
3235
and the [implementation of the component](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/Toolbar/Toolbar.js)

‎pages/demos/app-bar.js

+7
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@ module.exports = require('fs')
2727
raw: preval`
2828
module.exports = require('fs')
2929
.readFileSync(require.resolve('docs/src/pages/demos/app-bar/MenuAppBar'), 'utf8')
30+
`,
31+
},
32+
'pages/demos/app-bar/DenseAppBar.js': {
33+
js: require('docs/src/pages/demos/app-bar/DenseAppBar').default,
34+
raw: preval`
35+
module.exports = require('fs')
36+
.readFileSync(require.resolve('docs/src/pages/demos/app-bar/DenseAppBar'), 'utf8')
3037
`,
3138
},
3239
}}

0 commit comments

Comments
 (0)