test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-29 18:50:00 +08:00
Code Issues Actions 48 Packages Projects Releases Wiki Activity

fix: popup align position (#50134)

Browse Source 
* fix: popup align

* chore: adjust tooltip

* fix: var
This commit is contained in:
二货爱吃白萝卜 2024-07-30 11:45:46 +08:00 committed by GitHub
parent e43b1a278e
commit 3456257eff
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/popover/style/index.ts
View File

@ -88,7 +88,11 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
textAlign: 'start',
cursor: 'auto',
userSelect: 'text',
transformOrigin: `var(--arrow-x, 50%) var(--arrow-y, 50%)`,
// When use `autoArrow`, origin will follow the arrow position
'--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))',
transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '),
'--antd-arrow-background-color': colorBgElevated,
width: 'max-content',
maxWidth: '100vw',

49
components/style/placementArrow.ts
View File

@ -1,4 +1,5 @@
import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
import { unit } from '@ant-design/cssinjs';
import type { AliasToken, TokenWithCommonCls } from '../theme/internal';
import type { ArrowToken } from './roundedArrow';
@ -95,17 +96,25 @@ export default function getArrowStyle<
transform: 'translateX(-50%) translateY(100%) rotate(180deg)',
},
[`&-placement-topLeft > ${componentCls}-arrow`]: {
left: {
_skip_check_: true,
value: arrowOffsetHorizontal,
'&-placement-topLeft': {
'--arrow-offset-horizontal': arrowOffsetHorizontal,
[`> ${componentCls}-arrow`]: {
left: {
_skip_check_: true,
value: arrowOffsetHorizontal,
},
},
},
[`&-placement-topRight > ${componentCls}-arrow`]: {
right: {
_skip_check_: true,
value: arrowOffsetHorizontal,
'&-placement-topRight': {
'--arrow-offset-horizontal': `calc(100% - ${unit(arrowOffsetHorizontal)})`,
[`> ${componentCls}-arrow`]: {
right: {
_skip_check_: true,
value: arrowOffsetHorizontal,
},
},
},
}),
@ -129,17 +138,25 @@ export default function getArrowStyle<
transform: `translateX(-50%) translateY(-100%)`,
},
[`&-placement-bottomLeft > ${componentCls}-arrow`]: {
left: {
_skip_check_: true,
value: arrowOffsetHorizontal,
'&-placement-bottomLeft': {
'--arrow-offset-horizontal': arrowOffsetHorizontal,
[`> ${componentCls}-arrow`]: {
left: {
_skip_check_: true,
value: arrowOffsetHorizontal,
},
},
},
[`&-placement-bottomRight > ${componentCls}-arrow`]: {
right: {
_skip_check_: true,
value: arrowOffsetHorizontal,
'&-placement-bottomRight': {
'--arrow-offset-horizontal': `calc(100% - ${unit(arrowOffsetHorizontal)})`,
[`> ${componentCls}-arrow`]: {
right: {
_skip_check_: true,
value: arrowOffsetHorizontal,
},
},
},
}),

6
components/tooltip/style/index.ts
View File

@ -52,7 +52,11 @@ const genTooltipStyle: GenerateStyle<TooltipToken> = (token) => {
width: 'max-content',
maxWidth: tooltipMaxWidth,
visibility: 'visible',
transformOrigin: `var(--arrow-x, 50%) var(--arrow-y, 50%)`,
// When use `autoArrow`, origin will follow the arrow position
'--valid-offset-x': 'var(--arrow-offset-horizontal, var(--arrow-x))',
transformOrigin: [`var(--valid-offset-x, 50%)`, `var(--arrow-y, 50%)`].join(' '),
'&-hidden': {
display: 'none',
},