Merge branch 'master' of github.com:ant-design/ant-design

* changelog for 2.13.4

* emojis

* Add english changelog

* emojis

CHANGELOG.en-US.md

@@ -17,13 +17,55 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 
 ---
 
+## 2.13.4
+
+`2017-09-29`
+
+- 🐞 Fix missing Pagination `size="small"` style.
+- 🐞 Fix Anchor missing padding. [#7712](https://github.com/ant-design/ant-design/issues/7712)
+- 🐞 Fix TreeSelect extra select below search input. [#7703](https://github.com/ant-design/ant-design/issues/7703)
+- 🐞 Fix the jumping problem of Form validate text. [#7730](https://github.com/ant-design/ant-design/issues/7730)
+- 🐞 Fix Button Group loading style. [#7709](https://github.com/ant-design/ant-design/issues/7709)
+- 🐞 Fix blur placeholder text color. [#7365](https://github.com/ant-design/ant-design/issues/7365)
+- 🐞 Fix Mention `suggestion.toLowerCase is not a function` error. [#7696](https://github.com/ant-design/ant-design/issues/7696) [@kappa-gooner](https://github.com/kappa-gooner)
+- 🐞 Fix a children height problem of Layout.Sider. [#7716](https://github.com/ant-design/ant-design/pull/7716) [@zheeeng](https://github.com/zheeeng)
+- 🐞 Fix Dropdown menu group style.
+- 🐞 Fix Table filter icon and dropdown style.
+- 🐞 Fix a AutoComplete circular reference bug in Inferno. [#7742](https://github.com/ant-design/ant-design/pull/7742) [@menberg](https://github.com/menberg)
+- 🐞 Fix Upload cannot upload file when using `beforeUpload`. [#7762](https://github.com/ant-design/ant-design/issues/7762) [#6983](https://github.com/ant-design/ant-design/issues/6983)
+- TypeScript
+  - 🐞 Fix Input `maxLength` definite. [#7744](https://github.com/ant-design/ant-design/pull/7744) [@delesseps](https://github.com/delesseps)
+  - 🐞 Fix `disabledTime` definite of DatePicker. [#7740](https://github.com/ant-design/ant-design/pull/7740) [@778758944](https://github.com/778758944)
+
+## 2.13.3
+
+`2017-09-22`
+
+- 🐞 Fix Affix scrolling bug when document's height minus viewport's height is smaller than the height of children of Affix. [#2349](https://github.com/ant-design/ant-design/issues/2349)
+- 🐞 Fix broken style of header of Card when `Card[title]` is void and `Card[extra]` is set. [f46112d#commitcomment-24480417](https://github.com/ant-design/ant-design/commit/f46112d38561c89780eb44ecbba82347d2b912da#commitcomment-24480417)
+- 🐞 Fix TypeScript definition of `Checkbox[children]`. [#7650](https://github.com/ant-design/ant-design/issues/7650) [@liaokaien](https://github.com/liaokaien)
+- 🐞 Fix error when set nested name in `getFieldDecorator` and then click the label of `Form.Item`. [#7693](https://github.com/ant-design/ant-design/issues/7693)
+- Input
+  - 🐞 Fix broken style of `Input.Group[compat]` when it has `Select` as its children. [#7662](https://github.com/ant-design/ant-design/issues/7662)
+  - 🐞 Fix TypeScript definition of `Input[autoComplete]`. [#7699](https://github.com/ant-design/ant-design/pull/7699) [@delesseps](https://github.com/delesseps)
+- LocaleProvider
+  - 🇵🇹 Support Portuguese. [#7449](https://github.com/ant-design/ant-design/pull/7449) [@taviroquai](https://github.com/taviroquai)
+  - 🐞 Fix missing translations in Dutch locale. [#7694](https://github.com/ant-design/ant-design/pull/7694) [@kstiopin](https://github.com/kstiopin)
+- Table
+  - 🐞 Fix height of table header when `rowSelection` is set. [#7663](https://github.com/ant-design/ant-design/issues/7663)
+  - 🐞 Fix bug that click on first two options will not trigger event when `rowSelection.hideDefaultselections` is set. [#7626](https://github.com/ant-design/ant-design/issues/7626) [@infeng](https://github.com/infeng)
+  - 🐞 Fix TypeScript definition of `Table[scroll]`. [#7640](https://github.com/ant-design/ant-design/pull/7640) [@BlackGanglion](https://github.com/BlackGanglion)
+
+
 ## 2.13.2
 
 `2017-09-15`
 
-- 🐞 Fixed Form `getFieldDecoratorOptions` missing property of `normalize` and `validateFirst`. [#7552](https://github.com/ant-design/ant-design/issues/7552) [@meteor91](https://github.com/meteor91) [@mitchelldemler](https://github.com/mitchelldemler)
 - 🐞 Fix title and extra content position of narrow Card. [#7604](https://github.com/ant-design/ant-design/issues/7604)
-- 🐞 Revert [#7142](https://github.com/ant-design/ant-design/issues/7142) to fixing empty style of Table.
+- 🐞 Fix inlineCollapsed style of MenuItemGroup. [#7109](https://github.com/ant-design/ant-design/issues/7109)
+- 🐞 Revert [#7142](https://github.com/ant-design/ant-design/issues/7142) to fix empty data style of Table.
+- 🐞 Fix Form `getFieldDecoratorOptions` missing types of `normalize` and `validateFirst`. [#7552](https://github.com/ant-design/ant-design/issues/7552) [@meteor91](https://github.com/meteor91) [@mitchelldemler](https://github.com/mitchelldemler)
+- 🐞 Fix Modal `zIndex` type. [#7624](https://github.com/ant-design/ant-design/issues/7624)
 - 🌟 Improve tree node loading icon position. [#7584](https://github.com/ant-design/ant-design/issues/7584)
 - 🌟 Update a lot of components's English doc. [@khalibloo](https://github.com/khalibloo)
 
@@ -229,7 +271,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
 - Add Input.Textarea, Input[type='textArea'] will be deprecated. [pull/6138](https://github.com/ant-design/ant-design/pull/6138)
 - LocaleProvider supporting Thai. [pull/6721](https://github.com/ant-design/ant-design/pull/6721) [@koobitor](https://github.com/koobitor)
 - Mention support `focus` function. [#6135](https://github.com/ant-design/ant-design/issues/6135)
-- Menu[mode='inline'] could be collapsed, and use `context` to pass `collapsed` prop from Layout.Sider to Menu, don't need customized css code anymore. [pull/6686](https://github.com/ant-design/ant-design/pull/6686)
+- Menu inline mode could be collapsed by `inlineCollapsed`, and use `context` to pass `collapsed` prop from Layout.Sider to Menu, don't need customized css code anymore. [pull/6686](https://github.com/ant-design/ant-design/pull/6686)
 - Add Pagination `itemRender`, now you can customize the structure of page number. [25a603](https://github.com/ant-design/ant-design/commit/25a60322e5c6649522fb9f0d34919eba0ccb1f65)
 - Add Tooltip `autoAdjustOverflow` prop, now the auto adjust feature can be disabled. [pull/6661](https://github.com/ant-design/ant-design/pull/6661) [@jdz321](https://github.com/jdz321)
 - Fix errors in docs of Avatar. [pull/6711](https://github.com/ant-design/ant-design/pull/6711) [@llaski](https://github.com/llaski)
@@ -645,7 +687,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
   - Fix that `Cannot find module '../../package.json'` error. [#4935](https://github.com/ant-design/ant-design/issues/4935)
   - Fix definitions of Table, RangePicker and Upload.
 - Fix lack of event argument for Modal `onOk` `afterClose` and Popconfirm `onConfirm` `onCancel`. [#4787](https://github.com/ant-design/ant-design/issues/4787)
-- Improve animation of Menu[inline] and Collapse.
+- Improve animation of Menu inline mode and Collapse.
 - Improve Checkbox and Radio vertical align style.
 - Table
   - Fix misplace header when fix column. [#4936](https://github.com/ant-design/ant-design/issues/4936)

CHANGELOG.zh-CN.md

@@ -17,13 +17,54 @@ timeline: true
 
 ---
 
+## 2.13.4
+
+`2017-09-29`
+
+- 🐞 修复 Pagination 小号样式失效的问题。
+- 🐞 修复 Anchor 的样式错位。[#7712](https://github.com/ant-design/ant-design/issues/7712)
+- 🐞 修复 TreeSelect 搜索框下多余文字的问题。[#7703](https://github.com/ant-design/ant-design/issues/7703)
+- 🐞 修复 Form 校验文字跳动的问题。[#7730](https://github.com/ant-design/ant-design/issues/7730)
+- 🐞 修复各类型 Button Group 的 loading 样式。 [#7709](https://github.com/ant-design/ant-design/issues/7709)
+- 🐞 修复 placeholder 文本在某些情况下无法看清的问题。[#7365](https://github.com/ant-design/ant-design/issues/7365)
+- 🐞 修复一个 Mention 的 `suggestion.toLowerCase is not a function` 报错问题。 [#7696](https://github.com/ant-design/ant-design/issues/7696) [@kappa-gooner](https://github.com/kappa-gooner)
+- 🐞 修复一个 Layout.Sider 子元素的高度问题。[#7716](https://github.com/ant-design/ant-design/pull/7716) [@zheeeng](https://github.com/zheeeng)
+- 🐞 修复 Dropdown 菜单分组的样式。
+- 🐞 修复 Table 筛选图标和菜单样式错位。
+- 🐞 修复一个 AutoComplete 在 Inferno 下循环引用的问题。[#7742](https://github.com/ant-design/ant-design/pull/7742) [@menberg](https://github.com/menberg)
+- 🐞 修复 Upload 使用 `beforeUpload` 验证文件类型失败后无法再次上传的问题。[#7762](https://github.com/ant-design/ant-design/issues/7762) [#6983](https://github.com/ant-design/ant-design/issues/6983)
+- TypeScript
+  - 🐞 修复 Input 的 `maxLength` 定义。[#7744](https://github.com/ant-design/ant-design/pull/7744) [@delesseps](https://github.com/delesseps)
+  - 🐞 修复 DatePicker 等组件的 `disabledTime` 的返回值定义。[#7740](https://github.com/ant-design/ant-design/pull/7740) [@778758944](https://github.com/778758944)
+
+## 2.13.3
+
+`2017-09-22`
+
+- 🐞 修复 Affix 在内容与视口高度差小于 children 高度时触发的滚动抖动问题。[#2349](https://github.com/ant-design/ant-design/issues/2349)
+- 🐞 修复 `Card[title]` 为空且设置 `Card[extra]` 时样式错乱的问题。[f46112d#commitcomment-24480417](https://github.com/ant-design/ant-design/commit/f46112d38561c89780eb44ecbba82347d2b912da#commitcomment-24480417)
+- 🐞 修复 `Checkbox[children]` TypeScript definition。[#7650](https://github.com/ant-design/ant-design/issues/7650) [@liaokaien](https://github.com/liaokaien)
+- 🐞 修复 `getFieldDecorator` 内使用嵌套 id 后点击 `Form.Item` label 报错的问题。[#7693](https://github.com/ant-design/ant-design/issues/7693)
+- Input
+  - 🐞 修复 `Input.Group[compat]` 内嵌 `Select` 等控件时的样式问题。[#7662](https://github.com/ant-design/ant-design/issues/7662)
+  - 🐞 优化 `Input[autoComplete]` TypeScript 定义。[#7699](https://github.com/ant-design/ant-design/pull/7699) [@delesseps](https://github.com/delesseps)
+- LocaleProvider
+  - 🇵🇹 新增葡萄牙语。[#7449](https://github.com/ant-design/ant-design/pull/7449) [@taviroquai](https://github.com/taviroquai)
+  - 🐞 修复荷兰语 locale 缺少文案的问题。[#7694](https://github.com/ant-design/ant-design/pull/7694) [@kstiopin](https://github.com/kstiopin)
+- Table
+  - 🐞 修复 `rowSelection` 导致的表头高度问题。[#7663](https://github.com/ant-design/ant-design/issues/7663)
+  - 🐞 修复使用 `rowSelection.hideDefaultselections` 时导致自定义选项点击没反应的问题。[#7626](https://github.com/ant-design/ant-design/issues/7626) [@infeng](https://github.com/infeng)
+  - 🐞 优化 `Table[scroll]` TypeScript definition。[#7640](https://github.com/ant-design/ant-design/pull/7640) [@BlackGanglion](https://github.com/BlackGanglion)
+
 ## 2.13.2
 
 `2017-09-15`
 
-- 🐞 修复了 Form `getFieldDecoratorOptions` 缺失 `normalize` 以及 `validateFirst` 属性定义的问题。[#7552](https://github.com/ant-design/ant-design/issues/7552) [@meteor91](https://github.com/meteor91) [@mitchelldemler](https://github.com/mitchelldemler)
 - 🐞 修复了 Card Extra 内容过多样式错乱的问题。[#7604](https://github.com/ant-design/ant-design/issues/7604)
+- 🐞 修复了分组 Menu 收缩时的错位问题。[#7109](https://github.com/ant-design/ant-design/issues/7109)
 - 🐞 回滚 [#7142](https://github.com/ant-design/ant-design/issues/7142) 里对固定列表格空数据的样式优化，修复带来的一系列样式问题。
+- 🐞 修复了 Form `getFieldDecoratorOptions` 缺失 `normalize` 以及 `validateFirst` 属性定义的问题。[#7552](https://github.com/ant-design/ant-design/issues/7552) [@meteor91](https://github.com/meteor91) [@mitchelldemler](https://github.com/mitchelldemler)
+- 🐞 修复了 Modal 的 `zIndex` 属性定义。[#7624](https://github.com/ant-design/ant-design/issues/7624)
 - 🌟 优化了 Tree 加载中图标的显示位置。[#7584](https://github.com/ant-design/ant-design/issues/7584)
 - 🌟 优化了大量组件的英文文档。[@khalibloo](https://github.com/khalibloo)
 
@@ -229,7 +270,7 @@ timeline: true
 - 新增 Input.TextArea，原 Input[type='textArea'] 将被废弃。[pull/6138](https://github.com/ant-design/ant-design/pull/6138)
 - LocaleProvider 新增泰语支持。[pull/6721](https://github.com/ant-design/ant-design/pull/6721) [@koobitor](https://github.com/koobitor)
 - Mention 支持 `focus` 方法。[#6135](https://github.com/ant-design/ant-design/issues/6135)
-- Menu[mode='inline'] 支持缩起/展开，同时 Layout.Sider 使用 `context` 向 Menu 传递 `collapsed` 属性，无需再自己定制样式。[pull/6686](https://github.com/ant-design/ant-design/pull/6686)
+- Menu `inline` 模式下支持用 `inlineCollapsed` 属性缩起/展开，同时 Layout.Sider 使用 `context` 向 Menu 传递 `collapsed` 属性，无需再自己定制样式。[pull/6686](https://github.com/ant-design/ant-design/pull/6686)
 - 新增 Pagination `itemRender` 属性，用于自定义页码的结构。[25a603](https://github.com/ant-design/ant-design/commit/25a60322e5c6649522fb9f0d34919eba0ccb1f65)
 - 新增 Tooltip `autoAdjustOverflow` 属性，支持关闭自动调整位置的功能。[pull/6661](https://github.com/ant-design/ant-design/pull/6661) [@jdz321](https://github.com/jdz321)
 - 修复了 Avatar 错误的文档。[pull/6711](https://github.com/ant-design/ant-design/pull/6711) [@llaski](https://github.com/llaski)
@@ -644,7 +685,7 @@ timeline: true
   - 修复 `Cannot find module '../../package.json'` 的问题。[#4935](https://github.com/ant-design/ant-design/issues/4935)
   - 补充了 Table、RangePicker 和 Upload 的部分属性定义。
 - 修复了 Modal `onOk` `afterClose` 和 Popconfirm `onConfirm` `onCancel` 缺少点击 event 参数的问题。 [#4787](https://github.com/ant-design/ant-design/issues/4787)
-- 优化 Menu[inline] 和 Collapse 的折叠动画效果。
+- 优化 Menu inline 模式和 Collapse 的折叠动画效果。
 - 优化了 Checkbox 和 Radio 的垂直对齐样式。
 - Table
   - 修复固定列时列头样式错位的问题。[#4936](https://github.com/ant-design/ant-design/issues/4936)

components/affix/index.tsx

@@ -162,7 +162,7 @@ export default class Affix extends React.Component<AffixProps, any> {
       });
       this.setPlaceholderStyle({
         width,
-        height: affixNode.offsetHeight,
+        height: elemSize.height,
       });
     } else if (
       scrollTop < elemOffset.top + elemSize.height + (offsetBottom as number) - targetInnerHeight &&
@@ -179,7 +179,7 @@ export default class Affix extends React.Component<AffixProps, any> {
       });
       this.setPlaceholderStyle({
         width,
-        height: affixNode.offsetHeight,
+        height: elemOffset.height,
       });
     } else {
       const { affixStyle } = this.state;

components/anchor/style/index.less

@@ -1,57 +1,50 @@
 @import "../../style/themes/default";
 
-.@{ant-prefix} {
-  &-anchor {
-    position: relative;
-    &-wrapper {
-      background-color: @component-background;
-    }
+.@{ant-prefix}-anchor {
+  position: relative;
+  &-wrapper {
+    background-color: @component-background;
+  }
 
-    &-ink {
-      position: absolute;
+  &-ink {
+    position: absolute;
+    height: 100%;
+    left: 0;
+    top: 0;
+    &:before {
+      content: ' ';
+      position: relative;
+      width: 2px;
       height: 100%;
-      left: 0;
-      top: 0;
-      &:before {
-        content: ' ';
-        position: relative;
-        width: 2px;
-        height: 100%;
-        display: block;
-        background-color: @border-color-split;
-        margin: 0 auto;
-      }
-      &-ball {
-        display: none;
-        position: absolute;
-        width: 9px;
-        height: 9px;
-        border-radius: 9px;
-        border: 3px solid @primary-color;
-        background-color: @component-background;
-        left: 50%;
-        transition: top .3s ease-in-out;
-        transform: translateX(-50%);
-        &.visible {
-          display: inline-block;
-        }
-      }
+      display: block;
+      background-color: @border-color-split;
+      margin: 0 auto;
     }
-
-    &.fixed &-ink &-ink-ball {
+    &-ball {
       display: none;
+      position: absolute;
+      width: 9px;
+      height: 9px;
+      border-radius: 9px;
+      border: 3px solid @primary-color;
+      background-color: @component-background;
+      left: 50%;
+      transition: top .3s ease-in-out;
+      transform: translateX(-50%);
+      &.visible {
+        display: inline-block;
+      }
     }
   }
 
-  &-anchor-link {
+  &.fixed &-ink &-ink-ball {
+    display: none;
+  }
+
+  &-link {
     padding: 8px 0 8px 18px;
     line-height: 1;
 
-    & & {
-      padding-top: 6px;
-      padding-bottom: 6px;
-    }
-
     &-title {
       display: block;
       position: relative;
@@ -61,18 +54,19 @@
       overflow: hidden;
       text-overflow: ellipsis;
       margin-bottom: 8px;
-    }
 
-    &-title:only-child {
-      margin-bottom: 0;
+      &:only-child {
+        margin-bottom: 0;
+      }
     }
 
     &-active > &-title {
       color: @primary-color;
     }
+  }
 
-    & > & {
-      font-size: @font-size-base;
-    }
+  &-link &-link {
+    padding-top: 6px;
+    padding-bottom: 6px;
   }
 }

components/auto-complete/index.tsx

@@ -52,7 +52,7 @@ export default class AutoComplete extends React.Component<AutoCompleteProps, any
     const element = children && React.isValidElement(children) && children.type !== Option ?
       React.Children.only(this.props.children) : <Input />;
     return (
-      <InputElement {...element.props}>{element}</InputElement>
+      <InputElement>{element}</InputElement>
     );
   }
 

components/auto-complete/style/index.less

@@ -33,6 +33,12 @@
 
     .@{input-prefix-cls} {
       background: transparent;
+      border-width: @border-width-base;
+      line-height: @line-height-base;
+      &:focus,
+      &:hover {
+        .hover;
+      }
     }
 
     &-lg {
@@ -52,13 +58,5 @@
         .input-sm();
       }
     }
-
-    .@{input-prefix-cls} {
-      border-width: @border-width-base;
-      &:focus,
-      &:hover {
-        .hover;
-      }
-    }
   }
 }

components/button/button.tsx

@@ -146,7 +146,7 @@ export default class Button extends React.Component<ButtonProps, any> {
       [`${prefixCls}-${type}`]: type,
       [`${prefixCls}-${shape}`]: shape,
       [`${prefixCls}-${sizeCls}`]: sizeCls,
-      [`${prefixCls}-icon-only`]: !children && icon && !loading,
+      [`${prefixCls}-icon-only`]: !children && icon,
       [`${prefixCls}-loading`]: loading,
       [`${prefixCls}-clicked`]: clicked,
       [`${prefixCls}-background-ghost`]: ghost,

components/button/style/index.less

@@ -93,7 +93,7 @@
     display: block;
   }
 
-  &&-loading:not(&-circle):not(&-circle-outline) {
+  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
     padding-left: 29px;
     pointer-events: none;
     position: relative;
@@ -102,7 +102,7 @@
     }
   }
 
-  &-sm&-loading:not(&-circle):not(&-circle-outline) {
+  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
     padding-left: 24px;
     .@{iconfont-css-prefix} {
       margin-left: -17px;

components/calendar/locale/pt_PT.tsx

@@ -0,0 +1,2 @@
+import pt_PT from '../../date-picker/locale/pt_PT';
+export default pt_PT;

components/card/style/index.less

@@ -48,6 +48,8 @@
   &-extra {
     float: right;
     text-align: right;
+    // https://stackoverflow.com/a/22429853/3040605
+    margin-left: auto;
   }
 
   &-body {

components/carousel/index.en-US.md

@@ -21,7 +21,7 @@ A carousel component. Scales with its container.
 | vertical | Whether to use a vertical display                               | boolean   | `false` |
 | autoplay | Whether to scroll automatically                                 | boolean   | `false` |
 | easing | Transition interpolation function name                            | string   | `linear` |
-| beforeChange | Callback function called before the current index changes   | function(from, to) |
-| afterChange  | Callback function called after the current index changes    | function(current)  |
+| beforeChange | Callback function called before the current index changes   | function(from, to) | - |
+| afterChange  | Callback function called after the current index changes    | function(current)  | - |
 
 For more info on the parameters, refer to the https://github.com/akiran/react-slick

components/carousel/index.zh-CN.md

@@ -22,7 +22,7 @@ subtitle: 走马灯
 | vertical | 垂直显示 | boolean   | false |
 | autoplay | 是否自动切换 | boolean   | false |
 | easing | 动画效果 | string   | linear |
-| beforeChange      | 切换面板的回调                              | function(from, to) | 无
-| afterChange       | 切换面板的回调                              | function(current)  | 无
+| beforeChange      | 切换面板的回调                              | function(from, to) | 无 |
+| afterChange       | 切换面板的回调                              | function(current)  | 无 |
 
 更多参数可参考：https://github.com/akiran/react-slick

components/checkbox/Checkbox.tsx

@@ -17,7 +17,7 @@ export interface AbstractCheckboxProps {
   onMouseLeave?: React.MouseEventHandler<any>;
   value?: any;
   name?: string;
-  children?: React.ReactChild;
+  children?: React.ReactNode;
 }
 
 export interface CheckboxProps extends AbstractCheckboxProps {

components/checkbox/style/mixin.less

@@ -42,21 +42,23 @@
       top: 0;
       left: 0;
       display: block;
-      width: 14px;
-      height: 14px;
+      width: @checkbox-size;
+      height: @checkbox-size;
       border: @border-width-base @border-style-base @border-color-base;
       border-radius: @border-radius-sm;
       background-color: #fff;
       transition: all .3s;
 
       &:after {
+        @check-width: (@checkbox-size / 14) * 5px;
+        @check-height: (@checkbox-size / 14) * 8px;
         transform: rotate(45deg) scale(0);
         position: absolute;
-        left: 4px;
-        top: 1px;
+        left: (@checkbox-size - @check-width) / 2 - 0.5px * (@checkbox-size / 14);
+        top: (@checkbox-size - @check-height) / 2 - 2px * (@checkbox-size / 14);
         display: table;
-        width: 5px;
-        height: 8px;
+        width: @check-width;
+        height: @check-height;
         border: 2px solid #fff;
         border-top: 0;
         border-left: 0;
@@ -81,13 +83,15 @@
 
   // 半选状态
   .@{checkbox-prefix-cls}-indeterminate .@{checkbox-inner-prefix-cls}:after {
+    @indeterminate-width: (@checkbox-size / 14) * 8px;
+    @indeterminate-height: (@checkbox-size / 14) * 1px;
     content: ' ';
     transform: scale(1);
     position: absolute;
-    left: 2px;
-    top: 5px;
-    width: 8px;
-    height: 1px;
+    left: (@checkbox-size - 2 - @indeterminate-width) / 2;
+    top: (@checkbox-size - 3 - @indeterminate-height) / 2;
+    width: @indeterminate-width;
+    height: @indeterminate-height;
   }
 
   .@{checkbox-prefix-cls}-indeterminate.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}:after {
@@ -98,11 +102,7 @@
   .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}:after {
     transform: rotate(45deg) scale(1);
     position: absolute;
-    left: 4px;
-    top: 1px;
     display: table;
-    width: 5px;
-    height: 8px;
     border: 2px solid #fff;
     border-top: 0;
     border-left: 0;
@@ -151,8 +151,8 @@
     cursor: pointer;
     font-size: @font-size-base;
     display: inline-block;
-    &:not(:last-child) {
-      margin-right: 8px;
+    & + & {
+      margin-left: 8px;
     }
   }
 

components/date-picker/index.tsx

@@ -40,9 +40,9 @@ export interface DatePickerProps extends PickerProps, SinglePickerProps {
   open?: boolean;
   toggleOpen?: (e: {open: boolean}) => void;
   disabledTime?: (current: moment.Moment) => {
-    disabledHours?: () => [number, number],
-    disabledMinutes?: () => [number, number],
-    disabledSeconds?: () => [number, number],
+    disabledHours?: () => number[],
+    disabledMinutes?: () => number[],
+    disabledSeconds?: () => number[],
   };
   onOpenChange?: (status: boolean) => void;
   onOk?: (selectedTime: moment.Moment) => void;
@@ -69,9 +69,9 @@ export interface RangePickerProps extends PickerProps {
   };
   placeholder?: [string, string];
   disabledTime?: (current: moment.Moment, type: string) => {
-    disabledHours?: () => [number, number],
-    disabledMinutes?: () => [number, number],
-    disabledSeconds?: () => [number, number],
+    disabledHours?: () => number[],
+    disabledMinutes?: () => number[],
+    disabledSeconds?: () => number[],
   };
 }
 

components/date-picker/locale/pt_PT.tsx

@@ -0,0 +1,46 @@
+import CalendarLocale from 'rc-calendar/lib/locale/pt_PT';
+import TimePickerLocale from '../../time-picker/locale/pt_PT';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    ...CalendarLocale,
+    placeholder: 'Data',
+    rangePlaceholder: ['Data inicial', 'Data final'],
+    today: 'Hoje',
+    now: 'Agora',
+    backToToday: 'Hoje',
+    ok: 'Ok',
+    clear: 'Limpar',
+    month: 'Mês',
+    year: 'Ano',
+    timeSelect: 'Hora',
+    dateSelect: 'Selecionar data',
+    monthSelect: 'Selecionar mês',
+    yearSelect: 'Selecionar ano',
+    decadeSelect: 'Selecionar década',
+    yearFormat: 'YYYY',
+    dateFormat: 'D/M/YYYY',
+    dayFormat: 'D',
+    dateTimeFormat: 'D/M/YYYY HH:mm:ss',
+    monthFormat: 'MMMM',
+    monthBeforeYear: false,
+    previousMonth: 'Mês anterior (PageUp)',
+    nextMonth: 'Mês seguinte (PageDown)',
+    previousYear: 'Ano anterior (Control + left)',
+    nextYear: 'Ano seguinte (Control + right)',
+    previousDecade: 'Última década',
+    nextDecade: 'Próxima década',
+    previousCentury: 'Último século',
+    nextCentury: 'Próximo século',
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+    placeholder: 'Hora',
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

components/dropdown/style/index.less

@@ -48,6 +48,12 @@
     box-shadow: @box-shadow-base;
     background-clip: padding-box;
 
+    &-item-group-title {
+      color: @text-color-secondary;
+      padding: 6px 8px;
+      transition: all .3s;
+    }
+
     &-item,
     &-submenu-title {
       padding: 7px 8px;

components/form/FormItem.tsx

@@ -220,10 +220,10 @@ export default class FormItem extends React.Component<FormItemProps, any> {
     if (!id) {
       return;
     }
-    const controls = document.querySelectorAll(`#${id}`);
+    const controls = document.querySelectorAll(`[id="${id}"]`);
     if (controls.length !== 1) {
       e.preventDefault();
-      const control = findDOMNode(this).querySelector(`#${id}`) as HTMLElement;
+      const control = findDOMNode(this).querySelector(`[id="${id}"]`) as HTMLElement;
       if (control && control.focus) {
         control.focus();
       }

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -2280,6 +2280,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-slider-handle"
             role="slider"
             style="left:0%;"
+            tabindex="0"
           />
           <div
             class="ant-slider-mark"

components/form/__tests__/label.test.js

@@ -73,4 +73,20 @@ describe('Form', () => {
     wrapper.find('Form label').at(1).simulate('click');
     expect(wrapper.find('Form input').at(1).node).toBe(document.activeElement);
   });
+
+  // https://github.com/ant-design/ant-design/issues/7693
+  it('should not throw error when is not a valid id', () => {
+    const Form1 = Form.create()(({ form }) => (
+      <Form>
+        <Form.Item label="label 1">
+          {form.getFieldDecorator('member[0].name.firstname')(<input />)}
+        </Form.Item>
+      </Form>
+    ));
+    const wrapper = mount(<Form1 />);
+    expect(() => {
+      wrapper.find('Form label').at(0).simulate('click');
+    }).not.toThrow();
+    expect(wrapper.find('Form input').at(0).node).toBe(document.activeElement);
+  });
 });

components/form/index.en-US.md

@@ -85,7 +85,7 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
 
 ### this.props.form.validateFields/validateFieldsAndScroll([fieldNames: string[]], [options: object], callback: Function(errors, values))
 
-| 参数 | 说明 | 类型 | 默认值 |
+| Method | Description | Type | Default |
 |-----|-----|------|-------|
 | options.first | If `true`, every field will stop validation at first failed rule | boolean | false |
 | options.firstFields | Those fields will stop validation at first failed rule | String[] | [] |

components/form/style/index.less

@@ -491,7 +491,7 @@ form {
         border-color: @error-color;
       }
     }
-    &.@{ant-prefix}-mention-active .@{ant-prefix}-mention-editor,
+    &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
     .@{ant-prefix}-mention-editor:not([disabled]):focus {
       .active(@error-color);
     }

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -518,6 +518,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
           class="ant-slider-handle"
           role="slider"
           style="left:20%;"
+          tabindex="0"
         />
         <div
           class="ant-slider-mark"
@@ -615,6 +616,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
           class="ant-slider-handle"
           role="slider"
           style="left:40%;"
+          tabindex="0"
         />
         <div
           class="ant-slider-mark"

components/input/Input.tsx

@@ -27,6 +27,7 @@ export interface InputProps extends AbstractInputProps {
   id?: number | string;
   name?: string;
   size?: 'large' | 'default' | 'small';
+  maxLength?: string;
   disabled?: boolean;
   readOnly?: boolean;
   addonBefore?: React.ReactNode;
@@ -37,7 +38,7 @@ export interface InputProps extends AbstractInputProps {
   onClick?: React.FormEventHandler<any>;
   onFocus?: React.FormEventHandler<any>;
   onBlur?: React.FormEventHandler<any>;
-  autoComplete?: 'on' | 'off';
+  autoComplete?: string;
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   spellCheck?: boolean;
@@ -62,6 +63,7 @@ export default class Input extends Component<InputProps, any> {
       PropTypes.number,
     ]),
     size: PropTypes.oneOf(['small', 'default', 'large']),
+    maxLength: PropTypes.string,
     disabled: PropTypes.bool,
     value: PropTypes.any,
     defaultValue: PropTypes.any,

components/input/Search.tsx

@@ -4,11 +4,13 @@ import Input, { InputProps } from './Input';
 import Icon from '../icon';
 
 export interface SearchProps extends InputProps {
+  inputPrefixCls?: string;
   onSearch?: (value: string) => any;
 }
 
 export default class Search extends React.Component<SearchProps, any> {
   static defaultProps = {
+    inputPrefixCls: 'ant-input',
     prefixCls: 'ant-input-search',
   };
   input: any;
@@ -20,7 +22,7 @@ export default class Search extends React.Component<SearchProps, any> {
     this.input.focus();
   }
   render() {
-    const { className, prefixCls, ...others } = this.props;
+    const { className, inputPrefixCls, prefixCls, ...others } = this.props;
     delete (others as any).onSearch;
     const searchSuffix = (
       <Icon
@@ -34,6 +36,7 @@ export default class Search extends React.Component<SearchProps, any> {
         onPressEnter={this.onSearch}
         {...others}
         className={classNames(prefixCls, className)}
+        prefixCls={inputPrefixCls}
         suffix={searchSuffix}
         ref={node => this.input = node}
       />

components/input/__tests__/__snapshots__/index.test.js.snap

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Input should support maxLength 1`] = `
+<Input
+  disabled={false}
+  maxLength="3"
+  prefixCls="ant-input"
+  type="text"
+>
+  <input
+    className="ant-input"
+    disabled={false}
+    maxLength="3"
+    onKeyDown={[Function]}
+    type="text"
+  />
+</Input>
+`;
+
 exports[`TextArea should support disabled 1`] = `
 <TextArea
   disabled={true}
@@ -14,3 +31,18 @@ exports[`TextArea should support disabled 1`] = `
   />
 </TextArea>
 `;
+
+exports[`TextArea should support maxLength 1`] = `
+<TextArea
+  maxLength="10"
+  prefixCls="ant-input"
+>
+  <textarea
+    className="ant-input"
+    maxLength="10"
+    onChange={[Function]}
+    onKeyDown={[Function]}
+    style={Object {}}
+  />
+</TextArea>
+`;

components/input/__tests__/index.test.js

@@ -7,6 +7,15 @@ const { TextArea } = Input;
 
 const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
 
+
+describe('Input', () => {
+  it('should support maxLength', async () => {
+    const wrapper = mount(
+      <Input maxLength="3" />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
 describe('TextArea', () => {
   it('should auto calculate height according to content length', async () => {
     const wrapper = mount(
@@ -27,6 +36,13 @@ describe('TextArea', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should support maxLength', async () => {
+    const wrapper = mount(
+      <TextArea maxLength="10" />
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });
 
 describe('As Form Control', () => {

components/input/style/mixin.less

@@ -71,6 +71,7 @@
     max-width: 100%; // prevent textearea resize from coming out of its container
     height: auto;
     vertical-align: bottom;
+    transition: all .3s, height 0s;
   }
 
   // Size
@@ -250,6 +251,9 @@
   }
 
   &&-compact {
+    display: block;
+    .clearfix;
+
     & > * {
       border-radius: 0;
       border-right-width: 0;

components/layout/style/index.less

@@ -47,6 +47,10 @@
     /* fix firefox can't set width smaller than content on flex item */
     min-width: 0;
 
+    &-children {
+      height: 100%;
+    }
+
     &-has-trigger {
       padding-bottom: @layout-trigger-height;
     }

components/locale-provider/__tests__/index.test.js

@@ -9,6 +9,7 @@ import nlBE from '../nl_BE';
 import itIT from '../it_IT';
 import enUS from '../en_US';
 import ptBR from '../pt_BR';
+import ptPT from '../pt_PT';
 import ruRU from '../ru_RU';
 import esES from '../es_ES';
 import svSE from '../sv_SE';
@@ -33,7 +34,7 @@ import elGR from '../el_GR';
 import nbNO from '../nb_NO';
 import srRS from '../sr_RS';
 
-const locales = [enUS, ptBR, ruRU, esES, svSE, frBE, deDE, nlNL, caES, csCZ, koKR, etEE, skSK, jaJP, trTR, zhTW, fiFI, plPL, bgBG, enGB, frFR, nlBE, itIT, viVN, thTH, faIR, elGR, nbNO, srRS];
+const locales = [enUS, ptPT, ptBR, ruRU, esES, svSE, frBE, deDE, nlNL, caES, csCZ, koKR, etEE, skSK, jaJP, trTR, zhTW, fiFI, plPL, bgBG, enGB, frFR, nlBE, itIT, viVN, thTH, faIR, elGR, nbNO, srRS];
 
 const Option = Select.Option;
 const RangePicker = DatePicker.RangePicker;

components/locale-provider/nl_NL.tsx

@@ -13,10 +13,12 @@ export default {
   TimePicker,
   Calendar,
   Table: {
-    filterTitle: 'Filter Menu',
+    filterTitle: 'Filteren',
     filterConfirm: 'OK',
     filterReset: 'Reset',
     emptyText: 'Geen gegevens',
+    selectAll: 'Selecteer huidige pagina',
+    selectInvert: 'Deselecteer huidige pagina',
   },
   Modal: {
     okText: 'OK',
@@ -36,4 +38,10 @@ export default {
   Select: {
     notFoundContent: 'Niet gevonden',
   },
+  Upload: {
+    uploading: 'Uploaden...',
+    removeFile: 'Verwijder bestand',
+    uploadError: 'Fout tijdens uploaden',
+    previewFile: 'Bekijk bestand',
+  },
 };

components/locale-provider/pt_PT.tsx

@@ -0,0 +1,47 @@
+import moment from 'moment';
+moment.locale('pt');
+
+import Pagination from 'rc-pagination/lib/locale/pt_PT';
+import DatePicker from '../date-picker/locale/pt_PT';
+import TimePicker from '../time-picker/locale/pt_PT';
+import Calendar from '../calendar/locale/pt_PT';
+
+export default {
+  locale: 'pt',
+  Pagination,
+  DatePicker,
+  TimePicker,
+  Calendar,
+  Table: {
+    filterTitle: 'Filtro',
+    filterConfirm: 'Aplicar',
+    filterReset: 'Reiniciar',
+    emptyText: 'Sem resultados',
+    selectAll: 'Selecionar página atual',
+    selectInvert: 'Inverter seleção',
+  },
+  Modal: {
+    okText: 'OK',
+    cancelText: 'Cancelar',
+    justOkText: 'OK',
+  },
+  Popconfirm: {
+    okText: 'OK',
+    cancelText: 'Cancelar',
+  },
+  Transfer: {
+    notFoundContent: 'Sem resultados',
+    searchPlaceholder: 'Procurar...',
+    itemUnit: 'item',
+    itemsUnit: 'itens',
+  },
+  Select: {
+    notFoundContent: 'Sem resultados',
+  },
+  Upload: {
+    uploading: 'A carregar...',
+    removeFile: 'Remover',
+    uploadError: 'Erro ao carregar',
+    previewFile: 'Pré-visualizar',
+  },
+};

components/mention/demo/async.md

@@ -43,7 +43,7 @@ class AsyncMention extends React.Component {
     const { suggestions, loading } = this.state;
     return (
       <Mention
-        style={{ width: '100%', height: 100 }}
+        style={{ width: '100%' }}
         loading={loading}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}

components/mention/demo/avatar.md

@@ -53,7 +53,7 @@ class CustomNavMention extends React.Component {
     const { suggestions } = this.state;
     return (
       <Mention
-        style={{ width: '100%', height: 100 }}
+        style={{ width: '100%' }}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
       />

components/mention/demo/basic.md

@@ -27,7 +27,7 @@ function onSelect(suggestion) {
 
 ReactDOM.render(
   <Mention
-    style={{ width: '100%', height: 100 }}
+    style={{ width: '100%' }}
     onChange={onChange}
     defaultValue={toContentState('@afc163')}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}

components/mention/demo/controlled.md

@@ -65,7 +65,6 @@ class App extends React.Component {
           })(
             <Mention
               suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
-              style={{ height: 60 }}
             />
           )}
         </FormItem>

components/mention/demo/custom-tag.md

@@ -55,7 +55,7 @@ class CustomNavMention extends React.Component {
     return (
       <Mention
         placeholder="@someone"
-        style={{ width: '100%', height: 100 }}
+        style={{ width: '100%' }}
         suggestions={suggestions}
         onSearchChange={this.onSearchChange}
         onSelect={onSelect}

components/mention/demo/multiple-trigger.md

@@ -45,7 +45,7 @@ class App extends React.Component {
   render() {
     return (
       <Mention
-        style={{ width: '100%', height: 100 }}
+        style={{ width: '100%' }}
         onChange={onChange}
         placeholder="input @ to mention people, # to mention tag"
         prefix={['@', '#']}

components/mention/demo/popupContainer.md

@@ -32,7 +32,7 @@ class PopoverContainer extends React.Component {
   render() {
     const mention = (
       <Mention
-        style={{ width: '100%', height: 100 }}
+        style={{ width: '100%' }}
         onChange={onChange}
         defaultValue={toContentState('@afc163')}
         suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}

components/mention/index.tsx

@@ -80,7 +80,14 @@ export default class Mention extends React.Component<MentionProps, MentionState>
   defaultSearchChange(value: String): void {
     const searchValue = value.toLowerCase();
     const filteredSuggestions = (this.props.suggestions || []).filter(
-      suggestion => suggestion.toLowerCase().indexOf(searchValue) !== -1,
+      suggestion => {
+        if (suggestion.type && suggestion.type === Nav) {
+          return suggestion.props.value ?
+            suggestion.props.value.toLowerCase().indexOf(searchValue) !== -1
+            : true;
+        }
+        return suggestion.toLowerCase().indexOf(searchValue) !== -1;
+      },
     );
     this.setState({
       suggestions: filteredSuggestions,

components/menu/index.zh-CN.md

@@ -36,7 +36,7 @@ subtitle: 导航菜单
 | openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] |  |
 | defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 |  |      |
 | onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | noop |
-| onSelect | 被选中时调 | function({ item, key, selectedKeys }) | 无   |
+| onSelect | 被选中时调用 | function({ item, key, selectedKeys }) | 无   |
 | onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, selectedKeys }) | - |
 | onClick | 点击 MenuItem 调用此函数  | function({ item, key, keyPath }) | - |
 | style | 根节点样式 | object | |

components/modal/demo/async.md

@@ -21,6 +21,7 @@ class App extends React.Component {
   state = {
     ModalText: 'Content of the modal',
     visible: false,
+    confirmLoading: false,
   }
   showModal = () => {
     this.setState({

components/pagination/style/index.less

@@ -250,6 +250,7 @@
   &-simple &-simple-pager {
     display: inline-block;
     margin-right: 8px;
+    height: 24px;
 
     input {
       margin-right: 8px;
@@ -259,7 +260,7 @@
       border: @border-width-base @border-style-base @border-color-base;
       outline: none;
       padding: 0 6px;
-      height: 24px;
+      height: 100%;
       text-align: center;
       transition: border-color .3s;
 
@@ -270,8 +271,9 @@
   }
 }
 
-.@{pagination-prefix-cls}:not(.@{pagination-prefix-cls}-simple) {
-  &.mini &-total-text {
+.@{pagination-prefix-cls} {
+  &.mini &-total-text,
+  &.mini &-simple-pager {
     height: 20px;
     line-height: 20px;
   }

components/select/index.en-US.md

@@ -42,7 +42,7 @@ Select component to select value from options.
 | dropdownMatchSelectWidth | Whether dropdown's with is same with select. | boolean | true |
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
 | optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
-| size    | Size of Select input. `large` `small`  | string      |      default      |
+| size    | Size of Select input. `default` `large` `small`  | string      |      default      |
 | showSearch | Whether show search input in single mode.| boolean | false |
 | disabled | Whether disabled select | boolean | false |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |

components/select/style/index.less

@@ -235,6 +235,14 @@
     left: 8px;
   }
 
+  &-search__field__mirror {
+    position: absolute;
+    top: 0;
+    left: -9999px;
+    white-space: pre;
+    pointer-events: none;
+  }
+
   &-search--inline {
     position: absolute;
     height: 100%;
@@ -258,14 +266,7 @@
       background: transparent;
       outline: 0;
       border-radius: @border-radius-base;
-    }
-
-    .@{select-prefix-cls}-search__field__mirror {
-      position: absolute;
-      top: 0;
-      left: -9999px;
-      white-space: pre;
-      pointer-events: none;
+      line-height: 1;
     }
 
     > i {

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -23,6 +23,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:30%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -49,6 +50,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
       class="ant-slider-handle ant-slider-handle-1"
       role="slider"
       style="left:20%;"
+      tabindex="0"
     />
     <div
       aria-disabled="false"
@@ -58,6 +60,7 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
       class="ant-slider-handle ant-slider-handle-2"
       role="slider"
       style="left:50%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -98,6 +101,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:30%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -124,6 +128,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
       class="ant-slider-handle ant-slider-handle-1"
       role="slider"
       style="left:20%;"
+      tabindex="0"
     />
     <div
       aria-disabled="false"
@@ -133,6 +138,7 @@ exports[`renders ./components/slider/demo/event.md correctly 1`] = `
       class="ant-slider-handle ant-slider-handle-2"
       role="slider"
       style="left:50%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -169,6 +175,7 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:0%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -209,6 +216,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
           class="ant-slider-handle"
           role="slider"
           style="left:0%;"
+          tabindex="0"
         />
         <div
           class="ant-slider-mark"
@@ -296,6 +304,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
           class="ant-slider-handle"
           role="slider"
           style="left:0%;"
+          tabindex="0"
         />
         <div
           class="ant-slider-mark"
@@ -402,6 +411,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:37%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -472,6 +482,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       class="ant-slider-handle ant-slider-handle-1"
       role="slider"
       style="left:26%;"
+      tabindex="0"
     />
     <div
       aria-disabled="false"
@@ -481,6 +492,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       class="ant-slider-handle ant-slider-handle-2"
       role="slider"
       style="left:37%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -554,6 +566,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:37%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -627,6 +640,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:37%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -700,6 +714,7 @@ exports[`renders ./components/slider/demo/mark.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:37%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -758,6 +773,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:0%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -784,6 +800,7 @@ exports[`renders ./components/slider/demo/tip-formatter.md correctly 1`] = `
       class="ant-slider-handle"
       role="slider"
       style="left:0%;"
+      tabindex="0"
     />
     <div
       class="ant-slider-mark"
@@ -820,6 +837,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-handle"
         role="slider"
         style="bottom:30%;"
+        tabindex="0"
       />
       <div
         class="ant-slider-mark"
@@ -850,6 +868,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-handle ant-slider-handle-1"
         role="slider"
         style="bottom:20%;"
+        tabindex="0"
       />
       <div
         aria-disabled="false"
@@ -859,6 +878,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-handle ant-slider-handle-2"
         role="slider"
         style="bottom:50%;"
+        tabindex="0"
       />
       <div
         class="ant-slider-mark"
@@ -906,6 +926,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-handle ant-slider-handle-1"
         role="slider"
         style="bottom:26%;"
+        tabindex="0"
       />
       <div
         aria-disabled="false"
@@ -915,6 +936,7 @@ exports[`renders ./components/slider/demo/vertical.md correctly 1`] = `
         class="ant-slider-handle ant-slider-handle-2"
         role="slider"
         style="bottom:37%;"
+        tabindex="0"
       />
       <div
         class="ant-slider-mark"

components/style/core/iconfont.less

@@ -1,5 +1,7 @@
+@import '../themes/default';
+@import "../mixins/iconfont";
+
 // font-face
-// @icon-url： 字体源文件的地址
 @font-face {
   font-family: 'anticon';
   src: url('@{icon-url}.eot'); /* IE9*/

components/style/themes/default.less

@@ -142,9 +142,12 @@
 
 @btn-group-border       : @primary-7;
 
+// Checkbox
+@checkbox-size          : 14px;
+
 // Radio buttons
-@radio-button-bg           : @btn-default-bg;
-@radio-button-color        : @btn-default-color;
+@radio-button-bg        : @btn-default-bg;
+@radio-button-color     : @btn-default-color;
 
 // Media queries breakpoints
 // Extra small screen / phone
@@ -223,7 +226,7 @@
 @input-padding-vertical-base : 4px;
 @input-padding-vertical-sm   : 1px;
 @input-padding-vertical-lg   : 6px;
-@input-placeholder-color     : @disabled-color;
+@input-placeholder-color     : hsv(0, 0, 75%);
 @input-color                 : @text-color;
 @input-border-color          : @border-color-base;
 @input-bg                    : #fff;

components/table/Table.tsx

@@ -86,7 +86,7 @@ export interface TableProps<T> {
   showHeader?: boolean;
   footer?: (currentPageData: Object[]) => React.ReactNode;
   title?: (currentPageData: Object[]) => React.ReactNode;
-  scroll?: { x?: boolean | number, y?: boolean | number};
+  scroll?: { x?: boolean | number | string, y?: boolean | number | string };
   childrenColumnName?: string;
   bodyStyle?: React.CSSProperties;
   className?: string;
@@ -552,7 +552,12 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
       selectionDirty: true,
     });
     // when select custom selection, callback selections[n].onSelect
-    if (index > 1 && typeof onSelectFunc === 'function') {
+    const { rowSelection } = this.props;
+    let customSelectionStartIndex = 2;
+    if (rowSelection && rowSelection.hideDefaultSelections) {
+      customSelectionStartIndex = 0;
+    }
+    if (index >= customSelectionStartIndex && typeof onSelectFunc === 'function') {
       return onSelectFunc(changeableRowKeys);
     }
     this.setSelectedRowKeys(selectedRowKeys, {

components/table/__tests__/Table.rowSelection.test.js

@@ -252,6 +252,33 @@ describe('Table.rowSelection', () => {
     expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2);
   });
 
+  it('handle custom selection onSelect correctly when hide default selection options', () => {
+    const handleSelectOdd = jest.fn();
+    const handleSelectEven = jest.fn();
+    const rowSelection = {
+      hideDefaultSelections: true,
+      selections: [{
+        key: 'odd',
+        text: '奇数项',
+        onSelect: handleSelectOdd,
+      }, {
+        key: 'even',
+        text: '偶数项',
+        onSelect: handleSelectEven,
+      }],
+    };
+    const wrapper = mount(createTable({ rowSelection }));
+
+    const dropdownWrapper = mount(wrapper.find('Trigger').node.getComponent());
+    expect(dropdownWrapper.find('.ant-dropdown-menu-item').length).toBe(2);
+
+    dropdownWrapper.find('.ant-dropdown-menu-item > div').at(0).simulate('click');
+    expect(handleSelectOdd).toBeCalledWith([0, 1, 2, 3]);
+
+    dropdownWrapper.find('.ant-dropdown-menu-item > div').at(1).simulate('click');
+    expect(handleSelectEven).toBeCalledWith([0, 1, 2, 3]);
+  });
+
   // https://github.com/ant-design/ant-design/issues/4245
   it('handles disabled checkbox correctly when dataSource changes', () => {
     const rowSelection = {

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -3574,7 +3574,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
           >
             <div
               class="ant-table-body"
-              style="overflow-x:auto;"
+              style="overflow-x:auto;-webkit-transform:translate3d (0, 0, 0);"
             >
               <table
                 class="ant-table-fixed"
@@ -3828,6 +3828,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
           >
             <div
               class="ant-table-body-outer"
+              style="-webkit-transform:translate3d (0, 0, 0);"
             >
               <div
                 class="ant-table-body-inner"
@@ -3912,6 +3913,7 @@ exports[`renders ./components/table/demo/fixed-columns.md correctly 1`] = `
           >
             <div
               class="ant-table-body-outer"
+              style="-webkit-transform:translate3d (0, 0, 0);"
             >
               <div
                 class="ant-table-body-inner"
@@ -4158,7 +4160,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
             </div>
             <div
               class="ant-table-body"
-              style="overflow-x:auto;max-height:300px;overflow-y:scroll;"
+              style="overflow-x:auto;-webkit-transform:translate3d (0, 0, 0);max-height:300px;overflow-y:scroll;"
             >
               <table
                 class="ant-table-fixed"
@@ -4915,6 +4917,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
             </div>
             <div
               class="ant-table-body-outer"
+              style="-webkit-transform:translate3d (0, 0, 0);"
             >
               <div
                 class="ant-table-body-inner"
@@ -5150,6 +5153,7 @@ exports[`renders ./components/table/demo/fixed-columns-header.md correctly 1`] =
             </div>
             <div
               class="ant-table-body-outer"
+              style="-webkit-transform:translate3d (0, 0, 0);"
             >
               <div
                 class="ant-table-body-inner"
@@ -6864,7 +6868,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
             </div>
             <div
               class="ant-table-body"
-              style="overflow-x:auto;max-height:240px;overflow-y:scroll;"
+              style="overflow-x:auto;-webkit-transform:translate3d (0, 0, 0);max-height:240px;overflow-y:scroll;"
             >
               <table
                 class="ant-table-fixed"
@@ -7415,6 +7419,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
             </div>
             <div
               class="ant-table-body-outer"
+              style="-webkit-transform:translate3d (0, 0, 0);"
             >
               <div
                 class="ant-table-body-inner"
@@ -7598,6 +7603,7 @@ exports[`renders ./components/table/demo/grouping-columns.md correctly 1`] = `
             </div>
             <div
               class="ant-table-body-outer"
+              style="-webkit-transform:translate3d (0, 0, 0);"
             >
               <div
                 class="ant-table-body-inner"

components/table/__tests__/__snapshots__/empty.test.js.snap

@@ -375,6 +375,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
           >
             <div
               class="ant-table-body-outer"
+              style="-webkit-transform:translate3d (0, 0, 0);"
             >
               <div
                 class="ant-table-body-inner"
@@ -422,6 +423,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
           >
             <div
               class="ant-table-body-outer"
+              style="-webkit-transform:translate3d (0, 0, 0);"
             >
               <div
                 class="ant-table-body-inner"

components/table/index.en-US.md

@@ -5,7 +5,7 @@ type: Data Display
 title: Table
 ---
 
-A table displays rows data.
+A table displays rows of data.
 
 ## When To Use
 
@@ -52,89 +52,89 @@ const columns = [{
 
 | Property      | Description              | Type            | Default      |
 |---------------|--------------------------|-----------------|--------------|
-| rowSelection  | row selection [config](#rowSelection)  | object  | null  |
-| pagination    | pagination [config](/components/pagination/), hide it by setting it to `false` | object |  |
-| size          | size of table: `default`, `middle` or `small`  | string | `default` |
-| dataSource    | data record array to be rendered | any[] |            |
-| columns       | columns of table | [ColumnProps](https://git.io/vMMXC)[] | - |
-| rowKey        | get row's key, could be a string or function that returns a string | string\|Function(record):string | 'key' |
-| rowClassName  | get row's className | Function(record, index):string | - |
-| expandedRowRender  | expanded container render for each row | Function | - |
-| defaultExpandedRowKeys | initial expanded row keys | string[] | - |
-| expandedRowKeys | current expanded rows keys | string[] | - |
-| defaultExpandAllRows | expand all rows initially | boolean | false |
-| onExpandedRowsChange | function to call when the expanded rows change | Function(expandedRows) | |
-| onExpand      | function to call when click expand icon | Function(expanded, record) | |
-| onChange      | callback that is called when pagination, filters, sorter is changed | Function(pagination, filters, sorter) |  |
-| loading       | loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |
-| locale        | i18n text include filter, sort, empty text...etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
-| indentSize    | indent size in pixels of tree data | number   | 15 |
-| onRowClick    | callback that is called when a row is clicked | Function(record, index, event)   | - |
-| onRowDoubleClick| callback that is called when a row is double clicked | Function(record, index, event)   | - |
-| onRowMouseEnter | callback that is called when mouse enter a row | Function(record, index, event)   | - |
-| onRowMouseLeave | callback that is called when mouse leave a row | Function(record, index, event)   | - |
-| bordered  | whether to show all table borders | boolean | false      |
-| showHeader  | whether to show table header | boolean          | true      |
-| footer | table footer renderer      | Function(currentPageData)   | |
-| title  | table title renderer       | Function(currentPageData)   | |
-| scroll | whether table can be scroll in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object   | -  |
+| rowSelection  | Row selection [config](#rowSelection)  | object  | null  |
+| pagination    | Pagination [config](/components/pagination/), hide it by setting it to `false` | object |  |
+| size          | Size of table  | `default` \| `middle` \| `small` | `default` |
+| dataSource    | Data record array to be displayed | any[] | - |
+| columns       | Columns of table | [ColumnProps](https://git.io/vMMXC)[] | - |
+| rowKey        | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
+| rowClassName  | Row's className | Function(record, index):string | - |
+| expandedRowRender  | Expanded container render for each row | Function | - |
+| defaultExpandedRowKeys | Initial expanded row keys | string[] | - |
+| expandedRowKeys | Current expanded row keys | string[] | - |
+| defaultExpandAllRows | Expand all rows initially | boolean | `false` |
+| onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | |
+| onExpand      | Callback executed when the row expand icon is clicked | Function(expanded, record) | |
+| onChange      | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) |  |
+| loading       | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
+| locale        | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
+| indentSize    | Indent size in pixels of tree data | number   | 15 |
+| onRowClick    | Callback executed when a row is clicked | Function(record, index, event)   | - |
+| onRowDoubleClick| Callback executed when a row is double clicked | Function(record, index, event)   | - |
+| onRowMouseEnter | Callback executed when mouse enters a row | Function(record, index, event)   | - |
+| onRowMouseLeave | Callback executed when mouse leaves a row | Function(record, index, event)   | - |
+| bordered  | Whether to show all table borders | boolean | `false`      |
+| showHeader  | Whether to show table header | boolean          | `true`      |
+| footer | Table footer renderer      | Function(currentPageData)   | |
+| title  | Table title renderer       | Function(currentPageData)   | |
+| scroll | Whether table can be scrolled in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object   | - |
 
 ### Column
 
-One of Property `columns` for describing column, Column has the same API.
+One of the Table `columns` prop for describing the table's columns, Column has the same API.
 
 | Property      | Description              | Type            |  Default     |
 |---------------|--------------------------|-----------------|--------------|
-| title      | title of this column        | string\|ReactNode | - |
-| key        | key of this column, you can ignore this prop if you've set a unique `dataIndex` | string          | - |
-| dataIndex  | display field of the data record, could be set like `a.b.c` | string | - |
-| render     | renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
-| filters    | filter menu config        | object[]       | - |
-| onFilter   | callback that is called when when confirm filter button is clicked | Function | - |
-| filterMultiple | whether to select multiple filtered item | boolean    | true    |
-| filterDropdown | customized filter overlay | ReactNode | - |
-| filterDropdownVisible | whether filterDropdown is visible | boolean | - |
-| onFilterDropdownVisibleChange | called when filterDropdownVisible is changed | function(visible) {} | - |
-| filteredValue | controlled filtered value, filter icon will highlight. | string[] | - |
-| filtered | whether the dataSource is filtered | boolean | false |
-| filterIcon | customized filter icon | ReactNode | false |
-| sorter     | sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
-| colSpan    | span of this column's title | number |         |
-| width      | width of this column | string\|number | -  |
+| title      | Title of this column        | string\|ReactNode | - |
+| key        | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string  | - |
+| dataIndex  | Display field of the data record, could be set like `a.b.c` | string | - |
+| render     | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
+| filters    | Filter menu config        | object[]       | - |
+| onFilter   | Callback executed when the confirm filter button is clicked | Function | - |
+| filterMultiple | Whether multiple filters can be selected | boolean    | `true`    |
+| filterDropdown | Customized filter overlay | ReactNode | - |
+| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |
+| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |
+| filteredValue | Controlled filtered value, filter icon will highlight | string[] | - |
+| filtered | Whether the `dataSource` is filtered | boolean | `false` |
+| filterIcon | Customized filter icon | ReactNode | `false` |
+| sorter     | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
+| colSpan    | Span of this column's title | number |         |
+| width      | Width of this column | string\|number | -  |
 | className  | className of this column            | string          |  -      |
-| fixed      | set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | false |
-| sortOrder | order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
-| onCellClick | callback when click cell | Function(record, event) | - |
+| fixed      | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
+| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
+| onCellClick | Callback executed when table cell is clicked | Function(record, event) | - |
 
 ### ColumnGroup
 
 | Property      | Description              | Type            |  Default     |
 |---------------|--------------------------|-----------------|--------------|
-| title      | title of the column group   | string\|ReactNode | - |
+| title      | Title of the column group   | string\|ReactNode | - |
 
 ### rowSelection
 
-Properties for selection.
+Properties for row selection.
 
 | Property      | Description              | Type            |  Default     |
 |---------------|--------------------------|-----------------|--------------|
-| type | `checkbox` or `radio` | string | `checkbox`  |
-| selectedRowKeys | controlled selected row keys | string[] | []  |
-| onChange | callback that is called when selected rows change | Function(selectedRowKeys, selectedRows) | -   |
-| getCheckboxProps | get Checkbox or Radio props | Function(record) |  -   |
-| onSelect | callback that is called when select/deselect one row | Function(record, selected, selectedRows) |   -   |
-| onSelectAll | callback that is called when select/deselect all | Function(selected, selectedRows, changeRows) |   -   |
-| onSelectInvert | callback that is called when select invert | Function(selectedRows) | - |
-| selections | custom selection [config](#rowSelection), only displays default selections when set to `true` | object[]\|boolean | - |
-| hideDefaultSelections | remove the default `Select All` and `Select invert` selections | boolean | false |
+| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox`  |
+| selectedRowKeys | Controlled selected row keys | string[] | []  |
+| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | -   |
+| getCheckboxProps | Get Checkbox or Radio props | Function(record) |  -   |
+| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows) |   -   |
+| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) |   -   |
+| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - |
+| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object[]\|boolean | - |
+| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` |
 
 ### selection
 
 | Property      | Description              | Type            |  Default     |
 |---------------|--------------------------|-----------------|--------------|
-| key | key of this selection | string | -  |
-| text | display text of this selection | string\|React.ReactNode | -  |
-| onSelect | callback when this selection is clicked | Function(changeableRowKeys) | -   |
+| key | Unique key of this selection | string | -  |
+| text | Display text of this selection | string\|React.ReactNode | -  |
+| onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | -   |
 
 ## Using in TypeScript
 

components/table/style/index.less

@@ -202,7 +202,7 @@
   }
 
   &-middle {
-    .@{table-prefix-cls}-thead > tr > th:not(.@{table-prefix-cls}-selection-column),
+    .@{table-prefix-cls}-thead > tr > th,
     .@{table-prefix-cls}-tbody > tr > td {
       padding: 10px 8px;
     }
@@ -298,7 +298,6 @@
     margin-left: 4px;
     display: inline-block;
     width: 14px;
-    height: 1em;
     vertical-align: middle;
     text-align: center;
 
@@ -307,6 +306,7 @@
       line-height: 4px;
       display: block;
       width: 14px;
+      height: 6px;
       cursor: pointer;
       &:hover .@{iconfont-css-prefix} {
         color: @text-color;
@@ -462,7 +462,7 @@
       }
 
       &-item > label + span {
-        padding: 0;
+        padding-right: 0;
       }
 
       &-sub {

components/tabs/index.en-US.md

@@ -9,7 +9,7 @@ Tabs make it easy to switch between different views.
 
 ### When To Use
 
-Ant Design has 3 types Tabs for different situation.
+Ant Design has 3 types of Tabs for different situations.
 
 - Card Tabs: for managing too many closeable views.
 - Normal Tabs: for functional aspects of a page.
@@ -21,23 +21,24 @@ Ant Design has 3 types Tabs for different situation.
 
 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| activeKey    | Current TabPane's key| string   | _             |
-| defaultActiveKey | Default actived tabPanel's key, if activeKey is not setted. | - |
-| onChange     | Callback when tab is switched | Function | - |
-| onTabClick   | Callback when tab is clicked | Function | - |
-| onPrevClick  | Callback when prev button is clicked | Function | 无 |
-| onNextClick  | Callback when next button is clicked | Function | 无 |
-| tabBarExtraContent | Extra element in tab bar | React.ReactNode | - |
-| tabBarStyle  | tar bar style object           | object   | -        |
-| type         | Basic style of tabs. Options: line, card & editable-card | string | line |
-| size         | Tab bar size. Options: default, small. Only works while `type="line"`. | string | default |
-| tabPosition  | Position of tabs. Options: top, right, bottom & left | string | top |
-| onEdit       | Callback when tab is added or removed, which is executing when set type as editable-card | (targetKey, action): void | - |
-| hideAdd      | Hide plus icon or not, which is effective when set type as editable-card | boolean | false |
-| animated | Whether to change tabs with animation, this property only works with `tabPosition=top|bottom` | boolean \| {inkBar:boolean, tabPane:boolean} | true, false when type="card" |
+| activeKey    | Current TabPane's key| string   | - |
+| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - |
+| onChange     | Callback executed when active tab is changed | Function | - |
+| onTabClick   | Callback executed when tab is clicked | Function | - |
+| onPrevClick  | Callback executed when prev button is clicked | Function | - |
+| onNextClick  | Callback executed when next button is clicked | Function | - |
+| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |
+| tabBarStyle  | Tab bar style object           | object   | - |
+| type         | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
+| size         | Tab bar size. Only works while `type="line"`. | `default` \| `small` | `default` |
+| tabPosition  | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
+| onEdit       | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | - |
+| hideAdd      | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |
+| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |
 
 ### Tabs.TabPane
 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| key          | TabPane's key         | string   | _            |
-| tab          | Show text in TabPane's head | string\|ReactNode | _ |
+| key          | TabPane's key         | string   | - |
+| tab          | Show text in TabPane's head | string\|ReactNode | - |
+| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |

components/tabs/index.zh-CN.md

@@ -31,7 +31,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | onPrevClick      | prev 按钮被点击的回调                         | Function | 无            |
 | onNextClick      | next 按钮被点击的回调                         | Function | 无            |
 | tabBarExtraContent | tab bar 上额外的元素                       | React.ReactNode | 无          |
-| tabBarStyle      | tar bar 的样式对象                           | object   | -             |
+| tabBarStyle      | tab bar 的样式对象                           | object   | -             |
 | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型   | string   | 'line'      |
 | size | 大小，提供 `default` 和 `small` 两种大小，仅当 `type="line"` 时生效。  | string   | 'default'      |
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left`  | string   | 'top'      |
@@ -45,3 +45,4 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 |------|------------------|-------------------------|--------|
 | key  | 对应 activeKey   | string                  | 无     |
 | tab  | 选项卡头显示文字 | string\|ReactNode | 无     |
+| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |

components/tag/index.en-US.md

@@ -4,13 +4,13 @@ type: Data Display
 title: Tag
 ---
 
-Tag for categorizing or markuping.
+Tag for categorizing or markup.
 
 ## When To Use
 
 - It can be used to tag by dimension or property.
 
-- categorizing
+- When categorizing.
 
 ## API
 
@@ -18,14 +18,14 @@ Tag for categorizing or markuping.
 
 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| color        | The color of Tag      | string | - |
-| closable     | Tag can be closed.    | boolean  | false        |
-| onClose      | Callback when tag was closed | (e) => void | - |
-| afterClose   | Callback when closed animation is complete | () => void | - |
+| color        | Color of the Tag      | string | - |
+| closable     | Whether Tag can be closed    | boolean  | `false`        |
+| onClose      | Callback executed when tag is closed | (e) => void | - |
+| afterClose   | Callback executed when close animation is completed | () => void | - |
 
 ### Tag.CheckableTag
 
 | Property     | Description           | Type     | Default      |
 |--------------|-----------------------|----------|--------------|
-| checked      | To set the checked status for Tag | boolean | false |
-| onChange     | A callback which will be called while Tag is clicked | (checked) => void | - |
+| checked      | Checked status of Tag | boolean | `false` |
+| onChange     | Callback executed when Tag is checked/unchecked | (checked) => void | - |

components/time-picker/locale/pt_PT.tsx

@@ -0,0 +1,5 @@
+const locale = {
+  placeholder: 'Hora',
+};
+
+export default locale;

components/timeline/index.en-US.md

@@ -8,7 +8,7 @@ Vertical display timeline.
 
 ## When To Use
 
-- When a series of information need to be ordered from top to bottom by time.
+- When a series of information needs to be ordered from top to bottom by time.
 - When you need a timeline to make a visual connection.
 
 ## API
@@ -28,7 +28,7 @@ Timeline
 
 | Property      | Description                                     | Type       | Default |
 |----------|----------------------------------------|------------|-------|
-| pending  | to set the last ghost node's existence or its content | boolean\|string\|ReactNode | false  |
+| pending  | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false`  |
 
 ### Timeline.Item
 
@@ -36,5 +36,5 @@ Node of timeline
 
 | Property      | Description                                     | Type       | Default |
 |----------|------------------------------------------|------------|-------|
-| color   | to set the circle's color to `blue, red, green` or other custom colors | string | blue  |
-| dot   | custom timeline dot | string\|ReactNode | -  |
+| color   | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
+| dot   | Customize timeline dot | string\|ReactNode | -  |

components/tooltip/index.en-US.md

@@ -8,14 +8,14 @@ A simple text popup tip.
 
 ## When To Use
 
-- The tip shows while mouse enter, and hides while mouse leave. The Tooltip doesn't support complex text and operation.
-- It can provide an explanation of `button/text/operation` that can cover the usage of the default system `title`.
+- The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
+- To provide an explanation of a `button/text/operation`. It's often used instead of the html `title` attribute.
 
 ## API
 
 | Property      | Description                                     | Type       | Default |
 |-----------|------------------------------------------|------------|--------|
-| title     | prompt text                                 | string/React.Element | -     |
+| title     | The text shown in the tooltip            | string\|React.Element | -     |
 
 ### Common API
 
@@ -23,19 +23,19 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 
 | Property      | Description                                     | Type       | Default |
 |-----------|------------------------------------------|------------|--------|
-| placement | to set the position, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string     | top    |
-| getPopupContainer | to set the container of the tip, while the default is to create a `div` element in `body`. Use `getTooltipContainer` if you are using `antd@<2.5.2` | Function(triggerNode) | () => document.body |
-| arrowPointAtCenter | whether arrow pointed at the center of target, supported after `antd@1.11+` | boolean | `false` |
-| autoAdjustOverflow | whether adjust popup placement automatically when popup is invisible | boolean | `true` |
-| visible   | make the float card visible or not                     | boolean       | false  |
-| onVisibleChange | callback of the visible attribute changed            | (visible) => void | none     |
-| mouseEnterDelay | delay time to show when mouse enter.unit: s | number | 0 |
-| mouseLeaveDelay | delay time to hide when mouse leave.unit: s | number | 0.1 |
-| trigger | triggering mode: can be hover, focus, or click. | string | hover |
-| overlayClassName | class name of the card                            | string | none     |
-| overlayStyle | style of the card                            | object | none    |
+| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom`                             | string     | `top`    |
+| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. Use `getTooltipContainer` if you are using `antd@<2.5.2` | Function(triggerNode) | () => document.body |
+| arrowPointAtCenter | Whether the arrow is pointed at the center of target, supported after `antd@1.11+` | boolean | `false` |
+| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
+| visible   | Whether the floating tooltip card is visible or not          | boolean       | `false`  |
+| onVisibleChange | Callback executed when visibility of the tooltip card is changed  | (visible) => void | - |
+| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 |
+| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
+| trigger | Tooltip trigger mode                                         | `hover` \| `focus` \| `click` | `hover` |
+| overlayClassName | Class name of the tooltip card                            | string | - |
+| overlayStyle | Style of the tooltip card                            | object | - |
 
 
 ## Note
 
-Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` event.
+Please ensure that the child node of `Tooltip` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.

components/tree/__tests__/__snapshots__/demo.test.js.snap

@@ -4,7 +4,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
 <ul
   class="ant-tree"
   role="tree-node"
-  unselectable="true"
+  unselectable="on"
 >
   <li
     class=""
@@ -176,7 +176,7 @@ exports[`renders ./components/tree/demo/basic-controlled.md correctly 1`] = `
 <ul
   class="ant-tree"
   role="tree-node"
-  unselectable="true"
+  unselectable="on"
 >
   <li
     class=""
@@ -488,7 +488,7 @@ exports[`renders ./components/tree/demo/customized-icon.md correctly 1`] = `
 <ul
   class="ant-tree ant-tree-show-line"
   role="tree-node"
-  unselectable="true"
+  unselectable="on"
 >
   <li
     class=""
@@ -652,7 +652,7 @@ exports[`renders ./components/tree/demo/draggable.md correctly 1`] = `
 <ul
   class="ant-tree draggable-tree"
   role="tree-node"
-  unselectable="true"
+  unselectable="on"
 >
   <li
     class=""
@@ -842,7 +842,7 @@ exports[`renders ./components/tree/demo/dynamic.md correctly 1`] = `
 <ul
   class="ant-tree"
   role="tree-node"
-  unselectable="true"
+  unselectable="on"
 >
   <li
     class=""
@@ -902,7 +902,7 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
 <ul
   class="ant-tree ant-tree-show-line"
   role="tree-node"
-  unselectable="true"
+  unselectable="on"
 >
   <li
     class=""
@@ -1058,7 +1058,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
   <ul
     class="ant-tree"
     role="tree-node"
-    unselectable="true"
+    unselectable="on"
   >
     <li
       class=""

components/tree/style/index.less

@@ -193,7 +193,7 @@
       height: 100%;
       position: absolute;
       left: 12px;
-      margin: 18px 0;
+      margin: 22px 0;
     }
   }
 }

components/upload/Upload.tsx

@@ -218,6 +218,17 @@ export default class Upload extends React.Component<UploadProps, any> {
     });
   }
 
+  beforeUpload = (file, fileList) => {
+    if (this.props.beforeUpload && !this.props.beforeUpload(file, fileList)) {
+      this.onChange({
+        file,
+        fileList,
+      });
+      return false;
+    }
+    return true;
+  }
+
   clearProgressTimer() {
     clearInterval(this.progressTimer);
   }
@@ -234,6 +245,7 @@ export default class Upload extends React.Component<UploadProps, any> {
       onProgress: this.onProgress,
       onSuccess: this.onSuccess,
       ...this.props,
+      beforeUpload: this.beforeUpload,
     };
 
     delete rcUploadProps.className;

components/upload/UploadList.tsx

@@ -26,7 +26,7 @@ export default class UploadList extends React.Component<UploadListProps, any> {
   };
 
   handleClose = (file: UploadFile) => {
-    const onRemove = this.props.onRemove;
+    const { onRemove } = this.props;
     if (onRemove) {
       onRemove(file);
     }

docs/react/getting-started.en-US.md

@@ -94,7 +94,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
 
 ### 4. Development & Debugging
 
-Run your project and visit http://127.0.0.1:8000
+Run your project and visit http://127.0.0.1:8001
 
 ```bash
 $ npm start
@@ -186,6 +186,8 @@ import { Button } from 'antd';
 
 And this plugin can load styles too, read [usage](https://github.com/ant-design/babel-plugin-import#usage) for more details.
 
+> FYI, babel-plugin-import's `style` option will importing some global reset styles, don't use it if you don't need those styles. You can import styles manually via `import 'antd/dist/antd.css'` and override the global reset styles.
+
 ## Customization
 
 - [Customize Theme](/docs/react/customize-theme)

docs/react/getting-started.zh-CN.md

@@ -93,7 +93,7 @@ ReactDOM.render(<App />, document.getElementById('root'));
 
 ### 4. 开发调试
 
-一键启动调试，访问 http://127.0.0.1:8000 查看效果。
+一键启动调试，访问 http://127.0.0.1:8001 查看效果。
 
 ```bash
 $ npm start
@@ -184,6 +184,8 @@ import { Button } from 'antd';
 
 插件会帮你转换成 `antd/lib/xxx` 的写法。另外此插件配合 [style](https://github.com/ant-design/babel-plugin-import#usage) 属性可以做到模块样式的按需自动加载。
 
+> 注意，babel-plugin-import 的 `style` 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 `import 'antd/dist/antd.css` 手动引入，并覆盖全局样式。
+
 ## 配置主题和字体
 
 - [改变主题](/docs/react/customize-theme)

docs/react/i18n.en-US.md

@@ -40,6 +40,7 @@ Supported languages:
 |French (Belgium)|fr_BE|
 |French (France)|fr_FR|
 |German|de_DE|
+|Greek|el_GR|
 |Italian|it_IT|
 |Japanese|ja_JP|
 |Korean|ko_KR|
@@ -47,6 +48,7 @@ Supported languages:
 |Persian|fa_IR|
 |Polish|pl_PL|
 |Portuguese (Brazil)|pt_BR|
+|Portuguese|pt_PT|
 |Russian|ru_RU|
 |Serbian|sr_RS|
 |Slovak|sk_SK|

docs/react/i18n.zh-CN.md

@@ -38,6 +38,7 @@ return (
 |比利时法语|fr_BE|
 |法语|fr_FR|
 |德语|de_DE|
+|希腊语|el_GR|
 |意大利语|it_IT|
 |日语|ja_JP|
 |韩语/朝鲜语|ko_KR|
@@ -52,7 +53,7 @@ return (
 |瑞典语|sv_SE|
 |土耳其语|tr_TR|
 |越南语|vi_VN|
-|泰国语言|th_TH|
+|泰语|th_TH|
 
 具体的使用方法和新语言包贡献方式请参考 [LocaleProvider 文档](/components/locale-provider)。
 

docs/react/recommendation.en-US.md

@@ -24,6 +24,7 @@ i18n | [react-intl](https://github.com/yahoo/react-intl)
 Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter)
 Markdown renderer | [react-markdown](http://rexxars.github.io/react-markdown/)
 Infinite Scroll | [react-virtualized](https://github.com/bvaughn/react-virtualized)
+Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap)
 
 <style>
 .markdown table td:first-child {

docs/react/recommendation.zh-CN.md

@@ -24,6 +24,7 @@ title: 社区精选组件
 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter)
 Markdown 渲染 | [react-markdown](http://rexxars.github.io/react-markdown/)
 无限滚动 | [react-virtualized](https://github.com/bvaughn/react-virtualized)
+地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap)
 
 <style>
 .markdown table td:first-child {

docs/spec/introduce.en-US.md

@@ -27,9 +27,7 @@ We supply a series of design principles, practical patterns and high quality des
 
 - [Ant Design of React](/docs/react/introduce) (official implementation)
 - <div class="outside-link"><a href="http://ng.ant.design" target="_blank">NG-ZORRO - Ant Design of Angular</a></div>
-- <div class="outside-link"><a href="https://github.com/iview/iview/" target="_blank">iView (vue)</a></div>
 - <div class="outside-link"><a href="https://github.com/FE-Driver/vue-beauty" target="_blank">vue-beauty</a></div>
-- <div class="outside-link"><a href="https://github.com/aliqin/atui" target="_blank">ATUI (vue)</a></div>
 - <div class="outside-link"><a href="https://github.com/priornix/antizer" target="_blank">antizer (ClojureScript)</a></div>
 - <div class="outside-link"><a href="https://github.com/idcos/antd-ember" target="_blank">antd-ember</a></div>
 

docs/spec/introduce.zh-CN.md

@@ -27,9 +27,7 @@ Ant Design 是一个致力于提升『用户』和『设计者』使用体验的
 
 - [Ant Design of React](/docs/react/introduce)（官方实现）
 - <div class="outside-link"><a href="http://ng.ant.design" target="_blank">NG-ZORRO - Ant Design of Angular</a></div>
-- <div class="outside-link"><a href="https://github.com/iview/iview/" target="_blank">iView (vue)</a></div>
 - <div class="outside-link"><a href="https://github.com/FE-Driver/vue-beauty" target="_blank">vue-beauty</a></div>
-- <div class="outside-link"><a href="https://github.com/aliqin/atui" target="_blank">ATUI (vue)</a></div>
 - <div class="outside-link"><a href="https://github.com/priornix/antizer" target="_blank">antizer (ClojureScript)</a></div>
 - <div class="outside-link"><a href="https://github.com/idcos/antd-ember" target="_blank">antd-ember</a></div>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "2.13.2",
+  "version": "2.13.4",
   "title": "Ant Design",
   "description": "An enterprise-class UI design language and React-based implementation",
   "homepage": "http://ant.design/",
@@ -49,7 +49,7 @@
     "moment": "^2.18.1",
     "omit.js": "^1.0.0",
     "prop-types": "^15.5.7",
-    "rc-animate": "^2.3.6",
+    "rc-animate": "^2.4.1",
     "rc-calendar": "~9.0.0",
     "rc-cascader": "~0.11.3",
     "rc-checkbox": "~2.0.3",
@@ -65,7 +65,7 @@
     "rc-progress": "~2.2.2",
     "rc-rate": "~2.1.1",
     "rc-select": "~6.9.0",
-    "rc-slider": "~8.2.0",
+    "rc-slider": "~8.3.0",
     "rc-steps": "~2.5.1",
     "rc-switch": "~1.5.1",
     "rc-table": "~5.6.9",
@@ -123,6 +123,8 @@
     "mockdate": "^2.0.1",
     "moment-timezone": "^0.5.5",
     "pre-commit": "^1.2.2",
+    "preact": "^8.2.5",
+    "preact-compat": "^3.17.0",
     "querystring": "^0.2.0",
     "rc-queue-anim": "^1.0.1",
     "rc-scroll-anim": "^1.0.3",
@@ -160,9 +162,10 @@
     "dist": "antd-tools run dist",
     "compile": "antd-tools run compile",
     "tsc": "tsc",
-    "start": "cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js --no-livereload",
+    "start": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development bisheng start -c ./site/bisheng.config.js --no-livereload",
+    "start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js --no-livereload",
     "site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js",
-    "deploy": "antd-tools run clean && npm run site && bisheng gh-pages --push-only",
+    "deploy": "antd-tools run clean && npm run site && node ./scripts/generateColorLess.js && bisheng gh-pages --push-only",
     "pub": "antd-tools run pub",
     "prepublish": "antd-tools run guard",
     "pre-publish": "npm run test-all && node ./scripts/prepub",

scripts/generateColorLess.js

@@ -0,0 +1,91 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const glob = require('glob');
+const postcss = require('postcss');
+const less = require('less');
+
+const COLOR_MAP = {
+  '#ecf6fd': 'color(~`colorPalette("@{primary-color}", 1)`)', // @primary-1
+  '#d2eafb': 'color(~`colorPalette("@{primary-color}", 2)`)', // @primary-2
+  '#49a9ee': 'color(~`colorPalette("@{primary-color}", 5)`)', // @primary-5
+  '#108ee9': '@primary-color',
+  '#0e77ca': 'color(~`colorPalette("@{primary-color}", 7)`)', // @primary-7
+  '#40a5ed': 'tint(@primary-color, 20%)',
+  '#70bbf2': 'tint(@primary-color, 40%)',
+  '#88c7f4': 'tint(@primary-color, 50%)',
+  '#9fd2f6': 'tint(@primary-color, 60%)',
+  'rgba(16, 142, 233, 0.2)': 'fadeout(@primary-color, 80%)',
+};
+
+const reducePlugin = postcss.plugin('reducePlugin', () => {
+  const cleanRule = (rule) => {
+    let removeRule = true;
+    rule.walkDecls((decl) => {
+      if (
+        !decl.prop.includes('color') &&
+        !decl.prop.includes('background') &&
+        !decl.prop.includes('border') &&
+        !decl.prop.includes('box-shadow')
+      ) {
+        decl.remove();
+      } else {
+        removeRule = false;
+      }
+    });
+    if (removeRule) {
+      rule.remove();
+    }
+  };
+  return (css) => {
+    css.walkAtRules((atRule) => {
+      atRule.remove();
+    });
+
+    css.walkRules(cleanRule);
+
+    css.walkComments(c => c.remove());
+  };
+});
+
+const antd = path.resolve(__dirname, '../');
+const entry = path.join(antd, 'components/style/index.less');
+let content = fs.readFileSync(entry).toString();
+const styles = glob.sync(path.join(antd, 'components/*/style/index.less'));
+content += '\n';
+styles.forEach((style) => {
+  content += `@import "${style}";\n`;
+});
+content += `@import "${path.join(antd, 'site/theme/static/index.less')}";\n`;
+fs.writeFileSync('/tmp/style.less', content);
+
+less.render.call(less, content, {
+  paths: [path.join(antd, 'components/style')],
+}).then(({ css }) => {
+  return postcss([
+    reducePlugin,
+  ]).process(css, { parser: less.parser, from: entry });
+}).then(({ css }) => {
+  Object.keys(COLOR_MAP).forEach((key) => {
+    css = css.replace(new RegExp(key, 'g'), COLOR_MAP[key]);
+  });
+
+  const bezierEasing = fs.readFileSync(path.join(antd, 'components/style/color/bezierEasing.less')).toString();
+  const tinyColor = fs.readFileSync(path.join(antd, 'components/style/color/tinyColor.less')).toString();
+  const colorPalette = fs.readFileSync(path.join(antd, 'components/style/color/colorPalette.less'))
+    .toString()
+    .replace('@import "bezierEasing";', '')
+    .replace('@import "tinyColor";', '');
+
+  css = `${colorPalette}\n${css}`;
+  css = `${tinyColor}\n${css}`;
+  css = `${bezierEasing}\n${css}`;
+  css = `@primary-color: #108ee9;\n${css}`;
+
+  const siteDir = path.resolve(__dirname, '../_site');
+  if (!fs.existsSync(siteDir)) {
+    fs.mkdirSync(siteDir);
+  }
+  fs.writeFileSync(path.resolve(__dirname, '../_site/color.less'), css);
+});

site/bisheng.config.js

@@ -2,6 +2,7 @@ const path = require('path');
 const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
 
 const isDev = process.env.NODE_ENV === 'development';
+const usePreact = process.env.REACT_ENV === 'preact';
 
 module.exports = {
   port: 8001,
@@ -65,8 +66,16 @@ module.exports = {
     config.externals = {
       'react-router-dom': 'ReactRouterDOM',
     };
-    if (isDev) {
-      Object.assign(config.externals, {
+
+    if (usePreact) {
+      config.resolve.alias = Object.assign({}, config.resolve.alias, {
+        react: 'preact-compat',
+        'react-dom': 'preact-compat',
+        'create-react-class': 'preact-compat/lib/create-react-class',
+        'react-router': 'react-router',
+      });
+    } else if (isDev) {
+      config.externals = Object.assign({}, config.externals, {
         react: 'React',
         'react-dom': 'ReactDOM',
       });
@@ -84,7 +93,9 @@ module.exports = {
 
     return config;
   },
+
   htmlTemplateExtraData: {
     isDev,
+    usePreact,
   },
 };

site/theme/static/template.html

@@ -61,6 +61,7 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.cnpmjs.org/css?family=Lato:400,700|Raleway"/>
     <link rel="stylesheet" type="text/css" href="{{ root }}index-1.css"/>
     <link rel="stylesheet" type="text/css" href="{{ root }}index-2.css"/>
+    <link rel="stylesheet/less" type="text/css" href="{{ root }}color.less"/>
     <style id="nprogress-style">
       #nprogress { display: none }
     </style>
@@ -108,13 +109,15 @@
   </head>
   <body>
     <div id="react-content">
-        {% if isDev %}
-          <script src="https://as.alipayobjects.com/g/component/??react/15.6.1/react.js,react/15.6.1/react-dom.js"></script>
-        {% else %}
-          <script src="https://as.alipayobjects.com/g/component/??react/15.6.1/react.min.js,react/15.6.1/react-dom.min.js"></script>
-        {% endif %}
       {{ content | safe }}
     </div>
+    {% if not usePreact %}
+      {% if isDev %}
+        <script src="https://as.alipayobjects.com/g/component/??react/15.6.1/react.js,react/15.6.1/react-dom.js"></script>
+      {% else %}
+        <script src="https://as.alipayobjects.com/g/component/??react/15.6.1/react.min.js,react/15.6.1/react-dom.min.js"></script>
+      {% endif %}
+    {% endif %}
     <script src="{{ root }}common.js"></script>
     <script src="{{ root }}index.js"></script>
   </body>

site/theme/template/Content/MainContent.jsx

@@ -170,22 +170,20 @@ export default class MainContent extends React.Component {
   }
 
   flattenMenu(menu) {
-    if (menu.type === Menu.Item) {
+    if (menu && menu.type && !menu.type.isSubMenu && !menu.type.isMenuItemGroup) {
       return menu;
     }
-
     if (Array.isArray(menu)) {
       return menu.reduce((acc, item) => acc.concat(this.flattenMenu(item)), []);
     }
-
-    return this.flattenMenu(menu.props.children);
+    return this.flattenMenu((menu.props && menu.props.children) || menu.children);
   }
 
   getFooterNav(menuItems, activeMenuItem) {
     const menuItemsList = this.flattenMenu(menuItems);
     let activeMenuItemIndex = -1;
     menuItemsList.forEach((menuItem, i) => {
-      if (menuItem.key === activeMenuItem) {
+      if (menuItem && menuItem.key === activeMenuItem) {
         activeMenuItemIndex = i;
       }
     });
@@ -236,12 +234,12 @@ export default class MainContent extends React.Component {
             <section className="prev-next-nav">
               {
                 prev ?
-                  React.cloneElement(prev.props.children, { className: 'prev-page' }) :
+                  React.cloneElement(prev.props.children || prev.children[0], { className: 'prev-page' }) :
                   null
               }
               {
                 next ?
-                  React.cloneElement(next.props.children, { className: 'next-page' }) :
+                  React.cloneElement(next.props.children || next.children[0], { className: 'next-page' }) :
                   null
               }
             </section>

site/theme/template/Layout/Footer.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { Modal, Icon, message } from 'antd';
-import reqwest from 'reqwest';
-import { isLocalStorageNameSupported } from '../utils';
+import { isLocalStorageNameSupported, loadScript } from '../utils';
 import ColorPicker from '../Color/ColorPicker';
 
 class Footer extends React.Component {
   constructor(props) {
     super(props);
 
+    this.lessLoaded = false;
+
     this.state = {
       color: '#108ee9',
     };
@@ -32,23 +33,29 @@ class Footer extends React.Component {
   }
 
   handleColorChange = (color) => {
-    const { messages } = this.props.intl;
-    reqwest({
-      url: 'https://ant-design-theme.now.sh/compile',
-      method: 'post',
-      data: {
-        variables: {
-          '@primary-color': color,
-        },
-      },
-    }).then((data) => {
-      message.success(messages['app.footer.primary-color-changed']);
-      this.setState({ color });
-      const head = document.querySelector('head');
-      const style = document.createElement('style');
-      style.innerText = data;
-      head.appendChild(style);
-    });
+    const changeColor = () => {
+      const { messages } = this.props.intl;
+      window.less.modifyVars({
+        '@primary-color': color,
+      }).then(() => {
+        message.success(messages['app.footer.primary-color-changed']);
+        this.setState({ color });
+      });
+    };
+
+    const lessUrl = 'https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js';
+
+    if (this.lessLoaded) {
+      changeColor();
+    } else {
+      window.less = {
+        async: true,
+      };
+      loadScript(lessUrl).then(() => {
+        this.lessLoaded = true;
+        changeColor();
+      });
+    }
   }
 
   infoNewVersion() {

site/theme/template/utils.jsx

@@ -37,7 +37,7 @@ export function getLocalizedPathname(path, zhCN) {
 
 export function ping(callback) {
   // eslint-disable-next-line
-  const url = 'https://private.alipay' + 'objects.com/alip' + 'ay-rmsdeploy-image/rmsportal/RKuAiriJqrUhyqW.png';
+  const url = 'https://private-a' + 'lipay' + 'objects.alip' + 'ay.com/alip' + 'ay-rmsdeploy-image/rmsportal/RKuAiriJqrUhyqW.png';
   const img = new Image();
   let done;
   const finish = (status) => {
@@ -64,3 +64,14 @@ export function isLocalStorageNameSupported() {
     return false;
   }
 }
+
+export function loadScript(src) {
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    document.head.appendChild(script);
+  });
+}