diff --git a/docs/src/modules/components/Carbon.js b/docs/src/modules/components/Carbon.js index 883a0ab1c80d96..e9279bed6cbb5b 100644 --- a/docs/src/modules/components/Carbon.js +++ b/docs/src/modules/components/Carbon.js @@ -56,7 +56,7 @@ const styles = theme => ({ }, ad: { zIndex: 1, - borderRadius: 4, + borderRadius: theme.borderRadius.medium, position: 'relative', [theme.breakpoints.up('sm')]: { margin: `${theme.spacing.unit * 2}px ${theme.spacing.unit}px ${theme.spacing.unit}px`, diff --git a/docs/src/pages/demos/cards/cards.md b/docs/src/pages/demos/cards/cards.md index 7347121feec2b5..be8d2242b5056a 100644 --- a/docs/src/pages/demos/cards/cards.md +++ b/docs/src/pages/demos/cards/cards.md @@ -1,5 +1,5 @@ --- -components: Card, CardActions, CardContent, CardHeader, CardMedia, Collapse +components: Card, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- # Cards diff --git a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js index 25e696c817302f..00d73dd1e10fc9 100644 --- a/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js +++ b/packages/material-ui-docs/src/MarkdownElement/MarkdownElement.js @@ -90,7 +90,7 @@ const styles = theme => ({ margin: `${theme.spacing.unit * 3}px 0`, padding: '12px 18px', backgroundColor: theme.palette.background.paper, - borderRadius: 3, + borderRadius: theme.borderRadius.medium, overflow: 'auto', WebkitOverflowScrolling: 'touch', // iOS momentum scrolling. }, diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js index 1dfac772ca2818..2340884f82dde4 100644 --- a/packages/material-ui/src/Button/Button.js +++ b/packages/material-ui/src/Button/Button.js @@ -133,7 +133,7 @@ export const styles = theme => ({ }, }, extendedFab: { - borderRadius: 24, + borderRadius: 48 / 2, padding: '0 16px', width: 'initial', minWidth: 48, diff --git a/packages/material-ui/src/Card/Card.js b/packages/material-ui/src/Card/Card.js index 2c24fc6e50edd5..81ba92696c7d10 100644 --- a/packages/material-ui/src/Card/Card.js +++ b/packages/material-ui/src/Card/Card.js @@ -16,7 +16,7 @@ function Card(props) { const { classes, className, raised, ...other } = props; return ( - + ); } diff --git a/packages/material-ui/src/Card/Card.test.js b/packages/material-ui/src/Card/Card.test.js index 40ff78332d0ee4..cfb67798a7a3d9 100644 --- a/packages/material-ui/src/Card/Card.test.js +++ b/packages/material-ui/src/Card/Card.test.js @@ -13,10 +13,10 @@ describe('', () => { classes = getClasses(); }); - it('should render Paper with the root class & with 2dp', () => { + it('should render Paper with the root class', () => { const wrapper = shallow(); assert.strictEqual(wrapper.type(), Paper); - assert.strictEqual(wrapper.props().elevation, 2); + assert.strictEqual(wrapper.props().elevation, 1); }); it('should have the root and custom class', () => { diff --git a/packages/material-ui/src/Drawer/Drawer.js b/packages/material-ui/src/Drawer/Drawer.js index bb5f354e55f405..52b1c64ad07e8c 100644 --- a/packages/material-ui/src/Drawer/Drawer.js +++ b/packages/material-ui/src/Drawer/Drawer.js @@ -49,18 +49,10 @@ 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, @@ -69,10 +61,6 @@ export const styles = theme => ({ height: 'auto', maxHeight: '100vh', }, - paperAnchorTopRounded: { - borderBottomRightRadius: theme.borderRadius.paper, - borderBottomLeftRadius: theme.borderRadius.paper, - }, paperAnchorBottom: { top: 'auto', left: 0, @@ -81,10 +69,6 @@ export const styles = theme => ({ height: 'auto', maxHeight: '100vh', }, - paperAnchorBottomRounded: { - borderTopRightRadius: theme.borderRadius.paper, - borderTopLeftRadius: theme.borderRadius.paper, - }, paperAnchorDockedLeft: { borderRight: `1px solid ${theme.palette.divider}`, }, @@ -126,7 +110,6 @@ class Drawer extends React.Component { open, PaperProps, SlideProps, - square, theme, transitionDuration, variant, @@ -134,14 +117,12 @@ class Drawer extends React.Component { } = this.props; const anchor = getAnchor(this.props); - const drawer = ( @@ -240,10 +221,6 @@ Drawer.propTypes = { * Properties applied to the `Slide` element. */ SlideProps: PropTypes.object, - /** - * If `false`, rounded corners are enabled. - */ - square: PropTypes.bool, /** * @ignore */ @@ -265,7 +242,6 @@ 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/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js index 2a82910c86d73c..7d004c09a11a67 100644 --- a/packages/material-ui/src/GridListTile/GridListTile.js +++ b/packages/material-ui/src/GridListTile/GridListTile.js @@ -2,7 +2,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; import EventListener from 'react-event-listener'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import withStyles from '../styles/withStyles'; export const styles = { diff --git a/packages/material-ui/src/Input/Textarea.js b/packages/material-ui/src/Input/Textarea.js index 9ec321ed76ff06..b9f94108aefbee 100644 --- a/packages/material-ui/src/Input/Textarea.js +++ b/packages/material-ui/src/Input/Textarea.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import EventListener from 'react-event-listener'; import withStyles from '../styles/withStyles'; diff --git a/packages/material-ui/src/Paper/Paper.js b/packages/material-ui/src/Paper/Paper.js index 02bf8c3b3fed6d..3b4a97be972d7a 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: theme.borderRadius.paper, + borderRadius: theme.borderRadius.medium, }, ...elevations, }; diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index da745775db5bac..f1cb8b45c78ce2 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -6,7 +6,7 @@ import ReactDOM from 'react-dom'; import warning from 'warning'; import contains from 'dom-helpers/query/contains'; import ownerDocument from 'dom-helpers/ownerDocument'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import EventListener from 'react-event-listener'; import ownerWindow from '../utils/ownerWindow'; import withStyles from '../styles/withStyles'; diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js index 5ae681767f59f4..eec11fba84e8b3 100644 --- a/packages/material-ui/src/Slide/Slide.js +++ b/packages/material-ui/src/Slide/Slide.js @@ -4,7 +4,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import EventListener from 'react-event-listener'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import Transition from 'react-transition-group/Transition'; import ownerWindow from '../utils/ownerWindow'; import withTheme from '../styles/withTheme'; diff --git a/packages/material-ui/src/SnackbarContent/SnackbarContent.js b/packages/material-ui/src/SnackbarContent/SnackbarContent.js index 21e86c569dfbec..0cf573e6930949 100644 --- a/packages/material-ui/src/SnackbarContent/SnackbarContent.js +++ b/packages/material-ui/src/SnackbarContent/SnackbarContent.js @@ -24,7 +24,7 @@ export const styles = theme => { [theme.breakpoints.up('md')]: { minWidth: 288, maxWidth: 568, - borderRadius: 2, + borderRadius: theme.borderRadius.medium, }, [theme.breakpoints.down('sm')]: { flexGrow: 1, diff --git a/packages/material-ui/src/Switch/Switch.js b/packages/material-ui/src/Switch/Switch.js index 9c6922b408ce13..ca83c97de90a44 100644 --- a/packages/material-ui/src/Switch/Switch.js +++ b/packages/material-ui/src/Switch/Switch.js @@ -69,7 +69,7 @@ export const styles = theme => ({ }, }, bar: { - borderRadius: 7, + borderRadius: 14 / 2, display: 'block', position: 'absolute', width: 34, diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js index 68b31343da797f..6c669a9b1048ed 100644 --- a/packages/material-ui/src/Tabs/ScrollbarSize.js +++ b/packages/material-ui/src/Tabs/ScrollbarSize.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import EventListener from 'react-event-listener'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. const styles = { width: '100px', diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js index 39214efc861fbc..a0ecf04b95e691 100644 --- a/packages/material-ui/src/Tabs/Tabs.js +++ b/packages/material-ui/src/Tabs/Tabs.js @@ -5,7 +5,7 @@ import PropTypes from 'prop-types'; import warning from 'warning'; import classNames from 'classnames'; import EventListener from 'react-event-listener'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import { getNormalizedScrollLeft, detectScrollType } from 'normalize-scroll-left'; import scroll from 'scroll'; import ScrollbarSize from './ScrollbarSize'; diff --git a/packages/material-ui/src/Tooltip/Tooltip.js b/packages/material-ui/src/Tooltip/Tooltip.js index 6e7d1ede3dd6b5..1673216f6a157e 100644 --- a/packages/material-ui/src/Tooltip/Tooltip.js +++ b/packages/material-ui/src/Tooltip/Tooltip.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import EventListener from 'react-event-listener'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import warning from 'warning'; import classNames from 'classnames'; import { Manager, Popper, Target } from 'react-popper'; @@ -24,7 +24,7 @@ export const styles = theme => ({ open: {}, tooltip: { backgroundColor: theme.palette.grey[700], - borderRadius: 2, + borderRadius: theme.borderRadius.medium, color: common.white, fontFamily: theme.typography.fontFamily, opacity: 0, diff --git a/packages/material-ui/src/styles/borderRadius.d.ts b/packages/material-ui/src/styles/borderRadius.d.ts index 0b4a3d2cd9fc3a..00a35f388f4f6b 100644 --- a/packages/material-ui/src/styles/borderRadius.d.ts +++ b/packages/material-ui/src/styles/borderRadius.d.ts @@ -1,6 +1,7 @@ export interface BorderRadius { - paper: number; - button: number; + small: number; + medium: number; + large: number; } export type BorderRadiusOptions = Partial; diff --git a/packages/material-ui/src/styles/borderRadius.js b/packages/material-ui/src/styles/borderRadius.js index 51481323a0600b..7da2dce2d669b5 100644 --- a/packages/material-ui/src/styles/borderRadius.js +++ b/packages/material-ui/src/styles/borderRadius.js @@ -1,6 +1,7 @@ const borderRadius = { - paper: 2, - button: 4, + small: 2, + medium: 4, + large: 6, }; export default borderRadius; diff --git a/packages/material-ui/src/styles/createMuiTheme.d.ts b/packages/material-ui/src/styles/createMuiTheme.d.ts index 0e365afbfa7e8e..40658a54f652a3 100644 --- a/packages/material-ui/src/styles/createMuiTheme.d.ts +++ b/packages/material-ui/src/styles/createMuiTheme.d.ts @@ -1,10 +1,11 @@ +import { BorderRadius, BorderRadiusOptions } from './borderRadius'; import { Breakpoints, BreakpointsOptions } from './createBreakpoints'; import { Mixins, MixinsOptions } from './createMixins'; import { Palette, PaletteOptions } from './createPalette'; +import { Typography, TypographyOptions } from './createTypography'; import { Shadows } from './shadows'; import { Spacing, SpacingOptions } from './spacing'; import { Transitions, TransitionsOptions } from './transitions'; -import { Typography, TypographyOptions } from './createTypography'; import { ZIndex, ZIndexOptions } from './zIndex'; import { Overrides } from './overrides'; import { ComponentsProps } from './props'; @@ -12,31 +13,33 @@ import { ComponentsProps } from './props'; export type Direction = 'ltr' | 'rtl'; export interface ThemeOptions { + borderRadius?: BorderRadiusOptions; + breakpoints?: BreakpointsOptions; direction?: Direction; - palette?: PaletteOptions; - typography?: TypographyOptions | ((palette: Palette) => TypographyOptions); mixins?: MixinsOptions; - breakpoints?: BreakpointsOptions; + overrides?: Overrides; + palette?: PaletteOptions; + props?: ComponentsProps; shadows?: Shadows; - transitions?: TransitionsOptions; spacing?: SpacingOptions; + transitions?: TransitionsOptions; + typography?: TypographyOptions | ((palette: Palette) => TypographyOptions); zIndex?: ZIndexOptions; - overrides?: Overrides; - props?: ComponentsProps; } export interface Theme { + borderRadius: BorderRadius; + breakpoints: Breakpoints; direction: Direction; - palette: Palette; - typography: Typography; mixins: Mixins; - breakpoints: Breakpoints; + overrides?: Overrides; + palette: Palette; + props?: ComponentsProps; shadows: Shadows; - transitions: Transitions; spacing: Spacing; + transitions: Transitions; + typography: Typography; zIndex: ZIndex; - overrides?: Overrides; - props?: ComponentsProps; } export default function createMuiTheme(options?: ThemeOptions): Theme; diff --git a/packages/material-ui/src/styles/createMuiTheme.js b/packages/material-ui/src/styles/createMuiTheme.js index 0ea1de3939faab..056b1bf81c6788 100644 --- a/packages/material-ui/src/styles/createMuiTheme.js +++ b/packages/material-ui/src/styles/createMuiTheme.js @@ -2,23 +2,23 @@ import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb. import warning from 'warning'; -import createTypography from './createTypography'; +import borderRadius from './borderRadius'; import createBreakpoints from './createBreakpoints'; -import createPalette from './createPalette'; import createMixins from './createMixins'; +import createPalette from './createPalette'; +import createTypography from './createTypography'; import shadows from './shadows'; +import spacing from './spacing'; import transitions from './transitions'; import zIndex from './zIndex'; -import spacing from './spacing'; -import borderRadius from './borderRadius'; function createMuiTheme(options: Object = {}) { const { - palette: paletteInput = {}, breakpoints: breakpointsInput = {}, mixins: mixinsInput = {}, - typography: typographyInput = {}, + palette: paletteInput = {}, shadows: shadowsInput, + typography: typographyInput = {}, ...other } = options; diff --git a/packages/material-ui/src/styles/spacing.js b/packages/material-ui/src/styles/spacing.js index b1eb2fac5e8c54..c1bcffbb7cd85c 100644 --- a/packages/material-ui/src/styles/spacing.js +++ b/packages/material-ui/src/styles/spacing.js @@ -1,5 +1,7 @@ -export default { +const spacing = { // All components align to an 8dp square baseline grid for mobile, tablet, and desktop. - // https://material.io/guidelines/layout/metrics-keylines.html#metrics-keylines-baseline-grids + // https://material.io/design/layout/understanding-layout.html#pixel-density unit: 8, }; + +export default spacing; diff --git a/packages/material-ui/src/withWidth/withWidth.js b/packages/material-ui/src/withWidth/withWidth.js index 380a0675d2f1d9..c09d214b0558ad 100644 --- a/packages/material-ui/src/withWidth/withWidth.js +++ b/packages/material-ui/src/withWidth/withWidth.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import EventListener from 'react-event-listener'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import wrapDisplayName from 'recompose/wrapDisplayName'; import hoistNonReactStatics from 'hoist-non-react-statics'; import withTheme from '../styles/withTheme'; diff --git a/pages/api/paper.md b/pages/api/paper.md index 6ea47bce6bc7b5..835ea2d52f889f 100644 --- a/pages/api/paper.md +++ b/pages/api/paper.md @@ -63,5 +63,6 @@ you need to use the following style sheet name: `MuiPaper`. ## Demos - [Autocomplete](/demos/autocomplete) +- [Cards](/demos/cards) - [Paper](/demos/paper)