feat: select component token (ant-design#44228)

* feat: select token

* feat: select token

* docs: add demo

components/select/__tests__/demo-extend.test.ts

@@ -1,3 +1,3 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('select', { skip: ['render-panel.tsx', 'big-data.tsx'] });
+extendTest('select', { skip: ['render-panel.tsx', 'big-data.tsx', 'component-token.tsx'] });

components/select/__tests__/demo.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest';
 
 demoTest('select', {
-  skip: ['render-panel.tsx'],
+  skip: ['render-panel.tsx', 'component-token.tsx'],
   testRootProps: false,
 });
 

components/select/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+组件 Token
+
+## en-US
+
+Component Token

components/select/demo/component-token.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ConfigProvider, Select, Space } from 'antd';
+import type { SelectProps } from 'antd';
+
+const options: SelectProps['options'] = [];
+
+for (let i = 10; i < 36; i++) {
+  options.push({
+    label: i.toString(36) + i,
+    value: i.toString(36) + i,
+  });
+}
+
+const handleChange = (value: string[]) => {
+  console.log(`selected ${value}`);
+};
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Select: {
+          multipleItemBorderColor: 'rgba(0,0,0,0.06)',
+          multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)',
+          optionSelectedColor: '#1677ff',
+        },
+      },
+    }}
+  >
+    <Space style={{ width: '100%' }} direction="vertical">
+      <Select
+        mode="multiple"
+        allowClear
+        style={{ width: '100%' }}
+        placeholder="Please select"
+        defaultValue={['a10', 'c12']}
+        onChange={handleChange}
+        options={options}
+      />
+      <Select
+        mode="multiple"
+        disabled
+        style={{ width: '100%' }}
+        placeholder="Please select"
+        defaultValue={['a10', 'c12']}
+        onChange={handleChange}
+        options={options}
+      />
+    </Space>
+  </ConfigProvider>
+);
+
+export default App;

components/select/index.en-US.md

@@ -45,6 +45,7 @@ Select component to select value from options.
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/option-label-center.tsx" debug>Options label Centered</code>
 <code src="./demo/debug-flip-shift.tsx" iframe="200" debug>Flip + Shift</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

components/select/index.zh-CN.md

@@ -46,6 +46,7 @@ demo:
 <code src="./demo/render-panel.tsx" debug>\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/option-label-center.tsx" debug>选项文本居中</code>
 <code src="./demo/debug-flip-shift.tsx" iframe="200" debug>翻转+偏移</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

components/select/style/dropdown.tsx

@@ -12,17 +12,17 @@ import {
 import type { GenerateStyle } from '../../theme/internal';
 
 const genItemStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
-  const { controlPaddingHorizontal, controlHeight, fontSize, lineHeight } = token;
+  const { optionHeight, optionFontSize, optionLineHeight, optionPadding } = token;
 
   return {
     position: 'relative',
     display: 'block',
-    minHeight: controlHeight,
-    padding: `${(controlHeight - fontSize * lineHeight) / 2}px ${controlPaddingHorizontal}px`,
+    minHeight: optionHeight,
+    padding: optionPadding,
     color: token.colorText,
     fontWeight: 'normal',
-    fontSize,
-    lineHeight,
+    fontSize: optionFontSize,
+    lineHeight: optionLineHeight,
     boxSizing: 'border-box',
   };
 };
