Changelog: update for 2.0.0-rc.1

build/bin/version.js

 var fs = require('fs');
 var path = require('path');
 var version = process.env.VERSION || require('../../package.json').version;
-var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.7': '1.4' };
+var content = { '1.0.9': '1.0', '1.1.6': '1.1', '1.2.9': '1.2', '1.3.7': '1.3', '1.4.8': '1.4' };
 if (!content[version]) content[version] = '2.0';
 fs.writeFileSync(path.resolve(__dirname, '../../examples/versions.json'), JSON.stringify(content));

examples/docs/en-US/custom-theme.md

 ## Custom theme
-Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea, and this is where our theme customization tools kick in.
+Element uses BEM-styled CSS so that you can override styles easily. But if you need to replace styles at a large scale, e.g. change the theme color from blue to orange or green, maybe overriding them one by one is not a good idea. We provide three ways to change the style variables.
 
 ### Changing theme color
-Under construction.
+If you just want to change the theme color of Element, the [theme preview website](https://elementui.github.io/theme-chalk-preview/#/en-US) is recommended. The theme color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.
+
+The above website enables you to preview theme of a new theme color in real-time, and it can generate a complete style package based on the new theme color for you to download directly (to import new style files in your project, please refer to the 'Import custom theme' or 'Import component theme on demand' part of this section).
+
+### Update SCSS variables in your project
+`theme-chalk` is written in SCSS. If your project also uses SCSS, you can directly change Element style variables. Create a new style file, e.g. `element-variables.scss`:
+
+```html
+/* theme color */
+$--color-primary: teal;
+
+/* icon font path, required */
+$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
+
+@import "../node_modules/element-ui/packages/theme-chalk/src/index";
+```
+
+Then in the entry file of your project, import this style file instead of Element's built CSS:
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+Note that it is required to override icon font path to the relative path of Element's font files. You can edit the following variables in this way:
+
+| Variable | Description | Default value |
+| ------ | ---- | ------ |
+| $--sm | `sm` breakpoint for responsive layout | 768px |
+| $--md | `md` breakpoint for responsive layout | 992px |
+| $--lg | `lg` breakpoint for responsive layout | 1200px |
+| $--xl | `xl` breakpoint for responsive layout | 1920px |
+| $--color-primary | theme color | #409EFF |
+| $--color-success | color for success | #67C23A |
+| $--color-warning | color for warning | #EB9E05 |
+| $--color-danger | color for danger | #FA5555 |
+| $--color-info | color for info | #878D99 |
+| $--color-text-primary | color for primary texts | #2D2F33 |
+| $--color-text-regular | color for regular texts | #5A5E66 |
+| $--color-text-secondary | color for secondary texts | #878D99 |
+| $--color-text-placeholder | color for placeholder texts | #B4BCCC |
+| $--border-color-base | base border color | #D8DCE5 |
+| $--border-color-light | light border color | #DFE4ED |
+| $--border-color-lighter | lighter border color | #E6EBF5 |
+| $--border-color-extra-light | extra light border color | #EDF2FC |
+| $--font-path | icon font file path | 'fonts' |
 
 ### More customizations
 If you need more customization than just changing the theme color, please follow these steps:

examples/docs/en-US/table.md

@@ -1849,10 +1849,10 @@ Configuring rowspan and colspan allows you to merge cells
 ```
 :::
 
-### 自定义索引
+### Custom index
 
-自定义 `type=index` 列的行号。
-:::demo 通过给 `type=index` 的列传入 `index` 属性，可以自定义索引。该属性传入数字时，将作为索引的起始值。也可以传入一个方法，它提供当前行的行号（从 `0` 开始）作为参数，返回值将作为索引展示。
+You can customize row index in `type=index` columns.
+:::demo To customize row indices, use `index` attribute on <el-table-column> with `type=index`. If it is assigned to a number, all indices will have an offset of that number. It also accepts a method with each index (starting from `0`) as parameter, and the returned value will be displayed as index.
 
 ```html
 <template>
@@ -1865,23 +1865,60 @@ Configuring rowspan and colspan allows you to merge cells
     </el-table-column>
     <el-table-column
       prop="date"
-      label="日期"
+      label="Date"
       width="180">
     </el-table-column>
     <el-table-column
       prop="name"
-      label="姓名"
+      label="Name"
       width="180">
     </el-table-column>
     <el-table-column
       prop="address"
-      label="地址">
+      label="Address">
     </el-table-column>
   </el-table>
 </template>
 
 <script>
   export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-02',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }, {
+          date: '2016-05-04',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Home'
+        }, {
+          date: '2016-05-01',
+          name: 'Tom',
+          state: 'California',
+          city: 'Los Angeles',
+          address: 'No. 189, Grove St, Los Angeles',
+          zip: 'CA 90036',
+          tag: 'Office'
+        }],
+      }
+    },
     methods: {
       indexMethod(index) {
         return index * 2;
@@ -1906,13 +1943,13 @@ Configuring rowspan and colspan allows you to merge cells
 | highlight-current-row | whether current row is highlighted | boolean | — | false |
 | current-row-key | key of current row, a set only prop | string,number | — | — |
 | row-class-name | function that returns custom class names for a row, or a string assigning class names for every row | Function({row, rowIndex})/String | — | — |
-| row-style | function that returns custom style for a row,  or a string assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
+| row-style | function that returns custom style for a row, or an object assigning custom style for every row | Function({row, rowIndex})/Object | — | — |
 | cell-class-name | function that returns custom class names for a cell, or a string assigning class names for every cell | Function({row, rowIndex})/String | — | — |
-| cell-style | function that returns custom style for a cell,  or a string assigning custom style for every cell | Function({row, rowIndex})/Object | — | — |
+| cell-style | function that returns custom style for a cell, or an object assigning custom style for every cell | Function({row, rowIndex})/Object | — | — |
 | header-row-class-name | function that returns custom class names for a row in table header, or a string assigning class names for every row in table header | Function({row, rowIndex})/String | — | — |
-| header-row-style | function that returns custom style for a row in table header,  or a string assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
+| header-row-style | function that returns custom style for a row in table header, or an object assigning custom style for every row in table header | Function({row, rowIndex})/Object | — | — |
 | header-cell-class-name | function that returns custom class names for a cell in table header, or a string assigning class names for every cell in table header | Function({row, rowIndex})/String | — | — |
-| header-cell-style | function that returns custom style for a cell in table header,  or a string assigning custom style for every cell in table header | Function({row, rowIndex})/Object | — | — |
+| header-cell-style | function that returns custom style for a cell in table header, or an object assigning custom style for every cell in table header | Function({row, rowIndex})/Object | — | — |
 | row-key | key of row data, used for optimizing rendering. Required if `reserve-selection` is on. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used. | Function(row)/String | — | — |
 | empty-text | Displayed text when data is empty. You can customize this area with `slot="empty"` | String | — | No Data |
 | default-expand-all | whether expand all rows by default, only works when the table has a column type="expand" | Boolean | — | false |
@@ -1949,7 +1986,7 @@ Configuring rowspan and colspan allows you to merge cells
 |------|--------|-------|
 | clearSelection | used in multiple selection Table, clear selection, might be useful when `reserve-selection` is on | selection |
 | toggleRowSelection | used in multiple selection Table, toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected | row, selected |
-| toggleRowExpanded | used in expand Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded | row, expanded |
+| toggleRowExpansion | used in expandable Table, toggle if a certain row is expanded. With the second parameter, you can directly set if this row is expanded or collapsed | row, expanded |
 | setCurrentRow | used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection. | row |
 | clearSort | clear sorting, restore data to the original order | — |
 | clearFilter | clear filter | — |
@@ -1963,7 +2000,7 @@ Configuring rowspan and colspan allows you to merge cells
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | type | type of the column. If set to `selection`, the column will display checkbox. If set to `index`, the column will display index of the row (staring from 1). If set to `expand`, the column will display expand icon.  | string | selection/index/expand | — |
-| index | 如果设置了 `type=index`，可以通过传递 `index` 属性来自定义索引 | string, Function(index) | - | - |
+| index | customize indices for each row, works on columns with `type=index` | string, Function(index) | - | - |
 | label | column label | string | — | — |
 | column-key | column's key. If you need to use the filter-change event, you need this attribute to identify which column is being filtered | string | string | — | — |
 | prop |  field name. You can also use its alias: `property` | string | — | — |

examples/docs/zh-CN/custom-theme.md

 ## 自定义主题
-Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法。
+Element 默认提供一套主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。我们提供了三种方法，可以进行不同程度的样式自定义。
 
 ### 仅替换主题色
-整理中。
+如果仅希望更换 Element 的主题色，推荐使用[在线主题生成工具](https://elementui.github.io/theme-chalk-preview)。Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。
+
+使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。
+
+### 在项目中改变 SCSS 变量
+Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 `element-variables.scss`，写入以下内容：
+```html
+/* 改变主题色变量 */
+$--color-primary: teal;
+
+/* 改变 icon 字体路径变量，必需 */
+$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
+
+@import "../node_modules/element-ui/packages/theme-chalk/src/index";
+```
+
+之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：
+```JS
+import Vue from 'vue'
+import Element from 'element-ui'
+import './element-variables.scss'
+
+Vue.use(Element)
+```
+
+需要注意的是，覆盖字体路径变量是必需的，将其赋值为 Element 中 icon 图标所在的相对路径即可。使用这种方式可以自定义的变量为：
+
+| 变量名 | 含义 | 默认值 |
+| ------ | ---- | ------ |
+| $--sm | 响应式布局中 `sm` 的断点值 | 768px |
+| $--md | 响应式布局中 `md` 的断点值 | 992px |
+| $--lg | 响应式布局中 `lg` 的断点值 | 1200px |
+| $--xl | 响应式布局中 `xl` 的断点值 | 1920px |
+| $--color-primary | 主题色 | #409EFF |
+| $--color-success | 表示「成功」的状态色 | #67C23A |
+| $--color-warning | 表示「警告」的状态色 | #EB9E05 |
+| $--color-danger | 表示「危险」的状态色 | #FA5555 |
+| $--color-info | 表示「信息」的状态色 | #878D99 |
+| $--color-text-primary | 主要文字色 | #2D2F33 |
+| $--color-text-regular | 常规文字色 | #5A5E66 |
+| $--color-text-secondary | 次要文字色 | #878D99 |
+| $--color-text-placeholder | 占位文字色 | #B4BCCC |
+| $--border-color-base | 一级边框 | #D8DCE5 |
+| $--border-color-light | 二级边框 | #DFE4ED |
+| $--border-color-lighter | 三级边框 | #E6EBF5 |
+| $--border-color-extra-light | 四级边框 | #EDF2FC |
+| $--font-path | icon 字体图标路径 | 'fonts' |
 
 ### 深层次的定制
-如果仅仅改变主题色不能满足你的需求，请按以下步骤进行更深层次的主题定制：
+如果仅仅改变以上变量不能满足你的需求，请按以下步骤进行更深层次的主题定制：
 
 #### <strong>安装工具</strong>
 首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。

examples/docs/zh-CN/table.md

@@ -1945,6 +1945,43 @@
 
 <script>
   export default {
+    data() {
+      return {
+        tableData: [{
+          date: '2016-05-03',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+          tag: '家'
+        }, {
+          date: '2016-05-02',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+          tag: '公司'
+        }, {
+          date: '2016-05-04',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+          tag: '家'
+        }, {
+          date: '2016-05-01',
+          name: '王小虎',
+          province: '上海',
+          city: '普陀区',
+          address: '上海市普陀区金沙江路 1518 弄',
+          zip: 200333,
+          tag: '公司'
+        }],
+      }
+    },
     methods: {
       indexMethod(index) {
         return index * 2;
@@ -2005,14 +2042,14 @@
 | filter-change | 当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。 | filters |
 | current-change | 当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性 | currentRow, oldCurrentRow |
 | header-dragend | 当拖动表头改变了列的宽度的时候会触发该事件 | newWidth, oldWidth, column, event |
-| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expanded |
+| expand-change | 当用户对某一行展开或者关闭的时候会触发该事件 | row, expandedRows |
 
 ### Table Methods
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
 | clearSelection | 用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法 | selection |
 | toggleRowSelection | 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） | row, selected |
-| toggleRowExpanded | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
+| toggleRowExpansion | 用于可展开表格，切换某一行的展开状态，如果使用了第二个参数，则是设置这一行展开与否（expanded 为 true 则展开） | row, expanded |
 | setCurrentRow | 用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。 | row |
 | clearSort | 用于清空排序条件，数据会恢复成未排序的状态 | — |
 | clearFilter | 用于清空过滤条件，数据会恢复成未过滤的状态 | — |

packages/input/src/input.vue

@@ -38,7 +38,10 @@
         </i>
       </span>
       <!-- 后置内容 -->
-      <span class="el-input__suffix" v-if="$slots.suffix || suffixIcon || validateState" :style="suffixOffset">
+      <span
+        class="el-input__suffix"
+        v-if="$slots.suffix || suffixIcon || validateState && needStatusIcon"
+        :style="suffixOffset">
         <span class="el-input__suffix-inner">
           <slot name="suffix"></slot>
           <i class="el-input__icon"
@@ -87,6 +90,9 @@
     mixins: [emitter, Focus('input'), Migrating],
 
     inject: {
+      elForm: {
+        default: ''
+      },
       elFormItem: {
         default: ''
       }
@@ -149,11 +155,14 @@
       validateState() {
         return this.elFormItem ? this.elFormItem.validateState : '';
       },
+      needStatusIcon() {
+        return this.elForm ? this.elForm.statusIcon : false;
+      },
       validateIcon() {
         return {
           validating: 'el-icon-loading',
           success: 'el-icon-circle-check',
-          error: 'el-icon-circle-cross'
+          error: 'el-icon-circle-close'
         }[this.validateState];
       },
       textareaStyle() {

packages/table/src/table-body.js

@@ -400,7 +400,7 @@ export default {
     },
 
     handleExpandClick(row) {
-      this.store.toggleRowExpanded(row);
+      this.store.toggleRowExpansion(row);
     }
   }
 };

packages/table/src/table-store.js

@@ -44,7 +44,7 @@ const toggleRowSelection = function(states, row, selected) {
   return changed;
 };
 
-const toggleRowExpanded = function(states, row, expanded) {
+const toggleRowExpansion = function(states, row, expanded) {
   let changed = false;
   const expandRows = states.expandRows;
   if (typeof expanded !== 'undefined') {
@@ -391,8 +391,8 @@ TableStore.prototype.toggleRowSelection = function(row, selected) {
   }
 };
 
-TableStore.prototype.toggleRowExpanded = function(row, expanded) {
-  const changed = toggleRowExpanded(this.states, row, expanded);
+TableStore.prototype.toggleRowExpansion = function(row, expanded) {
+  const changed = toggleRowExpansion(this.states, row, expanded);
   if (changed) {
     this.table.$emit('expand-change', row, this.states.expandRows);
   }

packages/table/src/table.vue

@@ -255,7 +255,7 @@
       getMigratingConfig() {
         return {
           events: {
-            expand: 'expand is renamed to `expand-change`'
+            expand: 'expand is renamed to expand-change'
           }
         };
       },
@@ -269,8 +269,8 @@
         this.store.updateAllSelected();
       },
 
-      toggleRowExpanded(row, expanded) {
-        this.store.toggleRowExpanded(row, expanded);
+      toggleRowExpansion(row, expanded) {
+        this.store.toggleRowExpansion(row, expanded);
       },
 
       clearSelection() {

packages/theme-chalk/src/common/var.scss

@@ -499,9 +499,9 @@ $--popover-fill: $--color-white;
 $--popover-font-size: $--font-size-base;
 $--popover-border-color: $--border-color-lighter;
 $--popover-arrow-size: 6px;
-$--popover-padding: 10px;
-$--popover-padding-large: 28px 34px;
-$--popover-title-font-size: 18px;
+$--popover-padding: 12px;
+$--popover-padding-large: 18px 20px;
+$--popover-title-font-size: 16px;
 $--popover-title-color: $--color-text-primary;
 
 /* Tooltip

packages/theme-chalk/src/popover.scss

@@ -10,7 +10,7 @@
   padding: $--popover-padding;
   z-index: $--index-popper;
   color: $--color-text-regular;
-  line-height: 1.7;
+  line-height: 1.4;
   text-align: justify;
   word-break: break-all;
   font-size: $--popover-font-size;
@@ -24,7 +24,7 @@
     color: $--popover-title-color;
     font-size: $--popover-title-font-size;
     line-height: 1;
-    margin-bottom: 15px;
+    margin-bottom: 12px;
   }
 }
 

packages/theme-chalk/src/table.scss

@@ -232,6 +232,10 @@
     }
   }
 
+  th:first-child .cell, td:first-child .cell {
+    padding-left: 0;
+  }
+
   // 拥有多级表头
   @include m((group, border)) {
     border: $--table-border;
@@ -269,6 +273,10 @@
 
     th, td {
       border-right: $--table-border;
+
+      &:first-child .cell {
+        padding-left: 10px;
+      }
     }
 
     .has-gutter {