diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index d08506b21a4e6f..998abea660c36b 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -16,7 +16,7 @@ export const styles = theme => ({ minWidth: theme.spacing.unit * 11, minHeight: 36, padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`, - borderRadius: 4, + borderRadius: theme.borderRadius.button, color: theme.palette.text.primary, transition: theme.transitions.create(['background-color', 'box-shadow'], { duration: theme.transitions.duration.short, diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index 52b1c64ad07e8c..bb5f354e55f405 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -49,10 +49,18 @@ export const styles = theme => ({ left: 0, right: 'auto', }, + paperAnchorLeftRounded: { + borderTopRightRadius: theme.borderRadius.paper, + borderBottomRightRadius: theme.borderRadius.paper, + }, paperAnchorRight: { left: 'auto', right: 0, }, + paperAnchorRightRounded: { + borderTopLeftRadius: theme.borderRadius.paper, + borderBottomLeftRadius: theme.borderRadius.paper, + }, paperAnchorTop: { top: 0, left: 0, @@ -61,6 +69,10 @@ export const styles = theme => ({ height: 'auto', maxHeight: '100vh', }, + paperAnchorTopRounded: { + borderBottomRightRadius: theme.borderRadius.paper, + borderBottomLeftRadius: theme.borderRadius.paper, + }, paperAnchorBottom: { top: 'auto', left: 0, @@ -69,6 +81,10 @@ export const styles = theme => ({ height: 'auto', maxHeight: '100vh', }, + paperAnchorBottomRounded: { + borderTopRightRadius: theme.borderRadius.paper, + borderTopLeftRadius: theme.borderRadius.paper, + }, paperAnchorDockedLeft: { borderRight: `1px solid ${theme.palette.divider}`, }, @@ -110,6 +126,7 @@ class Drawer extends React.Component { open, PaperProps, SlideProps, + square, theme, transitionDuration, variant, @@ -117,12 +134,14 @@ class Drawer extends React.Component { } = this.props; const anchor = getAnchor(this.props); + const drawer = ( @@ -221,6 +240,10 @@ Drawer.propTypes = { * Properties applied to the `Slide` element. */ SlideProps: PropTypes.object, + /** + * If `false`, rounded corners are enabled. + */ + square: PropTypes.bool, /** * @ignore */ @@ -242,6 +265,7 @@ Drawer.propTypes = { Drawer.defaultProps = { anchor: 'left', elevation: 16, + square: false, open: false, transitionDuration: { enter: duration.enteringScreen, exit: duration.leavingScreen }, variant: 'temporary', // Mobile first. diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index 6444803343a374..92657a3f576d9f 100644 --- a/packages/material-ui/src/Paper/Paper.js +++ b/packages/material-ui/src/Paper/Paper.js @@ -17,7 +17,7 @@ export const styles = theme => { backgroundColor: theme.palette.background.paper, }, rounded: { - borderRadius: 2, + borderRadius: theme.borderRadius.paper, }, ...elevations, }; diff --git a/packages/material-ui/src/styles/borderRadius.d.ts b/packages/material-ui/src/styles/borderRadius.d.ts new file mode 100644 index 00000000000000..0b4a3d2cd9fc3a --- /dev/null +++ b/packages/material-ui/src/styles/borderRadius.d.ts @@ -0,0 +1,10 @@ +export interface BorderRadius { + paper: number; + button: number; +} + +export type BorderRadiusOptions = Partial; + +declare const borderRadius: BorderRadius; + +export default borderRadius; diff --git a/packages/material-ui/src/styles/borderRadius.js b/packages/material-ui/src/styles/borderRadius.js new file mode 100644 index 00000000000000..51481323a0600b --- /dev/null +++ b/packages/material-ui/src/styles/borderRadius.js @@ -0,0 +1,6 @@ +const borderRadius = { + paper: 2, + button: 4, +}; + +export default borderRadius; diff --git a/packages/material-ui/src/styles/createMuiTheme.js b/packages/material-ui/src/styles/createMuiTheme.js index 66ee5923a2deea..0ea1de3939faab 100644 --- a/packages/material-ui/src/styles/createMuiTheme.js +++ b/packages/material-ui/src/styles/createMuiTheme.js @@ -10,6 +10,7 @@ import shadows from './shadows'; import transitions from './transitions'; import zIndex from './zIndex'; import spacing from './spacing'; +import borderRadius from './borderRadius'; function createMuiTheme(options: Object = {}) { const { @@ -25,6 +26,7 @@ function createMuiTheme(options: Object = {}) { const breakpoints = createBreakpoints(breakpointsInput); const muiTheme = { + borderRadius, breakpoints, direction: 'ltr', mixins: createMixins(breakpoints, spacing, mixinsInput),