mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

fix: Tooltip arrowPointAtCenter 1px shift bug (#31201)

Browse Source 
close #31197
This commit is contained in:
afc163 2021-06-30 11:48:11 +08:00 committed by GitHub
parent 7a10ed1e12
commit 19cd3519dd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/popover/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/popover/demo/arrow-point-at-center.md correctly 1`] = `
<div>
Array [
<button
class="ant-btn"
type="button"
@ -9,7 +9,7 @@ exports[`renders ./components/popover/demo/arrow-point-at-center.md correctly 1`
<span>
Align edge / 边缘对齐
</span>
</button>
</button>,
<button
class="ant-btn"
type="button"
@ -17,8 +17,8 @@ exports[`renders ./components/popover/demo/arrow-point-at-center.md correctly 1`
<span>
Arrow points to center / 箭头指向中心
</span>
</button>
</div>
</button>,
]
`;
exports[`renders ./components/popover/demo/basic.md correctly 1`] = `

13
components/popover/demo/arrow-point-at-center.md
View File

@ -16,23 +16,22 @@ The arrow points to the center of the target element, which set `arrowPointAtCen
```jsx
import { Popover, Button } from 'antd';
const text = <span>Title</span>;
const content = (
<div>
<>
<p>Content</p>
<p>Content</p>
</div>
</>
);
ReactDOM.render(
<div>
<Popover placement="topLeft" title={text} content={content}>
<>
<Popover placement="topLeft" title="Title" content={content}>
<Button>Align edge / 边缘对齐</Button>
</Popover>
<Popover placement="topLeft" title={text} content={content} arrowPointAtCenter>
<Popover placement="topLeft" title="Title" content={content} arrowPointAtCenter>
<Button>Arrow points to center / 箭头指向中心</Button>
</Popover>
</div>,
</>,
mountNode,
);
```

8
components/tooltip/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders ./components/tooltip/demo/arrow-point-at-center.md correctly 1`] = `
<div>
Array [
<button
class="ant-btn"
type="button"
@ -9,7 +9,7 @@ exports[`renders ./components/tooltip/demo/arrow-point-at-center.md correctly 1`
<span>
Align edge / 边缘对齐
</span>
</button>
</button>,
<button
class="ant-btn"
type="button"
@ -17,8 +17,8 @@ exports[`renders ./components/tooltip/demo/arrow-point-at-center.md correctly 1`
<span>
Arrow points to center / 箭头指向中心
</span>
</button>
</div>
</button>,
]
`;
exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`] = `

4
components/tooltip/demo/arrow-point-at-center.md
View File

@ -17,14 +17,14 @@ By specifying `arrowPointAtCenter` prop, the arrow will point to the center of t
import { Tooltip, Button } from 'antd';
ReactDOM.render(
<div>
<>
<Tooltip placement="topLeft" title="Prompt Text">
<Button>Align edge / 边缘对齐</Button>
</Tooltip>
<Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
<Button>Arrow points to center / 箭头指向中心</Button>
</Tooltip>
</div>,
</>,
mountNode,
);
```

2
components/tooltip/placements.tsx
View File

@ -38,7 +38,7 @@ export function getOverflowOptions(autoAdjustOverflow?: boolean | AdjustOverflow
export default function getPlacements(config: PlacementsConfig) {
const {
arrowWidth = 5,
arrowWidth = 4,
horizontalArrowShift = 16,
verticalArrowShift = 8,
autoAdjustOverflow,