From 145da279d62e135b464a85999347bd4c24c8141f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 30 May 2022 10:20:03 +0800
Subject: [PATCH] refactor: Full token of collapse (#35789)

* chore: init

* chore: full token

* chore: orign it

* chore: revert empty line
---
 components/collapse/style/index.tsx | 117 +++++++++++++++-------------
 1 file changed, 65 insertions(+), 52 deletions(-)

diff --git a/components/collapse/style/index.tsx b/components/collapse/style/index.tsx
index ac72a42848..f310952505 100644
--- a/components/collapse/style/index.tsx
+++ b/components/collapse/style/index.tsx
@@ -1,17 +1,12 @@
-// import '../../style/index.less';
-// import './index.less';
-
 // deps-lint-skip-all
-import type { CSSInterpolation } from '@ant-design/cssinjs';
 import type { GenerateStyle, FullToken } from '../../_util/theme';
-import { resetComponent, genComponentStyleHook, mergeToken } from '../../_util/theme';
+import { resetComponent, genComponentStyleHook, mergeToken, resetIcon } from '../../_util/theme';
 
 type CollapseToken = FullToken<'Collapse'> & {
   collapseContentBg: string;
   collapseContentPadding: number;
   collapseHeaderBg: string;
   collapseHeaderPadding: string;
-  collapseHeaderPaddingExtra: number;
   collapsePanelBorderRadius: number;
 };
 
@@ -22,7 +17,6 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
     collapseContentPadding,
     collapseHeaderBg,
     collapseHeaderPadding,
-    collapseHeaderPaddingExtra,
     collapsePanelBorderRadius,
 
     controlLineWidth,
@@ -31,10 +25,11 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
     colorText,
     colorTextHeading,
     colorTextDisabled,
+    fontSize,
     lineHeight,
     marginSM,
     paddingSM,
-    fontSizeSM,
+    motionDurationSlow,
   } = token;
 
   const borderBase = `${controlLineWidth}px ${controlLineType} ${colorBorder}`;
@@ -70,27 +65,31 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
           color: colorTextHeading,
           lineHeight,
           cursor: 'pointer',
-          transition: `all 0.3s, visibility 0s`,
+          transition: `all ${motionDurationSlow}, visibility 0s`,
 
-          [`${componentCls}-arrow`]: {
-            display: 'inline-block',
-            marginInlineEnd: marginSM,
-            fontSize: fontSizeSM,
-            // FIXME
-            verticalAlign: '-1px',
-
-            [`& svg`]: {
-              // FIXME
-              transition: 'transform 0.24s',
-            },
+          '&:focus': {
+            outline: 'none',
           },
 
-          [`${componentCls}-extra`]: {
-            marginInlineStart: 'auto',
+          // >>>>> Arrow
+          [`${componentCls}-expand-icon`]: {
+            height: fontSize * lineHeight,
+            display: 'flex',
+            alignItems: 'center',
+            paddingInlineEnd: marginSM,
           },
 
-          [`&:focus`]: {
-            outline: 'none',
+          [`${componentCls}-arrow`]: {
+            ...resetIcon(),
+
+            svg: {
+              transition: `transform ${motionDurationSlow}`,
+            },
+          },
+
+          // >>>>> Text
+          [`${componentCls}-header-text`]: {
+            marginInlineEnd: 'auto',
           },
         },
 
@@ -109,22 +108,6 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
         },
       },
 
-      [`&-icon-position-right`]: {
-        [`& > ${componentCls}-item `]: {
-          [`> ${componentCls}-header`]: {
-            position: 'relative',
-            padding: collapseHeaderPadding,
-            paddingInlineEnd: collapseHeaderPaddingExtra,
-
-            [`${componentCls}-arrow`]: {
-              svg: {
-                transform: 'rotate(180deg)',
-              },
-            },
-          },
-        },
-      },
-
       [`${componentCls}-content`]: {
         color: colorText,
         backgroundColor: collapseContentBg,
@@ -155,6 +138,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
         },
       },
 
+      // ============================== Ghost ==============================
       [`&-ghost`]: {
         backgroundColor: 'transparent',
         border: 0,
@@ -164,9 +148,20 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
             backgroundColor: 'transparent',
             border: 0,
             [`> ${componentCls}-content-box`]: {
-              // FIXME
-              paddingTop: 12,
-              paddingBottom: 12,
+              paddingBlock: paddingSM,
+            },
+          },
+        },
+      },
+
+      // ========================== Icon Position ==========================
+      [`&${componentCls}-icon-position-end`]: {
+        [`& > ${componentCls}-item`]: {
+          [`> ${componentCls}-header`]: {
+            [`${componentCls}-expand-icon`]: {
+              order: 1,
+              paddingInlineEnd: 0,
+              paddingInlineStart: marginSM,
             },
           },
         },
@@ -175,10 +170,31 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = token => {
   };
 };
 
+const genArrowStyle: GenerateStyle<CollapseToken> = token => {
+  const { componentCls } = token;
+
+  const fixedSelector = `> ${componentCls}-item > ${componentCls}-header ${componentCls}-arrow svg`;
+
+  return {
+    [`${componentCls}-icon-position-end, ${componentCls}-rtl`]: {
+      [fixedSelector]: {
+        transform: `rotate(180deg)`,
+      },
+    },
+
+    [`${componentCls}-rtl${componentCls}-icon-position-end`]: {
+      [fixedSelector]: {
+        transform: `rotate(0deg)`,
+      },
+    },
+  };
+};
+
 const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {
   const {
     componentCls,
     collapseHeaderBg,
+    paddingXXS,
 
     colorBorder,
   } = token;
@@ -209,27 +225,24 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = token => {
       },
 
       [`> ${componentCls}-item > ${componentCls}-content > ${componentCls}-content-box`]: {
-        // FIXME
-        paddingTop: 4,
+        paddingTop: paddingXXS,
       },
     },
   };
 };
 
-export const genCollapseStyle: GenerateStyle<CollapseToken> = (
-  token: CollapseToken,
-): CSSInterpolation => [genBaseStyle(token), genBorderlessStyle(token)];
-
 export default genComponentStyleHook('Collapse', token => {
   const collapseToken = mergeToken<CollapseToken>(token, {
     collapseContentBg: token.colorBgComponent,
     collapseContentPadding: token.padding,
     collapseHeaderBg: token.colorBgComponentSecondary,
     collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
-    // FIXME
-    collapseHeaderPaddingExtra: 40,
     collapsePanelBorderRadius: token.radiusBase,
   });
 
-  return [genCollapseStyle(collapseToken)];
+  return [
+    genBaseStyle(collapseToken),
+    genBorderlessStyle(collapseToken),
+    genArrowStyle(collapseToken),
+  ];
 });