From ec288bc39cc5ad11c68ac9e12a223d26b1a5228d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Wed, 15 Nov 2023 14:24:05 +0800 Subject: [PATCH] feat: Collapse support cssVar (#45862) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: collapse support cssVar * Update components/collapse/style/index.ts Co-authored-by: MadCcc Signed-off-by: 红果汁 * chore: clean code * Update components/collapse/style/index.ts Co-authored-by: MadCcc Signed-off-by: 红果汁 * fix: add missing fontHeightLG * fix: lineHeight to lineHeightLG * fix: css * fix: css --------- Signed-off-by: 红果汁 Co-authored-by: MadCcc --- components/collapse/Collapse.tsx | 6 ++-- components/collapse/style/cssVar.ts | 4 +++ components/collapse/style/index.ts | 46 +++++++++++++++++------------ 3 files changed, 35 insertions(+), 21 deletions(-) create mode 100644 components/collapse/style/cssVar.ts diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 3fe381530e..7e9de43fab 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -16,6 +16,7 @@ import type { SizeType } from '../config-provider/SizeContext'; import type { CollapsibleType } from './CollapsePanel'; import CollapsePanel from './CollapsePanel'; import useStyle from './style'; +import useCSSVar from './style/cssVar'; /** @deprecated Please use `start` | `end` instead */ type ExpandIconPositionLegacy = 'left' | 'right'; @@ -76,7 +77,8 @@ const Collapse = React.forwardRef((props, ref) => const mergedSize = useSize((ctx) => customizeSize ?? ctx ?? 'middle'); const prefixCls = getPrefixCls('collapse', customizePrefixCls); const rootPrefixCls = getPrefixCls(); - const [wrapSSR, hashId] = useStyle(prefixCls); + const [, hashId] = useStyle(prefixCls); + const wrapCSSVar = useCSSVar(prefixCls); if (process.env.NODE_ENV !== 'production') { const warning = devUseWarning('Collapse'); @@ -153,7 +155,7 @@ const Collapse = React.forwardRef((props, ref) => [children], ); - return wrapSSR( + return wrapCSSVar( = (token) => { colorText, colorTextHeading, colorTextDisabled, - fontSize, fontSizeLG, lineHeight, + lineHeightLG, marginSM, paddingSM, paddingLG, @@ -62,9 +64,11 @@ export const genBaseStyle: GenerateStyle = (token) => { motionDurationSlow, fontSizeIcon, contentPadding, + fontHeight, + fontHeightLG, } = token; - const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`; + const borderBase = `${unit(lineWidth)} ${lineType} ${colorBorder}`; return { [componentCls]: { @@ -72,7 +76,7 @@ export const genBaseStyle: GenerateStyle = (token) => { backgroundColor: headerBg, border: borderBase, borderBottom: 0, - borderRadius: `${collapsePanelBorderRadius}px`, + borderRadius: collapsePanelBorderRadius, [`&-rtl`]: { direction: 'rtl', @@ -84,7 +88,9 @@ export const genBaseStyle: GenerateStyle = (token) => { [` &, & > ${componentCls}-header`]: { - borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`, + borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit( + collapsePanelBorderRadius, + )}`, }, }, @@ -109,7 +115,7 @@ export const genBaseStyle: GenerateStyle = (token) => { // >>>>> Arrow [`${componentCls}-expand-icon`]: { - height: fontSize * lineHeight, + height: fontHeight, display: 'flex', alignItems: 'center', paddingInlineEnd: marginSM, @@ -170,7 +176,7 @@ export const genBaseStyle: GenerateStyle = (token) => { [`> ${componentCls}-expand-icon`]: { // Arrow offset - marginInlineStart: paddingSM - paddingXS, + marginInlineStart: token.calc(paddingSM).sub(paddingXS).equal(), }, }, [`> ${componentCls}-content > ${componentCls}-content-box`]: { @@ -182,15 +188,15 @@ export const genBaseStyle: GenerateStyle = (token) => { [`&-large`]: { [`> ${componentCls}-item`]: { fontSize: fontSizeLG, - + lineHeight: lineHeightLG, [`> ${componentCls}-header`]: { padding: collapseHeaderPaddingLG, paddingInlineStart: padding, [`> ${componentCls}-expand-icon`]: { - height: fontSizeLG * lineHeight, + height: fontHeightLG, // Arrow offset - marginInlineStart: paddingLG - padding, + marginInlineStart: token.calc(paddingLG).sub(padding).equal(), }, }, [`> ${componentCls}-content > ${componentCls}-content-box`]: { @@ -201,7 +207,7 @@ export const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-item:last-child`]: { [`> ${componentCls}-content`]: { - borderRadius: `0 0 ${collapsePanelBorderRadius}px ${collapsePanelBorderRadius}px`, + borderRadius: `0 0 ${unit(collapsePanelBorderRadius)} ${unit(collapsePanelBorderRadius)}`, }, }, @@ -307,12 +313,19 @@ const genGhostStyle: GenerateStyle = (token) => { }; }; +export const prepareComponentToken: GetDefaultToken<'Collapse'> = (token) => ({ + headerPadding: `${token.paddingSM}px ${token.padding}px`, + headerBg: token.colorFillAlter, + contentPadding: `${token.padding}px 16px`, // Fixed Value + contentBg: token.colorBgContainer, +}); + export default genComponentStyleHook( 'Collapse', (token) => { const collapseToken = mergeToken(token, { - collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`, - collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`, + collapseHeaderPaddingSM: `${unit(token.paddingXS)} ${unit(token.paddingSM)}`, + collapseHeaderPaddingLG: `${unit(token.padding)} ${unit(token.paddingLG)}`, collapsePanelBorderRadius: token.borderRadiusLG, }); @@ -324,10 +337,5 @@ export default genComponentStyleHook( genCollapseMotion(collapseToken), ]; }, - (token) => ({ - headerPadding: `${token.paddingSM}px ${token.padding}px`, - headerBg: token.colorFillAlter, - contentPadding: `${token.padding}px 16px`, // Fixed Value - contentBg: token.colorBgContainer, - }), + prepareComponentToken, );