@@ -120,13 +120,13 @@ const genSingleStyle: GenerateStyle<SelectToken> = (token) => {
             },
 
             [`&-active:not(${selectItemCls}-option-disabled)`]: {
-              backgroundColor: token.controlItemBgHover,
+              backgroundColor: token.optionActiveBg,
             },
 
             [`&-selected:not(${selectItemCls}-option-disabled)`]: {
-              color: token.colorText,
-              fontWeight: token.fontWeightStrong,
-              backgroundColor: token.controlItemBgActive,
+              color: token.optionSelectedColor,
+              fontWeight: token.optionSelectedFontWeight,
+              backgroundColor: token.optionSelectedBg,
 
               [`${selectItemCls}-option-state`]: {
                 color: token.colorPrimary,

components/select/style/index.tsx

@@ -1,4 +1,5 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import type { CSSProperties } from 'react';
 import { resetComponent, resetIcon, textEllipsis } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
@@ -13,20 +14,111 @@ export interface ComponentToken {
    * @descEN z-index of dropdown
    */
   zIndexPopup: number;
+  /**
+   * @desc 选项选中时文本颜色
+   * @descEN Text color when option is selected
+   */
+  optionSelectedColor: string;
+  /**
+   * @desc 选项选中时文本字重
+   * @descEN Font weight when option is selected
+   */
+  optionSelectedFontWeight: CSSProperties['fontWeight'];
+  /**
+   * @desc 选项选中时背景色
+   * @descEN Background color when option is selected
+   */
+  optionSelectedBg: string;
+  /**
+   * @desc 选项激活态时背景色
+   * @descEN Background color when option is active
+   */
+  optionActiveBg: string;
+  /**
+   * @desc 选项内间距
+   * @descEN Padding of option
+   */
+  optionPadding: CSSProperties['padding'];
+  /**
+   * @desc 选项字体大小
+   * @descEN Font size of option
+   */
+  optionFontSize: number;
+  /**
+   * @desc 选项行高
+   * @descEN Line height of option
+   */
+  optionLineHeight: CSSProperties['lineHeight'];
+  /**
+   * @desc 选项高度
+   * @descEN Height of option
+   */
+  optionHeight: number;
+  /**
+   * @desc 选框背景色
+   * @descEN Background color of selector
+   */
+  selectorBg: string;
+  /**
+   * @desc 清空按钮背景色
+   * @descEN Background color of clear button
+   */
+  clearBg: string;
+  /**
+   * @desc 单选大号回填项高度
+   * @descEN Height of single selected item with large size
+   */
+  singleItemHeightLG: number;
+  /**
+   * @desc 多选标签背景色
+   * @descEN Background color of multiple tag
+   */
+  multipleItemBg: string;
+  /**
+   * @desc 多选标签边框色
+   * @descEN Border color of multiple tag
+   */
+  multipleItemBorderColor: string;
+  /**
+   * @desc 多选标签高度
+   * @descEN Height of multiple tag
+   */
+  multipleItemHeight: number;
+  /**
+   * @desc 大号多选标签高度
+   * @descEN Height of multiple tag with large size
+   */
+  multipleItemHeightLG: number;
+  /**
+   * @desc 多选框禁用背景
+   * @descEN Background color of multiple selector when disabled
+   */
+  multipleSelectorBgDisabled: string;
+  /**
+   * @desc 多选标签禁用文本颜色
+   * @descEN Text color of multiple tag when disabled
+   */
+  multipleItemColorDisabled: string;
+  /**
+   * @desc 多选标签禁用边框色
+   * @descEN Border color of multiple tag when disabled
+   */
+  multipleItemBorderColorDisabled: string;
 }
 
 export interface SelectToken extends FullToken<'Select'> {
   rootPrefixCls: string;
   inputPaddingHorizontalBase: number;
+  multipleSelectItemHeight: number;
 }
 
 // ============================= Selector =============================
 const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, selectorBg } = token;
 
   return {
     position: 'relative',
-    backgroundColor: token.colorBgContainer,
+    backgroundColor: selectorBg,
     border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
     transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
 
@@ -49,7 +141,7 @@ const genSelectorStyle: GenerateStyle<SelectToken, CSSObject> = (token) => {
       cursor: 'not-allowed',
 
       [`${componentCls}-multiple&`]: {
-        background: token.colorBgContainerDisabled,
+        background: token.multipleSelectorBgDisabled,
       },
 
       input: {
@@ -214,7 +306,7 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
         lineHeight: 1,
         textAlign: 'center',
         textTransform: 'none',
-        background: token.colorBgContainer,
+        background: token.clearBg,
         cursor: 'pointer',
         opacity: 0,
         transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`,
@@ -333,11 +425,52 @@ export default genComponentStyleHook(
     const selectToken: SelectToken = mergeToken<SelectToken>(token, {
       rootPrefixCls,
       inputPaddingHorizontalBase: token.paddingSM - 1,
+      multipleSelectItemHeight: token.multipleItemHeight,
     });
 
     return [genSelectStyle(selectToken)];
   },
-  (token) => ({
-    zIndexPopup: token.zIndexPopupBase + 50,
-  }),
+  (token) => {
+    const {
+      fontSize,
+      lineHeight,
+      controlHeight,
+      controlPaddingHorizontal,
+      zIndexPopupBase,
+      colorText,
+      fontWeightStrong,
+      controlItemBgActive,
+      controlItemBgHover,
+      colorBgContainer,
+      colorFillSecondary,
+      controlHeightLG,
+      controlHeightSM,
+      colorBgContainerDisabled,
+      colorTextDisabled,
+    } = token;
+
+    return {
+      zIndexPopup: zIndexPopupBase + 50,
+      optionSelectedColor: colorText,
+      optionSelectedFontWeight: fontWeightStrong,
+      optionSelectedBg: controlItemBgActive,
+      optionActiveBg: controlItemBgHover,
+      optionPadding: `${
+        (controlHeight - fontSize * lineHeight) / 2
+      }px ${controlPaddingHorizontal}px`,
+      optionFontSize: fontSize,
+      optionLineHeight: lineHeight,
+      optionHeight: controlHeight,
+      selectorBg: colorBgContainer,
+      clearBg: colorBgContainer,
+      singleItemHeightLG: controlHeightLG,
+      multipleItemBg: colorFillSecondary,
+      multipleItemBorderColor: 'transparent',
+      multipleItemHeight: controlHeightSM,
+      multipleItemHeightLG: controlHeight,
+      multipleSelectorBgDisabled: colorBgContainerDisabled,
+      multipleItemColorDisabled: colorTextDisabled,
+      multipleItemBorderColorDisabled: 'transparent',
+    };
+  },
 );

components/select/style/multiple.tsx

@@ -20,7 +20,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 
   const selectOverflowPrefixCls = `${componentCls}-selection-overflow`;
 
-  const selectItemHeight = token.controlHeightSM;
+  const selectItemHeight = token.multipleSelectItemHeight;
   const [selectItemDist] = getSelectItemStyle(token);
 
   const suffixCls = suffix ? `${componentCls}-${suffix}` : '';
@@ -63,7 +63,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         },
 
         [`${componentCls}-disabled&`]: {
-          background: token.colorBgContainerDisabled,
+          background: token.multipleSelectorBgDisabled,
           cursor: 'not-allowed',
         },
 
@@ -95,7 +95,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         marginTop: FIXED_ITEM_MARGIN,
         marginBottom: FIXED_ITEM_MARGIN,
         lineHeight: `${selectItemHeight - token.lineWidth * 2}px`,
-        background: token.colorFillSecondary,
+        background: token.multipleItemBg,
+        border: `${token.lineWidth}px ${token.lineType} ${token.multipleItemBorderColor}`,
         borderRadius: token.borderRadiusSM,
         cursor: 'default',
         transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
@@ -105,7 +106,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         paddingInlineEnd: token.paddingXS / 2,
 
         [`${componentCls}-disabled&`]: {
-          color: token.colorTextDisabled,
+          color: token.multipleItemColorDisabled,
+          borderColor: token.multipleItemBorderColorDisabled,
           cursor: 'not-allowed',
         },
 
@@ -196,15 +198,15 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => {
 
   const smallToken = mergeToken<SelectToken>(token, {
     controlHeight: token.controlHeightSM,
-    controlHeightSM: token.controlHeightXS,
+    multipleSelectItemHeight: token.controlHeightXS,
     borderRadius: token.borderRadiusSM,
     borderRadiusSM: token.borderRadiusXS,
   });
 
   const largeToken = mergeToken<SelectToken>(token, {
     fontSize: token.fontSizeLG,
     controlHeight: token.controlHeightLG,
-    controlHeightSM: token.controlHeight,
+    multipleSelectItemHeight: token.multipleItemHeightLG,
     borderRadius: token.borderRadiusLG,
     borderRadiusSM: token.borderRadius,
   });

components/select/style/single.tsx

@@ -182,7 +182,7 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation {
     // Shared
     genSizeStyle(
       mergeToken<any>(token, {
-        controlHeight: token.controlHeightLG,
+        controlHeight: token.singleItemHeightLG,
         fontSize: token.fontSizeLG,
         borderRadius: token.borderRadiusLG,
       }),