feat: cascader token (ant-design#44261)

* feat: cascader token * docs: en
ammar-knowledge · Aug 17, 2023 · 030f385 · 030f385
1 parent cdc4e50
commit 030f385
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 15 deletions.
diff --git a/components/cascader/style/index.ts b/components/cascader/style/index.ts
@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 import { getStyle as getCheckboxStyle } from '../../checkbox/style';
 import { textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
@@ -20,6 +21,26 @@ export interface ComponentToken {
    * @descEN Height of dropdown
    */
   dropdownHeight: number;
+  /**
+   * @desc 选项选中时背景色
+   * @descEN Background color of selected item
+   */
+  optionSelectedBg: string;
+  /**
+   * @desc 选项选中时字重
+   * @descEN Font weight of selected item
+   */
+  optionSelectedFontWeight: CSSProperties['fontWeight'];
+  /**
+   * @desc 选项内间距
+   * @descEN Padding of menu item
+   */
+  optionPadding: CSSProperties['padding'];
+  /**
+   * @desc 选项菜单（单列）内间距
+   * @descEN Padding of menu item (single column)
+   */
+  menuPadding: CSSProperties['padding'];
 }
 
 type CascaderToken = FullToken<'Cascader'>;
@@ -33,10 +54,6 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
     ${cascaderMenuItemCls}-loading-icon
   `;
 
-  const itemPaddingVertical = Math.round(
-    (token.controlHeight - token.fontSize * token.lineHeight) / 2,
-  );
-
   return [
     // =====================================================
     // ==                     Control                     ==
@@ -91,7 +108,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
               minWidth: token.controlItemWidth,
               height: token.dropdownHeight,
               margin: 0,
-              padding: token.paddingXXS,
+              padding: token.menuPadding,
               overflow: 'auto',
               verticalAlign: 'top',
               listStyle: 'none',
@@ -106,7 +123,7 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
                 display: 'flex',
                 flexWrap: 'nowrap',
                 alignItems: 'center',
-                padding: `${itemPaddingVertical}px ${token.paddingSM}px`,
+                padding: token.optionPadding,
                 lineHeight: token.lineHeight,
                 cursor: 'pointer',
                 transition: `all ${token.motionDurationMid}`,
@@ -130,8 +147,8 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
 
                 [`&-active:not(${cascaderMenuItemCls}-disabled)`]: {
                   [`&, &:hover`]: {
-                    fontWeight: token.fontWeightStrong,
-                    backgroundColor: token.controlItemBgActive,
+                    fontWeight: token.optionSelectedFontWeight,
+                    backgroundColor: token.optionSelectedBg,
                   },
                 },
 
@@ -170,8 +187,22 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Cascader', (token) => [genBaseStyle(token)], {
-  controlWidth: 184,
-  controlItemWidth: 111,
-  dropdownHeight: 180,
-});
+export default genComponentStyleHook(
+  'Cascader',
+  (token) => [genBaseStyle(token)],
+  (token) => {
+    const itemPaddingVertical = Math.round(
+      (token.controlHeight - token.fontSize * token.lineHeight) / 2,
+    );
+
+    return {
+      controlWidth: 184,
+      controlItemWidth: 111,
+      dropdownHeight: 180,
+      optionSelectedBg: token.controlItemBgActive,
+      optionSelectedFontWeight: token.fontWeightStrong,
+      optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`,
+      menuPadding: token.paddingXXS,
+    };
+  },
+);
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
@@ -227,7 +227,19 @@ export default App;
 | `@carousel-dot-height` | `dotHeight` | - |
 | `@carousel-dot-active-width` | `dotActiveWidth` | - |
 
-<!-- ### Cascader -->
+### Cascader
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@cascader-bg` | - | Deprecated |
+| `@cascader-item-selected-bg` | `optionSelectedBg` | - |
+| `@cascader-menu-bg` | - | Deprecated |
+| `@cascader-menu-border-color-split` | `colorSplit` | Global Token |
+| `@cascader-dropdown-vertical-padding` | `optionPadding` | - |
+| `@cascader-dropdown-edge-child-vertical-padding` | `menuPadding` | - |
+| `@cascader-dropdown-font-size` | - | Deprecated |
+| `@cascader-dropdown-line-height` | `lineHeight` | Global Token |
 
 <!-- ### Checkbox -->
 

diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
@@ -227,7 +227,19 @@ export default App;
 | `@carousel-dot-height` | `dotHeight` | - |
 | `@carousel-dot-active-width` | `dotActiveWidth` | - |
 
-<!-- ### Cascader 级联选择 -->
+### Cascader 级联选择
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@cascader-bg` | - | 已废弃 |
+| `@cascader-item-selected-bg` | `optionSelectedBg` | - |
+| `@cascader-menu-bg` | - | 已废弃 |
+| `@cascader-menu-border-color-split` | `colorSplit` | 全局 Token |
+| `@cascader-dropdown-vertical-padding` | `optionPadding` | - |
+| `@cascader-dropdown-edge-child-vertical-padding` | `menuPadding` | - |
+| `@cascader-dropdown-font-size` | - | 已废弃 |
+| `@cascader-dropdown-line-height` | `lineHeight` | 全局 Token |
 
 ### Checkbox 多选框