feat: Breadcrumb support data-* and aria-* attributes (#18941)

* add tree-select async demo

* breadcrumb support data against

* lint fix

* add ui test

* update ui test

* update ui test

components/breadcrumb/Breadcrumb.tsx

@@ -2,6 +2,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 omit from 'omit.js';
 import BreadcrumbItem from './BreadcrumbItem';
 import BreadcrumbSeparator from './BreadcrumbSeparator';
 import Menu from '../menu';
@@ -144,6 +145,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
       className,
       routes,
       children,
+      ...restProps
     } = this.props;
     const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
     if (routes && routes.length > 0) {
@@ -169,7 +171,11 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
       });
     }
     return (
-      <div className={classNames(className, prefixCls)} style={style}>
+      <div
+        className={classNames(className, prefixCls)}
+        style={style}
+        {...omit(restProps, ['itemRender', 'params'])}
+      >
         {crumbs}
       </div>
     );

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -102,4 +102,14 @@ describe('Breadcrumb', () => {
     const wrapper = render(<Breadcrumb routes={routes} />);
     expect(wrapper).toMatchSnapshot();
   });
+
+  it('should support custom attribute', () => {
+    const wrapper = render(
+      <Breadcrumb data-custom="custom">
+        <Breadcrumb.Item data-custom="custom-item">xxx</Breadcrumb.Item>
+        <Breadcrumb.Item>yyy</Breadcrumb.Item>
+      </Breadcrumb>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });

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

@@ -157,3 +157,36 @@ exports[`Breadcrumb should render a menu 1`] = `
   </span>
 </div>
 `;
+
+exports[`Breadcrumb should support custom attribute 1`] = `
+<div
+  class="ant-breadcrumb"
+  data-custom="custom"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+      data-custom="custom-item"
+    >
+      xxx
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      yyy
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+</div>
+`;

components/menu/__tests__/index.test.js

@@ -656,16 +656,10 @@ describe('Menu', () => {
         collapsedWidth={0}
         openKeys={['3']}
       >
-        <Menu.Item key="1">
-          Option 1
-        </Menu.Item>
-        <Menu.Item key="2">
-          Option 2
-        </Menu.Item>
+        <Menu.Item key="1">Option 1</Menu.Item>
+        <Menu.Item key="2">Option 2</Menu.Item>
         <Menu.SubMenu key="3" title="Option 3">
-          <Menu.Item key="4">
-            Option 4
-          </Menu.Item>
+          <Menu.Item key="4">Option 4</Menu.Item>
         </Menu.SubMenu>
       </Menu>,
     );