diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index a117452af0..ce9e4a37b6 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -18,13 +18,13 @@ export interface ComponentToken extends ArrowToken, ArrowOffsetToken { * @desc 气泡卡片宽度 * @descEN Width of Popover */ - width: number; + width?: number; /** * @deprecated Please use `titleMinWidth` instead * @desc 气泡卡片最小宽度 * @descEN Min width of Popover */ - minWidth: number; + minWidth?: number; /** * @desc 气泡卡片标题最小宽度 * @descEN Min width of Popover title @@ -35,12 +35,21 @@ export interface ComponentToken extends ArrowToken, ArrowOffsetToken { * @descEN z-index of Popover */ zIndexPopup: number; + /** @internal */ + innerPadding: number; + /** @internal */ + titlePadding: number | string; + /** @internal */ + titleMarginBottom: number; + /** @internal */ + titleBorderBottom: string; + /** @internal */ + innerContentPadding: number | string; } export type PopoverToken = FullToken<'Popover'> & { popoverBg: string; popoverColor: string; - popoverPadding: number | string; }; const genBaseStyle: GenerateStyle = (token) => { @@ -49,14 +58,17 @@ const genBaseStyle: GenerateStyle = (token) => { popoverColor, titleMinWidth, fontWeightStrong, - popoverPadding, + innerPadding, boxShadowSecondary, colorTextHeading, - borderRadiusLG: borderRadius, + borderRadiusLG, zIndexPopup, - marginXS, + titleMarginBottom, colorBgElevated, popoverBg, + titleBorderBottom, + innerContentPadding, + titlePadding, } = token; return [ @@ -94,20 +106,23 @@ const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-inner`]: { backgroundColor: popoverBg, backgroundClip: 'padding-box', - borderRadius, + borderRadius: borderRadiusLG, boxShadow: boxShadowSecondary, - padding: popoverPadding, + padding: innerPadding, }, [`${componentCls}-title`]: { minWidth: titleMinWidth, - marginBottom: marginXS, + marginBottom: titleMarginBottom, color: colorTextHeading, fontWeight: fontWeightStrong, + borderBottom: titleBorderBottom, + padding: titlePadding, }, [`${componentCls}-inner-content`]: { color: popoverColor, + padding: innerContentPadding, }, }, }, @@ -152,62 +167,52 @@ const genColorStyle: GenerateStyle = (token) => { }; }; -const genWireframeStyle: GenerateStyle = (token) => { +export const prepareComponentToken: GetDefaultToken<'Popover'> = (token) => { const { - componentCls, lineWidth, + controlHeight, + fontHeight, + padding, + wireframe, + zIndexPopupBase, + borderRadiusLG, + marginXS, lineType, colorSplit, paddingSM, - controlHeight, - fontSize, - lineHeight, - padding, } = token; - const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight); + const titlePaddingBlockDist = controlHeight - fontHeight; const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2; const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth; const popoverPaddingHorizontal = padding; return { - [componentCls]: { - [`${componentCls}-inner`]: { - padding: 0, - }, + titleMinWidth: 177, + zIndexPopup: zIndexPopupBase + 30, + ...getArrowToken(token), + ...getArrowOffsetToken({ + contentRadius: borderRadiusLG, + limitVerticalRadius: true, + }), - [`${componentCls}-title`]: { - margin: 0, - padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`, - borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`, - }, - - [`${componentCls}-inner-content`]: { - padding: `${paddingSM}px ${popoverPaddingHorizontal}px`, - }, - }, + // internal + innerPadding: wireframe ? 0 : 12, + titleMarginBottom: wireframe ? 0 : marginXS, + titlePadding: wireframe + ? `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px` + : 0, + titleBorderBottom: wireframe ? `${lineWidth}px ${lineType} ${colorSplit}` : 'none', + innerContentPadding: wireframe ? `${paddingSM}px ${popoverPaddingHorizontal}px` : 0, }; }; -export const prepareComponentToken: GetDefaultToken<'Popover'> = (token) => ({ - width: 177, - minWidth: 177, - titleMinWidth: 177, - zIndexPopup: token.zIndexPopupBase + 30, - ...getArrowToken(token), - ...getArrowOffsetToken({ - contentRadius: token.borderRadiusLG, - limitVerticalRadius: true, - }), -}); - export default genComponentStyleHook( 'Popover', (token) => { - const { colorBgElevated, colorText, wireframe } = token; + const { colorBgElevated, colorText } = token; const popoverToken = mergeToken(token, { - popoverPadding: 12, // Fixed Value popoverBg: colorBgElevated, popoverColor: colorText, }); @@ -215,7 +220,6 @@ export default genComponentStyleHook( return [ genBaseStyle(popoverToken), genColorStyle(popoverToken), - wireframe && genWireframeStyle(popoverToken), initZoomMotion(popoverToken, 'zoom-big'), ]; },