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
2 years ago · 977a9a92ff
11 changed files with 164 additions and 39 deletions
--- a/components/button/style/index.tsx
+++ b/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),
  ];
 });
--- a/components/cascader/style/index.tsx
+++ b/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),
  ];
 };

--- a/components/date-picker/style/index.tsx
+++ b/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,
--- a/components/input-number/style/index.tsx
+++ b/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,
--- a/components/input/style/index.tsx
+++ b/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),
  ];
 });
--- a/components/select/style/index.tsx
+++ b/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`,
+    }),
  ];
 };

--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/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"
--- a/components/space/tests/snapshots/demo.test.ts.snap
+++ b/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"
--- a/components/space/demo/compact.tsx
+++ b/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>
--- a/components/style/compact-item-vertical.tsx
+++ b/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 { DerivativeToken } from '../theme/internal';
+import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+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),
    },
  };
 }
--- a/components/style/compact-item.tsx
+++ b/components/style/compact-item.tsx
@ -1,6 +1,7 @@
 /* eslint-disable import/prefer-default-export */
-import type { CSSObject } from '@ant-design/cssinjs';
-import type { DerivativeToken } from '../theme/internal';
+import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+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(
-  token: DerivativeToken,
-  prefixCls: string,
+export function genCompactItemStyle<T extends OverrideComponent>(
+  token: FullToken<T>,
  options: CompactItemOptions = { focus: true },
-): CSSObject {
+): CSSInterpolation {
  return {
-    '&-compact': {
+    [`${token.componentCls}-compact`]: {
      ...compactItemBorder(token, options),
-      ...compactItemBorderRadius(prefixCls, options),
+      ...compactItemBorderRadius(token.componentCls, options),
    },
  };
 }