v2.6.3: added code insertions; fixed migration docs; extended docs; a…

…dded license to package.json;

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "2.6.2",
+  "version": "2.6.3",
   "main": "dist/vkui.js",
-  "license": "SEE LICENSE IN LICENSE",
+  "license": "MIT",
   "description": "VKUI library",
   "repository": "https://github.com/VKCOM/VKUI",
   "homepage": "https://vkcom.github.io/vkui-styleguide",

src/components/ActionSheet/Readme.md

@@ -1,5 +1,6 @@
-ActionSheet – имитация [нативного компонента](https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/). Удобно использовать, когда нужно дать пользователю выбрать одно из множества действий.
-В качестве children принимает коллекцию ActionSheetItem.
+ActionSheet – имитация [нативного компонента](https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/).
+Удобно использовать, когда нужно дать пользователю выбрать одно из множества действий. В качестве `children` принимает
+коллекцию `ActionSheetItem`.
 
 **Важно**
 

src/components/ActionSheetItem/Readme.md

@@ -1 +1,2 @@
-Элемент списка ActionSheet. Если в ActionSheetItem передать autoclose={true}, то ActionSheet сам вызовет переданный в него onClose.
+Элемент списка `ActionSheet`. Если в `ActionSheetItem` передать `autoclose={true}`, то `ActionSheet` сам вызовет
+переданный в него `onClose`.

src/components/Alert/Readme.md

@@ -1,9 +1,3 @@
-Свойство-массив actions служит для отрисовки кнопок. Каждый элемент массива – это объект из трех полей:
-
-* action – функция для обработки клика по кнопке.
-* style – стилизация кнопки. Более подробно со значениями можно ознакомиться в разделе props & methods.
-* autoclose – флаг для автозакрытия алерта при клике на кнопку. **Важно:** перед установкой этого флага в true, убедитесь, что в Alert передано свойство onClose.
-
 ```
 
 class Example extends React.Component {

src/components/Avatar/Readme.md

@@ -1,4 +1,4 @@
-**Важно**: свойство style применяется к img, а не к корневому элементу. Чаще всего требуется стилизовать именно
+**Важно**: свойство `style` применяется к `img`, а не к корневому элементу. Чаще всего требуется стилизовать именно
 изображение, а не обертку.
 
 ```jsx

src/components/File/Readme.md

@@ -1,4 +1,4 @@
-File под капотом использует Button. То есть все свойства, применимые к Button, применимы и к File.
+`File` под капотом использует `Button`. То есть все свойства, применимые к `Button`, применимы и к `File`.
 
 ```jsx
   <View activePanel="panel">

src/components/FixedLayout/Readme.md

@@ -1,8 +1,11 @@
-{ position: fixed } не дружит с { transform: translate } на родителе, поэтому для позиционирования фиксированных блоков внутри Panel, необходимо использовать FixedLayout в качестве обертки.
+`{ position: fixed }` не дружит с `{ transform: translate }` на родителе, поэтому для позиционирования фиксированных
+блоков внутри панели, необходимо использовать `FixedLayout` в качестве обертки.
 
-Для удобства есть свойство vertical, с помощью которого можно прижать контент к верху или низу. При этому будут учитываться высота шапки и прочие системные отступы.
+Для удобства есть свойство `vertical`, с помощью которого можно "прижать" контент к верху или низу.
+При этому будут учитываться высота шапки и прочие системные отступы.
 
-Важно понимать, что блок с { position: fixed } находится не в потоке. В примере можно увидеть, что у блока с основным контентом есть паддинги. Они там не случайны.
+**Важно:** блок с `{ position: fixed }` находится не в потоке. В примере можно увидеть, что у блока с основным
+контентом есть паддинги. Они там не случайны.
 
   ```
   <View activePanel="fixedLayout">

src/components/FixedTabs/FixedTabs.js

