Fix the issue where the clear icon does not show when hovering over the Select series component under the Space component. (#39468)

* fix: Fix the problem that the clear icon is not displayed when the Select series component hovers under the Space component

* refactor: 修改 Space.Compact css 优先级以及简化调用

* refactor: 修改 Space.Compact 垂直方向 css 优先级以及简化调用

* docs: 添加注释

* fix: lint

* test: update snapshot

* test: update snapshot

components/button/style/index.tsx

@@ -50,9 +50,6 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
         ...genFocusStyle(token),
       },
 
-      ...genCompactItemStyle(token, componentCls, { focus: false }),
-      ...genCompactItemVerticalStyle(token, componentCls),
-
       // make `btn-icon-only` not too narrow
       '&-icon-only&-compact-item': {
         flex: 'none',
@@ -496,5 +493,9 @@ export default genComponentStyleHook('Button', (token) => {
 
     // Button Group
     genGroupStyle(buttonToken),
+
+    // Space Compact
+    genCompactItemStyle(token, { focus: false }),
+    genCompactItemVerticalStyle(token),
   ];
 });

components/cascader/style/index.tsx

@@ -32,7 +32,6 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
     {
       [componentCls]: {
         width: token.controlWidth,
-        ...genCompactItemStyle(token, componentCls),
       },
     },
     // =====================================================
@@ -153,6 +152,10 @@ const genBaseStyle: GenerateStyle<CascaderToken> = (token) => {
         direction: 'rtl',
       },
     },
+    // =====================================================
+    // ==             Space Compact                       ==
+    // =====================================================
+    genCompactItemStyle(token),
   ];
 };
 

components/date-picker/style/index.tsx

