feat: add Breadcrumb.Separator

components/breadcrumb/Breadcrumb.tsx

@@ -3,6 +3,7 @@ import * as PropTypes from 'prop-types';
 import { cloneElement } from 'react';
 import classNames from 'classnames';
 import BreadcrumbItem from './BreadcrumbItem';
+import BreadcrumbSeparator from './BreadcrumbSeparator';
 import Menu from '../menu';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import warning from '../_util/warning';
@@ -49,6 +50,7 @@ function defaultItemRender(route: Route, params: any, routes: Route[], paths: st
 
 export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
   static Item: typeof BreadcrumbItem;
+  static Separator: typeof BreadcrumbSeparator;
 
   static defaultProps = {
     separator: '/',
@@ -141,11 +143,14 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
         if (!element) {
           return element;
         }
+
         warning(
-          element.type && element.type.__ANT_BREADCRUMB_ITEM,
+          element.type &&
+            (element.type.__ANT_BREADCRUMB_ITEM || element.type.__ANT_BREADCRUMB_SEPARATOR),
           'Breadcrumb',
-          "Only accepts Breadcrumb.Item as it's children",
+          "Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
         );
+
         return cloneElement(element, {
           separator,
           key: index,

components/breadcrumb/BreadcrumbItem.tsx

@@ -55,7 +55,9 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
       return (
         <span>
           {link}
-          <span className={`${prefixCls}-separator`}>{separator}</span>
+          {separator && separator !== '' && (
+            <span className={`${prefixCls}-separator`}>{separator}</span>
+          )}
         </span>
       );
     }

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+
+export default class BreadcrumbSeparator extends React.Component<any> {
+  static __ANT_BREADCRUMB_SEPARATOR = true;
+
+  renderSeparator = ({ getPrefixCls }: ConfigConsumerProps) => {
+    const { children } = this.props;
+    const prefixCls = getPrefixCls('breadcrumb');
+
+    return <span className={`${prefixCls}-separator`}>{children || '/'}</span>;
+  };
+
+  render() {
+    return <ConfigConsumer>{this.renderSeparator}</ConfigConsumer>;
+  }
+}

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -14,7 +14,7 @@ describe('Breadcrumb', () => {
   });
 
   // https://github.com/airbnb/enzyme/issues/875
-  it('warns on non-Breadcrumb.Item children', () => {
+  it('warns on non-Breadcrumb.Item and non-Breadcrumb.Separator children', () => {
     const MyCom = () => <div>foo</div>;
     mount(
       <Breadcrumb>
@@ -23,7 +23,7 @@ describe('Breadcrumb', () => {
     );
     expect(errorSpy.mock.calls).toHaveLength(1);
     expect(errorSpy.mock.calls[0][0]).toMatch(
-      "Warning: [antd: Breadcrumb] Only accepts Breadcrumb.Item as it's children",
+      "Warning: [antd: Breadcrumb] Only accepts Breadcrumb.Item and Breadcrumb.Separator as it's children",
     );
   });
 

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

@@ -299,6 +299,58 @@ exports[`renders ./components/breadcrumb/demo/separator.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/breadcrumb/demo/separator-1.md correctly 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>
+  <span>
+    <a
+      class="ant-breadcrumb-link"
+      href=""
+    >
+      Application List
+    </a>
+  </span>
+  <span
+    class="ant-breadcrumb-separator"
+  >
+    /
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      An Application
+    </span>
+  </span>
+</div>
+`;
+
 exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
 <div
   class="ant-breadcrumb"

components/breadcrumb/demo/separator-1.md

@@ -0,0 +1,31 @@
+---
+order: 6
+title:
+  zh-CN: 分隔符
+  en-US: Configuring the Separator
+---
+
+## zh-CN
+
+使用 `Breadcrumb.Separator` 可以自定义分隔符。
+
+## en-US
+
+The separator can be customized by setting the separator property: `Breadcrumb.Separator`
+
+```jsx
+import { Breadcrumb } from 'antd';
+
+ReactDOM.render(
+  <Breadcrumb separator="">
+    <Breadcrumb.Item>Location</Breadcrumb.Item>
+    <Breadcrumb.Separator>:</Breadcrumb.Separator>
+    <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
+    <Breadcrumb.Separator />
+    <Breadcrumb.Item>An Application</Breadcrumb.Item>
+  </Breadcrumb>,
+  mountNode,
+);
+```

components/breadcrumb/index.tsx

@@ -1,8 +1,10 @@
 import Breadcrumb from './Breadcrumb';
 import BreadcrumbItem from './BreadcrumbItem';
+import BreadcrumbSeparator from './BreadcrumbSeparator';
 
 export { BreadcrumbProps } from './Breadcrumb';
 export { BreadcrumbItemProps } from './BreadcrumbItem';
 
 Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Separator = BreadcrumbSeparator;
 export default Breadcrumb;

components/breadcrumb/index.zh-CN.md

@@ -26,12 +26,11 @@ title: Breadcrumb
 
 ### Breadcrumb.Item
 
-| 参数      | 参数           | 类型                                   | 默认值 | 版本   |
-| --------- | -------------- | -------------------------------------- | ------ | ------ |
-| href      | 链接的目的地   | string                                 | -      | 3.17.0 |
-| separator | 自定义的分隔符 | string\|ReactNode                      | '/'    | 3.17.0 |
-| overlay   | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | -      | 3.17.0 |
-| onClick   | 单击事件       | (e:MouseEvent)=>void                   | -      | 3.17.0 |
+| 参数    | 参数           | 类型                                   | 默认值 | 版本   |
+| ------- | -------------- | -------------------------------------- | ------ | ------ |
+| href    | 链接的目的地   | string                                 | -      | 3.17.0 |
+| overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | -      | 3.17.0 |
+| onClick | 单击事件       | (e:MouseEvent)=>void                   | -      | 3.17.0 |
 
 ### routes