diff --git a/docs/src/pages/demos/buttons/ButtonSizes.js b/docs/src/pages/demos/buttons/ButtonSizes.js index ac9047920f8fb9..0644de27dbd963 100644 --- a/docs/src/pages/demos/buttons/ButtonSizes.js +++ b/docs/src/pages/demos/buttons/ButtonSizes.js @@ -7,6 +7,7 @@ import IconButton from '@material-ui/core/IconButton'; import AddIcon from '@material-ui/icons/Add'; import DeleteIcon from '@material-ui/icons/Delete'; import NavigationIcon from '@material-ui/icons/Navigation'; +import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'; const styles = theme => ({ margin: { @@ -92,6 +93,9 @@ function ButtonSizes(props) {
+ + + diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts index a6bd70eaa52536..4ab997f1627447 100644 --- a/packages/material-ui/src/IconButton/IconButton.d.ts +++ b/packages/material-ui/src/IconButton/IconButton.d.ts @@ -6,6 +6,7 @@ export interface IconButtonProps extends StandardProps ({ alignItems: 'inherit', justifyContent: 'inherit', }, + /* Styles applied to the root element if `size="small"`. */ + sizeSmall: { + padding: 3, + minWidth: 24, + fontSize: 18, + }, }); /** @@ -78,7 +84,7 @@ export const styles = theme => ({ * regarding the available icon options. */ function IconButton(props) { - const { children, classes, className, color, disabled, ...other } = props; + const { children, classes, className, color, disabled, size, ...other } = props; return ( ', () => { assert.strictEqual(wrapper.props().centerRipple, true); }); + it('should render with sizeSmall class when prop size="small" provided', () => { + const wrapper = shallow(book); + assert.strictEqual(wrapper.hasClass(classes.sizeSmall), true); + }); + describe('prop: disabled', () => { it('should disable the component', () => { const wrapper = shallow(book); diff --git a/pages/api/icon-button.md b/pages/api/icon-button.md index be64879395e86c..b2224738aa4f89 100644 --- a/pages/api/icon-button.md +++ b/pages/api/icon-button.md @@ -24,6 +24,7 @@ regarding the available icon options. | color | enum: 'default' |
 'inherit' |
 'primary' |
 'secondary'
| 'default' | The color of the component. It supports those theme colors that make sense for this component. | | disabled | bool | false | If `true`, the button will be disabled. | | disableRipple | bool |   | If `true`, the ripple will be disabled. | +| size | enum: 'small' |
 'medium'
| 'medium' | The size of the button. `small` is equivalent to the dense button styling. | Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base/)). @@ -41,6 +42,7 @@ This property accepts the following keys: | colorSecondary | Styles applied to the root element if `color="secondary"`. | disabled | Styles applied to the root element if `disabled={true}`. | label | Styles applied to the children container element. +| sizeSmall | Styles applied to the root element if `size="small"`. Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section and the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/IconButton/IconButton.js)