Button, Textarea, Link, FixedTabs, View

Button: removed list type, added cell type
Textarea: added font-family
ListItem: changed indicator prop type
View: removed useless preventDefault in onMove ()
Link: new component
doc: spell checking

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "main": "dist/vkui.js",
   "repository": "https://github.com/VKCOM/VKUI",
   "description": "VKUI library",

src/components/Button/Readme.md

@@ -15,7 +15,7 @@
       super(props);
 
       this.state = {
-        activePanel: 'new'
+        activePanel: 'button'
       }
     }
 
@@ -185,12 +185,9 @@
                 </div>  
               </Pane>
             </Group>
-            <Group title="List">
-              <List>
-                <Button v="new" onClick={() => {}} type="list">List Button</Button>
-                <Button v="new" onClick={() => {}} type="list" before={<Icon24Add />}>With Icon</Button>
-                <Button v="new" onClick={() => {}} type="list" level="danger">Danger</Button>
-              </List>
+            <Group title="Cell">
+              <Button v="new" onClick={() => {}} type="cell">Cell Button</Button>
+              <Button v="new" onClick={() => {}} type="cell" level="danger">Danger Button</Button>
             </Group>
           </ScrollView>
         </View>

src/components/ButtonNew/ButtonNew.css

@@ -10,15 +10,15 @@
     align-items: center;
     }
 
