Merge pull request #16354 from ant-design/master

Merge master into feature
2024-11-24 11:10:01 +08:00 · 2019-04-28 16:29:44 +08:00 · 2019-04-28 16:29:44 +08:00 · 8b4f0c269e
commit 8b4f0c269e
parent b63ceef831 5469bbaa73
40 changed files with 269 additions and 139 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,27 @@ timeline: true

 ---

+## 3.16.6
+
+`2019-04-26`
+
+- ⌨️ Improve PageHeader `backIcon` keyboard accessibility. [#16038](https://github.com/ant-design/ant-design/issues/16038)
+- 🇮🇹 Optimize Italian localization. [#16093](https://github.com/ant-design/ant-design/pull/16093) [@yp](https://github.com/yp) [#16172](https://github.com/ant-design/ant-design/pull/16172) [@afelicioni](https://github.com/afelicioni)
+- 🐞 Fix Select with `showSearch` not trigger `onSearch` when blur it. [#16235](https://github.com/ant-design/ant-design/pull/16235)
+- 🐞 Fix Selecte active item's hover background color. [#16238](https://github.com/ant-design/ant-design/pull/16238) [@yociduo](https://github.com/yociduo)
+- 🐞 Fix unexpected pressed style of disabled Switch. [#16251](https://github.com/ant-design/ant-design/pull/16251) [@atomoo](https://github.com/atomoo)
+- 🐞 Fix small size Table header background. [#16266](https://github.com/ant-design/ant-design/pull/16266)
+- 🐞 Fix Tabs missing border when `tabPosition="bottom"`. [#16130](https://github.com/ant-design/ant-design/pull/16130) [@rinick](https://github.com/rinick)
+- 🐞 Fix Typography.Title not support `type`. [#16275](https://github.com/ant-design/ant-design/pull/16275)
+- 🐞 Fix Typography editable mode not support `className`. [#16307](https://github.com/ant-design/ant-design/pull/16307)
+- 🐞 Fix List `actions` misplaced. [#16239](https://github.com/ant-design/ant-design/pull/16239)
+- 🐞 Fix long word Modal title display problem. [#16267](https://github.com/ant-design/ant-design/pull/16267) [@yoyo837](https://github.com/yoyo837)
+- 🐞 Fix Pagination active item background color. [#16306](https://github.com/ant-design/ant-design/pull/16306)
+- 🐞 Fix a `core-js@<2.6.5 is no longer maintained` install warning. [#16325](https://github.com/ant-design/ant-design/issues/16325)
+- Typescript
+  - 🐞 Fix `Form.create()` don't work. [#16242](https://github.com/ant-design/ant-design/pull/16242)
+  - 🐞 Fix Tooltip `className` definition. [#16195](https://github.com/ant-design/ant-design/pull/16195) [@swillis12](https://github.com/swillis12)
+
 ## 3.16.5

 `2019-04-22`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,27 @@ timeline: true

 ---

+## 3.16.6
+
+`2019-04-26`
+
+- ⌨️ 优化 PageHeader `backIcon` 的键盘可访问性。[#16038](https://github.com/ant-design/ant-design/issues/16038)
+- 🇮🇹 调整意大利语文案。[#16093](https://github.com/ant-design/ant-design/pull/16093) [@yp](https://github.com/yp) [#16172](https://github.com/ant-design/ant-design/pull/16172) [@afelicioni](https://github.com/afelicioni)
+- 🐞 修复 Select `showSearch` 模式下取消选择时没有触发 `onSearch` 的问题。[#16235](https://github.com/ant-design/ant-design/pull/16235)
+- 🐞 修复 Select 当前选项的 hover 样式。[#16238](https://github.com/ant-design/ant-design/pull/16238) [@yociduo](https://github.com/yociduo)
+- 🐞 修复 Switch 失效状态下依然有按下样式的问题。[#16251](https://github.com/ant-design/ant-design/pull/16251) [@atomoo](https://github.com/atomoo)
+- 🐞 修复小号 Table 表头背景样式。[#16266](https://github.com/ant-design/ant-design/pull/16266)
+- 🐞 修复 Tabs 在底部时的边框样式问题。[#16130](https://github.com/ant-design/ant-design/pull/16130) [@rinick](https://github.com/rinick)
+- 🐞 修复 Typography.Title 不支持 `type` 的问题。[#16275](https://github.com/ant-design/ant-design/pull/16275)
+- 🐞 修复 Typography.Paragraph 编辑模式 `className` 失效的问题。[#16307](https://github.com/ant-design/ant-design/pull/16307)
+- 🐞 修复一个 List `actions` 错位问题。[#16239](https://github.com/ant-design/ant-design/pull/16239)
+- 🐞 修复一个超长 Modal 标题的展现问题。[#16267](https://github.com/ant-design/ant-design/pull/16267) [@yoyo837](https://github.com/yoyo837)
+- 🐞 修正 Pagination 当前项的背景色。[#16306](https://github.com/ant-design/ant-design/pull/16306)
+- 🐞 修复 `core-js@<2.6.5 is no longer maintained` 的安装警告。[#16325](https://github.com/ant-design/ant-design/issues/16325)
+- Typescript
+  - 🐞 修复 `Form.create()` 报错。[#16242](https://github.com/ant-design/ant-design/pull/16242)
+  - 🐞 修复 Tooltip `className` 的定义。[#16195](https://github.com/ant-design/ant-design/pull/16195) [@swillis12](https://github.com/swillis12)
+
 ## 3.16.5

 `2019-04-22`
--- a/components/_util/colors.ts
+++ b/components/_util/colors.ts
@ -1,18 +1,19 @@
 import { tuple } from './type';

 export const PresetColorTypes = tuple(
-	'pink',
-	'red',
-	'yellow',
-	'orange',
-	'cyan',
-	'green',
-	'blue',
-	'purple',
-	'geekblue',
-	'magenta',
-	'volcano',
-	'gold',
-	'lime'
+  'pink',
+  'red',
+  'yellow',
+  'orange',
+  'cyan',
+  'green',
+  'blue',
+  'purple',
+  'geekblue',
+  'magenta',
+  'volcano',
+  'gold',
+  'lime',
 );
+
 export type PresetColorType = (typeof PresetColorTypes)[number];
--- a/components/_util/transButton.tsx
+++ b/components/_util/transButton.tsx
@ -5,8 +5,8 @@
 import * as React from 'react';
 import KeyCode from 'rc-util/lib/KeyCode';

-interface TransButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
-  onClick?: () => void;
+interface TransButtonProps extends React.HTMLAttributes<HTMLDivElement> {
+  onClick?: (e?: React.MouseEvent<HTMLDivElement>) => void;
 }

 const inlineStyle: React.CSSProperties = {
@ -14,20 +14,21 @@ const inlineStyle: React.CSSProperties = {
  background: 'transparent',
  padding: 0,
  lineHeight: 'inherit',
+  display: 'inline-block',
 };

 class TransButton extends React.Component<TransButtonProps> {
-  button?: HTMLButtonElement;
+  div?: HTMLDivElement;
  lastKeyCode?: number;

-  onKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = event => {
+  onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
    const { keyCode } = event;
    if (keyCode === KeyCode.ENTER) {
      event.preventDefault();
    }
  };

-  onKeyUp: React.KeyboardEventHandler<HTMLButtonElement> = event => {
+  onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
    const { keyCode } = event;
    const { onClick } = this.props;
    if (keyCode === KeyCode.ENTER && onClick) {
@ -35,26 +36,28 @@ class TransButton extends React.Component<TransButtonProps> {
    }
  };

-  setRef = (btn: HTMLButtonElement) => {
-    this.button = btn;
+  setRef = (btn: HTMLDivElement) => {
+    this.div = btn;
  };

  focus() {
-    if (this.button) {
-      this.button.focus();
+    if (this.div) {
+      this.div.focus();
    }
  }

  blur() {
-    if (this.button) {
-      this.button.blur();
+    if (this.div) {
+      this.div.blur();
    }
  }

  render() {
    const { style } = this.props;
    return (
-      <button
+      <div
+        role="button"
+        tabIndex={0}
        ref={this.setRef}
        {...this.props}
        onKeyDown={this.onKeyDown}
--- a/components/calendar/style/index.less
+++ b/components/calendar/style/index.less
@ -22,7 +22,7 @@
    margin-left: 8px;

    &.@{ant-prefix}-select-sm {
-      min-width: 60px;
+      min-width: 70px;
    }
  }

--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/components/cascader/tests/snapshots/index.test.js.snap
@ -11,6 +11,7 @@ exports[`Cascader can be selected 1`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          role="menuitem"
          title="Zhejiang"
        >
          Zhejiang
@ -40,6 +41,7 @@ exports[`Cascader can be selected 1`] = `
        </li>
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          role="menuitem"
          title="Jiangsu"
        >
          Jiangsu
@ -73,6 +75,7 @@ exports[`Cascader can be selected 1`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          role="menuitem"
          title="Hangzhou"
        >
          Hangzhou
@ -117,6 +120,7 @@ exports[`Cascader can be selected 2`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          role="menuitem"
          title="Zhejiang"
        >
          Zhejiang
@ -146,6 +150,7 @@ exports[`Cascader can be selected 2`] = `
        </li>
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          role="menuitem"
          title="Jiangsu"
        >
          Jiangsu
@ -179,6 +184,7 @@ exports[`Cascader can be selected 2`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          role="menuitem"
          title="Hangzhou"
        >
          Hangzhou
@ -212,6 +218,7 @@ exports[`Cascader can be selected 2`] = `
      >
        <li
          class="ant-cascader-menu-item"
+          role="menuitem"
          title="West Lake"
        >
          West Lake
@ -233,6 +240,7 @@ exports[`Cascader can be selected 3`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          role="menuitem"
          title="Zhejiang"
        >
          Zhejiang
@ -262,6 +270,7 @@ exports[`Cascader can be selected 3`] = `
        </li>
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          role="menuitem"
          title="Jiangsu"
        >
          Jiangsu
@ -295,6 +304,7 @@ exports[`Cascader can be selected 3`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          role="menuitem"
          title="Hangzhou"
        >
          Hangzhou
@ -328,6 +338,7 @@ exports[`Cascader can be selected 3`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-active"
+          role="menuitem"
          title="West Lake"
        >
          West Lake
@ -359,6 +370,7 @@ exports[`Cascader popup correctly when panel is open 1`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          role="menuitem"
          title="Zhejiang"
        >
          Zhejiang
@ -388,6 +400,7 @@ exports[`Cascader popup correctly when panel is open 1`] = `
        </li>
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          role="menuitem"
          title="Jiangsu"
        >
          Jiangsu
@ -432,6 +445,7 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          role="menuitem"
          title="Zhejiang"
        >
          Zhejiang
@ -461,6 +475,7 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
        </li>
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+          role="menuitem"
          title="Jiangsu"
        >
          Jiangsu
@ -494,6 +509,7 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
      >
        <li
          class="ant-cascader-menu-item ant-cascader-menu-item-expand ant-cascader-menu-item-active"
+          role="menuitem"
          title="Hangzhou"
        >
          Hangzhou
@ -527,6 +543,7 @@ exports[`Cascader popup correctly with defaultValue 1`] = `
      >
        <li
          class="ant-cascader-menu-item"
+          role="menuitem"
          title="West Lake"
        >
          West Lake
@ -896,6 +913,8 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
                        key="jiangsu,nanjing,zhonghuamen"
                        onClick={[Function]}
                        onDoubleClick={[Function]}
+                        onMouseDown={[Function]}
+                        role="menuitem"
                        title=""
                      >
                        Jiangsu
@ -909,6 +928,8 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
                        key="zhejiang,hangzhou,xihu"
                        onClick={[Function]}
                        onDoubleClick={[Function]}
+                        onMouseDown={[Function]}
+                        role="menuitem"
                        title=""
                      >
                        Zhejiang
@ -1191,6 +1212,8 @@ exports[`Cascader should render not found content 1`] = `
                        key="ANT_CASCADER_NOT_FOUND"
                        onClick={[Function]}
                        onDoubleClick={[Function]}
+                        onMouseDown={[Function]}
+                        role="menuitem"
                        title=""
                      >
                        <OriginEmpty
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@ -89,7 +89,7 @@ export interface CascaderProps {
  onPopupVisibleChange?: (popupVisible: boolean) => void;
  prefixCls?: string;
  inputPrefixCls?: string;
-  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  popupVisible?: boolean;
  /** use this after antd@3.7.0 */
  fieldNames?: FieldNamesType;
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -41,4 +41,4 @@ A content area which can be collapsed and expanded.

 ### How to let the arrow to be on the right?

-You can adjust style of the arrow: <https://codesandbox.io/s/vpm8qwo37>
+You can adjust style of the arrow: <https://codesandbox.io/s/v046rx89n0>
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -42,4 +42,4 @@ cols: 1

 ### 我希望箭头在右边，怎么做？

-通过样式调整，将箭头放到右边就行啦：<https://codesandbox.io/s/vpm8qwo37>
+通过样式调整，将箭头放到右边就行啦：<https://codesandbox.io/s/v046rx89n0>
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@ -10,7 +10,7 @@ export interface CSPConfig {
 }

 export interface ConfigConsumerProps {
-  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  rootPrefixCls?: string;
  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
  renderEmpty: RenderEmptyHandler;
@ -28,7 +28,7 @@ export const configConsumerProps = [
 ];

 export interface ConfigProviderProps {
-  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  prefixCls?: string;
  children?: React.ReactNode;
  renderEmpty?: RenderEmptyHandler;
--- a/components/date-picker/RangePicker.tsx
+++ b/components/date-picker/RangePicker.tsx
@ -226,7 +226,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
    this.picker = node;
  };

-  renderFooter = (...args: any[]) => {
+  renderFooter = () => {
    const { ranges, renderExtraFooter } = this.props;
    const { prefixCls, tagPrefixCls } = this;
    if (!ranges && !renderExtraFooter) {
@ -234,7 +234,7 @@ class RangePicker extends React.Component<any, RangePickerState> {
    }
    const customFooter = renderExtraFooter ? (
      <div className={`${prefixCls}-footer-extra`} key="extra">
-        {renderExtraFooter(...args)}
+        {renderExtraFooter()}
      </div>
    ) : null;
    const operations = Object.keys(ranges || {}).map(range => {
--- a/components/date-picker/interface.tsx
+++ b/components/date-picker/interface.tsx
@ -22,7 +22,6 @@ export interface PickerProps {
  open?: boolean;
  onOpenChange?: (status: boolean) => void;
  disabledDate?: (current: moment.Moment | undefined) => boolean;
-  renderExtraFooter?: () => React.ReactNode;
  dateRender?: (current: moment.Moment, today: moment.Moment) => React.ReactNode;
 }

@ -30,6 +29,7 @@ export interface SinglePickerProps {
  value?: moment.Moment;
  defaultValue?: moment.Moment;
  defaultPickerValue?: moment.Moment;
+  renderExtraFooter?: (mode: 'date' | 'month' | 'year' | 'decade') => React.ReactNode;
  onChange?: (date: moment.Moment, dateString: string) => void;
 }

@ -91,6 +91,7 @@ export interface RangePickerProps extends PickerProps {
    disabledSeconds?: () => number[];
  };
  onPanelChange?: (value?: RangePickerValue, mode?: string | string[]) => void;
+  renderExtraFooter?: () => React.ReactNode;
 }

 export interface WeekPickerProps extends PickerProps, SinglePickerProps {
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@ -39,7 +39,7 @@ export interface DropDownProps {
  visible?: boolean;
  disabled?: boolean;
  align?: Align;
-  getPopupContainer?: (triggerNode: Element) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  prefixCls?: string;
  className?: string;
  transitionName?: string;
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@ -20,7 +20,7 @@ interface FormCreateOptionMessages {
 }

 export interface FormCreateOption<T> {
-  onFieldsChange?: (props: T, fields: object, allFields: any, add: string) => void;
+  onFieldsChange?: (props: T, fields: object, allFields: any) => void;
  onValuesChange?: (props: T, changedValues: any, allValues: any) => void;
  mapPropsToFields?: (props: T) => void;
  validateMessages?: FormCreateOptionMessages;
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -65,7 +65,7 @@ The following `options` are available:
 | mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField). Please note that the form fields will become controlled components. Properties like errors will not be automatically mapped and need to be manually passed in. | (props) => ({ \[fieldName\]: FormField { value } }) |
 | name | Set the id prefix of fields under form | - |
 | validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { \[nested.path]: String } |
-| onFieldsChange | Specify a function that will be called when the fields (including errors) of a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
+| onFieldsChange | Specify a function that will be called when the fields (including errors) of a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, changedFields, allFields) |
 | onValuesChange | A handler while value of any field is changed | (props, changedValues, allValues) => void |

 If you want to get `ref` after `Form.create`, you can use `wrappedComponentRef` provided by `rc-form`, [details can be viewed here](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140).
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -67,7 +67,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
 | mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记，注意表单项将变成受控组件, error 等也需要一并手动传入 | (props) => ({ \[fieldName\]: FormField { value } }) |
 | name | 设置表单域内字段 id 的前缀 | - |
 | validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { \[nested.path]: String } |
-| onFieldsChange | 当 `Form.Item` 子节点的值（包括 error）发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
+| onFieldsChange | 当 `Form.Item` 子节点的值（包括 error）发生改变时触发，可以把对应的值转存到 Redux store | Function(props, changedFields, allFields) |
 | onValuesChange | 任一表单域的值发生改变时的回调 | (props, changedValues, allValues) => void |

 经过 `Form.create` 之后如果要拿到 `ref`，可以使用 `rc-form` 提供的 `wrappedComponentRef`，[详细内容可以查看这里](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140)。
--- a/components/locale-provider/default.tsx
+++ b/components/locale-provider/default.tsx
@ -53,4 +53,7 @@ export default {
    copied: 'copy success',
    expand: 'expand',
  },
+  PageHeader: {
+    back: 'back',
+  },
 };
--- a/components/locale-provider/zh_CN.tsx
+++ b/components/locale-provider/zh_CN.tsx
@ -53,4 +53,7 @@ export default {
    copied: '复制成功',
    expand: '展开',
  },
+  PageHeader: {
+    back: '返回',
+  },
 };
--- a/components/locale-provider/zh_TW.tsx
+++ b/components/locale-provider/zh_TW.tsx
@ -39,4 +39,7 @@ export default {
  Empty: {
    description: '無此資料',
  },
+  PageHeader: {
+    back: '返回',
+  },
 };
--- a/components/menu/index.tsx
+++ b/components/menu/index.tsx
@ -56,7 +56,7 @@ export interface MenuProps {
  subMenuOpenDelay?: number;
  focusable?: boolean;
  onMouseEnter?: (e: MouseEvent) => void;
-  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  overflowedIndicator?: React.ReactNode;
 }

--- a/components/page-header/tests/snapshots/demo.test.js.snap
+++ b/components/page-header/tests/snapshots/demo.test.js.snap
@ -5,27 +5,35 @@ exports[`renders ./components/page-header/demo/actions.md correctly 1`] = `
  class="ant-page-header ant-page-header-has-footer"
 >
  <div
-    class="ant-page-header-back-icon"
+    class="ant-page-header-back"
  >
-    <i
-      aria-label="icon: arrow-left"
-      class="anticon anticon-arrow-left"
+    <div
+      aria-label="back"
+      class="ant-page-header-back-button"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+      tabindex="0"
    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="arrow-left"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <i
+        aria-label="icon: arrow-left"
+        class="anticon anticon-arrow-left"
      >
-        <path
-          d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
-        />
-      </svg>
-    </i>
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="arrow-left"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </i>
+    </div>
    <div
      class="ant-divider ant-divider-vertical"
    />
@ -406,27 +414,35 @@ exports[`renders ./components/page-header/demo/basic.md correctly 1`] = `
  class="ant-page-header"
 >
  <div
-    class="ant-page-header-back-icon"
+    class="ant-page-header-back"
  >
-    <i
-      aria-label="icon: arrow-left"
-      class="anticon anticon-arrow-left"
+    <div
+      aria-label="back"
+      class="ant-page-header-back-button"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+      tabindex="0"
    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="arrow-left"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <i
+        aria-label="icon: arrow-left"
+        class="anticon anticon-arrow-left"
      >
-        <path
-          d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
-        />
-      </svg>
-    </i>
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="arrow-left"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M872 474H286.9l350.2-304c5.6-4.9 2.2-14-5.2-14h-88.5c-3.9 0-7.6 1.4-10.5 3.9L155 487.8a31.96 31.96 0 0 0 0 48.3L535.1 866c1.5 1.3 3.3 2 5.2 2h91.5c7.4 0 10.8-9.2 5.2-14L286.9 550H872c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
+          />
+        </svg>
+      </i>
+    </div>
    <div
      class="ant-divider ant-divider-vertical"
    />
--- a/components/page-header/tests/index.test.js
+++ b/components/page-header/tests/index.test.js
@ -19,23 +19,23 @@ describe('PageHeader', () => {
      },
    ];
    const wrapper = mount(<PageHeader title="Page Title" breadcrumb={{ routes }} />);
-    expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(0);
+    expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
  });
-  it('pageHeader should no contain back it back', () => {
+  it('pageHeader should no contain back', () => {
    const wrapper = mount(<PageHeader title="Page Title" backIcon={false} />);
-    expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(0);
+    expect(wrapper.find('.ant-page-header-back')).toHaveLength(0);
  });

  it('pageHeader should contain back it back', () => {
    const callback = jest.fn(() => true);
    const wrapper = mount(<PageHeader title="Page Title" onBack={callback} />);
-    expect(wrapper.find('.ant-page-header-back-icon')).toHaveLength(1);
+    expect(wrapper.find('.ant-page-header-back')).toHaveLength(1);
  });

  it('pageHeader onBack transfer', () => {
    const callback = jest.fn(() => true);
    const wrapper = mount(<PageHeader title="Page Title" onBack={callback} />);
-    wrapper.find('.ant-page-header-back-icon').simulate('click');
+    wrapper.find('div.ant-page-header-back-button').simulate('click');
    expect(callback).toHaveBeenCalled();
  });

--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@ -6,7 +6,8 @@ import { BreadcrumbProps } from '../breadcrumb';
 import Divider from '../divider';
 import Tag from '../tag';
 import Breadcrumb from '../breadcrumb';
-import Wave from '../_util/wave';
+import TransButton from '../_util/transButton';
+import LocaleReceiver from '../locale-provider/LocaleReceiver';

 export interface PageHeaderProps {
  backIcon?: React.ReactNode;
@ -18,7 +19,7 @@ export interface PageHeaderProps {
  tags?: React.ReactElement<Tag> | React.ReactElement<Tag>[];
  footer?: React.ReactNode;
  extra?: React.ReactNode;
-  onBack?: (e: React.MouseEvent<HTMLElement>) => void;
+  onBack?: (e: React.MouseEvent<HTMLDivElement>) => void;
  className?: string;
 }

@ -31,17 +32,24 @@ const renderBack = (
    return null;
  }
  return (
-    <div
-      className={`${prefixCls}-back-icon`}
-      onClick={e => {
-        if (onBack) {
-          onBack(e);
-        }
-      }}
-    >
-      <Wave>{backIcon}</Wave>
-      <Divider type="vertical" />
-    </div>
+    <LocaleReceiver componentName="PageHeader">
+      {({ back }: { back: string }) => (
+        <div className={`${prefixCls}-back`}>
+          <TransButton
+            onClick={(e: React.MouseEvent<HTMLDivElement>) => {
+              if (onBack) {
+                onBack(e);
+              }
+            }}
+            className={`${prefixCls}-back-button`}
+            aria-label={back}
+          >
+            {backIcon}
+          </TransButton>
+          <Divider type="vertical" />
+        </div>
+      )}
+    </LocaleReceiver>
  );
 };

--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@ -14,14 +14,16 @@
    padding-bottom: 0;
  }

-  &-back-icon {
+  &-back {
    display: inline-block;
    padding: 4px 0;
    font-size: 16px;
    line-height: 100%;
    cursor: pointer;
-    i:hover {
-      color: @primary-color;
+    &-button {
+      .operation-unit();
+
+      color: @text-color;
    }
  }

--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@ -31,7 +31,7 @@ export interface AbstractSelectProps {
  dropdownMenuStyle?: React.CSSProperties;
  dropdownMatchSelectWidth?: boolean;
  onSearch?: (value: string) => any;
-  getPopupContainer?: (triggerNode?: Element) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  filterOption?: boolean | ((inputValue: string, option: React.ReactElement<OptionProps>) => any);
  id?: string;
  defaultOpen?: boolean;
--- a/components/slider/style/index.less
+++ b/components/slider/style/index.less
@ -86,6 +86,7 @@
    display: inline-block;
    color: @text-color-secondary;
    text-align: center;
+    word-break: keep-all;
    cursor: pointer;

    &-active {
--- a/components/style/mixins/index.less
+++ b/components/style/mixins/index.less
@ -6,3 +6,4 @@
@import 'iconfont';
@import 'motion';
@import 'reset';
+@import 'operation-unit';
--- a/components/style/mixins/operation-unit.less
+++ b/components/style/mixins/operation-unit.less
@ -0,0 +1,18 @@
+@import '../../style/themes/default';
+
+.operation-unit() {
+  color: @link-color;
+  text-decoration: none;
+  outline: none;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:focus,
+  &:hover {
+    color: @link-hover-color;
+  }
+
+  &:active {
+    color: @link-active-color;
+  }
+}
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -508,7 +508,7 @@
@pagination-item-size-sm: 24px;
@pagination-font-family: Arial;
@pagination-font-weight-active: 500;
-@pagination-item-bg-active: transparent;
+@pagination-item-bg-active: @component-background;

 // PageHeader
 // ---
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -110,7 +110,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t

 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
-| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
+| align | specify which way that column is aligned | 'left' \| 'right' \| 'center' | 'left' |
 | className | className of this column | string | - |
 | colSpan | Span of this column's title | number |  |
 | dataIndex | Display field of the data record, could be set like `a.b.c`, `a[0].b.c[1]` | string | - |
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -115,8 +115,8 @@ const columns = [{

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| align | 设置列内容的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
-| className | 列的 className | string | - |
+| align | 设置列的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
+| className | 列样式类名 | string | - |
 | colSpan | 表头列合并,设置为 0 时，不渲染 | number |  |
 | dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c`、`a[0].b.c[1]` 的嵌套写法 | string | - |
 | defaultSortOrder | 默认排序顺序 | 'ascend' \| 'descend' | - |
--- a/components/table/interface.tsx
+++ b/components/table/interface.tsx
@ -184,7 +184,7 @@ export interface TableState<T> {
 }

 export type SelectionItemSelectFn = (key: string[]) => any;
-type GetPopupContainer = (triggerNode?: Element) => HTMLElement;
+type GetPopupContainer = (triggerNode?: HTMLElement) => HTMLElement;

 export interface SelectionItem {
  key: string;
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@ -38,7 +38,7 @@ export interface TimePickerProps {
  disabledMinutes?: (selectedHour: number) => number[];
  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
  style?: React.CSSProperties;
-  getPopupContainer?: (triggerNode: Element) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  addon?: Function;
  use12Hours?: boolean;
  focusOnOpen?: boolean;
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@ -41,6 +41,7 @@ export interface AbstractTooltipProps {
  prefixCls?: string;
  overlayClassName?: string;
  style?: React.CSSProperties;
+  className?: string;
  overlayStyle?: React.CSSProperties;
  placement?: TooltipPlacement;
  builtinPlacements?: Object;
@ -55,8 +56,8 @@ export interface AbstractTooltipProps {
  arrowPointAtCenter?: boolean;
  autoAdjustOverflow?: boolean | AdjustOverflow;
  // getTooltipContainer had been rename to getPopupContainer
-  getTooltipContainer?: (triggerNode: Element) => HTMLElement;
-  getPopupContainer?: (triggerNode?: HTMLElement) => HTMLElement;
+  getTooltipContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  children?: React.ReactNode;
  // align is a more higher api
  align?: TooltipAlignConfig;
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@ -363,13 +363,15 @@ class Base extends React.Component<InternalBlockProps & ConfigConsumerProps, Bas
  }

  renderEditInput() {
-    const { children, prefixCls } = this.props;
+    const { children, prefixCls, className, style } = this.props;
    return (
      <Editable
        value={typeof children === 'string' ? children : ''}
        onSave={this.onEditChange}
        onCancel={this.onEditCancel}
        prefixCls={prefixCls}
+        className={className}
+        style={style}
      />
    );
  }
--- a/components/typography/Editable.tsx
+++ b/components/typography/Editable.tsx
@ -10,6 +10,8 @@ interface EditableProps {
  ['aria-label']?: string;
  onSave: (value: string) => void;
  onCancel: () => void;
+  className?: string;
+  style?: React.CSSProperties;
 }

 interface EditableState {
@ -106,10 +108,10 @@ class Editable extends React.Component<EditableProps, EditableState> {

  render() {
    const { current } = this.state;
-    const { prefixCls, ['aria-label']: ariaLabel } = this.props;
+    const { prefixCls, ['aria-label']: ariaLabel, className, style } = this.props;

    return (
-      <div className={`${prefixCls} ${prefixCls}-edit-content`}>
+      <div className={`${prefixCls} ${prefixCls}-edit-content ${className}`} style={style}>
        <TextArea
          ref={this.setTextarea}
          value={current}
--- a/components/typography/tests/snapshots/demo.test.js.snap
+++ b/components/typography/tests/snapshots/demo.test.js.snap
@ -283,10 +283,12 @@ exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
    class="ant-typography"
  >
    This is an editable text.
-    <button
+    <div
      aria-label="edit"
      class="ant-typography-edit"
-      style="border:0;background:transparent;padding:0;line-height:inherit"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+      tabindex="0"
    >
      <i
        aria-label="icon: edit"
@ -308,16 +310,18 @@ exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
          />
        </svg>
      </i>
-    </button>
+    </div>
  </div>
  <div
    class="ant-typography"
  >
    This is a copyable text.
-    <button
+    <div
      aria-label="copy"
      class="ant-typography-copy"
-      style="border:0;background:transparent;padding:0;line-height:inherit"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+      tabindex="0"
    >
      <i
        aria-label="icon: copy"
@ -339,16 +343,18 @@ exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
          />
        </svg>
      </i>
-    </button>
+    </div>
  </div>
  <div
    class="ant-typography"
  >
    Replace copy text.
-    <button
+    <div
      aria-label="copy"
      class="ant-typography-copy"
-      style="border:0;background:transparent;padding:0;line-height:inherit"
+      role="button"
+      style="border:0;background:transparent;padding:0;line-height:inherit;display:inline-block"
+      tabindex="0"
    >
      <i
        aria-label="icon: copy"
@ -370,7 +376,7 @@ exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
          />
        </svg>
      </i>
-    </button>
+    </div>
  </div>
 </div>
 `;
--- a/components/typography/tests/index.test.js
+++ b/components/typography/tests/index.test.js
@ -168,7 +168,14 @@ describe('Typography', () => {
          const onStart = jest.fn();
          const onChange = jest.fn();

-          const wrapper = mount(<Paragraph editable={{ onChange, onStart }}>Bamboo</Paragraph>);
+          const className = 'test';
+          const style = {};
+
+          const wrapper = mount(
+            <Paragraph editable={{ onChange, onStart }} className={className} style={style}>
+              Bamboo
+            </Paragraph>,
+          );

          wrapper
            .find('.ant-typography-edit')
@ -177,6 +184,11 @@ describe('Typography', () => {

          expect(onStart).toHaveBeenCalled();

+          // Should have className
+          const props = wrapper.find('div').props();
+          expect(props.style).toEqual(style);
+          expect(props.className.includes(className)).toBeTruthy();
+
          wrapper.find('TextArea').simulate('change', {
            target: { value: 'Bamboo' },
          });
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@ -30,23 +30,6 @@
  .typography-title(@heading-4-size, 1.4);
 }

-.operation-unit() {
-  color: @link-color;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  transition: color 0.3s;
-
-  &:focus,
-  &:hover {
-    color: @link-hover-color;
-  }
-
-  &:active {
-    color: @link-active-color;
-  }
-}
-
 // =============== Basic ===============
 .@{typography-prefix-cls} {
  color: @text-color;
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "3.16.5",
+  "version": "3.16.6",
  "title": "Ant Design",
  "description": "An enterprise-class UI design language and React-based implementation",
  "homepage": "http://ant.design/",
@ -50,7 +50,6 @@
    "babel-runtime": "6.x",
    "classnames": "~2.2.6",
    "copy-to-clipboard": "^3.0.8",
-    "create-react-class": "^15.6.3",
    "@ant-design/create-react-context": "^0.2.4",
    "css-animation": "^1.5.0",
    "dom-closest": "^0.2.0",
@ -91,7 +90,7 @@
    "rc-util": "^4.5.1",
    "react-lazy-load": "^3.0.13",
    "react-lifecycles-compat": "^3.0.4",
-    "react-slick": "~0.23.2",
+    "react-slick": "~0.24.0",
    "resize-observer-polyfill": "^1.5.0",
    "shallowequal": "^1.1.0",
    "warning": "~4.0.2"
@ -139,7 +138,7 @@
    "fetch-jsonp": "^1.1.3",
    "glob": "^7.1.3",
    "immutability-helper": "^3.0.0",
-    "intersection-observer": "^0.5.0",
+    "intersection-observer": "^0.6.0",
    "jest": "^24.0.0",
    "jsdom": "^15.0.0",
    "jsonml.js": "^0.1.0",