@@ -973,11 +973,6 @@ const genPickerStyle: GenerateStyle<PickerToken> = (token) => {
         borderRadius,
         transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`,
 
-        // Space.Compact
-        ...genCompactItemStyle(token, componentCls, {
-          focusElCls: `${componentCls}-focused`,
-        }),
-
         '&:hover, &-focused': {
           ...genHoverStyle(token),
         },
@@ -1426,7 +1421,16 @@ export default genComponentStyleHook(
       initInputToken<FullToken<'DatePicker'>>(token),
       initPickerPanelToken(token),
     );
-    return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)];
+    return [
+      genPickerStyle(pickerToken),
+      genPickerStatusStyle(pickerToken),
+      // =====================================================
+      // ==             Space Compact                       ==
+      // =====================================================
+      genCompactItemStyle(token, {
+        focusElCls: `${token.componentCls}-focused`,
+      }),
+    ];
   },
   (token) => ({
     presetsWidth: 120,

components/input-number/style/index.tsx

@@ -63,8 +63,6 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
         border: `${lineWidth}px ${lineType} ${colorBorder}`,
         borderRadius,
 
-        ...genCompactItemStyle(token, componentCls),
-
         '&-rtl': {
           direction: 'rtl',
 
@@ -396,7 +394,14 @@ export default genComponentStyleHook(
   'InputNumber',
   (token) => {
     const inputNumberToken = initInputToken<FullToken<'InputNumber'>>(token);
-    return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)];
+    return [
+      genInputNumberStyles(inputNumberToken),
+      genAffixWrapperStyles(inputNumberToken),
+      // =====================================================
+      // ==             Space Compact                       ==
+      // =====================================================
+      genCompactItemStyle(inputNumberToken),
+    ];
   },
   (token) => ({
     controlWidth: 90,

components/input/style/index.tsx

@@ -504,7 +504,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => {
 };
 
 const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
-  const { prefixCls, componentCls, controlHeightSM, lineWidth } = token;
+  const { componentCls, controlHeightSM, lineWidth } = token;
 
   const FIXED_CHROME_COLOR_HEIGHT = 16;
   const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;
@@ -514,7 +514,6 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
       ...resetComponent(token),
       ...genBasicInputStyle(token),
       ...genStatusStyle(token),
-      ...genCompactItemStyle(token, prefixCls),
 
       '&[type="color"]': {
         height: token.controlHeight,
@@ -933,5 +932,9 @@ export default genComponentStyleHook('Input', (token) => {
     genAffixStyle(inputToken),
     genGroupStyle(inputToken),
     genSearchInputStyle(inputToken),
+    // =====================================================
+    // ==             Space Compact                       ==
+    // =====================================================
+    genCompactItemStyle(inputToken),
   ];
 });

components/select/style/index.tsx

@@ -262,11 +262,6 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
         '&&-in-form-item': {
           width: '100%',
         },
-        // Space.Compact
-        ...genCompactItemStyle(token, componentCls, {
-          borderElCls: `${componentCls}-selector`,
-          focusElCls: `${componentCls}-focused`,
-        }),
       },
     },
 
@@ -320,6 +315,13 @@ const genSelectStyle: GenerateStyle<SelectToken> = (token) => {
       }),
       true,
     ),
+    // =====================================================
+    // ==             Space Compact                       ==
+    // =====================================================
+    genCompactItemStyle(token, {
+      borderElCls: `${componentCls}-selector`,
+      focusElCls: `${componentCls}-focused`,
+    }),
   ];
 };
 

components/space/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -448,7 +448,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"
@@ -587,6 +587,32 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
           </svg>
         </span>
       </span>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <input
       class="ant-input ant-input-compact-item ant-input-compact-last-item"
@@ -600,7 +626,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-show-search"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
       style="width:50%"
     >
       <div
@@ -778,6 +804,32 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1`
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <input
       class="ant-input ant-input-compact-item ant-input-compact-last-item"

components/space/__tests__/__snapshots__/demo.test.ts.snap

@@ -341,7 +341,7 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-show-arrow"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"
@@ -398,6 +398,32 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
           </svg>
         </span>
       </span>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <input
       class="ant-input ant-input-compact-item ant-input-compact-last-item"
@@ -411,7 +437,7 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
     class="ant-space-compact ant-space-compact-block"
   >
     <div
-      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-show-search"
+      class="ant-select ant-select-compact-item ant-select-compact-first-item ant-select-multiple ant-select-allow-clear ant-select-show-search"
       style="width:50%"
     >
       <div
@@ -493,6 +519,32 @@ exports[`renders ./components/space/demo/compact.tsx correctly 1`] = `
           </div>
         </div>
       </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-clear"
+        style="user-select:none;-webkit-user-select:none"
+        unselectable="on"
+      >
+        <span
+          aria-label="close-circle"
+          class="anticon anticon-close-circle"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="close-circle"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+            />
+          </svg>
+        </span>
+      </span>
     </div>
     <input
       class="ant-input ant-input-compact-item ant-input-compact-last-item"

components/space/demo/compact.tsx

@@ -45,7 +45,7 @@ const App: React.FC = () => (
     </Space.Compact>
     <br />
     <Space.Compact block>
-      <Select defaultValue="Zhejiang">
+      <Select defaultValue="Zhejiang" allowClear>
         <Option value="Zhejiang">Zhejiang</Option>
         <Option value="Jiangsu">Jiangsu</Option>
       </Select>
@@ -53,7 +53,7 @@ const App: React.FC = () => (
     </Space.Compact>
     <br />
     <Space.Compact block>
-      <Select mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
+      <Select allowClear mode="multiple" defaultValue="Zhejianggggg" style={{ width: '50%' }}>
         <Option value="Zhejianggggg">Zhejianggggg</Option>
         <Option value="Jiangsu">Jiangsu</Option>
       </Select>

components/style/compact-item-vertical.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import type { CSSObject } from '@ant-design/cssinjs';
+import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme/internal';
+import type { DerivativeToken, FullToken } from '../theme/internal';
+import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
 
 function compactItemVerticalBorder(token: DerivativeToken): CSSObject {
   return {
@@ -43,11 +44,13 @@ function compactItemBorderVerticalRadius(prefixCls: string): CSSObject {
   };
 }
 
-export function genCompactItemVerticalStyle(token: DerivativeToken, prefixCls: string): CSSObject {
+export function genCompactItemVerticalStyle<T extends OverrideComponent>(
+  token: FullToken<T>,
+): CSSInterpolation {
   return {
-    '&-compact-vertical': {
+    [`${token.componentCls}-compact-vertical`]: {
       ...compactItemVerticalBorder(token),
-      ...compactItemBorderVerticalRadius(prefixCls),
+      ...compactItemBorderVerticalRadius(token.componentCls),
     },
   };
 }

components/style/compact-item.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import type { CSSObject } from '@ant-design/cssinjs';
+import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme/internal';
+import type { DerivativeToken, FullToken } from '../theme/internal';
+import type { OverrideComponent } from '../theme/util/genComponentStyleHook';
 
 interface CompactItemOptions {
   focus?: boolean;
@@ -75,15 +76,14 @@ function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions)
   };
 }
 
-export function genCompactItemStyle(
+export function genCompactItemStyle<T extends OverrideComponent>(
-  token: DerivativeToken,
+  token: FullToken<T>,
-  prefixCls: string,
   options: CompactItemOptions = { focus: true },
-): CSSObject {
+): CSSInterpolation {
   return {
-    '&-compact': {
+    [`${token.componentCls}-compact`]: {
       ...compactItemBorder(token, options),
-      ...compactItemBorderRadius(prefixCls, options),
+      ...compactItemBorderRadius(token.componentCls, options),
     },
   };
 }