From af7bce752ab74464f72aae1020e8910f5260fc85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Wed, 20 Nov 2024 11:54:49 +0800 Subject: [PATCH] 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 --- .../__snapshots__/demo-extend.test.ts.snap | 3842 ++++++++++++++--- .../__snapshots__/demo.test.tsx.snap | 1846 +++++++- .../select/demo/option-label-center.tsx | 229 +- components/select/style/index.ts | 20 + components/select/style/multiple.ts | 45 +- components/select/style/single.ts | 16 +- components/select/style/variants.ts | 14 +- 7 files changed, 5083 insertions(+), 929 deletions(-) diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap index 4449454b6c..39fdbb33ec 100644 --- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -7335,218 +7335,2871 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1` exports[`renders components/select/demo/optgroup.tsx extend context correctly 2`] = `[]`; exports[`renders components/select/demo/option-label-center.tsx extend context correctly 1`] = ` -
+Array [
- - - - - long, long, long piece of text - - -
-
-
-
- +
+
+
+
+ long +
+
+ short +
- short -
-
-
-
-
-
+
+
-
- long, long, long piece of text -
-
-
-
-
-
- short -
-
-
-
-
-
- normal +
+ long, long, long piece of text +
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
-
+ +
- -
-
-
+
+
+ + + + + + Select a option + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + + +
+ normal +
+ + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+ + +
+ normal +
+ + + +
+
+
+ + +
+
+
+ +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+ +
+
+
+
+
+
+
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+ + Select a option + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + + + Select a option + + +
+
+
+
+ +
+
+
+ +
+
+
+
+
+ + + + + + Please select + + +
+
+
+
+
+
+ +
+ +
+
+
+ +
+
+
+
+
+
+ Hello World +
+ +
+
+ + +
+ long, long, long piece of text +
+ + + +
+
+
+ + +
+
+
+ +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+ +
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ 城市 +
+ +
+
+
+ + +
+
+
+ + 请选择 + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ 城市 +
+ + + + + + 请选择 + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ Hi +
+ + + + + + Bamboo + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+ Hi +
+ + + + + + Bamboo + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + + + + + Bamboo + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + + + + +
+
+
+
+
+ long +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
, +
+ + + Hi + + + + + + + + + + +
+
+ Hi +
@@ -7562,18 +10215,15 @@ exports[`renders components/select/demo/option-label-center.tsx extend context c autocomplete="off" class="ant-select-selection-search-input" id="rc_select_TEST_OR_SSR" - readonly="" role="combobox" - style="opacity: 0;" type="search" - unselectable="on" value="" /> - Select a option + Single
@@ -7706,17 +10356,17 @@ exports[`renders components/select/demo/option-label-center.tsx extend context c
-
-
+
+ Hi +
@@ -7732,20 +10382,16 @@ exports[`renders components/select/demo/option-label-center.tsx extend context c autocomplete="off" class="ant-select-selection-search-input" id="rc_select_TEST_OR_SSR" - readonly="" role="combobox" - style="opacity: 0;" type="search" - unselectable="on" value="" /> -
- normal -
+ Bamboo
@@ -7828,8 +10474,8 @@ exports[`renders components/select/demo/option-label-center.tsx extend context c />
-
-
+ +
+
+
+ + +
+
+
+ + Multiple + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ Hi +
+ +
+
+
+ + +
+
+
+ + Multiple + + +
+
+
+
+
+ long +
+
+ short +
+
+
+
+
+
+
+
+
+ long, long, long piece of text +
+
+
+
+
+
+ short +
+
+
+
+
+
+ normal +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ Hi +
@@ -7928,13 +10903,12 @@ exports[`renders components/select/demo/option-label-center.tsx extend context c > -
- normal -
+ Bamboo
-
@@ -8163,13 +11111,8 @@ exports[`renders components/select/demo/option-label-center.tsx extend context c
-
-
+
+ + + Bamboo + + + +
- - Select a option -
-
-
-
-
-
- - - - - - Select a option - - -
-
-
-
- -
-
-
-
-
-
-
- - - - - - Please select - - -
-
-
-
-
-
- -
- -
-
-
- -
-
-
+
, +] `; -exports[`renders components/select/demo/option-label-center.tsx extend context correctly 2`] = `[]`; +exports[`renders components/select/demo/option-label-center.tsx extend context correctly 2`] = ` +[ + "Warning: Multiple Field with path 'bamboo' set 'initialValue'. Can not decide which one to pick.", +] +`; exports[`renders components/select/demo/option-render.tsx extend context correctly 1`] = `
+Array [
- - + + + + + long, long, long piece of text + +
+ +
- -
-
-
+
+
+ + + + + + Select a option + + +
+ +
+
+
+
+
+ + + + + +
+ normal +
+ + +
+ + +
+
+
+
+
+ +
+
+ + +
+ normal +
+ + + +
+
+
+ + +
+
+
+ +
+ + +
+
+
+
+
+ +
+
+
+ + +
+
+
+ + Select a option + + +
+ +
+
+
+
+
+ + + + + + Select a option + + +
+ +
+
+
+
+
+ + + + + + Please select + + +
+ +
+
+
+
+
+
+ Hello World +
+ +
+
+ + +
+ long, long, long piece of text +
+ + + +
+
+
+ + +
+
+
+ +
+ + +
+
+
+
+
+
+ 城市 +
+ +
+
+
+ + +
+
+
+ + 请选择 + + +
+ +
+
+
+
+
+
+ 城市 +
+ + + + + + 请选择 + + +
+ +
+
+
+
+
+
+ Hi +
+ + + + + + Bamboo + + +
+ + +
+
+
+
+
+
+ Hi +
+ + + + + + Bamboo + + +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + + + + + Bamboo + + +
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + + + + +
+ +
+
+
+
+
+
+
+
+
, +
+ + + Hi + + + + + + + + + + +
+
+ Hi +
@@ -2512,18 +3811,15 @@ exports[`renders components/select/demo/option-label-center.tsx correctly 1`] = aria-owns="undefined_list" autocomplete="off" class="ant-select-selection-search-input" - readonly="" role="combobox" - style="opacity:0" type="search" - unselectable="on" value="" /> - Select a option + Single
@@ -2554,17 +3850,17 @@ exports[`renders components/select/demo/option-label-center.tsx correctly 1`] =
-
-
+
+ Hi +
@@ -2579,20 +3875,16 @@ exports[`renders components/select/demo/option-label-center.tsx correctly 1`] = aria-owns="undefined_list" autocomplete="off" class="ant-select-selection-search-input" - readonly="" role="combobox" - style="opacity:0" type="search" - unselectable="on" value="" /> -
- normal -
+ Bamboo
@@ -2650,17 +3942,176 @@ exports[`renders components/select/demo/option-label-center.tsx correctly 1`] =
-
-
+ +
+
+
+ + +
+
+
+ + Multiple + + +
+ +
+
+
+
+ Hi +
+ +
+
+
+ + +
+
+
+ + Multiple + + +
+ +
+
+
+
+ Hi +
@@ -2673,13 +4124,12 @@ exports[`renders components/select/demo/option-label-center.tsx correctly 1`] = > -
- normal -
+ Bamboo
-
-
+
+ + + Bamboo + + + +
- - Select a option -
-
-
-
-
-
- - - - - - Select a option - - -
-
-
-
-
- - - - - - Please select - - -
- -
-
-
+
, +] `; exports[`renders components/select/demo/option-render.tsx correctly 1`] = ` diff --git a/components/select/demo/option-label-center.tsx b/components/select/demo/option-label-center.tsx index d0b92de9d1..9634f28424 100644 --- 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: long, long, long piece of text }, @@ -8,69 +18,172 @@ const options = [ ]; const App: React.FC = () => ( - - - - - - - + - - + + + + + + + + + + + + {/* Test for align */} + + {/* Single */} + + + {/* Multiple */} + + + + ); export default App; diff --git a/components/select/style/index.ts b/components/select/style/index.ts index d207cfdc3d..af9053d355 100644 --- a/components/select/style/index.ts +++ b/components/select/style/index.ts @@ -146,6 +146,26 @@ const genBaseStyle: GenerateStyle = (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', diff --git a/components/select/style/multiple.ts b/components/select/style/multiple.ts index 8e3fc00a82..29f8bbad5d 100644 --- 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, - }, }, }; }; diff --git a/components/select/style/single.ts b/components/select/style/single.ts index 5487119aa9..204dd49295 100644 --- 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`]: { diff --git a/components/select/style/variants.ts b/components/select/style/variants.ts index d1e21b813d..a759321701 100644 --- 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, }, },