Breadcrumb.Separator checks

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/BreadcrumbSeparator.tsx

@@ -1,25 +1,14 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
-export interface BreadcrumbProps {
-  separator?: React.ReactNode;
-}
-
-export default class BreadcrumbSeparator extends React.Component<BreadcrumbProps, any> {
-  static defaultProps = {
-    defaultSeparator: '/',
-  };
-
-  static propTypes = {
-    defaultSeparator: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  };
+export default class BreadcrumbSeparator extends React.Component<any> {
+  static __ANT_BREADCRUMB_SEPARATOR = true;
 
   renderSeparator = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { children, defaultSeparator } = this.props;
+    const { children } = this.props;
     const prefixCls = getPrefixCls('breadcrumb');
 
-    return <span className={`${prefixCls}-separator`}>{children || defaultSeparator}</span>;
+    return <span className={`${prefixCls}-separator`}>{children || '/'}</span>;
   };
 
   render() {

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

@@ -18,7 +18,7 @@ import { Breadcrumb } from 'antd';
 
 ReactDOM.render(
   <Breadcrumb separator="">
-    <Breadcrumb.Item>location</Breadcrumb.Item>
+    <Breadcrumb.Item>Location</Breadcrumb.Item>
     <Breadcrumb.Separator>:</Breadcrumb.Separator>
     <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
     <Breadcrumb.Separator />

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