-.ButtonNew--type-list {
+.ButtonNew--type-cell {
   display: block;
   }
 
-.ButtonNew--type-list.ButtonNew--level-primary {
+.ButtonNew--type-cell.ButtonNew--level-primary {
   color: map(colors, accentBlue);
   }
 
-.ButtonNew--type-list.ButtonNew--level-danger {
+.ButtonNew--type-cell.ButtonNew--level-danger {
   color: map(colors, red);
   }
 
@@ -154,37 +154,18 @@
   border-radius: 10px;
   }
 
-.ButtonNew--ios.ButtonNew--type-list {
+.ButtonNew--ios.ButtonNew--type-cell {
   padding: 0 15px;
   position: relative;
   }
 
-  .ButtonNew--ios.ButtonNew--type-list::before {
-    position: absolute;
-    bottom: 0;
-    left: 15px;
-    width: 100vw;
-    height: 1px;
-    background: var(--ios-thick-separator-color);
-    content: '';
-    }
-
-  @media
-  (-webkit-min-device-pixel-ratio: 2),
-  (min-resolution: 192dpi),
-  (min-resolution: 2dppx) {
-    .ButtonNew--ios.ButtonNew--type-list::before {
-      background: linear-gradient(to top, #c8c7cc 50%, transparent 50%);
-      }
-    }
-
-  .ButtonNew--ios.ButtonNew--type-list .ButtonNew__content {
+  .ButtonNew--ios.ButtonNew--type-cell .ButtonNew__content {
     line-height: 20px;
     font-size: 17px;
     padding: 12px 0;
     }
 
-    .ButtonNew--ios.ButtonNew--type-list .ButtonNew__before .Icon {
+    .ButtonNew--ios.ButtonNew--type-cell .ButtonNew__before .Icon {
       margin-right: 12px;
       }
 
@@ -194,16 +175,16 @@
   border-radius: 4px;
   }
 
-.ButtonNew--android.ButtonNew--type-list {
+.ButtonNew--android.ButtonNew--type-cell {
   padding: 0 16px;
   }
 
-  .ButtonNew--android.ButtonNew--type-list .ButtonNew__content {
+  .ButtonNew--android.ButtonNew--type-cell .ButtonNew__content {
     font-size: 16px;
     line-height: 20px;
     padding: 14px 0;
     }
 
-  .ButtonNew--android.ButtonNew--type-list .ButtonNew__before .Icon {
+  .ButtonNew--android.ButtonNew--type-cell .ButtonNew__before .Icon {
     margin-right: 12px;
     }

src/components/ButtonNew/ButtonNew.js

@@ -12,7 +12,7 @@ export default class ButtonNew extends React.Component {
   static propTypes = {
     level: PropTypes.oneOf(['1', '2', '3', 'sell', 'buy', 'primary', 'danger']),
     size: PropTypes.oneOf(['m', 'l', 'xl']),
-    type: PropTypes.oneOf(['default', 'list']),
+    type: PropTypes.oneOf(['default', 'cell']),
     stretched: PropTypes.bool,
 
     children: PropTypes.node,
@@ -33,7 +33,7 @@ export default class ButtonNew extends React.Component {
         level = level || '1';
         stretched = stretched || false;
         break;
-      case 'list':
+      case 'cell':
         level = level || 'primary';
     }
 

src/components/ButtonNew/Readme.md

@@ -1,9 +1,9 @@
-Кнопки бывают двух типов: *default* (default) и *list*. За тип отвечает свойство **type**.
+Кнопки бывают двух типов: *default* (default) и *cell*. За тип отвечает свойство **type**.
 
 Далее идут уровни (**level**). Возможные варианты значения **level** зависят от **type**:
 
 * type="default": ['1' (default), '2', '3', 'sell', 'buy']
 
-* type="list": ['primary' (default), 'danger']
+* type="cell": ['primary' (default), 'danger']
 
 Свойства **size** (*m* по-дефолту) и **stretched** (*false* по-дефолту) актуальные только для type="default"

src/components/FixedTabs/FixedTabs.js

@@ -16,6 +16,7 @@ export default class FixedTabs extends React.Component {
     children: PropTypes.node.isRequired,
     className: PropTypes.string,
     vertical: PropTypes.oneOf(['top', 'bottom']),
+    style: PropTypes.object,
     theme: osname === IOS ? PropTypes.oneOf(['white', 'gray']) : PropTypes.oneOf(['white']),
     background: osname === IOS ? PropTypes.oneOf(['transparent', 'gray', 'white']) : PropTypes.oneOf(['blue'])
   };
@@ -30,7 +31,7 @@ export default class FixedTabs extends React.Component {
     return (
       <FixedLayout vertical={this.props.vertical} className={classnames(baseClassName, {
         [`FixedTabs--${this.props.background}`]: true
-      })}>
+      }, this.props.className)} style={this.props.style}>
         <Tabs theme={this.props.theme}>
           {this.props.children}
         </Tabs>

src/components/Link/Link.css

@@ -0,0 +1,4 @@
+.Link {
+  color: map(colors, accentBlue);
+  text-decoration: none;
+  }

src/components/Link/Link.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import getClassName from '../../helpers/getClassName';
+import classnames from '../../lib/classnames';
+import PropTypes from 'prop-types';
+import './Link.css';
+
+const baseClassName = getClassName('Link');
+
+const Link = ({children, className, Component, ...restProps}) => (
+  <Component className={classnames(baseClassName, className)} {...restProps}>
+    {children}
+  </Component>
+);
+
+Link.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  Component: PropTypes.any
+};
+
+Link.defaultProps = {
+  Component: 'a'
+};
+
+export default Link;

src/components/ListItem/ListItem.js

@@ -32,7 +32,7 @@ export default class ListItem extends Component {
      */
     icon: PropTypes.node,
     before: PropTypes.node,
-    indicator: PropTypes.string,
+    indicator: PropTypes.node,
     asideContent: PropTypes.node,
     expandable: PropTypes.bool,
     children: PropTypes.node,

src/components/Textarea/Textarea.new.css

@@ -19,6 +19,7 @@
     min-height: 86px;
     max-height: 198px;
     border: none;
+    font-family: -apple-system, BlinkMacSystemFont, Roboto, Open Sans, Helvetica Neue, sans-serif;
     }
 
 

src/components/View/View.js

@@ -338,7 +338,6 @@ export default class View extends Component {
         this.setState({ swipeBackShift });
       }
     }
-    e.originalEvent.preventDefault();
   };
 
   onEnd = () => {

src/index.js

@@ -40,6 +40,7 @@ export { default as Tabs } from './components/Tabs/Tabs';
 export { default as TabsItem } from './components/TabsItem/TabsItem';
 export { default as FixedTabs } from './components/FixedTabs/FixedTabs';
 export { default as Spinner } from './components/Spinner/Spinner';
+export { default as Link } from './components/Link/Link';
 
 /**
  * Forms

styleguide/pages/concept.md

@@ -1,11 +1,11 @@
 VKUI – библиотека React компонентов, с помощью которой можно создавать web-приложения, дизайн которых будет повторять
-дизайн мобильны клиентов (iOS, Android).
+дизайн мобильных клиентов (iOS, Android).
 
 Каждое vkui-приложение – это набор экранов. Есть два типа переходов между экранами:
 
 ### Переход между панелями
 
-Панель ScrollView – это комопонент, в который передается children, видимый пользователю. Компонент View – это набор таких панелей. Пример:
+Панель ScrollView – это компонент, в который передается children, видимый пользователю. Компонент View – это набор таких панелей. Пример:
 
 ```jsx static
   <View activePanel="greetings">