[theme] Makes mixins.gutter override easier (mui#35)

README.md

@@ -12,6 +12,8 @@ that you can use to tag your questions.
 [![CircleCI](https://img.shields.io/circleci/project/github/material-next/material-next/master.svg)](https://circleci.com/gh/material-next/material-next/tree/master)
 [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/MwT5uvA)
 [![Coverage Status](https://img.shields.io/codecov/c/github/material-next/material-next/master.svg)](https://codecov.io/gh/material-next/material-next/branch/master)
+![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)
+[![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialNext.svg?label=follow+Material-Next)](https://twitter.com/MaterialNext)
 
 [![PeerDependencies](https://img.shields.io/david/peer/material-next/material-next.svg)](https://david-dm.org/material-next/material-next#info=peerDependencies&view=list)
 [![Dependencies](https://img.shields.io/david/material-next/material-next.svg)](https://david-dm.org/material-next/material-next)

docs/src/modules/components/Demo.js

@@ -21,19 +21,17 @@ const styles = theme => ({
  marginRight: 0,
  },
  },
- demo: {
- ...theme.mixins.gutters({
- display: 'flex',
- justifyContent: 'center',
- paddingTop: theme.spacing.unit * 2,
- paddingBottom: theme.spacing.unit * 2,
- }),
+ demo: theme.mixins.gutters({
+ display: 'flex',
+ justifyContent: 'center',
+ paddingTop: theme.spacing.unit * 2,
+ paddingBottom: theme.spacing.unit * 2,
  [theme.breakpoints.up('sm')]: {
  paddingLeft: theme.spacing.unit * 3,
  paddingRight: theme.spacing.unit * 3,
  paddingTop: theme.spacing.unit * 6,
  },
- },
+ }),
  codeButton: {
  flip: false,
  display: 'none',

package.json

@@ -45,7 +45,7 @@
  "spellcheck": "eslint . --config .eslintrc.spellcheck.js && echo \"eslint: no lint errors\"",
  "test": "yarn lint && yarn flow && yarn typescript && yarn test:unit",
  "test:unit": "cross-env NODE_ENV=test mocha test/**/*.spec.js src/{,**/}*.spec.js",
- "test:watch": "yarn test:unit -- -w",
+ "test:watch": "yarn test:unit -w",
  "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha test/**/*.spec.js src/{,**/}*.spec.js && nyc report -r lcovonly",
  "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha test/**/*.spec.js src/{,**/}*.spec.js && nyc report --reporter=html",
  "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js --single-run",

src/styles/createMixins.js

@@ -3,13 +3,16 @@
 export default function createMixins(breakpoints: Object, spacing: Object, mixins: Object) {
  return {
  gutters: (styles: Object) => {
- styles.paddingLeft = spacing.unit * 2;
- styles.paddingRight = spacing.unit * 2;
- styles[breakpoints.up('sm')] = {
- paddingLeft: spacing.unit * 3,
- paddingRight: spacing.unit * 3,
+ return {
+ paddingLeft: spacing.unit * 2,
+ paddingRight: spacing.unit * 2,
+ ...styles,
+ [breakpoints.up('sm')]: {
+ paddingLeft: spacing.unit * 3,
+ paddingRight: spacing.unit * 3,
+ ...styles[breakpoints.up('sm')],
+ },
  };
- return styles;
  },
  toolbar: {
  minHeight: 56,

src/styles/createMixins.spec.js

@@ -0,0 +1,28 @@
+// @flow
+
+import { assert } from 'chai';
+import createMixins from './createMixins';
+import createMuiTheme from './createMuiTheme';
+
+describe('createMixins', () => {
+ it('should be able to override the breakpoint', () => {
+ const theme = createMuiTheme();
+ const mixins = createMixins(theme.breakpoints, theme.spacing, {});
+
+ const mixin = mixins.gutters({
+ display: 'flex',
+ [theme.breakpoints.up('sm')]: {
+ paddingLeft: 1,
+ },
+ });
+ assert.deepEqual(mixin, {
+ '@media (min-width:600px)': {
+ paddingLeft: 1,
+ paddingRight: 24,
+ },
+ display: 'flex',
+ paddingLeft: 16,
+ paddingRight: 16,
+ });
+ });
+});