merge conflict ant update spec docs

2024-11-30 11:08:45 +08:00 · 2016-03-14 11:29:09 +08:00 · 2016-03-14 11:29:09 +08:00 · 1e59f48691
commit 1e59f48691
parent b5ace6ec1d a8582ce34f
34 changed files with 181 additions and 78 deletions
--- a/components/badge/ScrollNumber.jsx
+++ b/components/badge/ScrollNumber.jsx
@ -76,6 +76,7 @@ class AntScrollNumber extends React.Component {
      className: `${this.props.prefixCls}-only`,
      style: {
        transition: removeTransition && 'none',
+        WebkitTransform: `translate3d(0, ${-position * height}px, 0)`,
        transform: `translate3d(0, ${-position * height}px, 0)`,
        height,
      },
--- a/components/date-picker/index.jsx
+++ b/components/date-picker/index.jsx
@ -115,7 +115,7 @@ function createPicker(TheCalendar, defaultFormat) {
        pickerClass += ' ant-calendar-picker-open';
      }
      return (
-        <span className={pickerClass}>
+        <span className={pickerClass} style={this.props.style}>
          <DatePicker
            transitionName={this.props.transitionName}
            disabled={this.props.disabled}
@ -138,7 +138,6 @@ function createPicker(TheCalendar, defaultFormat) {
                      onChange={this.handleInputChange}
                      value={value && this.getFormatter().format(value)}
                      placeholder={placeholder}
-                      style={this.props.style}
                      className={`ant-calendar-picker-input ant-input${sizeClass}`} />
                    <span className="ant-calendar-picker-icon" />
                  </span>
--- a/components/dropdown/dropdown.jsx
+++ b/components/dropdown/dropdown.jsx
@ -6,6 +6,8 @@ export default React.createClass({
    return {
      transitionName: 'slide-up',
      prefixCls: 'ant-dropdown',
+      mouseEnterDelay: 0.15,
+      mouseLeaveDelay: 0.1,
    };
  },
  render() {
--- a/components/menu/index.md
+++ b/components/menu/index.md
@ -17,9 +17,9 @@

 ```html
 <Menu>
-  <MenuItem>菜单项</MenuItem>
+  <Menu.Item>菜单项</Menu.Item>
  <SubMenu title="子菜单">
-    <MenuItem>子菜单项</MenuItem>
+    <Menu.Item>子菜单项</Menu.Item>
  </SubMenu>
 </Menu>
 ```
--- a/components/popconfirm/index.jsx
+++ b/components/popconfirm/index.jsx
@ -2,7 +2,9 @@ import React from 'react';
 import Tooltip from 'rc-tooltip';
 import Icon from '../icon';
 import Button from '../button';
+import getPlacements from '../popover/placements';

+const placements = getPlacements();
 const prefixCls = 'ant-popover';
 const noop = function () {};
 const transitionNames = {
@ -66,10 +68,10 @@ export default React.createClass({
    const overlay = (
      <div>
        <div className={`${prefixCls}-content`}>
-          <p className={`${prefixCls}-message`}>
+          <div className={`${prefixCls}-message`}>
            <Icon type="exclamation-circle" />
-            {title}
-          </p>
+            <div className={`${prefixCls}-message-title`}>{title}</div>
+          </div>
          <div className={`${prefixCls}-buttons`}>
            <Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
            <Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
@ -81,7 +83,9 @@ export default React.createClass({
    const transitionName = transitionNames[placement];

    return (
-      <Tooltip {...restProps} placement={placement}
+      <Tooltip {...restProps}
+        placement={placement}
+        builtinPlacements={placements}
        overlayStyle={overlayStyle}
        prefixCls={prefixCls}
        onVisibleChange={this.onVisibleChange}
--- a/components/popover/index.jsx
+++ b/components/popover/index.jsx
@ -1,6 +1,8 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
+import getPlacements from './placements';

+const placements = getPlacements();
 const prefixCls = 'ant-popover';

 const Popover = React.createClass({
@ -33,6 +35,7 @@ const Popover = React.createClass({

    return (
      <Tooltip transitionName={transitionName}
+        builtinPlacements={placements}
        ref="tooltip"
        {...this.props}
        overlay={this.getOverlay()}>
--- a/components/popover/placements.js
+++ b/components/popover/placements.js
@ -0,0 +1,84 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1,
+};
+
+const targetOffset = [0, 0];
+
+export default function getPlacements(config = {}) {
+  const { arrowWidth = 5, horizontalArrowShift = 16, verticalArrowShift = 12 } = config;
+  return {
+    left: {
+      points: ['cr', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, 0],
+      targetOffset,
+    },
+    right: {
+      points: ['cl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, 0],
+      targetOffset,
+    },
+    top: {
+      points: ['bc', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [0, -4],
+      targetOffset,
+    },
+    bottom: {
+      points: ['tc', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [0, 4],
+      targetOffset,
+    },
+    topLeft: {
+      points: ['bl', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [-(horizontalArrowShift + arrowWidth), -4],
+      targetOffset,
+    },
+    leftTop: {
+      points: ['tr', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, -(verticalArrowShift + arrowWidth)],
+      targetOffset,
+    },
+    topRight: {
+      points: ['br', 'tc'],
+      overflow: autoAdjustOverflow,
+      offset: [horizontalArrowShift + arrowWidth, -4],
+      targetOffset,
+    },
+    rightTop: {
+      points: ['tl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, -(verticalArrowShift + arrowWidth)],
+      targetOffset,
+    },
+    bottomRight: {
+      points: ['tr', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [horizontalArrowShift + arrowWidth, 4],
+      targetOffset,
+    },
+    rightBottom: {
+      points: ['bl', 'cr'],
+      overflow: autoAdjustOverflow,
+      offset: [4, verticalArrowShift + arrowWidth],
+      targetOffset,
+    },
+    bottomLeft: {
+      points: ['tl', 'bc'],
+      overflow: autoAdjustOverflow,
+      offset: [-(horizontalArrowShift + arrowWidth), 4],
+      targetOffset,
+    },
+    leftBottom: {
+      points: ['br', 'cl'],
+      overflow: autoAdjustOverflow,
+      offset: [-4, verticalArrowShift + arrowWidth],
+      targetOffset,
+    },
+  };
+}
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@ -33,7 +33,7 @@ for (let i = 0; i < 46; i++) {
 const App = React.createClass({
  getInitialState() {
    return {
-      selectedRowKeys: [],
+      selectedRowKeys: [],  // 这里配置默认勾选列
      loading: false,
    };
  },
--- a/components/table/demo/row-selection-props.md
+++ b/components/table/demo/row-selection-props.md
@ -12,9 +12,7 @@ import { Table } from 'antd';
 const columns = [{
  title: '姓名',
  dataIndex: 'name',
-  render(text) {
-    return <a href="#">{text}</a>;
-  }
+  render: text => <a href="#">{text}</a>,
 }, {
  title: '年龄',
  dataIndex: 'age'
@ -43,19 +41,9 @@ const data = [{
 const rowSelection = {
  getCheckboxProps(record) {
    return {
-      defaultChecked: record.name === '李大嘴', // 配置默认勾选的列
      disabled: record.name === '胡彦祖'    // 配置无法勾选的列
    };
  },
-  onChange(selectedRowKeys) {
-    console.log(`selectedRowKeys changed: ${selectedRowKeys}`);
-  },
-  onSelect(record, selected, selectedRows) {
-    console.log(record, selected, selectedRows);
-  },
-  onSelectAll(selected, selectedRows) {
-    console.log(selected, selectedRows);
-  },
 };

 ReactDOM.render(<Table rowSelection={rowSelection} columns={columns} dataSource={data} />
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@ -86,7 +86,7 @@ let AntTable = React.createClass({
  componentWillReceiveProps(nextProps) {
    if (('pagination' in nextProps) && nextProps.pagination !== false) {
      this.setState({
-        pagination: objectAssign({}, this.state.pagination, nextProps.pagination)
+        pagination: objectAssign({}, defaultPagination, this.state.pagination, nextProps.pagination)
      });
    }
    // dataSource 的变化会清空选中项
--- a/components/tooltip/index.jsx
+++ b/components/tooltip/index.jsx
@ -1,5 +1,10 @@
 import React from 'react';
 import Tooltip from 'rc-tooltip';
+import getPlacements from '../popover/placements';
+
+const placements = getPlacements({
+  verticalArrowShift: 8,
+});

 export default React.createClass({
  getDefaultProps() {
@ -42,6 +47,7 @@ export default React.createClass({

    return (
      <Tooltip transitionName={transitionName}
+        builtinPlacements={placements}
        overlay={this.props.title}
        visible={visible}
        onVisibleChange={this.onVisibleChange}
--- a/components/upload/index.jsx
+++ b/components/upload/index.jsx
@ -142,7 +142,7 @@ const AntUpload = React.createClass({
    targetItem.percent = e.percent;
    this.onChange({
      event: e,
-      file,
+      file: targetItem,
      fileList: this.state.fileList
    });
  },
--- a/docs/pattern/advanced-search.md
+++ b/docs/pattern/advanced-search.md
@ -53,4 +53,4 @@
 字段型一般会出现在主搜索框底部，适合搜索条件和值都比较少的场景中。


-## 案例（敬请期待）
+## <span class="waiting">案例（敬请期待）</span>
--- a/docs/pattern/list.md
+++ b/docs/pattern/list.md
@ -98,4 +98,4 @@

 <br />

-## 案例（敬请期待）
+## <span class="waiting">案例（敬请期待）</span>
--- a/docs/pattern/table.md
+++ b/docs/pattern/table.md
@ -154,4 +154,4 @@
 数值右对齐（带小数则按小数点对齐），其余左对齐。


-## 案例（敬请期待）
+## <span class="waiting">案例（敬请期待）</span>
--- a/docs/react/getting-started.md
+++ b/docs/react/getting-started.md
@ -119,7 +119,7 @@ Ant Design React 支持所有的现代浏览器和 IE8+。
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/index.css">
    <!-- Polyfills -->
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
+    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js"></script>
  </head>
  <body>
  </body>
--- a/docs/spec/direct.md
+++ b/docs/spec/direct.md
@ -49,7 +49,7 @@

 <img class="preview-img" align="right" alt="拖放列表示例" description="状态一：鼠标悬停该行时，出现可移动的『图标』；<br>
 状态二：鼠标悬停在该『图标』时，指针变为『手型』，点击即可进行拖动；<br>
-状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://os.alipayobjects.com/rmsportal/ZQxzyqMpeJwalbe.png">
+状态三：拖动到可放置区块，出现蓝色描边，告知用户该区块可放置该对象。" src="https://os.alipayobjects.com/rmsportal/DjMFcqSxZrulbGF.png">

 拖放列表

@ -63,13 +63,12 @@

 <br>

-拖放对象（敬请期待）
- 
-拖放多个对象（敬请期待）
+<span class="waiting">拖放对象（敬请期待）</span>
+
+<span class="waiting">拖放多个对象（敬请期待）</span>

 <br>

 ---

-## 直接选择（敬请期待）
-
+## <span class="waiting">直接选择（敬请期待）</span>
--- a/docs/spec/feature.md
+++ b/docs/spec/feature.md
@ -5,7 +5,7 @@

 ---

-使 Ant Design 与众不同的一点是，这是一个同时追求『用户』和『设计者』体验的规范，也让三大特性都以人为本。
+与众不同的是，Ant Design 不但追求『用户』的使用体验，还追求『设计者』的使用体验，真真正正贯彻和践行『以人为本』的设计理念。

 <div style="margin-left:-40px;margin-right:-40px;">
  <div class="col-8 features">
@ -16,7 +16,7 @@
  <div class="col-8 features">
    <img src="https://os.alipayobjects.com/rmsportal/iJbUiLYpuPBXUhV.png">
    <h5>确定</h5>
-    <div>制定通俗而科学的规则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。</div>
+    <div>制定通俗而科学的设计原则、运用面向对象的方法、使用一致的文档沟通机制，给予研发团队一种高确定性、低熵值的研发状态。</div>
  </div>
  <div class="col-8 features">
    <img src="https://os.alipayobjects.com/rmsportal/uSOjjlCRjRIhtIY.png">
--- a/docs/spec/invitation.md
+++ b/docs/spec/invitation.md
@ -10,7 +10,7 @@
 很多富交互模式（eg：『拖放』、『行内编辑』、『上下文工具』）都有一个共同问题，就是缺少易发现性。所以『提供邀请』是成功完成人机交互的关键所在。

 邀请就是引导用户进入下一个交互层次的提醒和暗示，通常包括意符（eg：实时的提示信息）和可供性，以表明在下一个界面可以做什么。当可供性中可感知的部分（Perceived Affordance）表现为意符时，人机交互的过程往往更加自然、顺畅。
- 
+

 > 意符（Signifiers）：一种额外的提示，告诉用户可以采取什么行为，以及应该怎么操作；必须是可感知（eg：视觉、听觉、触觉等）。——摘自《设计心理学 1 》

@ -30,14 +30,14 @@

 <img class="preview-img" align="right" alt="白板式邀请示例" src="https://os.alipayobjects.com/rmsportal/DkOYgfJHDuzhyBg.png">

-<img class="preview-img" align="right" alt="未完成邀请示例" src="https://os.alipayobjects.com/rmsportal/mYrulgLJVgYQymP.png">
+<img class="preview-img" align="right" alt="未完成邀请示例" src="https://os.alipayobjects.com/rmsportal/cojQlWfINmsVDGd.png">

 引导操作邀请：一般以静态说明形式出现在页面上，不过它们在视觉上也可以表现出多种不同样式。
 常见类型：『文本邀请』、『白板式邀请』、『未完成邀请』。

 <br>

-<img class="preview-img" align="right" alt="漫游探索邀请示例 1" description="在用户首次登陆时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。" src="https://os.alipayobjects.com/rmsportal/oIaNVaxFtSKcQuC.png">
+<img class="preview-img" align="right" alt="漫游探索邀请示例 1" description="在用户首次登陆时出现少量『探索点』，当用户点击『我知道了』，能快速切换到下一个探索点。" src="https://os.alipayobjects.com/rmsportal/TGnzYViseCoFBYL.png">

 <img class="preview-img" align="right" alt="漫游探索邀请示例 2" src="https://os.alipayobjects.com/rmsportal/KQabdaTbolVuMld.png">

@ -65,7 +65,7 @@

 <br>

-<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击『赞』后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启『精打细算』的邀请。" src="https://os.alipayobjects.com/rmsportal/aeiQIuWkKmPvBiI.png">
+<img class="preview-img" align="right" alt="推论邀请示例" description="用户点击『赞』后，同时系统分析（既然用户喜欢这篇文章，那么可能对这一类文章都有兴趣）并提供开启『精打细算』的邀请。" src="https://os.alipayobjects.com/rmsportal/SyurwytfcvpbNLG.png">

 推论邀请：用于交互期间，合理推断用户可能产生的需求。

@ -79,9 +79,10 @@

 <br>

-预期功能邀请（敬请期待）
+<br>
+
+<span class="waiting">预期功能邀请 (敬请期待)</span>

 <br>

-拖放邀请（敬请期待）
-
+<span class="waiting">拖放邀请 (敬请期待)</span>
--- a/docs/spec/layout/index.md
+++ b/docs/spec/layout/index.md
@ -1,7 +1,7 @@
 # 常用布局

 - template: component
- category: 基础
+- category: 设计基础
 - order: 4
 - cols: 1

--- a/docs/spec/lightweight.md
+++ b/docs/spec/lightweight.md
@ -17,7 +17,7 @@
 ## 实时可见工具


-<img class="preview-img" align="right" alt="实时可见工具示例--摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>
+<img class="preview-img" align="right" alt="实时可见工具示例 --摘自知乎" description="状态一：在文案中出现一个相对明显的点击区域；<br>
 状态二：鼠标悬停时，鼠标『指针』变为『手型』，底色发生变化，邀请用户点击。<br>
 状态三：鼠标点击后，和未点击前有明显的区分。" src="https://os.alipayobjects.com/rmsportal/sfytaOSssRrdYFg.png">

--- a/docs/spec/reaction.md
+++ b/docs/spec/reaction.md
@ -6,7 +6,7 @@

 ---

-『提供邀请』的强大体现在**交互之前**给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在**交互期间**为用户提供视觉反馈；『即时反应』的重要性体现在**交互之后**立即给出反馈。
+『提供邀请』的强大体现在`交互之前`给出反馈，解决易发现性问题；『巧用过渡』的有用体现在它能够在**交互期间**为用户提供视觉反馈；『即时反应』的重要性体现在**交互之后**立即给出反馈。

 就像『牛顿第三定律』所描述作用力和反作用一样，用户进行了操作或者内部数据发生了变化，系统就应该立即有一个对应的反馈，同时输入量级越大、重要性越高，那么反馈量级越大、重要性越高。

@ -21,7 +21,7 @@
 ## 查询模式


-<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在『话题』、『问题』、『文章』这 3 种类目中出现。" src="https://os.alipayobjects.com/rmsportal/ZmfTeKXnrdCBONH.png">
+<img class="preview-img" align="right" alt="确定类目示例" description="用户所查询的关键词，只会在『话题』、『问题』、『文章』这 3 种类目中出现。" src="https://os.alipayobjects.com/rmsportal/fgQfkNakHrUiAun.png">

 <img class="preview-img" align="right" alt="不确定类目示例" description="用户所查询的关键词，其所属的类目数量不确定，可能 4 个，可能 5 个，可能更多。" src="https://os.alipayobjects.com/rmsportal/hUfCsXwnOsVlskl.png">

@ -59,7 +59,7 @@

 <img class="preview-img" align="right" alt="按钮加载示例" src="https://os.alipayobjects.com/rmsportal/FBAZGqfeUnDlUtw.png">

-<img class="preview-img" align="right" alt="表格加载示例" src="https://os.alipayobjects.com/rmsportal/UiDmpTCCKWaOHSA.png">
+<img class="preview-img" align="right" alt="表格加载示例" src="https://os.alipayobjects.com/rmsportal/FPXsINbTgsuSStI.png">

 <img class="preview-img" align="right" alt="富列表加载示例" src="https://os.alipayobjects.com/rmsportal/WJqeUHzthTXaHnW.png">

--- a/docs/spec/stay.md
+++ b/docs/spec/stay.md
@ -18,7 +18,7 @@

 ## 覆盖层

-<img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后，直接操作；并出现 Message 告知用户操作成功，并提供用户『撤消』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤消』。" src="https://os.alipayobjects.com/rmsportal/woHOTIZeXCYmtkv.png" good>
+<img class="preview-img" align="right" alt="推荐示例" description="用户点击『删除』后，直接操作；出现 Message 告知用户操作成功，并提供用户『撤消』的按钮；用户进行下一个操作或者 1 分钟内不进行任何操作， Message 消失，用户无法再『撤消』。" src="https://os.alipayobjects.com/rmsportal/woHOTIZeXCYmtkv.png" good>

 <img class="preview-img" align="right" alt="推荐示例" description="特例：在执行某些无法『撤消』的操作时，可以点击『删除』后，出现 Popconfirm 进行二次确认，在当前页面完成任务。" src="https://os.alipayobjects.com/rmsportal/hDlhNscVtHdvvgu.png" good>

@ -52,8 +52,7 @@

 <br>

-
-详情嵌入层（敬请期待）
+<span class="waiting">详情嵌入层 (敬请期待)</span>

 <br>

@ -75,7 +74,7 @@

 <br>

-伸缩式用户界面（敬请期待）
+<span class="waiting">伸缩式用户界面（敬请期待）</span>

 <br>

@ -101,4 +100,4 @@

 <img class="preview-img" align="right" alt="弹出框覆盖层示例" src="https://os.alipayobjects.com/rmsportal/xcYosQncDPuFxhS.png">

-弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
+弹出框覆盖层：虽然弹出框的出现会打断用户的心流，但是有时候在弹出框中使用『步骤条』来管理复杂流程也是可行的。
--- a/docs/spec/transition.md
+++ b/docs/spec/transition.md
@ -38,7 +38,7 @@

 <br>

-视图定位（敬请期待）
+<span class="waiting">视图定位 (敬请期待)</span>

 <br>

@ -79,7 +79,7 @@
 <br>


+<span class="waiting">图片（敬请期待）</span>

-常见过渡效果：『按钮过渡』、『页面过渡』。

 <script src="/static/motionDemoLoad.js"></script>
--- a/package.json
+++ b/package.json
@ -72,6 +72,7 @@
    "warning": "~2.1.0"
  },
  "devDependencies": {
+    "autoprefixer": "^6.3.3",
    "babel-cli": "^6.2.0",
    "babel-core": "^6.2.1",
    "babel-jest": "^6.0.1",
--- a/scripts/demo.js
+++ b/scripts/demo.js
@ -285,7 +285,7 @@ InstantClickChangeFns.push(function() {
  if (window.location.href.indexOf('#') > 0) {
    setTimeout(function() {
      window.location.href = window.location.href;
-    }, 0);
+    }, 30);
  }

  $('.component-demos .icon-all').off('click');
@ -394,7 +394,7 @@ InstantClickChangeFns.push(function() {
    navMenu.removeClass('nav-hide').addClass('nav-show');
  });

-  $('body').on('click', function (e) {
+  $('body').on('click touchstart', function (e) {
    if (e.target !== $('.nav-phone-icon')[0] &&
        !navMenu[0].contains(e.target) &&
        navMenu.hasClass('nav-show')) {
--- a/site/static/style.less
+++ b/site/static/style.less
@ -625,6 +625,7 @@ footer ul li > a {
  border-left: 4px solid #e9e9e9;
  padding-left: 0.8em;
  margin: 1em 0;
+  font-style: italic;
 }

 .markdown blockquote p {
@ -637,6 +638,10 @@ footer ul li > a {
  margin-left: 8px;
 }

+.markdown .waiting {
+  color: #ccc;
+}
+
 .markdown h1:hover .anchor,
 .markdown h2:hover .anchor,
 .markdown h3:hover .anchor,
@ -1179,7 +1184,7 @@ a.entry-link:hover .anticon-smile {

 .preview-image-boxes {
  float: right;
-  margin: 0 0 70px 60px;
+  margin: 0 0 70px 20px;
  width: 616px;
 }

@ -1203,7 +1208,6 @@ a.entry-link:hover .anticon-smile {
 }

 .preview-image-wrapper video {
-  display: block;
  width: 100%;
  + svg {
    position: absolute;
--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@ -13,7 +13,7 @@
    <link rel="shortcut icon" href="https://t.alipayobjects.com/images/T1QUBfXo4fXXXXXXXX.png" type="image/x-icon">
    {% block styles %}{% endblock %}
    <link rel="stylesheet" href="{{static_url('../dist/demo.css')}}?20160114">
-    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.1.14/es5-shim.min.js,es5-shim/4.1.14/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.js"></script>
+    <script src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,es5-shim/4.5.7/es5-shim.min.js,es5-shim/4.5.7/es5-sham.min.js,html5shiv/3.7.2/html5shiv.min.js,media-match/2.0.2/media.match.min.js,jquery/1.11.3/jquery.min.js,bluebird/3.1.1/bluebird.min.js"></script>
    <script>
    (function() {
      window.ANT_COMPONENTS = [];
--- a/style/components/badge.less
+++ b/style/components/badge.less
@ -5,6 +5,7 @@
  position: relative;
  display: inline-block;
  line-height: 1;
+  vertical-align: middle;

  &-count {
    position: absolute;
--- a/style/components/button.less
+++ b/style/components/button.less
@ -101,22 +101,24 @@
  &-clicked:before {
  	content: '';
  	position: absolute;
-  	top: -6px;
-  	left: -6px;
-  	bottom: -6px;
-  	right: -6px;
+  	top: 0;
+  	left: 0;
+  	bottom: 0;
+  	right: 0;
  	border-radius: inherit;
-  	z-index: -1;
-    background: inherit;
-  	opacity: 1;
-  	transform: scale3d(0.5, 0.5, 1);
-    animation: buttonEffect 0.48s ease forwards;
+    border: 0 solid @primary-color;
+  	opacity: 0.4;
+    animation: buttonEffect 0.36s ease forwards;
  }
 }

@keyframes buttonEffect {
 	to {
 		opacity: 0;
-		transform: scale3d(1, 1, 1);
+    top: -5px;
+  	left: -5px;
+  	bottom: -5px;
+  	right: -5px;
+    border-width: 5px;
 	}
 }
--- a/style/components/form.less
+++ b/style/components/form.less
@ -242,6 +242,12 @@ form {
  .@{css-prefix}form-item {
    display: inline-block;
    margin-right: 10px;
+    margin-bottom: 0;
+
+    &-with-help {
+      margin-bottom: 24px;
+    }
+
    > div {
      display: inline-block;
    }
--- a/style/components/popover.less
+++ b/style/components/popover.less
@ -102,9 +102,13 @@
    padding: 8px 0 16px;
    font-size: 12px;
    color: @text-color;
-    .anticon {
-      margin-right: 8px;
+    > .anticon {
      color: @error-color;
+      line-height: 17px;
+      position: absolute;
+    }
+    &-title {
+      padding-left: 20px;
    }
  }

--- a/style/mixins/button.less
+++ b/style/mixins/button.less
@ -200,10 +200,10 @@
    position: absolute;
    top: 0;
    left: 0;
+    right: 0;
+    bottom: 0;
    display: inline-block;
    .opacity(0);
-    width: 100%;
-    height: 100%;
    border-radius: 50% 50%;
    content: " ";
    .scale(0, 0);
--- a/webpack.config.js
+++ b/webpack.config.js
@ -2,6 +2,7 @@ var webpack = require('webpack');
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
 var path = require('path');
 var pkg = require('./package');
+var autoprefixer = require('autoprefixer');

 var entry = {};
 entry['demo'] = ['./scripts/demo.js', 'webpack-hot-middleware/client'];
@ -26,10 +27,6 @@ module.exports = {

  module: {
    loaders: [{
-      test: /\.jsx?$/,
-      exclude: /node_modules/,
-      loader: 'es3ify',
-    }, {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel',
@ -57,6 +54,8 @@ module.exports = {
    }]
  },

+  postcss: [autoprefixer],
+
  plugins: [
    new ExtractTextPlugin('[name].css'),
    new webpack.optimize.OccurenceOrderPlugin(),