diff --git a/docs/src/modules/components/Carbon.js b/docs/src/modules/components/Carbon.js index 029c882f47b0d6..9ba01fda86e168 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.shape.borderRadius, 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 d5b16b8e0635ee..9863eb696854a0 100644 --- a/docs/src/pages/demos/cards/cards.md +++ b/docs/src/pages/demos/cards/cards.md @@ -1,6 +1,6 @@ --- title: Cards React component -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 43bd0e1165b3ce..e9921da8c56990 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.shape.borderRadius, 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 4100daa51c8e44..4c1092028b3d23 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: 88, minHeight: 36, padding: '8px 16px', - borderRadius: 4, + borderRadius: theme.shape.borderRadius, color: theme.palette.text.primary, transition: theme.transitions.create(['background-color', 'box-shadow'], { duration: theme.transitions.duration.short, @@ -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/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js index 97a971fc318c6c..16b988e30b660d 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 acea9db73d44eb..a64797f148e784 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 512f8305a9c318..7850a7768c40a3 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.shape.borderRadius, }, ...elevations, }; diff --git a/packages/material-ui/src/Popover/Popover.js b/packages/material-ui/src/Popover/Popover.js index e10c5bdd55904a..3dc5179f748886 100644 --- a/packages/material-ui/src/Popover/Popover.js +++ b/packages/material-ui/src/Popover/Popover.js @@ -4,7 +4,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import ReactDOM from 'react-dom'; import warning from 'warning'; -import debounce from 'debounce'; +import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb. import EventListener from 'react-event-listener'; import ownerDocument from '../utils/ownerDocument'; import ownerWindow from '../utils/ownerWindow'; diff --git a/packages/material-ui/src/Slide/Slide.js b/packages/material-ui/src/Slide/Slide.js index 52b5f3fbc1d0af..2f88e0be205968 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..6c5b7f766ba583 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.shape.borderRadius, }, [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 8906bf42bcb115..a8736f2901935a 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 c689a90d8e572b..99fbdfa1c8755b 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 23ad7057fefeb8..ddb782e941e8b5 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.shape.borderRadius, color: common.white, fontFamily: theme.typography.fontFamily, opacity: 0, diff --git a/packages/material-ui/src/styles/createMuiTheme.d.ts b/packages/material-ui/src/styles/createMuiTheme.d.ts index 0e365afbfa7e8e..99aeb4ba24080b 100644 --- a/packages/material-ui/src/styles/createMuiTheme.d.ts +++ b/packages/material-ui/src/styles/createMuiTheme.d.ts @@ -1,10 +1,11 @@ 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 { Shape, ShapeOptions } from './shape'; 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 { + shape?: ShapeOptions; + 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 { + shape: Shape; + 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 66ee5923a2deea..fa684e37fb855b 100644 --- a/packages/material-ui/src/styles/createMuiTheme.js +++ b/packages/material-ui/src/styles/createMuiTheme.js @@ -2,22 +2,23 @@ import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb. import warning from 'warning'; -import createTypography from './createTypography'; 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 shape from './shape'; +import spacing from './spacing'; import transitions from './transitions'; import zIndex from './zIndex'; -import spacing from './spacing'; function createMuiTheme(options: Object = {}) { const { - palette: paletteInput = {}, breakpoints: breakpointsInput = {}, mixins: mixinsInput = {}, - typography: typographyInput = {}, + palette: paletteInput = {}, shadows: shadowsInput, + typography: typographyInput = {}, ...other } = options; @@ -32,6 +33,7 @@ function createMuiTheme(options: Object = {}) { palette, props: {}, // Inject custom properties shadows: shadowsInput || shadows, + shape, typography: createTypography(palette, typographyInput), ...deepmerge( { diff --git a/packages/material-ui/src/styles/shape.d.ts b/packages/material-ui/src/styles/shape.d.ts new file mode 100644 index 00000000000000..fba5ed44f378a0 --- /dev/null +++ b/packages/material-ui/src/styles/shape.d.ts @@ -0,0 +1,9 @@ +export interface Shape { + borderRadius: number; +} + +export type ShapeOptions = Partial; + +declare const shape: Shape; + +export default shape; diff --git a/packages/material-ui/src/styles/shape.js b/packages/material-ui/src/styles/shape.js new file mode 100644 index 00000000000000..250b8c78a1d0b3 --- /dev/null +++ b/packages/material-ui/src/styles/shape.js @@ -0,0 +1,5 @@ +const shape = { + borderRadius: 4, +}; + +export default shape; 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 127c8b4f5a0487..670c3d36c2dc10 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 42ce4ecb4aa2d0..178ec48f41ee9a 100644 --- a/pages/api/paper.md +++ b/pages/api/paper.md @@ -66,5 +66,6 @@ you need to use the following style sheet name: `MuiPaper`. ## Demos - [Autocomplete](/demos/autocomplete) +- [Cards](/demos/cards) - [Paper](/demos/paper)