merge master

2024-11-30 11:08:45 +08:00 · 2019-09-02 16:09:05 +08:00 · 2019-09-02 16:09:05 +08:00 · b081fc4766
commit b081fc4766
parent fc1d917c62 cc9c65828a
46 changed files with 7684 additions and 817 deletions
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@ -8,6 +8,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 export interface AnchorLinkProps {
  prefixCls?: string;
  href: string;
+  target: string;
  title: React.ReactNode;
  children?: React.ReactNode;
  className?: string;
@ -52,7 +53,7 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
  };

  renderAnchorLink = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, href, title, children, className } = this.props;
+    const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props;
    const prefixCls = getPrefixCls('anchor', customizePrefixCls);
    const active = this.context.antAnchor.activeLink === href;
    const wrapperClassName = classNames(className, `${prefixCls}-link`, {
@ -67,6 +68,7 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
          className={titleClassName}
          href={href}
          title={typeof title === 'string' ? title : ''}
+          target={target}
          onClick={this.handleClick}
        >
          {title}
--- a/components/anchor/tests/snapshots/demo.test.js.snap
+++ b/components/anchor/tests/snapshots/demo.test.js.snap
@ -41,6 +41,18 @@ exports[`renders ./components/anchor/demo/basic.md correctly 1`] = `
            Static demo
          </a>
        </div>
+        <div
+          class="ant-anchor-link"
+        >
+          <a
+            class="ant-anchor-link-title"
+            href="#components-anchor-demo-basic"
+            target="_blank"
+            title="Basic demo with Target"
+          >
+            Basic demo with Target
+          </a>
+        </div>
        <div
          class="ant-anchor-link"
        >
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@ -22,6 +22,7 @@ ReactDOM.render(
  <Anchor>
    <Link href="#components-anchor-demo-basic" title="Basic demo" />
    <Link href="#components-anchor-demo-static" title="Static demo" />
+    <Link href="#components-anchor-demo-basic" title="Basic demo with Target" target="_blank" />
    <Link href="#API" title="API">
      <Link href="#Anchor-Props" title="Anchor Props" />
      <Link href="#Link-Props" title="Link Props" />
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -29,7 +29,8 @@ For displaying anchor hyperlinks on page and jumping between them.

 ### Link Props

-| Property | Description          | Type              | Default | Version |
-| -------- | -------------------- | ----------------- | ------- | ------- |
-| href     | target of hyperlink  | string            |         |         |
-| title    | content of hyperlink | string\|ReactNode |         |         |
+| Property | Description                               | Type              | Default | Version |
+| -------- | ----------------------------------------- | ----------------- | ------- | ------- |
+| href     | target of hyperlink                       | string            |         |         |
+| title    | content of hyperlink                      | string\|ReactNode |         |         |
+| target   | Specifies where to display the linked URL | string            |         |         |
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@ -30,7 +30,8 @@ title: Anchor

 ### Link Props

-| 成员  | 说明     | 类型              | 默认值 | 版本 |
-| ----- | -------- | ----------------- | ------ | ---- |
-| href  | 锚点链接 | string            |        |      |
-| title | 文字内容 | string\|ReactNode |        |      |
+| 成员   | 说明                             | 类型              | 默认值 | 版本 |
+| ------ | -------------------------------- | ----------------- | ------ | ---- |
+| href   | 锚点链接                         | string            |        |      |
+| title  | 文字内容                         | string\|ReactNode |        |      |
+| target | 该属性指定在何处显示链接的资源。 | string            |        |      |
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
+import toArray from 'rc-util/lib/Children/toArray';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import Menu from '../menu';
@ -47,6 +48,16 @@ function defaultItemRender(route: Route, params: any, routes: Route[], paths: st
  return isLastItem ? <span>{name}</span> : <a href={`#/${paths.join('/')}`}>{name}</a>;
 }

+function filterFragment(children: any) {
+  return toArray(children).map((element: any) => {
+    if (React.isValidElement(element) && element.type === React.Fragment) {
+      const props: any = element.props;
+      return props.children;
+    }
+    return element;
+  });
+}
+
 export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
  static Item: typeof BreadcrumbItem;

@ -129,7 +140,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
      // generated by route
      crumbs = this.genForRoutes(this.props);
    } else if (children) {
-      crumbs = React.Children.map(children, (element: any, index) => {
+      crumbs = React.Children.map(filterFragment(children), (element: any, index) => {
        if (!element) {
          return element;
        }
--- a/components/breadcrumb/tests/Breadcrumb.test.js
+++ b/components/breadcrumb/tests/Breadcrumb.test.js
@ -55,6 +55,21 @@ describe('Breadcrumb', () => {
    expect(wrapper).toMatchSnapshot();
  });

+  // https://github.com/ant-design/ant-design/issues/18260
+  it('filter React.Fragment', () => {
+    const wrapper = render(
+      <Breadcrumb separator="">
+        <Breadcrumb.Item>Location</Breadcrumb.Item>
+        <Breadcrumb.Separator>:</Breadcrumb.Separator>
+        <>
+          <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
+          <Breadcrumb.Separator />
+        </>
+      </Breadcrumb>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
  it('should render a menu', () => {
    const routes = [
      {
--- a/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`Breadcrumb filter React.Fragment 1`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Location
+    </span>
+  </span>
+  <span
+    class="ant-breadcrumb-separator"
+  >
+    :
+  </span>
+  <span>
+    <a
+      class="ant-breadcrumb-link"
+      href=""
+    >
+      Application Center
+    </a>
+  </span>
+  <span
+    class="ant-breadcrumb-separator"
+  >
+    /
+  </span>
+</div>
+`;
+
 exports[`Breadcrumb should allow Breadcrumb.Item is null or undefined 1`] = `
 <div
  class="ant-breadcrumb"
--- a/components/card/Grid.tsx
+++ b/components/card/Grid.tsx
@ -6,14 +6,17 @@ export interface CardGridProps {
  prefixCls?: string;
  style?: React.CSSProperties;
  className?: string;
+  hoverable?: boolean;
 }

 const Grid: React.SFC<CardGridProps> = props => (
  <ConfigConsumer>
    {({ getPrefixCls }: ConfigConsumerProps) => {
-      const { prefixCls: customizePrefixCls, className, ...others } = props;
+      const { prefixCls: customizePrefixCls, className, hoverable = true, ...others } = props;
      const prefixCls = getPrefixCls('card', customizePrefixCls);
-      const classString = classNames(`${prefixCls}-grid`, className);
+      const classString = classNames(`${prefixCls}-grid`, className, {
+        [`${prefixCls}-grid-hoverable`]: hoverable,
+      });
      return <div {...others} className={classString} />;
    }}
  </ConfigConsumer>
--- a/components/card/tests/snapshots/demo.test.js.snap
+++ b/components/card/tests/snapshots/demo.test.js.snap
@ -182,7 +182,7 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
    class="ant-card-body"
  >
    <div
-      class="ant-card-grid"
+      class="ant-card-grid ant-card-grid-hoverable"
      style="width:25%;text-align:center"
    >
      Content
@ -194,31 +194,31 @@ exports[`renders ./components/card/demo/grid-card.md correctly 1`] = `
      Content
    </div>
    <div
-      class="ant-card-grid"
+      class="ant-card-grid ant-card-grid-hoverable"
      style="width:25%;text-align:center"
    >
      Content
    </div>
    <div
-      class="ant-card-grid"
+      class="ant-card-grid ant-card-grid-hoverable"
      style="width:25%;text-align:center"
    >
      Content
    </div>
    <div
-      class="ant-card-grid"
+      class="ant-card-grid ant-card-grid-hoverable"
      style="width:25%;text-align:center"
    >
      Content
    </div>
    <div
-      class="ant-card-grid"
+      class="ant-card-grid ant-card-grid-hoverable"
      style="width:25%;text-align:center"
    >
      Content
    </div>
    <div
-      class="ant-card-grid"
+      class="ant-card-grid ant-card-grid-hoverable"
      style="width:25%;text-align:center"
    >
      Content
@ -1010,6 +1010,16 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
          role="tablist"
          tabindex="0"
        >
+          <div
+            class="ant-tabs-extra-content"
+            style="float:right"
+          >
+            <a
+              href="#"
+            >
+              More
+            </a>
+          </div>
          <div
            class="ant-tabs-nav-container"
          >
--- a/components/card/demo/grid-card.md
+++ b/components/card/demo/grid-card.md
@ -24,7 +24,9 @@ const gridStyle = {
 ReactDOM.render(
  <Card title="Card Title">
    <Card.Grid style={gridStyle}>Content</Card.Grid>
-    <Card.Grid style={gridStyle}>Content</Card.Grid>
+    <Card.Grid hoverable={false} style={gridStyle}>
+      Content
+    </Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
    <Card.Grid style={gridStyle}>Content</Card.Grid>
--- a/components/card/demo/tabs.md
+++ b/components/card/demo/tabs.md
@ -85,6 +85,7 @@ class TabsCard extends React.Component {
          style={{ width: '100%' }}
          tabList={tabListNoTitle}
          activeTabKey={this.state.noTitleKey}
+          tabBarExtraContent={<a href="#">More</a>}
          onTabChange={key => {
            this.onTabChange(key, 'noTitleKey');
          }}
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -32,6 +32,7 @@ A card can be used to display content related to a single subject. The content c
 | hoverable | Lift up when hovering card | boolean | false |  |
 | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |  |
 | tabList | List of TabPane's head. | Array&lt;{key: string, tab: ReactNode}> | - |  |
+| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |  |
 | size | Size of card | `default` \| `small` | `default` | 3.12.0 |
 | title | Card title | string\|ReactNode | - |  |
 | type | Card style type, can be set to `inner` or not set | string | - |  |
@ -39,10 +40,11 @@ A card can be used to display content related to a single subject. The content c

 ### Card.Grid

-| Property  | Description               | Type   | Default | Version |
-| --------- | ------------------------- | ------ | ------- | ------- |
-| className | className of container    | string | -       |         |
-| style     | style object of container | object | -       |         |
+| Property  | Description                     | Type    | Default | Version |
+| --------- | ------------------------------- | ------- | ------- | ------- |
+| className | className of container          | string  | -       |         |
+| hoverable | Lift up when hovering card grid | boolean | true    | 3.23.0  |
+| style     | style object of container       | object  | -       |         |

 ### Card.Meta

--- a/components/card/index.tsx
+++ b/components/card/index.tsx
@ -51,6 +51,7 @@ export interface CardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 't
  cover?: React.ReactNode;
  actions?: React.ReactNode[];
  tabList?: CardTabListType[];
+  tabBarExtraContent?: React.ReactNode | null;
  onTabChange?: (key: string) => void;
  activeTabKey?: string;
  defaultActiveTabKey?: string;
@ -119,6 +120,7 @@ export default class Card extends React.Component<CardProps, {}> {
      children,
      activeTabKey,
      defaultActiveTabKey,
+      tabBarExtraContent,
      ...others
    } = this.props;

@ -186,6 +188,7 @@ export default class Card extends React.Component<CardProps, {}> {
      [hasActiveTabKey ? 'activeKey' : 'defaultActiveKey']: hasActiveTabKey
        ? activeTabKey
        : defaultActiveTabKey,
+      tabBarExtraContent,
    };

    let head;
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -33,6 +33,7 @@ cols: 1
 | hoverable | 鼠标移过时可浮起 | boolean | false |  |
 | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |  |
 | tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - |  |
+| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |  |
 | size | card 的尺寸 | `default` \| `small` | `default` | 3.12.0 |
 | title | 卡片标题 | string\|ReactNode | - |  |
 | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |  |
@ -40,10 +41,11 @@ cols: 1

 ### Card.Grid

-| 参数      | 说明                   | 类型   | 默认值 | 版本 |
-| --------- | ---------------------- | ------ | ------ | ---- |
-| className | 网格容器类名           | string | -      |      |
-| style     | 定义网格容器类名的样式 | object | -      |      |
+| 参数      | 说明                   | 类型    | 默认值 | 版本   |
+| --------- | ---------------------- | ------- | ------ | ------ |
+| className | 网格容器类名           | string  | -      |        |
+| hoverable | 鼠标移过时可浮起       | boolean | true   | 3.23.0 |
+| style     | 定义网格容器类名的样式 | object  | -      |        |

 ### Card.Meta

--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@ -98,10 +98,12 @@
      1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
      0 1px 0 0 @border-color-split inset;
    transition: all 0.3s;
-    &:hover {
-      position: relative;
-      z-index: 1;
-      box-shadow: @box-shadow-base;
+    &-hoverable {
+      &:hover {
+        position: relative;
+        z-index: 1;
+        box-shadow: @box-shadow-base;
+      }
    }
  }

--- a/components/config-provider/tests/snapshots/components.test.js.snap
+++ b/components/config-provider/tests/snapshots/components.test.js.snap
@ -5375,7 +5375,7 @@ exports[`ConfigProvider components Card configProvider 1`] = `
    class="config-card-body"
  >
    <div
-      class="config-card-grid"
+      class="config-card-grid config-card-grid-hoverable"
    >
      <div
        class="config-card-meta"
@ -5393,7 +5393,7 @@ exports[`ConfigProvider components Card normal 1`] = `
    class="ant-card-body"
  >
    <div
-      class="ant-card-grid"
+      class="ant-card-grid ant-card-grid-hoverable"
    >
      <div
        class="ant-card-meta"
@ -5411,7 +5411,7 @@ exports[`ConfigProvider components Card prefixCls 1`] = `
    class="prefix-Card-body"
  >
    <div
-      class="prefix-Card-grid"
+      class="prefix-Card-grid prefix-Card-grid-hoverable"
    >
      <div
        class="prefix-Card-meta"
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@ -27,6 +27,7 @@ When a numeric value needs to be provided.
 | step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |  |
 | value | current value | number |  |  |
 | onChange | The callback triggered when the value is changed. | function(value: number \| string) |  |  |
+| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) |  |  |

 ## Methods

--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@ -30,6 +30,7 @@ export interface InputNumberProps
  name?: string;
  id?: string;
  precision?: number;
+  onPressEnter?: React.KeyboardEventHandler<HTMLInputElement>;
 }

 export default class InputNumber extends React.Component<InputNumberProps, any> {
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@ -30,6 +30,7 @@ title: InputNumber
 | step | 每次改变步数，可以为小数 | number\|string | 1 |  |
 | value | 当前值 | number |  |  |
 | onChange | 变化回调 | Function(value: number \| string) |  |  |
+| onPressEnter | 按下回车的回调 | function(e) |  |  |

 ## 方法

--- a/components/input/tests/snapshots/demo.test.js.snap
+++ b/components/input/tests/snapshots/demo.test.js.snap
@ -204,6 +204,641 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/input/demo/algin.md correctly 1`] = `
+<div>
+  <div
+    class="ant-mentions"
+    style="width:100px"
+  >
+    <textarea
+      rows="1"
+    />
+  </div>
+  <textarea
+    class="ant-input"
+    rows="1"
+    style="width:100px"
+  />
+  <button
+    class="ant-btn ant-btn-primary"
+    type="button"
+  >
+    <span>
+      Button
+    </span>
+  </button>
+  <input
+    class="ant-input"
+    style="width:100px"
+    type="text"
+    value=""
+  />
+  <span
+    class="ant-typography"
+  >
+    Ant Design
+  </span>
+  <span
+    class="ant-input-affix-wrapper"
+    style="width:100px"
+  >
+    <span
+      class="ant-input-prefix"
+    >
+      1
+    </span>
+    <input
+      class="ant-input"
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      2
+    </span>
+  </span>
+  <span
+    class="ant-input-group-wrapper"
+    style="width:100px"
+  >
+    <span
+      class="ant-input-wrapper ant-input-group"
+    >
+      <span
+        class="ant-input-group-addon"
+      >
+        1
+      </span>
+      <input
+        class="ant-input"
+        type="text"
+        value=""
+      />
+      <span
+        class="ant-input-group-addon"
+      >
+        2
+      </span>
+    </span>
+  </span>
+  <div
+    class="ant-input-number"
+    style="width:100px"
+  >
+    <div
+      class="ant-input-number-handler-wrap"
+    >
+      <span
+        aria-disabled="false"
+        aria-label="Increase Value"
+        class="ant-input-number-handler ant-input-number-handler-up "
+        role="button"
+        unselectable="unselectable"
+      >
+        <span
+          aria-label="up"
+          class="anticon anticon-up ant-input-number-handler-up-inner"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="up"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+      <span
+        aria-disabled="false"
+        aria-label="Decrease Value"
+        class="ant-input-number-handler ant-input-number-handler-down "
+        role="button"
+        unselectable="unselectable"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-input-number-handler-down-inner"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      aria-valuemin="-9007199254740991"
+      class="ant-input-number-input-wrap"
+      role="spinbutton"
+    >
+      <input
+        autocomplete="off"
+        class="ant-input-number-input"
+        min="-9007199254740991"
+        step="1"
+        value=""
+      />
+    </div>
+  </div>
+  <span
+    class="ant-calendar-picker"
+    style="width:100px"
+  >
+    <div>
+      <input
+        class="ant-calendar-picker-input ant-input"
+        placeholder="Select date"
+        readonly=""
+        value=""
+      />
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar ant-calendar-picker-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </div>
+  </span>
+  <span
+    class="ant-time-picker"
+    style="width:100px"
+  >
+    <input
+      class="ant-time-picker-input"
+      id=""
+      placeholder="Select time"
+      type="text"
+      value=""
+    />
+    <span
+      class="ant-time-picker-icon"
+    >
+      <span
+        aria-label="clock-circle"
+        class="anticon anticon-clock-circle ant-time-picker-clock-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="clock-circle"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+          />
+          <path
+            d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"
+          />
+        </svg>
+      </span>
+    </span>
+  </span>
+  <div
+    class="ant-select ant-select-enabled"
+    style="width:100px"
+  >
+    <div
+      aria-autocomplete="list"
+      aria-controls=""
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-select-selection
+            ant-select-selection--single"
+      role="combobox"
+      tabindex="0"
+    >
+      <div
+        class="ant-select-selection__rendered"
+      >
+        <div
+          class="ant-select-selection-selected-value"
+          style="display:block;opacity:1"
+          title="Jack"
+        >
+          Jack
+        </div>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-arrow-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-select ant-select-enabled"
+    style="width:100px"
+  >
+    <div
+      aria-autocomplete="list"
+      aria-controls=""
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-select-selection
+            ant-select-selection--single"
+      role="combobox"
+      tabindex="0"
+    >
+      <div
+        class="ant-select-selection__rendered"
+      >
+        <div
+          class="ant-select-selection-selected-value"
+          style="display:block;opacity:1"
+          title="jack"
+        >
+          jack
+        </div>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-arrow-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+  <span
+    aria-haspopup="listbox"
+    class="ant-select ant-select-enabled"
+    role="combobox"
+    style="width:100px"
+    tabindex="0"
+  >
+    <span
+      class="ant-select-selection ant-select-selection--single"
+    >
+      <span
+        class="ant-select-selection__rendered"
+      >
+        <span
+          class="ant-select-selection__placeholder"
+        />
+      </span>
+      <span
+        class="ant-select-arrow"
+        style="outline:none"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-arrow-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </span>
+  </span>
+  <span
+    class="ant-cascader-picker"
+    tabindex="0"
+  >
+    <span
+      class="ant-cascader-picker-label"
+    >
+      Zhejiang / Hangzhou / West Lake
+    </span>
+    <input
+      autocomplete="off"
+      class="ant-input ant-cascader-input "
+      readonly=""
+      tabindex="-1"
+      type="text"
+      value=""
+    />
+    <span
+      aria-label="close-circle"
+      class="anticon anticon-close-circle ant-cascader-picker-clear"
+      role="img"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="close-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+        />
+      </svg>
+    </span>
+    <span
+      aria-label="down"
+      class="anticon anticon-down ant-cascader-picker-arrow"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="down"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+        />
+      </svg>
+    </span>
+  </span>
+  <span
+    class="ant-calendar-picker"
+    tabindex="0"
+  >
+    <span
+      class="ant-calendar-picker-input ant-input"
+    >
+      <input
+        class="ant-calendar-range-picker-input"
+        placeholder="Start date"
+        readonly=""
+        tabindex="-1"
+        value=""
+      />
+      <span
+        class="ant-calendar-range-picker-separator"
+      >
+         ~ 
+      </span>
+      <input
+        class="ant-calendar-range-picker-input"
+        placeholder="End date"
+        readonly=""
+        tabindex="-1"
+        value=""
+      />
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar ant-calendar-picker-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </span>
+  </span>
+  <span
+    class="ant-calendar-picker"
+  >
+    <div>
+      <input
+        class="ant-calendar-picker-input ant-input"
+        placeholder="Select date"
+        readonly=""
+        value=""
+      />
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar ant-calendar-picker-icon"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </div>
+  </span>
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="a"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Hangzhou
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="b"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        Shanghai
+      </span>
+    </label>
+  </div>
+  <div
+    class="ant-select-show-search ant-select-auto-complete ant-select ant-select-combobox ant-select-enabled"
+    style="width:100px"
+  >
+    <div
+      aria-autocomplete="list"
+      aria-controls=""
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-select-selection
+            ant-select-selection--single"
+      role="combobox"
+    >
+      <div
+        class="ant-select-selection__rendered"
+      >
+        <div
+          class="ant-select-selection__placeholder"
+          style="display:block;user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          input here
+        </div>
+        <ul>
+          <li
+            class="ant-select-search ant-select-search--inline"
+          >
+            <div
+              class="ant-select-search__field__wrap"
+            >
+              <input
+                class="ant-input ant-select-search__field"
+                type="text"
+                value=""
+              />
+              <span
+                class="ant-select-search__field__mirror"
+              >
+                 
+              </span>
+            </div>
+          </li>
+        </ul>
+      </div>
+      <span
+        class="ant-select-arrow"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-arrow-icon"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/input/demo/allowClear.md correctly 1`] = `
 <span
  class="ant-input-affix-wrapper"
--- a/components/input/demo/algin.md
+++ b/components/input/demo/algin.md
@ -0,0 +1,99 @@
+---
+order: 99
+title:
+  zh-CN: 文本对齐
+  en-US: Text Align
+debug: true
+---
+
+```jsx
+import {
+  Typography,
+  Button,
+  Input,
+  Select,
+  Cascader,
+  TreeSelect,
+  DatePicker,
+  TimePicker,
+  InputNumber,
+  Radio,
+  AutoComplete,
+  Mentions,
+} from 'antd';
+
+const { Text } = Typography;
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;
+const Option = Select.Option;
+const { MonthPicker, RangePicker } = DatePicker;
+
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+ReactDOM.render(
+  <div>
+    <Mentions style={{ width: 100 }} rows={1} />
+    <Input.TextArea rows={1} style={{ width: 100 }} />
+    <Button type="primary">Button</Button>
+    <Input style={{ width: 100 }} />
+    <Text copiable>Ant Design</Text>
+    <Input prefix="1" suffix="2" style={{ width: 100 }} />
+    <Input addonBefore="1" addonAfter="2" style={{ width: 100 }} />
+    <InputNumber style={{ width: 100 }} />
+    <DatePicker style={{ width: 100 }} />
+    <TimePicker style={{ width: 100 }} />
+    <Select style={{ width: 100 }} defaultValue="jack">
+      <Option value="jack">Jack</Option>
+      <Option value="lucy">Lucy</Option>
+      <Option value="disabled" disabled>
+        Disabled
+      </Option>
+      <Option value="Yiminghe">yiminghe</Option>
+    </Select>
+    <Select style={{ width: 100 }} combobox defaultValue="jack" />
+    <TreeSelect style={{ width: 100 }} />
+    <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} />
+    <RangePicker />
+    <MonthPicker />
+    <RadioGroup defaultValue="a">
+      <RadioButton value="a">Hangzhou</RadioButton>
+      <RadioButton value="b">Shanghai</RadioButton>
+    </RadioGroup>
+    <AutoComplete style={{ width: 100 }} placeholder="input here" />
+  </div>,
+  mountNode,
+);
+```
--- a/components/input/style/mixin.less
+++ b/components/input/style/mixin.less
@ -9,27 +9,11 @@
  height: @input-height-lg;
  padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
  font-size: @font-size-lg;
-  line-height: @input-height-lg;
-  // https://github.com/ant-design/ant-design/issues/17753
-  line-height: ~'@{line-height-base} \9';
-  // stylelint-disable-next-line
-  _:-ms-input-placeholder,
-  :root & {
-    line-height: @line-height-base;
-  }
 }

 .input-sm() {
  height: @input-height-sm;
  padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
-  line-height: @input-height-sm;
-  // https://github.com/ant-design/ant-design/issues/17753
-  line-height: ~'@{line-height-base} \9';
-  // stylelint-disable-next-line
-  _:-ms-input-placeholder,
-  :root & {
-    line-height: @line-height-base;
-  }
 }

 // input status
@ -67,14 +51,7 @@
  padding: @input-padding-vertical-base @input-padding-horizontal-base;
  color: @input-color;
  font-size: @font-size-base;
-  line-height: @input-height-base;
-  // https://github.com/ant-design/ant-design/issues/17753
-  line-height: ~'@{line-height-base} \9';
-  // stylelint-disable-next-line
-  _:-ms-input-placeholder,
-  :root & {
-    line-height: @line-height-base;
-  }
+  line-height: @line-height-base;
  background-color: @input-bg;
  background-image: none;
  border: @border-width-base @border-style-base @input-border-color;
--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@ -200,7 +200,7 @@
    }
  }

-  &-grid &-item {
+  &-grid .@{ant-prefix}-col > &-item {
    display: block;
    max-width: 100%;
    margin-bottom: 16px;
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
--- a/components/locale-provider/tests/index.test.js
+++ b/components/locale-provider/tests/index.test.js
@ -36,6 +36,7 @@ import heIL from '../he_IL';
 import hiIN from '../hi_IN';
 import hrHR from '../hr_HR';
 import huHU from '../hu_HU';
+import hyAM from '../hy_AM';
 import isIS from '../is_IS';
 import itIT from '../it_IT';
 import jaJP from '../ja_JP';
@ -87,6 +88,7 @@ const locales = [
  hiIN,
  hrHR,
  huHU,
+  hyAM,
  isIS,
  itIT,
  jaJP,
--- a/components/locale-provider/hy_AM.tsx
+++ b/components/locale-provider/hy_AM.tsx
@ -0,0 +1,3 @@
+import locale from '../locale/hy_AM';
+
+export default locale;
--- a/components/locale/hy_AM.tsx
+++ b/components/locale/hy_AM.tsx
@ -0,0 +1,108 @@
+const datePickerLocale = {
+  lang: {
+    placeholder: 'Ընտրեք ամսաթիվը',
+    rangePlaceholder: ['Մեկնարկի ամսաթիվ', 'Ավարտի ամսաթիվը'],
+    today: 'Այսօր',
+    now: 'Հիմա',
+    backToToday: 'Վերադառնալ այսօր',
+    ok: 'Օկ',
+    clear: 'Մաքրել',
+    month: 'Ամիս',
+    year: 'Տարի',
+    timeSelect: 'ընտրեք ժամը',
+    dateSelect: 'ընտրեք ամսաթիվը',
+    weekSelect: 'Ընտրեք շաբաթը',
+    monthSelect: 'Ընտրեք ամիսը',
+    yearSelect: 'Ընտրեք տարին',
+    decadeSelect: 'Ընտրեք տասնամյակը',
+    yearFormat: 'YYYY',
+    dateFormat: 'DD/MM//YYYY',
+    dayFormat: 'DD',
+    dateTimeFormat: 'DD/MM//YYYY HH:mm:ss',
+    monthBeforeYear: true,
+    previousMonth: 'Անցած ամիս (PageUp)',
+    nextMonth: 'Մյուս ամիս (PageDown)',
+    previousYear: 'Անցած տարի (Control + left)',
+    nextYear: 'Մյուս տարի (Control + right)',
+    previousDecade: 'Անցած տասնամյակ',
+    nextDecade: 'Մյուս տասնամյակ',
+    previousCentury: 'Անցած դար',
+    nextCentury: 'Մյուս դար',
+  },
+  timePickerLocale: {
+    placeholder: 'Ընտրեք ժամը',
+  },
+};
+
+export default {
+  locale: 'hy',
+  Pagination: {
+    // Options.jsx
+    items_per_page: '/ էջ',
+    jump_to: 'Գնալ',
+    jump_to_confirm: 'հաստատել',
+    page: '',
+
+    // Pagination.jsx
+    prev_page: 'Նախորդ Էջ',
+    next_page: 'Հաջորդ Էջ',
+    prev_5: 'Նախորդ 5 Էջերը',
+    next_5: 'Հաջորդ 5 Էջերը',
+    prev_3: 'Նախորդ 3 Էջերը',
+    next_3: 'Հաջորդ 3 Էջերը',
+  },
+  DatePicker: datePickerLocale,
+  TimePicker: {
+    placeholder: 'Ընտրեք ժամը',
+  },
+  Calendar: datePickerLocale,
+  global: {
+    placeholder: 'Ընտրեք',
+  },
+  Table: {
+    filterTitle: 'ֆիլտրի ընտրացանկ',
+    filterConfirm: 'ֆիլտրել',
+    filterReset: 'Զրոյացնել',
+    selectAll: 'Ընտրեք ընթացիկ էջը',
+    selectInvert: 'Փոխարկել ընթացիկ էջը',
+    sortTitle: 'Տեսակավորել',
+    expand: 'Ընդլայնեք տողը',
+    collapse: 'Կրճատել տողը',
+  },
+  Modal: {
+    okText: 'Օկ',
+    cancelText: 'Չեղարկել',
+    justOkText: 'Օկ',
+  },
+  Popconfirm: {
+    okText: 'Հաստատել',
+    cancelText: 'Մերժել',
+  },
+  Transfer: {
+    titles: ['', ''],
+    searchPlaceholder: 'Որոնեք այստեղ',
+    itemUnit: 'պարագան',
+    itemsUnit: 'պարագաները',
+  },
+  Upload: {
+    uploading: 'Ներբեռնում...',
+    removeFile: 'Հեռացնել ֆայլը',
+    uploadError: 'Ներբեռնման սխալ',
+    previewFile: 'Դիտել ֆայլը',
+  },
+  Empty: {
+    description: 'Տվյալներ չկան',
+  },
+  Icon: {
+    icon: 'պատկեր',
+  },
+  Text: {
+    edit: 'Խմբագրել',
+    copy: 'Պատճենել',
+    copied: 'Պատճենվել է',
+    expand: 'Տեսնել ավելին',
+  },
+  PageHeader: {
+    back: 'Հետ',
+  },
+};
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@ -15,22 +15,13 @@ title: Mentions

 ## API

-```jsx
-<Mention
-  onChange={onChange}
-  suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
-/>
-```
-
-## API
-
 ```jsx
 <Mentions onChange={onChange}>
  <Mentions.Option value="sample">Sample</Mentions.Option>
 </Mentions>
 ```

-### Mention
+### Mentions

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
@ -50,7 +41,7 @@ title: Mentions
 | onBlur | 失去焦点时触发 | () => void | - | 3.19.0 |
 | getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - | 3.22.0 |

-### Mention 方法
+### Mentions 方法

 | 名称    | 描述     | 版本   |
 | ------- | -------- | ------ |
--- a/components/mentions/style/index.less
+++ b/components/mentions/style/index.less
@ -35,7 +35,7 @@
    margin: 0;
    padding: @input-padding-vertical-base @input-padding-horizontal-base;
    overflow: inherit;
-    overflow-x: initial;
+    overflow-x: hidden;
    overflow-y: auto;
    font-weight: inherit;
    font-size: inherit;
--- a/components/page-header/tests/snapshots/demo.test.js.snap
+++ b/components/page-header/tests/snapshots/demo.test.js.snap
--- a/components/page-header/tests/index.test.js
+++ b/components/page-header/tests/index.test.js
@ -66,4 +66,26 @@ describe('PageHeader', () => {
    const wrapper = render(<PageHeader title={false} />);
    expect(wrapper).toMatchSnapshot();
  });
+
+  it('breadcrumbs and back icon can only have one', () => {
+    const routes = [
+      {
+        path: 'index',
+        breadcrumbName: 'First-level Menu',
+      },
+      {
+        path: 'first',
+        breadcrumbName: 'Second-level Menu',
+      },
+      {
+        path: 'second',
+        breadcrumbName: 'Third-level Menu',
+      },
+    ];
+    const wrapper = mount(<PageHeader title="Title" onBack={() => true} breadcrumb={{ routes }} />);
+    expect(wrapper.find('.ant-breadcrumb')).toHaveLength(0);
+
+    wrapper.setProps({ onBack: undefined });
+    expect(wrapper.find('.ant-breadcrumb')).toHaveLength(1);
+  });
 });
--- a/components/page-header/demo/actions.md
+++ b/components/page-header/demo/actions.md
@ -1,8 +1,8 @@
 ---
-order: 5
+order: 4
 title:
-  zh-CN: 复杂的例子
-  en-US: Complex example
+  zh-CN: 多种形态的 PageHeader
+  en-US: Various forms of PageHeader
 ---

 ## zh-CN
@ -14,107 +14,68 @@ title:
 Use the operating area and customize the sub-nodes, suitable for use in the need to display some complex information to help users quickly understand the information and operations of this page.

 ```jsx
-import { PageHeader, Tag, Tabs, Button, Statistic, Row, Col } from 'antd';
-
-const { TabPane } = Tabs;
-
-const Description = ({ term, children, span = 12 }) => (
-  <Col span={span}>
-    <div className="description">
-      <div className="term">{term}</div>
-      <div className="detail">{children}</div>
-    </div>
-  </Col>
-);
-
-const content = (
-  <Row>
-    <Description term="Created">Lili Qu</Description>
-    <Description term="Association">
-      <a>421421</a>
-    </Description>
-    <Description term="Creation Time">2017-01-10</Description>
-    <Description term="Effective Time">2017-10-10</Description>
-    <Description term="Remarks" span={24}>
-      Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
-    </Description>
-  </Row>
-);
-
-const extraContent = (
-  <Row>
-    <Col span={12}>
-      <Statistic title="Status" value="Pending" />
-    </Col>
-    <Col span={12}>
-      <Statistic title="Price" prefix="$" value={568.08} />
-    </Col>
-  </Row>
-);
+import { PageHeader, Tag, Button, Statistic, Descriptions, Row } from 'antd';

 ReactDOM.render(
-  <PageHeader
-    onBack={() => window.history.back()}
-    title="Title"
-    subTitle="This is a subtitle"
-    tags={<Tag color="red">Warning</Tag>}
-    extra={[
-      <Button key="3">Operation</Button>,
-      <Button key="2">Operation</Button>,
-      <Button key="1" type="primary">
-        Primary
-      </Button>,
-    ]}
-    footer={
-      <Tabs defaultActiveKey="1">
-        <TabPane tab="Details" key="1" />
-        <TabPane tab="Rule" key="2" />
-      </Tabs>
-    }
-  >
-    <div className="wrap">
-      <div className="content padding">{content}</div>
-      <div className="extraContent">{extraContent}</div>
-    </div>
-  </PageHeader>,
+  <div>
+    <PageHeader
+      onBack={() => window.history.back()}
+      title="Title"
+      subTitle="This is a subtitle"
+      extra={[
+        <Button key="3">Operation</Button>,
+        <Button key="2">Operation</Button>,
+        <Button key="1" type="primary">
+          Primary
+        </Button>,
+      ]}
+    >
+      <Descriptions size="small" column={3}>
+        <Descriptions.item label="Created">Lili Qu</Descriptions.item>
+        <Descriptions.item label="Association">
+          <a>421421</a>
+        </Descriptions.item>
+        <Descriptions.item label="Creation Time">2017-01-10</Descriptions.item>
+        <Descriptions.item label="Effective Time">2017-10-10</Descriptions.item>
+        <Descriptions.item label="Remarks">
+          Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+        </Descriptions.item>
+      </Descriptions>
+    </PageHeader>
+    <br />
+    <PageHeader
+      onBack={() => window.history.back()}
+      title="Title"
+      tags={<Tag color="blue">Running</Tag>}
+      subTitle="This is a subtitle"
+      extra={[
+        <Button key="3">Operation</Button>,
+        <Button key="2">Operation</Button>,
+        <Button key="1" type="primary">
+          Primary
+        </Button>,
+      ]}
+    >
+      <Row type="flex">
+        <Statistic title="Status" value="Pending" />
+        <Statistic
+          title="Price"
+          prefix="$"
+          value={568.08}
+          style={{
+            margin: '0 32px',
+          }}
+        />
+        <Statistic title="Balance" prefix="$" value={3345.08} />
+      </Row>
+    </PageHeader>
+  </div>,
  mountNode,
 );
 ```

 <style>
-#components-page-header-demo-actions .wrap {
-  display: flex;
-}
-#components-page-header-demo-actions .content {
-  flex: 1;
-}
-#components-page-header-demo-actions .extraContent {
-  min-width: 240px;
-  text-align: right;
-}
-#components-page-header-demo-actions .content.padding {
-  padding-left: 40px;
-}
-#components-page-header-demo-actions .content .description {
-  display: table;
-}
-#components-page-header-demo-actions .description .term {
-  display: table-cell;
-  margin-right: 8px;
-  padding-bottom: 8px;
-  white-space: nowrap;
-  line-height: 20px;
-}
-#components-page-header-demo-actions .description .term:after {
-  position: relative;
-  top: -0.5px;
-  margin: 0 8px 0 2px;
-  content: ":";
-}
-#components-page-header-demo-actions .description .detail {
-  display: table-cell;
-  padding-bottom: 8px;
-  width: 100%;
-  line-height: 20px;
+tr:last-child td {
+  padding-bottom: 0;
 }
 </style>
--- a/components/page-header/demo/breadcrumb.md
+++ b/components/page-header/demo/breadcrumb.md
@ -31,5 +31,8 @@ const routes = [
  },
 ];

-ReactDOM.render(<PageHeader title="Title" breadcrumb={{ routes }} />, mountNode);
+ReactDOM.render(
+  <PageHeader title="Title" breadcrumb={{ routes }} subTitle="This is a subtitle" />,
+  mountNode,
+);
 ```
--- a/components/page-header/demo/content.md
+++ b/components/page-header/demo/content.md
@ -1,23 +1,64 @@
 ---
 order: 3
 title:
-  zh-CN: 带内容的例子
-  en-US: Example with content
+  zh-CN: 组合示例
+  en-US: Complete example
 ---

 ## zh-CN

-带内容的例子,可以优先展示页面的主要信息。
+使用了 pageHeader 提供的所有能力。

 ## en-US

-An example with content that gives priority to the main information of the page.
+Show all props.Used all the capabilities provided by pageHeader.

 ```jsx
-import { PageHeader, Typography } from 'antd';
+import { PageHeader, Menu, Dropdown, Icon, Button, Tag, Typography, Row } from 'antd';

 const { Paragraph } = Typography;

+const menu = (
+  <Menu>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
+        1st menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
+        2nd menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
+        3rd menu item
+      </a>
+    </Menu.Item>
+  </Menu>
+);
+
+const DropdownMenu = () => {
+  return (
+    <Dropdown key="more" overlay={menu}>
+      <Button
+        style={{
+          border: 'none',
+          padding: 0,
+        }}
+      >
+        <Icon
+          type="ellipsis"
+          style={{
+            fontSize: 20,
+            verticalAlign: 'top',
+          }}
+        />
+      </Button>
+    </Dropdown>
+  );
+};
+
 const routes = [
  {
    path: 'index',
@ -33,6 +74,25 @@ const routes = [
  },
 ];

+const IconLink = ({ src, text }) => (
+  <a
+    style={{
+      marginRight: 16,
+      display: 'flex',
+      alignItems: 'center',
+    }}
+  >
+    <img
+      style={{
+        marginRight: 8,
+      }}
+      src={src}
+      alt="start"
+    />
+    {text}
+  </a>
+);
+
 const content = (
  <div className="content">
    <Paragraph>
@ -44,64 +104,74 @@ const content = (
      easier for designers to have a clear psychological expectation of color when adjusting colors,
      as well as facilitate communication in teams.
    </Paragraph>
-    <p className="contentLink">
-      <a>
-        <img
-          src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
-          alt="start"
-        />
-        Quick Start
-      </a>
-      <a>
-        <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info" />
-        Product Info
-      </a>
-      <a>
-        <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc" />
-        Product Doc
-      </a>
-    </p>
+    <Row className="contentLink" type="flex">
+      <IconLink
+        src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg"
+        text="Quick Start"
+      />
+      <IconLink
+        src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg"
+        text=" Product Info"
+      />
+      <IconLink
+        src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg"
+        text="Product Doc"
+      />
+    </Row>
  </div>
 );

-const extraContent = (
-  <img
-    src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
-    alt="content"
-  />
-);
+const Content = ({ children, extraContent }) => {
+  return (
+    <Row className="content" type="flex">
+      <div className="main" style={{ flex: 1 }}>
+        {children}
+      </div>
+      <div
+        className="extra"
+        style={{
+          marginLeft: 80,
+        }}
+      >
+        {extraContent}
+      </div>
+    </Row>
+  );
+};

 ReactDOM.render(
-  <PageHeader title="Title" breadcrumb={{ routes }}>
-    <div className="wrap">
-      <div className="content">{content}</div>
-      <div className="extraContent">{extraContent}</div>
-    </div>
+  <PageHeader
+    title="Title"
+    subTitle="This is a subtitle"
+    tags={<Tag color="blue">Running</Tag>}
+    extra={[
+      <Button key="3">Operation</Button>,
+      <Button key="2">Operation</Button>,
+      <Button key="1" type="primary">
+        Primary
+      </Button>,
+      <DropdownMenu key="more" />,
+    ]}
+    avatar={{ src: 'https://avatars1.githubusercontent.com/u/8186664?s=460&v=4' }}
+    breadcrumb={{ routes }}
+  >
+    <Content
+      extraContent={
+        <img
+          src="https://gw.alipayobjects.com/mdn/mpaas_user/afts/img/A*KsfVQbuLRlYAAAAAAAAAAABjAQAAAQ/original"
+          alt="content"
+        />
+      }
+    >
+      {content}
+    </Content>
  </PageHeader>,
  mountNode,
 );
 ```

 <style>
-#components-page-header-demo-content .wrap {
-  display: flex;
+.ant-page-header {
+  border: 1px solid rgb(235, 237, 240);
 }
-#components-page-header-demo-content .content {
-  flex: 1;
-}
-#components-page-header-demo-content .extraContent {
-  min-width: 240px;
-  text-align: right;
-}
-#components-page-header-demo-content .contentLink {
-  padding-top: 16px;
-}
-#components-page-header-demo-content .contentLink a {
-  display: inline-block;
-  vertical-align: text-top;
-  margin-right: 32px;
-}
-#components-page-header-demo-content .contentLink a img {
-  margin-right: 8px;
-}
-</style>
+<style>
--- a/components/page-header/demo/responsive.md
+++ b/components/page-header/demo/responsive.md
@ -0,0 +1,114 @@
+---
+order: 4
+iframe: 240
+title:
+  zh-CN: 响应式
+  en-US: responsive
+---
+
+## zh-CN
+
+在不同大小的屏幕下，应该有不同的表现
+
+## en-US
+
+Under different screen sizes, there should be different performance
+
+```jsx
+import { PageHeader, Tabs, Button, Statistic, Descriptions } from 'antd';
+
+const { TabPane } = Tabs;
+
+const renderContent = (column = 2) => (
+  <Descriptions size="small" column={column}>
+    <Descriptions.item label="Created">Lili Qu</Descriptions.item>
+    <Descriptions.item label="Association">
+      <a>421421</a>
+    </Descriptions.item>
+    <Descriptions.item label="Creation Time">2017-01-10</Descriptions.item>
+    <Descriptions.item label="Effective Time">2017-10-10</Descriptions.item>
+    <Descriptions.item label="Remarks">
+      Gonghu Road, Xihu District, Hangzhou, Zhejiang, China
+    </Descriptions.item>
+  </Descriptions>
+);
+
+const extraContent = (
+  <div
+    style={{
+      display: 'flex',
+      width: 'max-content',
+      justifyContent: 'flex-end',
+    }}
+  >
+    <Statistic
+      title="Status"
+      value="Pending"
+      style={{
+        marginRight: 32,
+      }}
+    />
+    <Statistic title="Price" prefix="$" value={568.08} />
+  </div>
+);
+
+const Content = ({ children, extra }) => {
+  return (
+    <div className="content">
+      <div className="main">{children}</div>
+      <div className="extra">{extra}</div>
+    </div>
+  );
+};
+
+ReactDOM.render(
+  <div>
+    <PageHeader
+      onBack={() => window.history.back()}
+      title="Title"
+      subTitle="This is a subtitle"
+      extra={[
+        <Button key="3">Operation</Button>,
+        <Button key="2">Operation</Button>,
+        <Button key="1" type="primary">
+          Primary
+        </Button>,
+      ]}
+      footer={
+        <Tabs defaultActiveKey="1">
+          <TabPane tab="Details" key="1" />
+          <TabPane tab="Rule" key="2" />
+        </Tabs>
+      }
+    >
+      <Content extra={extraContent}>{renderContent()}</Content>
+    </PageHeader>
+  </div>,
+  mountNode,
+);
+```
+
+<style>
+tr:last-child td {
+  padding-bottom: 0;
+}
+#components-page-header-demo-responsive .content {
+  display: flex;
+}
+@media (max-width: 576px) {
+  #components-page-header-demo-responsive .content {
+    display: block;
+  }
+
+  #components-page-header-demo-responsive .main {
+    width: 100%;
+    margin-bottom: 12px;
+  }
+
+  #components-page-header-demo-responsive .extra {
+    width: 100%;
+    margin-left: 0;
+    text-align: left;
+  }
+}
+</style>
--- a/components/page-header/index.en-US.md
+++ b/components/page-header/index.en-US.md
@ -18,9 +18,12 @@ It can also be used as inter-page navigation when it is needed to make the user
 | --- | --- | --- | --- | --- |
 | title | custom title text | ReactNode | - | 3.14.0 |
 | subTitle | custom subTitle text | ReactNode | - | 3.14.0 |
+| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - | 3.22.0 |
 | backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `<ArrowLeft />` | 3.14.0 |
 | tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |
 | extra | Operating area, at the end of the line of the title line | ReactNode | - | 3.14.0 |
 | breadcrumb | breadcrumb config | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 |
 | footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | 3.14.0 |
 | onBack | back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 |
+
+> breadcrumbs will automatically disappear when configuring back icon.
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@ -3,11 +3,12 @@ import classnames from 'classnames';
 import { ArrowLeft } from '@ant-design/icons';

 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import Divider from '../divider';
 import Tag from '../tag';
 import Breadcrumb, { BreadcrumbProps } from '../breadcrumb';
+import Avatar, { AvatarProps } from '../avatar';
 import TransButton from '../_util/transButton';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
+import warning from '../_util/warning';

 export interface PageHeaderProps {
  backIcon?: React.ReactNode;
@ -19,6 +20,7 @@ export interface PageHeaderProps {
  tags?: React.ReactElement<Tag> | React.ReactElement<Tag>[];
  footer?: React.ReactNode;
  extra?: React.ReactNode;
+  avatar?: AvatarProps;
  onBack?: (e: React.MouseEvent<HTMLDivElement>) => void;
  className?: string;
 }
@ -46,7 +48,6 @@ const renderBack = (
          >
            {backIcon}
          </TransButton>
-          <Divider type="vertical" />
        </div>
      )}
    </LocaleReceiver>
@ -57,20 +58,32 @@ const renderBreadcrumb = (breadcrumb: BreadcrumbProps) => {
  return <Breadcrumb {...breadcrumb} />;
 };

-const renderHeader = (prefixCls: string, props: PageHeaderProps) => {
-  const { breadcrumb, backIcon, onBack } = props;
+const renderHeader = (
+  breadcrumb: PageHeaderProps['breadcrumb'],
+  { backIcon, onBack }: PageHeaderProps,
+) => {
+  // by design,Bread crumbs and back icon can only have one
+  if (backIcon && onBack) {
+    if (breadcrumb && breadcrumb.routes) {
+      warning(false, 'page-header', 'breadcrumbs and back icon can only have one');
+    }
+    return null;
+  }
  if (breadcrumb && breadcrumb.routes) {
    return renderBreadcrumb(breadcrumb);
  }
-  return renderBack(prefixCls, backIcon, onBack);
+  return null;
 };

 const renderTitle = (prefixCls: string, props: PageHeaderProps) => {
-  const { title, subTitle, tags, extra } = props;
+  const { title, avatar, subTitle, tags, extra, backIcon, onBack } = props;
  const headingPrefixCls = `${prefixCls}-heading`;
  if (title || subTitle || tags || extra) {
+    const backIconDom = renderBack(prefixCls, backIcon, onBack);
    return (
      <div className={headingPrefixCls}>
+        {backIconDom}
+        {avatar && <Avatar {...avatar} />}
        {title && <span className={`${headingPrefixCls}-title`}>{title}</span>}
        {subTitle && <span className={`${headingPrefixCls}-sub-title`}>{subTitle}</span>}
        {tags && <span className={`${headingPrefixCls}-tags`}>{tags}</span>}
@ -88,6 +101,10 @@ const renderFooter = (prefixCls: string, footer: React.ReactNode) => {
  return null;
 };

+const renderChildren = (prefixCls: string, children: React.ReactNode) => {
+  return <div className={`${prefixCls}-content`}>{children}</div>;
+};
+
 const PageHeader: React.SFC<PageHeaderProps> = props => (
  <ConfigConsumer>
    {({ getPrefixCls }: ConfigConsumerProps) => {
@ -96,23 +113,22 @@ const PageHeader: React.SFC<PageHeaderProps> = props => (
        style,
        footer,
        children,
+        breadcrumb,
        className: customizeClassName,
      } = props;

      const prefixCls = getPrefixCls('page-header', customizePrefixCls);
-      const className = classnames(
-        prefixCls,
-        {
-          [`${prefixCls}-has-footer`]: footer,
-        },
-        customizeClassName,
-      );
+      const breadcrumbDom = renderHeader(breadcrumb, props);
+      const className = classnames(prefixCls, customizeClassName, {
+        'has-breadcrumb': breadcrumbDom,
+        'has-footer': footer,
+      });

      return (
        <div className={className} style={style}>
-          {renderHeader(prefixCls, props)}
+          {breadcrumbDom}
          {renderTitle(prefixCls, props)}
-          {children && <div className={`${prefixCls}-content`}>{children}</div>}
+          {children && renderChildren(prefixCls, children)}
          {renderFooter(prefixCls, footer)}
        </div>
      );
--- a/components/page-header/index.zh-CN.md
+++ b/components/page-header/index.zh-CN.md
@ -6,7 +6,7 @@ cols: 1
 subtitle: 页头
 ---

-页头可用于声明页面主题、展示用户所关注的页面重要信息，以及承载与当前页相关的操作项（包含页面级操作，页面间导航等）
+页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用。包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。

 ## 何时使用

@ -18,9 +18,12 @@ subtitle: 页头
 | --- | --- | --- | --- | --- |
 | title | 自定义标题文字 | ReactNode | - | 3.14.0 |
 | subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 |
+| avatar | 标题栏旁的头像 | [avatar props](/components/avatar-cn/) | - | 3.22.0 |
 | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `<ArrowLeft />` | 3.14.0 |
 | tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |
 | extra | 操作区，位于 title 行的行尾 | ReactNode | - | 3.14.0 |
 | breadcrumb | 面包屑的配置 | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 |
 | footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | 3.14.0 |
 | onBack | 返回按钮的点击事件 | `()=>void` | `()=>history.back()` | 3.14.0 |
+
+> 配置返回按钮时，breadcrumb 会自动隐藏。
--- a/components/page-header/style/index.less
+++ b/components/page-header/style/index.less
@ -7,21 +7,25 @@
  .reset-component;

  position: relative;
-  padding: @page-header-padding-vertical @page-header-padding-horizontal;
-  background: @component-background;
+  padding: @page-header-padding;

-  &.@{pageheader-prefix-cls}-has-footer {
-    padding-bottom: 0;
+  &.has-breadcrumb {
+    padding-top: @page-header-padding-breadcrumb;
+  }
+
+  &.has-footer {
+    padding-bottom: @page-header-padding-vertical;
  }

  &-back {
-    display: inline-block;
-    padding: 4px 0;
-    font-size: 16px;
-    line-height: 100%;
+    float: left;
+    margin: 6px 0;
+    margin-right: 16px;
+    font-size: 20px;
+    line-height: 1;
    &-button {
      .operation-unit();
-      color: @text-color;
+      color: #000;
      cursor: pointer;
    }
  }
@ -29,40 +33,48 @@
  .@{ant-prefix}-divider-vertical {
    height: 14px;
    margin: 0 12px;
+    vertical-align: middle;
  }

  .@{ant-prefix}-breadcrumb + &-heading {
-    margin-top: 12px;
+    margin-top: 8px;
  }

  &-heading {
-    display: inline-block;
+    width: 100%;
+    overflow: hidden;
    &-title {
-      display: inline-block;
+      display: block;
+      float: left;
+      margin-bottom: 0;
      padding-right: 12px;
      color: @heading-color;
-      font-weight: bold;
-      font-size: 16px;
-      line-height: 1.4;
+      font-weight: 600;
+      font-size: @heading-3-size;
+      line-height: 32px;
+    }
+
+    .@{ant-prefix}-avatar {
+      float: left;
+      margin-right: 12px;
    }

    &-sub-title {
-      display: inline-block;
-      padding-right: 12px;
+      float: left;
+      margin: 5px 0;
+      margin-right: 12px;
      color: @text-color-secondary;
      font-size: 14px;
-      line-height: 1.8;
+      line-height: 22px;
    }

    &-tags {
-      display: inline-block;
-      vertical-align: top;
+      float: left;
+      margin: 4px 0;
    }

    &-extra {
-      position: absolute;
-      top: 16px;
-      right: @page-header-padding-horizontal;
+      float: right;
      > * {
        margin-left: 8px;
      }
@ -73,18 +85,30 @@
  }

  &-content {
-    padding-top: 12px;
+    padding-top: 16px;
+    overflow: hidden;
  }

  &-footer {
-    margin: 0 -8px;
-    padding-top: 24px;
+    margin-top: 16px;
    .@{ant-prefix}-tabs-bar {
      margin-bottom: 1px;
      border-bottom: 0;
      .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
-        padding: 12px 8px;
-        padding-top: 0;
+        padding: 8px;
+        font-size: 16px;
+      }
+    }
+  }
+
+  @media (max-width: @screen-sm) {
+    &-heading {
+      &-extra {
+        display: block;
+        float: unset;
+        width: 100%;
+        padding-top: 12px;
+        overflow: hidden;
      }
    }
  }
--- a/components/page-header/style/index.tsx
+++ b/components/page-header/style/index.tsx
@ -1,5 +1,5 @@
 import './index.less';

 // style dependencies
-import '../../divider/style';
 import '../../breadcrumb/style';
+import '../../avatar/style';
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -563,8 +563,9 @@

 // PageHeader
 // ---
-@page-header-padding-horizontal: 24px;
+@page-header-padding: 24px;
@page-header-padding-vertical: 16px;
+@page-header-padding-breadcrumb: 12px;

 // Breadcrumb
 // ---
@ -674,3 +675,7 @@
@timeline-dot-border-width: 2px;
@timeline-dot-color: @primary-color;
@timeline-dot-bg: @component-background;
+
+// Typography
+// ---
+@typography-title-font-weight: 600;
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@ -12,7 +12,7 @@
 .typography-title(@fontSize; @lineHeight) {
  margin-bottom: 0.5em;
  color: @heading-color;
-  font-weight: 600;
+  font-weight: @typography-title-font-weight;
  font-size: @fontSize;
  line-height: @lineHeight;
 }
--- a/docs/react/i18n.en-US.md
+++ b/docs/react/i18n.en-US.md
@ -29,6 +29,7 @@ Supported languages:
 | Language              | Filename |
 | --------------------- | -------- |
 | Arabic                | ar_EG    |
+| Armenian              | hy_AM    |
 | Bulgarian             | bg_BG    |
 | Catalan               | ca_ES    |
 | Czech                 | cs_CZ    |
--- a/docs/react/i18n.zh-CN.md
+++ b/docs/react/i18n.zh-CN.md
@ -28,6 +28,7 @@ return (
 | 语言             | 文件名 |
 | ---------------- | ------ |
 | 阿拉伯语         | ar_EG  |
+| 亚美尼亚         | hy_AM  |
 | 保加利亚语       | bg_BG  |
 | 加泰罗尼亚语     | ca_ES  |
 | 捷克语           | cs_CZ  |
--- a/package.json
+++ b/package.json
@ -70,7 +70,7 @@
    "rc-editor-mention": "^1.1.13",
    "rc-field-form": "^0.0.0-alpha.17",
    "rc-form": "^2.4.5",
-    "rc-input-number": "~4.4.5",
+    "rc-input-number": "~4.5.0",
    "rc-mentions": "~0.4.0",
    "rc-menu": "~7.4.23",
    "rc-notification": "~3.3.1",