mui-layout - npm Package Compare versions

Comparing version 1.2.7 to 1.2.8

.storybook/addons.js

@@ -0,2 +1,3 @@
+import '@storybook/addon-notes/register';
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';

dist/components/Content.js

@@ -110,3 +110,3 @@ "use strict";
   }), _react["default"].createElement(Component, _extends({}, props, {
-    className: "".concat(className, " ").concat(classes.root),
+    className: "".concat(classes.root, " ").concat(className),
     style: _objectSpread({}, style, {
@@ -113,0 +113,0 @@ marginLeft: getMargin(ctx),

dist/components/Footer.js

@@ -89,3 +89,3 @@ "use strict";
   return _react["default"].createElement(Component, _extends({}, props, {
-    className: "".concat(className, " ").concat(classes.root),
+    className: "".concat(classes.root, " ").concat(className),
     style: _objectSpread({}, style, {
@@ -92,0 +92,0 @@ marginLeft: getMargin()

dist/components/Nav.js

@@ -67,3 +67,3 @@ "use strict";
     },
-    collapseButton: _defineProperty({
+    toggleButton: _defineProperty({
       backgroundColor: palette.grey[50],
@@ -98,3 +98,4 @@ textAlign: 'center',
       renderIcon = _ref2.renderIcon,
-      props = _objectWithoutProperties(_ref2, ["className", "header", "children", "renderIcon"]);
+      toggleProps = _ref2.toggleProps,
+      props = _objectWithoutProperties(_ref2, ["className", "header", "children", "renderIcon", "toggleProps"]);
 
@@ -139,4 +140,4 @@ (0, _useAutoCollapse["default"])();
     className: classes.content
-  }, typeof children === 'function' ? children(ctx) : children), shouldRenderButton && _react["default"].createElement(_Button["default"], {
-    className: classes.collapseButton,
+  }, typeof children === 'function' ? children(ctx) : children), shouldRenderButton && _react["default"].createElement(_Button["default"], _extends({}, toggleProps, {
+    className: classes.toggleButton,
     fullWidth: true,
@@ -146,3 +147,3 @@ onClick: function onClick() {
     }
-  }, renderIcon(collapsed, setCollapsed)))), _react["default"].createElement(_Grow["default"], {
+  }), renderIcon(collapsed, setCollapsed)))), _react["default"].createElement(_Grow["default"], {
     "in": opened && navVariant === 'temporary' && !!renderIcon
@@ -164,3 +165,4 @@ }, _react["default"].createElement(_IconButton["default"], {
   header: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
-  renderIcon: _propTypes["default"].func
+  renderIcon: _propTypes["default"].func,
+  toggleProps: _propTypes["default"].shape({})
 };
@@ -170,5 +172,6 @@ Nav.defaultProps = {
   header: null,
-  renderIcon: null
+  renderIcon: null,
+  toggleProps: {}
 };
 var _default = Nav;
 exports["default"] = _default;

dist/utils/presets.js

@@ -23,3 +23,7 @@ "use strict";
     heightAdjustmentDisabled: false,
-    initialAdjustmentHeight: 64,
+    initialAdjustmentHeight: {
+      xs: 56,
+      sm: 64
+    },
+    // toolbar's height in xs is 56px
     heightAdjustmentSpeed: 144,
@@ -26,0 +30,0 @@ headerPosition: 'relative',

package.json

 {
   "name": "mui-layout",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "description": "Instantly build dynamic and responsive layout based on React Material-UI",
@@ -36,2 +36,3 @@ "main": "dist/index.js",
     "@storybook/addon-links": "^5.1.9",
+    "@storybook/addon-notes": "^5.1.9",
     "@storybook/addons": "^5.1.9",
@@ -38,0 +39,0 @@ "@storybook/react": "^5.1.9",

README.md

@@ -97,2 +97,50 @@ <img src="https://user-images.githubusercontent.com/18292247/60601737-cb425a00-9ddc-11e9-8cb7-642fa581aa3d.png" alt="logo" width="150" height="136" />
   
+## Custom Styles
+Mostly, you will custom `Header` & `Nav`. This is an example for `Header`
+
+[Explanation is in storybook](https://siriwatknp.github.io/mui-layout/?path=/story/custom-styles--header)
+
+```js
+import { makeStyles } from '@material-ui/styles';
+
+const useHeaderStyles = makeStyles(({ palette, spacing }) => ({
+  header: {
+    backgroundColor: palette.secondary.main,
+  },
+  menuBtn: {
+    padding: spacing(2.5),
+    borderRadius: 0,
+  },
+  icon: {
+    color: palette.common.white,
+  },
+  toolbar: {
+    padding: spacing(0, 1),
+  },
+}));
+
+function App() {
+  const {
+    icon: iconCss,
+    toolbar: toolbarCss,
+    header: headerCss,
+    menuBtn: menuBtnCss,
+  } = useHeaderStyles();
+  return (
+    <Header
+      classes={{ root: headerCss }}
+      renderMenuIcon={open =>
+        open ? (
+          <ChevronLeft className={iconCss} />
+        ) : (
+          <MenuRounded classes={{ root: iconCss }} />
+        )
+      }
+      menuButtonProps={{ className: menuBtnCss }}
+      toolbarProps={{ className: toolbarCss }}
+    />
+  );
+}
+```
+  
 ## Presets
@@ -99,0 +147,0 @@ - Standard

stories/0welcome.stories.js

@@ -18,3 +18,3 @@ import React from 'react';
       <Typography gutterBottom>
-        <b>Version 1.1</b>
+        <b>Version 1.2</b>
       </Typography>
@@ -21,0 +21,0 @@ <Typography indent={'small'}>

No alert changes

Improved metrics

Total package byte prevSize

156410

15.71%

Number of package files

55

10%

Lines of code

2674

10.36%

Number of lines in readme file

174

38.1%

Worsened metrics

Dev dependency count

34

3.03%

No dependency changes