diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 5982bffba3..7bb82c2247 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -919,7 +919,6 @@ const genPickerStyle: GenerateStyle = (token) => { const { componentCls, antCls, - boxShadowPopoverArrow, controlHeight, fontSize, inputPaddingHorizontal, @@ -960,6 +959,7 @@ const genPickerStyle: GenerateStyle = (token) => { controlItemBgHover, presetsWidth, presetsMaxWidth, + boxShadowPopoverArrow, } = token; return [ diff --git a/components/dropdown/style/index.ts b/components/dropdown/style/index.ts index 290e3cc42b..37948d4877 100644 --- a/components/dropdown/style/index.ts +++ b/components/dropdown/style/index.ts @@ -424,15 +424,12 @@ export default genComponentStyleHook( lineHeight, paddingXXS, componentCls, - borderRadiusOuter, borderRadiusLG, } = token; const dropdownPaddingVertical = (controlHeight - fontSize * lineHeight) / 2; const { dropdownArrowOffset } = getArrowOffset({ - sizePopupArrow, contentRadius: borderRadiusLG, - borderRadiusOuter, }); const dropdownToken = mergeToken(token, { diff --git a/components/style/placementArrow.ts b/components/style/placementArrow.ts index 12c4d2dbea..59e01bdc09 100644 --- a/components/style/placementArrow.ts +++ b/components/style/placementArrow.ts @@ -10,17 +10,14 @@ function connectArrowCls(classList: string[], showArrowCls: string = '') { export const MAX_VERTICAL_CONTENT_RADIUS = 8; export function getArrowOffset(options: { - sizePopupArrow: number; contentRadius: number; - borderRadiusOuter: number; limitVerticalRadius?: boolean; }) { const maxVerticalContentRadius = MAX_VERTICAL_CONTENT_RADIUS; - const { sizePopupArrow, contentRadius, borderRadiusOuter, limitVerticalRadius } = options; - const arrowInnerOffset = sizePopupArrow / 2 - Math.ceil(borderRadiusOuter * (Math.sqrt(2) - 1)); - const dropdownArrowOffset = (contentRadius > 12 ? contentRadius + 2 : 12) - arrowInnerOffset; + const { contentRadius, limitVerticalRadius } = options; + const dropdownArrowOffset = contentRadius > 12 ? contentRadius + 2 : 12; const dropdownArrowOffsetVertical = limitVerticalRadius - ? maxVerticalContentRadius - arrowInnerOffset + ? maxVerticalContentRadius : dropdownArrowOffset; return { dropdownArrowOffset, dropdownArrowOffsetVertical }; } @@ -51,9 +48,7 @@ export default function getArrowStyle { const unitWidth = width / 2; - const ax = unitWidth - outerRadius * (Math.sqrt(2) - 1); + const ax = 0; const ay = unitWidth; - const bx = unitWidth + outerRadius * (1 - 1 / Math.sqrt(2)); + const bx = (outerRadius * 1) / Math.sqrt(2); const by = unitWidth - outerRadius * (1 - 1 / Math.sqrt(2)); - const cx = 2 * unitWidth - innerRadius * (1 / Math.sqrt(2)); - const cy = innerRadius * (1 / Math.sqrt(2)); - const dx = 4 * unitWidth - cx; + const cx = unitWidth - innerRadius * (1 / Math.sqrt(2)); + const cy = outerRadius * (Math.sqrt(2) - 1) + innerRadius * (1 / Math.sqrt(2)); + const dx = 2 * unitWidth - cx; const dy = cy; - const ex = 4 * unitWidth - bx; + const ex = 2 * unitWidth - bx; const ey = by; - const fx = 4 * unitWidth - ax; + const fx = 2 * unitWidth - ax; const fy = ay; + const shadowWidth = unitWidth * Math.sqrt(2) + outerRadius * (Math.sqrt(2) - 2); + return { borderRadius: { _skip_check_: true, value: `0 0 ${innerRadius}px` }, pointerEvents: 'none', - width: width * 2, - height: width * 2, + width, + height: width, overflow: 'hidden', + '&::before': { + position: 'absolute', + bottom: 0, + insetInlineStart: 0, + width, + height: width / 2, + background: bgColor, + clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 0 ${bx} ${by} L ${cx} ${cy} A ${innerRadius} ${innerRadius} 0 0 1 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 0 ${fx} ${fy} Z')`, + content: '""', + }, + '&::after': { content: '""', position: 'absolute', - width: width / Math.sqrt(2), - height: width / Math.sqrt(2), + width: shadowWidth, + height: shadowWidth, bottom: 0, insetInline: 0, margin: 'auto', @@ -47,16 +60,5 @@ export const roundedArrow = ( zIndex: 0, background: 'transparent', }, - - '&::before': { - position: 'absolute', - bottom: 0, - insetInlineStart: 0, - width: width * 2, - height: width / 2, - background: bgColor, - clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 0 ${bx} ${by} L ${cx} ${cy} A ${innerRadius} ${innerRadius} 0 0 1 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 0 ${fx} ${fy} Z')`, - content: '""', - }, }; }; diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index 171f6d05df..45baf860e6 100644 --- a/components/theme/util/alias.ts +++ b/components/theme/util/alias.ts @@ -152,8 +152,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken screenXXL, screenXXLMin: screenXXL, - // FIXME: component box-shadow, should be removed - boxShadowPopoverArrow: '3px 3px 7px rgba(0, 0, 0, 0.1)', + boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)', boxShadowCard: ` 0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()}, 0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},