ant-design/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
kiner-tang(文辉) 8b3868ac63
feat(tooltip): tooltip support arrow prop (#40234)
* feat: tooltip support arrow props

* docs: update docs

* chore: update rc-tooltip version

* feat: update snapshots

* feat: update snapshots

* style: format code

* Update components/tooltip/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/tooltip/index.zh-CN.md

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/tooltip/demo/arrow.md

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/tooltip/demo/arrow.md

Co-authored-by: MadCcc <1075746765@qq.com>

* feat: code optimize

* docs: update docs

* feat: code optimize

* feat: del doc

* feat: update snapshots

* feat: update snapshots

* feat: update snapshots

* feat: refactor dropdown arrow style

* feat: comment

* Update components/tooltip/demo/arrow.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* feat: popover support arrow prop

* feat: tour arrow style optimize

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: update test case

* feat: update test case

* feat: update test case

* Update components/popover/index.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

* Update components/tooltip/index.zh-CN.md

Co-authored-by: MadCcc <1075746765@qq.com>

* feat: optimize code

* feat: optimize code

* feat: optimize code

* feat: optimize code

Co-authored-by: MadCcc <1075746765@qq.com>
2023-01-19 11:21:05 +08:00

1793 lines
34 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/popover/demo/arrow.tsx extend context correctly 1`] = `
<div
class="demo"
>
<div
class="ant-segmented"
>
<div
class="ant-segmented-group"
>
<label
class="ant-segmented-item ant-segmented-item-selected"
>
<input
checked=""
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="Show"
>
Show
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="Hide"
>
Hide
</div>
</label>
<label
class="ant-segmented-item"
>
<input
class="ant-segmented-item-input"
type="radio"
/>
<div
class="ant-segmented-item-label"
title="Center"
>
Center
</div>
</label>
</div>
</div>
<div
class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
role="separator"
>
<span
class="ant-divider-inner-text"
>
Content
</span>
</div>
<div
style="margin-left:70px;white-space:nowrap"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TL
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Top
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TR
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="width:70px;float:left"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LT
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Left
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LB
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="width:70px;margin-left:304px"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RT
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Right
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RB
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="margin-left:70px;clear:both;white-space:nowrap"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BL
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Bottom
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BR
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/popover/demo/basic.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Hover me
</span>
</button>,
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/popover/demo/control.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Click me
</span>
</button>,
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<a>
Close
</a>
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/popover/demo/hover-with-click.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Hover and click / 悬停并单击
</span>
</button>,
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Click title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<div>
This is click content.
</div>
<a>
Close
</a>
</div>
</div>
</div>
</div>
</div>
</div>,
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Hover title
</div>
<div
class="ant-popover-inner-content"
>
<div>
This is hover content.
</div>
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/popover/demo/placement.tsx extend context correctly 1`] = `
<div
class="demo"
>
<div
style="margin-left:70px;white-space:nowrap"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TL
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Top
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TR
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="width:70px;float:left"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LT
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Left
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LB
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="width:70px;margin-left:304px"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RT
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Right
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RB
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
style="margin-left:70px;clear:both;white-space:nowrap"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BL
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Bottom
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BR
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
<span>
Title
</span>
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/popover/demo/render-panel.tsx extend context correctly 1`] = `
Array [
<div
class="ant-popover ant-popover-pure ant-popover-placement-top"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
/>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>,
<div
class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
style="width:250px"
>
<div
class="ant-popover-content"
style="width:250px"
>
<div
class="ant-popover-arrow"
/>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>,
]
`;
exports[`renders ./components/popover/demo/triggerType.tsx extend context correctly 1`] = `
<div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Hover me
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Focus me
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Click me
</span>
</button>
<div>
<div
class="ant-popover"
style="opacity:0"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
>
<span
class="ant-popover-arrow-content"
/>
</div>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders ./components/popover/demo/wireframe.tsx extend context correctly 1`] = `
Array [
<div
class="ant-popover ant-popover-pure ant-popover-placement-top"
>
<div
class="ant-popover-content"
>
<div
class="ant-popover-arrow"
/>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>,
<div
class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
style="width:250px"
>
<div
class="ant-popover-content"
style="width:250px"
>
<div
class="ant-popover-arrow"
/>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<div>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>,
]
`;