fix: Select align issue (#51694)

* fix: item align logic * fix: placeholder style * test: update snapshot * fix: single align * chore: add demo * test: update snapshot * fix: color * fix: style * fix: line height * fix: borderless pos * chore: base of prefix offset
2024-11-27 12:39:49 +08:00 · 2024-11-20 11:54:49 +08:00 · 2024-11-20 11:54:49 +08:00 · af7bce752a
commit af7bce752a
parent 579d1723a8
7 changed files with 5083 additions and 929 deletions
--- a/components/select/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/select/tests/snapshots/demo-extend.test.ts.snap
--- a/components/select/tests/snapshots/demo.test.tsx.snap
+++ b/components/select/tests/snapshots/demo.test.tsx.snap
--- a/components/select/demo/option-label-center.tsx
+++ b/components/select/demo/option-label-center.tsx
@ -1,5 +1,15 @@
 import React from 'react';
-import { Cascader, Select, Space, TreeSelect, Typography } from 'antd';
+import {
+  AutoComplete,
+  Cascader,
+  Flex,
+  Form,
+  Input,
+  Select,
+  Space,
+  TreeSelect,
+  Typography,
+} from 'antd';

 const options = [
  { value: 'long', label: <Typography>long, long, long piece of text</Typography> },
@ -8,69 +18,172 @@ const options = [
 ];

 const App: React.FC = () => (
-  <Space wrap>
-    <Select
-      defaultValue="long, long, long piece of text"
-      style={{ width: 120 }}
-      allowClear
-      options={options}
-    />
+  <>
+    <Space wrap>
+      <Select
+        defaultValue="long, long, long piece of text"
+        style={{ width: 120 }}
+        allowClear
+        options={options}
+      />

-    <Select
-      placeholder="Select a option"
-      style={{ width: 120, height: 60 }}
-      allowClear
-      options={options}
-    />
+      <Select
+        placeholder="Select a option"
+        style={{ width: 120, height: 60 }}
+        allowClear
+        options={options}
+      />

-    <Select
-      defaultValue="normal"
-      placeholder="Select a option"
-      style={{ width: 120 }}
-      allowClear
-      options={options}
-    />
+      <Select
+        defaultValue="normal"
+        placeholder="Select a option"
+        style={{ width: 120 }}
+        allowClear
+        options={options}
+      />

-    <Select
-      defaultValue={['normal']}
-      mode="multiple"
-      placeholder="Select a option"
-      style={{ width: 120 }}
-      allowClear
-      options={options}
-    />
+      <Select
+        defaultValue={['normal']}
+        mode="multiple"
+        placeholder="Select a option"
+        style={{ width: 120 }}
+        allowClear
+        options={options}
+      />

-    <Select
-      mode="multiple"
-      placeholder="Select a option"
-      style={{ width: 120, height: 60 }}
-      allowClear
-      options={options}
-    />
+      <Select
+        mode="multiple"
+        placeholder="Select a option"
+        style={{ width: 120, height: 60 }}
+        allowClear
+        options={options}
+      />

-    <Cascader
-      placeholder="Select a option"
-      style={{ width: 120, height: 60 }}
-      allowClear
-      options={options}
-    />
+      <Cascader
+        placeholder="Select a option"
+        style={{ width: 120, height: 60 }}
+        allowClear
+        options={options}
+      />

-    <TreeSelect
-      showSearch
-      style={{ width: 120, height: 60 }}
-      placeholder="Please select"
-      allowClear
-      popupMatchSelectWidth={false}
-      treeDefaultExpandAll
-      treeData={[
-        {
-          value: 'parent 1',
-          title: 'parent 1',
-          children: options,
-        },
-      ]}
-    />
-  </Space>
+      <TreeSelect
+        showSearch
+        style={{ width: 120, height: 60 }}
+        placeholder="Please select"
+        allowClear
+        popupMatchSelectWidth={false}
+        treeDefaultExpandAll
+        treeData={[
+          {
+            value: 'parent 1',
+            title: 'parent 1',
+            children: options,
+          },
+        ]}
+      />
+      <Select
+        prefix="Hello World"
+        mode="multiple"
+        allowClear
+        placeholder="Select"
+        style={{ minWidth: 200, height: 200 }}
+        defaultValue={['long']}
+        options={options}
+      />
+      <Select
+        mode="multiple"
+        style={{ width: 200 }}
+        placeholder="请选择"
+        maxTagCount="responsive"
+        prefix="城市"
+        options={options}
+      />
+      <Select
+        style={{ width: 200 }}
+        placeholder="请选择"
+        prefix="城市"
+        options={options}
+        showSearch
+        allowClear
+        status="error"
+      />
+      <Select
+        style={{ width: 100 }}
+        prefix="Hi"
+        options={options}
+        showSearch
+        allowClear
+        status="warning"
+        variant="filled"
+        defaultValue="Bamboo"
+      />
+      <Select
+        style={{ width: 100 }}
+        prefix="Hi"
+        options={options}
+        showSearch
+        allowClear
+        status="error"
+        variant="borderless"
+        defaultValue="Bamboo"
+      />
+      <Form style={{ width: 200 }} layout="vertical">
+        <Form.Item
+          label="Label"
+          name="bamboo"
+          initialValue="Bamboo"
+          style={{
+            boxShadow: '0 0 0 1px red',
+          }}
+        >
+          <Select options={options} allowClear placeholder="bamboo" />
+        </Form.Item>
+        <Form.Item
+          label="Label"
+          name="bamboo"
+          initialValue="Bamboo"
+          style={{
+            boxShadow: '0 0 0 1px red',
+          }}
+        >
+          <AutoComplete options={options} allowClear placeholder="bamboo" />
+        </Form.Item>
+      </Form>
+    </Space>
+
+    {/* Test for align */}
+    <Flex vertical style={{ width: 200 }}>
+      {/* Single */}
+      <Input prefix="Hi" placeholder="Input" allowClear />
+      <Select prefix="Hi" placeholder="Single" options={options} allowClear showSearch />
+      <Select
+        prefix="Hi"
+        placeholder="Single"
+        options={options}
+        allowClear
+        showSearch
+        defaultValue="Bamboo"
+      />
+      {/* Multiple */}
+      <Select placeholder="Multiple" options={options} allowClear mode="multiple" />
+      <Select prefix="Hi" placeholder="Multiple" options={options} allowClear mode="multiple" />
+      <Select
+        prefix="Hi"
+        placeholder="Multiple"
+        options={options}
+        allowClear
+        mode="multiple"
+        defaultValue={['Bamboo']}
+      />
+      <Select
+        placeholder="Multiple"
+        options={options}
+        allowClear
+        mode="multiple"
+        defaultValue={['Bamboo']}
+      />
+    </Flex>
+  </>
 );

 export default App;
--- a/components/select/style/index.ts
+++ b/components/select/style/index.ts
@ -146,6 +146,26 @@ const genBaseStyle: GenerateStyle<SelectToken> = (token) => {
        },
      },

+      // ========================== Wrap ===========================
+      [`${componentCls}-selection-wrap`]: {
+        display: 'flex',
+        width: '100%',
+        position: 'relative',
+
+        // https://github.com/ant-design/ant-design/issues/51669
+        '&:after': {
+          content: '"\\a0"',
+          width: 0,
+          overflow: 'hidden',
+        },
+      },
+
+      // ========================= Prefix ==========================
+      [`${componentCls}-prefix`]: {
+        flex: 'none',
+        marginInlineEnd: token.selectAffixPadding,
+      },
+
      // ========================== Clear ==========================
      [`${componentCls}-clear`]: {
        position: 'absolute',
--- a/components/select/style/multiple.ts
+++ b/components/select/style/multiple.ts
@ -232,27 +232,46 @@ const genSelectionStyle = (
        },
      },

-      [`${componentCls}-selection-wrap`]: {
-        width: '100%',
-        overflow: 'hidden',
-      },
-
      // ======================== Selections ========================
      [`${componentCls}-selection-item`]: {
        height: multipleSelectorUnit.itemHeight,
        lineHeight: unit(multipleSelectorUnit.itemLineHeight),
      },

+      // ========================== Wrap ===========================
+      [`${componentCls}-selection-wrap`]: {
+        alignSelf: 'flex-start',
+
+        '&:after': {
+          lineHeight: unit(selectItemHeight),
+          marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
+        },
+      },
+
      // ========================== Input ==========================
-      [`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item`]: {
+      [`${componentCls}-prefix`]: {
+        marginInlineStart: token
+          .calc(token.inputPaddingHorizontalBase)
+          .sub(multipleSelectorUnit.basePadding)
+          .equal(),
+      },
+
+      [`${selectOverflowPrefixCls}-item + ${selectOverflowPrefixCls}-item,
+        ${componentCls}-prefix + ${componentCls}-selection-wrap
+      `]: {
        [`${componentCls}-selection-search`]: {
          marginInlineStart: 0,
        },
+        [`${componentCls}-selection-placeholder`]: {
+          insetInlineStart: 0,
+        },
      },

      // https://github.com/ant-design/ant-design/issues/44754
+      // Same as `wrap:after`
      [`${selectOverflowPrefixCls}-item-suffix`]: {
-        height: '100%',
+        minHeight: multipleSelectorUnit.itemHeight,
+        marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
      },

      [`${componentCls}-selection-search`]: {
@ -291,18 +310,14 @@ const genSelectionStyle = (
      [`${componentCls}-selection-placeholder`]: {
        position: 'absolute',
        top: '50%',
-        insetInlineStart: token.inputPaddingHorizontalBase,
+        insetInlineStart: token
+          .calc(token.inputPaddingHorizontalBase)
+          .sub(multipleSelectorUnit.basePadding)
+          .equal(),
        insetInlineEnd: token.inputPaddingHorizontalBase,
        transform: 'translateY(-50%)',
        transition: `all ${token.motionDurationSlow}`,
      },
-
-      [`${componentCls}-prefix`]: {
-        height: multipleSelectorUnit.itemHeight,
-        lineHeight: unit(multipleSelectorUnit.itemLineHeight),
-        marginInlineStart: `calc(${unit(token.inputPaddingHorizontalBase)} - ${unit(multipleSelectorUnit.basePadding)})`,
-        marginInlineEnd: token.selectAffixPadding,
-      },
    },
  };
 };
--- a/components/select/style/single.ts
+++ b/components/select/style/single.ts
@ -6,7 +6,7 @@ import { mergeToken } from '../../theme/internal';
 import type { SelectToken } from './token';

 function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
-  const { componentCls, inputPaddingHorizontalBase, borderRadius, selectAffixPadding } = token;
+  const { componentCls, inputPaddingHorizontalBase, borderRadius } = token;

  const selectHeightWithoutBorder = token
    .calc(token.controlHeight)
@ -28,12 +28,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        borderRadius,
        flex: '1 1 auto',

-        [`${componentCls}-selection-wrap`]: {
-          display: 'flex',
-          width: '100%',
-          position: 'relative',
-        },
-
        [`${componentCls}-selection-search`]: {
          position: 'absolute',
          inset: 0,
@ -47,8 +41,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {

        [`
          ${componentCls}-selection-item,
-          ${componentCls}-selection-placeholder,
-          ${componentCls}-prefix
+          ${componentCls}-selection-placeholder
        `]: {
          display: 'block',
          padding: 0,
@ -62,10 +55,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
          pointerEvents: 'none',
        },

-        [`${componentCls}-prefix`]: {
-          marginInlineEnd: selectAffixPadding,
-        },
-
        // For common baseline align
        [[
          '&:after',
@ -101,6 +90,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
        [`${componentCls}-selector`]: {
          width: '100%',
          height: '100%',
+          alignItems: 'center',
          padding: `0 ${unit(inputPaddingHorizontalBase)}`,

          [`${componentCls}-selection-search-input`]: {
--- a/components/select/style/variants.ts
+++ b/components/select/style/variants.ts
@ -13,6 +13,7 @@ const genBaseOutlinedStyle = (
    hoverBorderHover: string;
    activeBorderColor: string;
    activeOutlineColor: string;
+    color: string;
  },
 ): CSSObject => {
  const { componentCls, antCls, controlOutlineWidth } = token;
@ -33,6 +34,9 @@ const genBaseOutlinedStyle = (
          boxShadow: `0 0 0 ${unit(controlOutlineWidth)} ${options.activeOutlineColor}`,
          outline: 0,
        },
+        [`${componentCls}-prefix`]: {
+          color: options.color,
+        },
      },
  };
 };
@ -45,6 +49,7 @@ const genOutlinedStatusStyle = (
    hoverBorderHover: string;
    activeBorderColor: string;
    activeOutlineColor: string;
+    color: string;
  },
 ): CSSObject => ({
  [`&${token.componentCls}-status-${options.status}`]: {
@ -59,6 +64,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
      hoverBorderHover: token.hoverBorderColor,
      activeBorderColor: token.activeBorderColor,
      activeOutlineColor: token.activeOutlineColor,
+      color: token.colorText,
    }),

    ...genOutlinedStatusStyle(token, {
@ -67,6 +73,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
      hoverBorderHover: token.colorErrorHover,
      activeBorderColor: token.colorError,
      activeOutlineColor: token.colorErrorOutline,
+      color: token.colorError,
    }),

    ...genOutlinedStatusStyle(token, {
@ -75,6 +82,7 @@ const genOutlinedStyle = (token: SelectToken): CSSObject => ({
      hoverBorderHover: token.colorWarningHover,
      activeBorderColor: token.colorWarning,
      activeOutlineColor: token.colorWarningOutline,
+      color: token.colorWarning,
    }),

    [`&${token.componentCls}-disabled`]: {
@ -188,7 +196,7 @@ const genBorderlessStyle = (token: SelectToken): CSSObject => ({
  '&-borderless': {
    [`${token.componentCls}-selector`]: {
      background: 'transparent',
-      borderColor: 'transparent',
+      border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
    },

    [`&${token.componentCls}-disabled`]: {
@ -204,13 +212,13 @@ const genBorderlessStyle = (token: SelectToken): CSSObject => ({

    // Status
    [`&${token.componentCls}-status-error`]: {
-      [`${token.componentCls}-selection-item`]: {
+      [`${token.componentCls}-prefix, ${token.componentCls}-selection-item`]: {
        color: token.colorError,
      },
    },

    [`&${token.componentCls}-status-warning`]: {
-      [`${token.componentCls}-selection-item`]: {
+      [`${token.componentCls}-prefix, ${token.componentCls}-selection-item`]: {
        color: token.colorWarning,
      },
    },