Add border-radius to theme

mui · Jun 13, 2018 · a291c8e · a291c8e
1 parent 1a2ebf5
commit a291c8e
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 2 deletions.
diff --git 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
@@ -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,19 +126,22 @@ class Drawer extends React.Component {
       open,
       PaperProps,
       SlideProps,
+      square,
       theme,
       transitionDuration,
       variant,
       ...other
     } = this.props;
 
     const anchor = getAnchor(this.props);
+
     const drawer = (
       <Paper
         elevation={variant === 'temporary' ? elevation : 0}
         square
         className={classNames(classes.paper, classes[`paperAnchor${capitalize(anchor)}`], {
           [classes[`paperAnchorDocked${capitalize(anchor)}`]]: variant !== 'temporary',
+          [classes[`paperAnchor${capitalize(anchor)}Rounded`]]: !square,
         })}
         {...PaperProps}
       >
@@ -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
@@ -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
@@ -0,0 +1,10 @@
+export interface BorderRadius {
+  paper: number;
+  button: number;
+}
+
+export type BorderRadiusOptions = Partial<BorderRadius>;
+
+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
@@ -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
@@ -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),