fix: add missing Select semantic names (ant-design#56322)

* fix: add missing Select semantic names

* update tests

* conditional expects 🙃

* consistency

* chore: adjust code

---------

Co-authored-by: 遇见同学 <1875694521@qq.com>

Author: seanparmelee

.dumi/theme/common/SelectSemanticTemplate.tsx

@@ -11,6 +11,7 @@ export const locales = {
     suffix: '后缀元素，包含后缀内容的布局和样式，如清除按钮、箭头图标等',
     input: '输入框元素，包含搜索输入框的样式、光标控制、字体继承等搜索相关样式，去除了边框样式',
     content: '多选容器，包含已选项的布局、间距、换行相关样式',
+    clear: '清除按钮元素，包含清除按钮的布局、样式和交互效果',
     item: '多选项元素，包含边框、背景、内边距、外边距样式',
     itemContent: '多选项内容区域，包含文字的省略样式',
     itemRemove: '多选项移除按钮，包含字体相关样式',
@@ -29,6 +30,7 @@ export const locales = {
       'Input element with search input styling, cursor control, font inheritance and other search-related styles. Remove border styles',
     content:
       'Multiple selection container with layout, spacing, and wrapping styles for selected items',
+    clear: 'Clear button element with layout, styling and interactive effects for clear button',
     item: 'Multiple selection item element with border, background, padding, and margin styles',
     itemContent: 'Multiple selection item content area with text ellipsis styles',
     itemRemove: 'Multiple selection item remove button with font-related styles',
@@ -142,6 +144,7 @@ const SelectSemanticTemplate: React.FC<SelectSemanticTemplateProps> = ({
           { name: 'prefix', desc: locale.prefix },
           { name: 'content', desc: locale.content },
           { name: 'placeholder', desc: locale.placeholder },
+          { name: 'clear', desc: locale.clear },
           { name: 'input', desc: locale.input },
           { name: 'suffix', desc: locale.suffix },
           { name: 'popup.root', desc: locale['popup.root'] },
@@ -152,11 +155,12 @@ const SelectSemanticTemplate: React.FC<SelectSemanticTemplateProps> = ({
           { name: 'root', desc: locale.root },
           { name: 'prefix', desc: locale.prefix },
           { name: 'content', desc: locale.content },
+          { name: 'placeholder', desc: locale.placeholder },
+          { name: 'clear', desc: locale.clear },
           { name: 'item', desc: locale.item },
           { name: 'itemContent', desc: locale.itemContent },
           { name: 'itemRemove', desc: locale.itemRemove },
           { name: 'input', desc: locale.input },
-          { name: 'placeholder', desc: locale.placeholder },
           { name: 'suffix', desc: locale.suffix },
           { name: 'popup.root', desc: locale['popup.root'] },
           { name: 'popup.list', desc: locale['popup.list'] },

components/select/__tests__/semantic.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import Select from '..';
-import type { SelectProps } from '..';
+import type { SelectClassNamesType, SelectProps } from '..';
 import { render } from '../../../tests/utils';
 
 describe('Select.Semantic', () => {
@@ -28,7 +28,7 @@ describe('Select.Semantic', () => {
         list: 'custom-list',
         listItem: 'custom-list-item',
       },
-    };
+    } satisfies SelectClassNamesType;
     const styles = {
       root: { color: 'rgb(255, 0, 0)' },
       prefix: { color: 'rgb(0, 128, 255)' },
@@ -60,9 +60,9 @@ describe('Select.Semantic', () => {
     expect(container.querySelector(`.${classNames.placeholder}`)).toHaveStyle(styles.placeholder);
     expect(container.querySelector(`.${classNames.input}`)).toHaveStyle(styles.input);
     expect(container.querySelector(`.${classNames.content}`)).toHaveStyle(styles.content);
-    expect(container.querySelector(`.${classNames.popup.root}`)).toHaveStyle(styles.popup.root);
-    expect(container.querySelector(`.${classNames.popup.list}`)).toHaveStyle(styles.popup.list);
-    expect(container.querySelector(`.${classNames.popup.listItem}`)).toHaveStyle(
+    expect(container.querySelector(`.${classNames.popup?.root}`)).toHaveStyle(styles.popup.root);
+    expect(container.querySelector(`.${classNames.popup?.list}`)).toHaveStyle(styles.popup.list);
+    expect(container.querySelector(`.${classNames.popup?.listItem}`)).toHaveStyle(
       styles.popup.listItem,
     );
   });
@@ -72,16 +72,22 @@ describe('Select.Semantic', () => {
       root: 'custom-root',
       prefix: 'custom-prefix',
       suffix: 'custom-suffix',
+      item: 'custom-item',
+      itemContent: 'custom-item-content',
+      itemRemove: 'custom-item-remove',
       popup: {
         root: 'custom-popup',
         list: 'custom-list',
         listItem: 'custom-list-item',
       },
-    };
+    } satisfies SelectClassNamesType;
     const customStyles = {
       root: { color: 'rgb(255, 0, 0)' },
       prefix: { color: 'rgb(0, 128, 255)' },
       suffix: { color: 'rgb(255, 128, 0)' },
+      item: { background: 'rgb(255, 255, 240)' },
+      itemContent: { color: 'rgb(128, 0, 128)' },
+      itemRemove: { color: 'rgb(255, 0, 0)' },
       popup: {
         root: { color: 'rgb(128, 0, 128)' },
         list: { color: 'rgb(0, 0, 255)' },
@@ -107,6 +113,9 @@ describe('Select.Semantic', () => {
     const list = container.querySelector('.rc-virtual-list');
     const listItem = container.querySelector('.ant-select-item');
     const popup = container.querySelector('.ant-select-dropdown');
+    const item = container.querySelector('.ant-select-selection-item');
+    const itemContent = container.querySelector('.ant-select-selection-item-content');
+    const itemRemove = container.querySelector('.ant-select-selection-item-remove');
 
     expect(root).toHaveClass(customClassNames.root);
     expect(prefix).toHaveClass(customClassNames.prefix);
@@ -120,6 +129,15 @@ describe('Select.Semantic', () => {
     if (popup) {
       expect(popup).toHaveClass(customClassNames.popup.root);
     }
+    if (item) {
+      expect(item).toHaveClass(customClassNames.item);
+    }
+    if (itemContent) {
+      expect(itemContent).toHaveClass(customClassNames.itemContent);
+    }
+    if (itemRemove) {
+      expect(itemRemove).toHaveClass(customClassNames.itemRemove);
+    }
 
     expect(root).toHaveStyle(customStyles.root);
     expect(prefix).toHaveStyle(customStyles.prefix);
@@ -133,6 +151,15 @@ describe('Select.Semantic', () => {
     if (popup) {
       expect(popup).toHaveStyle(customStyles.popup.root);
     }
+    if (item) {
+      expect(item).toHaveStyle(customStyles.item);
+    }
+    if (itemContent) {
+      expect(itemContent).toHaveStyle(customStyles.itemContent);
+    }
+    if (itemRemove) {
+      expect(itemRemove).toHaveStyle(customStyles.itemRemove);
+    }
   });
 
   it('should support function-based classNames and styles', () => {

components/select/index.tsx

@@ -76,7 +76,17 @@ export interface InternalSelectProps<
   styles?: SemanticStyles<SemanticName> & { popup?: SemanticStyles<PopupSemantic> };
 }
 
-type SemanticName = 'root' | 'prefix' | 'suffix';
+type SemanticName =
+  | 'root'
+  | 'prefix'
+  | 'suffix'
+  | 'input'
+  | 'placeholder'
+  | 'content'
+  | 'item'
+  | 'itemContent'
+  | 'itemRemove'
+  | 'clear';
 
 type PopupSemantic = 'root' | 'listItem' | 'list';