@@ -7,8 +7,8 @@ import {IOS, platform} from '../../lib/platform';
 const osname = platform();
 
 /**
- * @deprecated Этот компонент устарел и будет удален в следущей мажорной версии.
- * Для отрисовки фиксированных Tabs используйте связку Tabs и FixedLayout.
+ * @deprecated этот компонент устарел и будет удален в следущей мажорной версии.
+ * Для отрисовки фиксированных табов используйте связку `Tabs` и `FixedLayout`.
  */
 export default class FixedTabs extends React.Component {
   static propTypes = {

src/components/FormLayout/Readme.md

@@ -1,8 +1,9 @@
-Компонент для создания форм. Принимает в качестве children один или несколько элементов форм. Input, Textarea, Select, Button, Checkbox, Radio.
+Компонент для создания форм. Принимает в качестве `children` один или несколько элементов форм.
 
-Для отрисовки лейблов снизу и сверху у каждой строчки, используются свойства top и bottom, которые нужно навесить на children элементы.
+Для отрисовки лейблов снизу и сверху у каждой строчки, используются свойства `top` и `bottom`, которые нужно навесить
+на `children` элементы.
 
-Иногда требуется объединить несколько контролов в группу. Делается это путем оборачивания их в div.
+Иногда требуется объединить несколько контролов в группу. Делается это путем оборачивания их в `div`.
 
 ```jsx static
 import { FormLayout, Input } from '@vkontakte/vkui';

src/components/HeaderButton/Readme.md

@@ -1,11 +1,7 @@
-Компонент для отрисовки кнопок в PanelHeader. Внутрь компонента передается либо иконка, либо текст. Текстовые кнопки
-чаще всего используются в iOS, но есть исключения для Android.
+Компонент для отрисовки кнопок в шапке панели. Внутрь компонента передается либо [иконка](https://vkcom.github.io/icons/),
+либо текст. Текстовые кнопки чаще всего используются в iOS, но есть исключения для Android.
 
-Шапки iOS и Android достаточно сильно отличаются внешне, поэтому описание будет разделено на две части.
-
-**Android**
-
-Кнопки могут быть переданы в left или right компонента PanelHeader:
+Кнопки могут быть переданы в `left` или `right` компонента `PanelHeader`:
 
 ```jsx static
 import { PanelHeader, HeaderButton } from '@vkonktakte/vkui';
@@ -33,9 +29,9 @@ import Icon24Search from '@vkontakte/icons/dist/24/search';
 />
 ```
 
-**iOS**
+**Addon для iOS**
 
-Основное отличие – это составность левой кнопки. Она может состоять из иконки и текста. Пример:
+В iOS к левой кнопке может быть добавлена подпись. Пример:
 
 ```jsx static
 import { PanelHeader, HeaderButton, platform, IOS } from '@vkonktakte/vkui';
@@ -50,12 +46,10 @@ const osname = platform();
 />
 ```
 
-В примере выше появляется новое свойство `addon`, актуальное только для iOS версии.
-
-**Важно:** кнопки для возврата к предыдущей Panel отличаются.
+**Важно:** кнопки для возврата к предыдущей панели отличаются.
 В случае с iOS используется иконка [28/chevron_back](https://vkcom.github.io/icons/#28/chevron_back), в случае с
 Android – [24/back](https://vkcom.github.io/icons/#24/back). Так же различаются кнопки для возврата к предыдущей
-View. iOS – текст "Отмена", Android – [24/cancel](https://vkcom.github.io/icons/#24/cancel).
+`View`. iOS – текст "Отмена", Android – иконка [24/cancel](https://vkcom.github.io/icons/#24/cancel).
 
 ```
 

src/components/Link/Readme.md

@@ -1,4 +1,4 @@
-Компонент-обертка для отрисовки ссылок. Поддерживаются все допустимые html атрибуты.
+Компонент-обертка для отрисовки ссылок. Поддерживаются все допустимые html-атрибуты.
 
 ```jsx static
 import { Link } from '@vkontakte/vkui';

src/components/Panel/Readme.md

@@ -1,4 +1,4 @@
-Компонент для создания панели. Передается внутрь View.
+Компонент для создания панели. Передается внутрь `View`.
 
 ```jsx static
 import { Panel } from '@vkontakte/vkui';

src/components/PanelHeader/Readme.md

@@ -1,5 +1,5 @@
-Компонент для отрисовки шапки внутри Panel. В качестве children принимает то, что будет находиться в центре.
-Это может быть текст, элемент или Search. По бокам располагаются управляющие кнопки HeaderButton.
+Компонент для отрисовки шапки внутри панели. В качестве `children` принимает то, что будет являться заголовком панели.
+По бокам располагаются управляющие кнопки `HeaderButton`.
 
 ```
 class Example extends React.Component {

src/components/PopoutWrapper/Readme.md

@@ -1,5 +1,5 @@
-Компонент-обертка для отрисовки всплывающих окон с затемнением фона. Используется внутри Alert, ActionSheet и ScreenSpinner.
-Свойства v и h служат для удобного позиционирования контента. Пример:
+Компонент-обертка для отрисовки всплывающих окон с затемнением фона. Используется внутри `Alert`, `ActionSheet`
+и `ScreenSpinner`. Свойства `v` и `h` служат для удобного позиционирования контента. Пример:
 
 ```jsx static
 import { Popout } from '@vkontakte/vkui';
@@ -8,3 +8,5 @@ import { Popout } from '@vkontakte/vkui';
   Some content
 </PopoutWrapper>
 ```
+
+Все всплывающие окна передаются в свойство `popout` компонентов `View` или `Root`.

src/components/Radio/Readme.md

@@ -6,7 +6,7 @@
         <div>
           <Radio name="radio" value="1" description="Lorem ipsum dolor sit amet, consectetur." defaultChecked>First</Radio>
           <Radio name="radio" value="2">Second</Radio>
-          <Radio name="radio" value="3" disabled>Third</Radio>
+          <Radio name="radio" value="3" disabled>Third (disabled)</Radio>
         </div>
       </FormLayout>
     </Panel>

src/components/RangeSlider/Readme.md

@@ -1,2 +1,28 @@
-Принимает те же свойства, что и Slider, за исключением value и defaultValue. Они должны переданы в виде массива
-[startValue, endValue]. onChange так же возвращает подобный массив.
+Принимает те же свойства, что и обычный слайдер, за исключением `value` и `defaultValue`.
+Они должны переданы в виде массива `[startValue, endValue]`. `onChange` так же возвращает подобный массив.
+
+```jsx
+  class Example extends React.Component {
+
+    render() {
+      return (
+        <View activePanel="slider">
+          <Panel id="slider" theme="white">
+            <PanelHeader>RangerSlider</PanelHeader>
+            <FormLayout>
+              <RangeSlider
+                top="Uncontrolled"
+                min={10}
+                max={20}
+                step={1}
+                defaultValue={[12, 16]}
+              />
+            </FormLayout>
+          </Panel>
+        </View>
+      );
+    }
+  }
+
+  <Example />
+```

src/components/Root/Readme.md

@@ -1,7 +1,8 @@
-Используется для создания модальных окон. Содержимое Root – это коллекция View. У каждой View должен быть id,
-свойство activeView определяет, какая View сейактивна.
+Используется для создания модальных окон. Содержимое `Root` – это коллекция `View`. У каждой `View` должен быть `id`.
+Свойство `activeView` определяет, какая `View` сейчас активна.
 
-При смене значения свойства activeView происходит переход от одной View к другой. Как только он заканчивается, вызывается свойство-функция onTransition.
+При смене значения свойства `activeView` плавный происходит переход от одной `View` к другой.
+Как только он заканчивается, вызывается свойство-функция `onTransition`.
 
 ```
 class Example extends React.Component {

src/components/Select/Readme.md

@@ -1,5 +1,3 @@
-В Select можно добавлять placeholder.
-
 ```jsx static
 import { Select } from '@vkontakte/vkui';
 

src/components/Tabs/Readme.md

@@ -1,7 +1,7 @@
 Табы могут растягиваться на всю ширину, либо занимать только необходимое пространство.
 
-**Важно:** Header, к которому внизу примыкают Tabs, нужно снабдить свойством noShadow, чтобы его тень не налезала
-на Tabs.
+**Важно:** Шапку, к которой снизу примыкают фиксированные табы, нужно снабдить свойством `noShadow={true}`,
+чтобы ее тень не налезала на `Tabs`.
 
 ```jsx
   class Example extends React.Component {

src/components/View/Readme.md

@@ -1,6 +1,8 @@
-Базовый компонент для создания панелей. В качестве children принимает коллекцию Panel. У каждой Panel должен быть уникальный id. Свойство activePanel определяет какая Panel активна.
+Базовый компонент для создания панелей. В качестве `children` принимает коллекцию `Panel`.
+У каждой `Panel` должен быть уникальный `id`. Свойство `activePanel` определяет какая `Panel` активна.
 
-При смене значения свойства activePanel происходит переход от одной панели к другой. Как только он заканчивается, вызывается свойство-функция onTransition.
+При смене значения свойства `activePanel` происходит плавный переход от одной панели к другой.
+Как только он заканчивается, вызывается свойство-функция `onTransition`.
 
 
 ```

styleguide/config.js

@@ -20,7 +20,7 @@ module.exports = {
       name: 'Hello World',
       content: '../README.md'
     }, {
-      name: 'The Concept',
+      name: 'Concept',
       content: './pages/concept.md'
     }, {
       name: 'Components',
@@ -91,7 +91,10 @@ module.exports = {
       }]
     }
   ],
-  require: [path.resolve(__dirname, './setup.js')],
+  require: [
+    path.resolve(__dirname, './setup.js'),
+    path.resolve(__dirname, './setup.css')
+  ],
   webpackConfig: Object.assign({}, webpackConfig, {
     resolve: {
       alias: {