ant-design/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
黑雨 a17c4cb581
feat: popover Component Token (#42337)
*  feat: popover Component Token

*  feat: update

*  feat: update

*  feat: update

*  feat: update

*  feat: update

*  feat: update snap

*  feat: update

*  feat: update

*  feat: update

*  feat: update
2023-05-25 20:09:48 +08:00

1827 lines
39 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
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Top
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TR
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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
style="width: 70px; float: left;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LT
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-leftTop"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Left
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-left"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; top: 0px; right: 0px;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LB
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-leftBottom"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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
style="width: 70px; margin-left: 304px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RT
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-rightTop"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Right
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RB
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-rightBottom"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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
style="margin-left: 70px; clear: both; white-space: nowrap;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BL
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Bottom
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottom"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BR
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
`;
exports[`renders components/popover/demo/arrow-point-at-center.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Align edge / 边缘对齐
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<p>
Content
</p>
<p>
Content
</p>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-space-item"
style="padding-bottom: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Arrow points to center / 箭头指向中心
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-title"
>
Title
</div>
<div
class="ant-popover-inner-content"
>
<p>
Content
</p>
<p>
Content
</p>
</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
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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/component-token.tsx extend context correctly 1`] = `
Array [
<div
class="ant-popover ant-popover-pure ant-popover-placement-top"
>
<div
class="ant-popover-arrow"
/>
<div
class="ant-popover-content"
>
<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-arrow"
/>
<div
class="ant-popover-content"
style="width: 250px;"
>
<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/control.tsx extend context correctly 1`] = `
Array [
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Click me
</span>
</button>,
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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>,
]
`;
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
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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>,
]
`;
exports[`renders components/popover/demo/placement.tsx extend context correctly 1`] = `
<div>
<div
style="margin-left: 70px; white-space: nowrap;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TL
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Top
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
TR
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-topRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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
style="width: 70px; float: left;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LT
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-leftTop"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Left
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-left"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; top: 0px; right: 0px;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
LB
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-leftBottom"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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
style="width: 70px; margin-left: 304px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RT
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-rightTop"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Right
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-right"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
RB
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-rightBottom"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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
style="margin-left: 70px; clear: both; white-space: nowrap;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BL
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Bottom
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottom"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; top: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
BR
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<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>
`;
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-arrow"
/>
<div
class="ant-popover-content"
>
<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-arrow"
/>
<div
class="ant-popover-content"
style="width: 250px;"
>
<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
class="ant-space ant-space-horizontal ant-space-align-center"
style="flex-wrap: wrap; margin-bottom: -8px;"
>
<div
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Hover me
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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
class="ant-space-item"
style="margin-right: 8px; padding-bottom: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Focus me
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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
class="ant-space-item"
style="padding-bottom: 8px;"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Click me
</span>
</button>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-popover-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
/>
<div
class="ant-popover-content"
>
<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-arrow"
/>
<div
class="ant-popover-content"
>
<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-arrow"
/>
<div
class="ant-popover-content"
style="width: 250px;"
>
<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>,
]
`;