Skip to content

Commit

Permalink
fix: Breadcrumb validateDOMNesting warning (#16929)
Browse files Browse the repository at this point in the history 
* 🐛 Fix Breadcrumb validateDOMNesting warning

```
Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
    in a (created by Context.Consumer)
    in span (created by Context.Consumer)
    in a (created by Context.Consumer)
    in Trigger (created by Dropdown)
    in Dropdown (created by Context.Consumer)
    in Dropdown (created by Context.Consumer)
    in span (created by Context.Consumer)
    in BreadcrumbItem (created by Context.Consumer)
    in div (created by Context.Consumer)
    in Breadcrumb (created by TestBreadcrumb)
    in TestBreadcrumb
```

* ✅ update snapshots
  • Loading branch information
@afc163 @zombieJ
afc163 authored and zombieJ committed Jun 3, 2019
1 parent a6ef4ca commit 6d2a5df
Show file tree
Hide file tree
Showing 4 changed files with 108 additions and 110 deletions.
4 changes: 2 additions & 2 deletions components/breadcrumb/BreadcrumbItem.tsx
View file
Expand Up @@ -71,10 +71,10 @@ export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps,
if (overlay) {
return (
<DropDown overlay={overlay} placement="bottomCenter">
<a className={`${prefixCls}-overlay-link`}>
<span className={`${prefixCls}-overlay-link`}>
{breadcrumbItem}
<Icon type="down" />
</a>
</span>
</DropDown>
);
}
Expand Down
63 changes: 32 additions & 31 deletions components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
View file
Expand Up @@ -71,42 +71,43 @@ exports[`Breadcrumb should render a menu 1`] = `
</span>
</span>
<span>
<a
<span
class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
>
<span
class="ant-breadcrumb-link"
/>
</a>
<a
href="#/index/first"
>
first
</a>
</span>
<i
aria-label="icon: down"
class="anticon anticon-down"
>
<svg
aria-hidden="true"
class=""
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<a
href="#/index/first"
>
first
</a>
</span>
<i
aria-label="icon: down"
class="anticon anticon-down"
>
<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>
</i>
</span>
<span
class="ant-breadcrumb-separator"
>
<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>
</i>
<span
class="ant-breadcrumb-separator"
>
/
/
</span>
</span>
<span>
<span
Expand Down
129 changes: 64 additions & 65 deletions components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
View file
Expand Up @@ -64,89 +64,88 @@ exports[`renders ./components/breadcrumb/demo/basic.md correctly 1`] = `
`;

exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
<div>
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<div
class="ant-breadcrumb"
>
<span>
<span
class="ant-breadcrumb-link"
>
Ant Design
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
Component
</a>
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
<a
class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
>
<span
class="ant-breadcrumb-link"
/>
</a>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
<a
href=""
>
General
Component
</a>
</span>
<i
aria-label="icon: down"
class="anticon anticon-down"
>
<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>
</i>
<span
class="ant-breadcrumb-separator"
>
/
</span>
<span>
</span>
<span>
<span
class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
>
<span
class="ant-breadcrumb-link"
>
Button
<a
href=""
>
General
</a>
</span>
<span
class="ant-breadcrumb-separator"
<i
aria-label="icon: down"
class="anticon anticon-down"
>
/
</span>
<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>
</i>
</span>
</div>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
<span>
<span
class="ant-breadcrumb-link"
>
Button
</span>
<span
class="ant-breadcrumb-separator"
>
/
</span>
</span>
</div>
`;

Expand Down
22 changes: 10 additions & 12 deletions components/breadcrumb/demo/overlay.md
View file
Expand Up @@ -37,18 +37,16 @@ const menu = (
);

ReactDOM.render(
<div>
<Breadcrumb>
<Breadcrumb.Item>Ant Design</Breadcrumb.Item>
<Breadcrumb.Item>
<a href="">Component</a>
</Breadcrumb.Item>
<Breadcrumb.Item overlay={menu}>
<a href="">General</a>
</Breadcrumb.Item>
<Breadcrumb.Item>Button</Breadcrumb.Item>
</Breadcrumb>
</div>,
<Breadcrumb>
<Breadcrumb.Item>Ant Design</Breadcrumb.Item>
<Breadcrumb.Item>
<a href="">Component</a>
</Breadcrumb.Item>
<Breadcrumb.Item overlay={menu}>
<a href="">General</a>
</Breadcrumb.Item>
<Breadcrumb.Item>Button</Breadcrumb.Item>
</Breadcrumb>,
mountNode,
);
```

0 comments on commit 6d2a5df

Please sign in to comment.