Button: small design fixes

Flex: added alignItems and justifyContent props
Pane: new component
View: fixes with bg
index: reorganization
webpack: prop-types and react as externals. BundleAnalyzer for dev

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "main": "dist/vkui.js",
   "devDependencies": {
     "autoprefixer": "^7.2.3",
@@ -37,21 +37,20 @@
     "stylelint": "^7.2.0",
     "stylelint-config-standard": "^16.0.0",
     "webpack": "^2.2.1",
+    "webpack-bundle-analyzer": "^2.9.2",
     "webpack-merge": "^4.0.0",
     "webpack-stats-plugin": "^0.1.4"
   },
-  "dependencies": {
-    "prop-types": "^15.5.8"
-  },
   "peerDependencies": {
-    "react": "15.4.2"
+    "react": "15.4.2",
+    "prop-types": "^15.5.8"
   },
   "scripts": {
     "prepublish": "npm run build",
     "styleguide": "NODE_ENV=production styleguidist server",
     "styleguide:build": "NODE_ENV=production styleguidist build",
-    "build": "NODE_ENV=production webpack --bail --json > stats.json",
-    "dev": "webpack --hot --watch",
+    "build": "NODE_ENV=production webpack --bail",
+    "dev": "webpack --watch --hot",
     "clear": "rm -rf dist/*",
     "test": "eslint . && ./node_modules/.bin/stylelint ./src/**/*.css"
   }

src/components/Button/Button.css

@@ -126,8 +126,9 @@
   font-size: 14px;
   line-height: 16px;
   min-height: 16px;
-  padding: 8px 12px;
-  border-radius: 2px;
+  padding: 7px 12px;
+  font-weight: 500;
+  border-radius: 4px;
   }
 .Button--ios.Button--vk-rich::before,
 .Button--ios.Button--vk-rich::after,
@@ -239,4 +240,4 @@
   .Button--ios::after {
     background: linear-gradient(to top, #C8C7CC 50%, transparent 50%);
     }
-  }
+  }

src/components/Flex/Flex.js

@@ -13,8 +13,12 @@ export default function Flex (props) {
   return (
     <div
       className={classnames(baseClassNames, props.className)}
-      style={props.style}
-      {...removeObjectKeys(props, ['className', 'style', 'alignment'])}
+      style={{
+        ...props.style,
+        alignItems: props.align,
+        justifyContent: props.justify
+      }}
+      {...removeObjectKeys(props, ['className', 'style', 'alignment', 'align', 'justify'])}
     >
       {items.map((item, i) => (
         <div className="Flex__item" key={item.key || item.props.id || `flex-item-${i}`}>
@@ -28,5 +32,7 @@ export default function Flex (props) {
 Flex.propTypes = {
   style: PropTypes.object,
   children: PropTypes.node,
-  className: PropTypes.string
+  className: PropTypes.string,
+  align: PropTypes.string,
+  justify: PropTypes.string
 };

src/components/List/Readme.md

@@ -35,14 +35,6 @@
               </List>
             </Group>
 
-            <Group title="Selectable (Beta)">
-              <List>
-                <ListItem selectable name="selectable-list" value="Feature 1">Feature 1</ListItem>
-                <ListItem selectable name="selectable-list" value="Feature 2">Feature 2</ListItem>
-                <ListItem selectable name="selectable-list" value="Feature 3">Feature 3</ListItem>
-              </List>
-            </Group>
-
             <Group title="Icons">
               <List>
                 <ListItem icon={<Icons.info />}>Information</ListItem>
@@ -51,6 +43,14 @@
               </List>
             </Group>
 
+            <Group title="Selectable (Beta)">
+              <List>
+                <ListItem selectable name="selectable-list" value="Feature 1">Feature 1</ListItem>
+                <ListItem selectable name="selectable-list" value="Feature 2">Feature 2</ListItem>
+                <ListItem selectable name="selectable-list" value="Feature 3">Feature 3</ListItem>
+              </List>
+            </Group>
+
             <Group title="Users list">
               <List>
                 <ListItem avatar={ <Avatar size={40} src="https://pp.userapi.com/c841034/v841034569/3b8c1/pt3sOw_qhfg.jpg" /> }>Feature 1</ListItem>

src/components/Pane/Pane.css

@@ -0,0 +1,23 @@
+.NewPane--ios {
+  padding: 13px 15px 12px;
+  border-top: 1px solid map(colors, separator);
+  border-bottom: 1px solid map(colors, separator);
+  background-color: #fff;
+  font-size: 16px;
+  line-height: 1.25;
+  }
+
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
+  .NewPane--ios {
+    border-width: .5px;
+    }
+  }
+
+.NewPane--android {
+  background-color: #fff;
+  padding: 14px 16px 15px;
+  }
+
+.NewPane--entity {
+  padding-left: 12px;
+  }