fix: Select token with paddingXXS (#48574)

* fix: paddingXXS * docs: update demo * chore: adjust logic * chore: fix lint * fix: datePicker style
ant-design · Apr 22, 2024 · 4eebc0c · 4eebc0c
1 parent ff2268e
commit 4eebc0c
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 30 deletions.
diff --git a/components/date-picker/style/token.ts b/components/date-picker/style/token.ts
@@ -109,10 +109,14 @@ export type PickerPanelToken = {
   pickerControlIconBorderWidth: number;
 };
 
-export type PickerToken = FullToken<'DatePicker'> &
-  PickerPanelToken &
-  SharedInputToken &
-  SelectorToken;
+export interface PickerToken
+  extends FullToken<'DatePicker'>,
+    PickerPanelToken,
+    SharedInputToken,
+    SelectorToken {
+  /** @private Used for internal calculation */
+  INTERNAL_FIXED_ITEM_MARGIN: number;
+}
 
 export type SharedPickerToken = TokenWithCommonCls<GlobalToken> &
   PickerPanelToken &
@@ -139,10 +143,36 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
 };
 
 export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => {
-  const { colorBgContainerDisabled, controlHeight, controlHeightSM, controlHeightLG, paddingXXS } =
-    token;
+  const {
+    colorBgContainerDisabled,
+    controlHeight,
+    controlHeightSM,
+    controlHeightLG,
+    paddingXXS,
+    lineWidth,
+  } = token;
 
-  return {
+  // Item height default use `controlHeight - 2 * paddingXXS`,
+  // but some case `paddingXXS=0`.
+  // Let's fallback it.
+  const dblPaddingXXS = paddingXXS * 2;
+  const dblLineWidth = lineWidth * 2;
+
+  const multipleItemHeight = Math.min(controlHeight - dblPaddingXXS, controlHeight - dblLineWidth);
+  const multipleItemHeightSM = Math.min(
+    controlHeightSM - dblPaddingXXS,
+    controlHeightSM - dblLineWidth,
+  );
+  const multipleItemHeightLG = Math.min(
+    controlHeightLG - dblPaddingXXS,
+    controlHeightLG - dblLineWidth,
+  );
+
+  // FIXED_ITEM_MARGIN is a hardcode calculation since calc not support rounding
+  const INTERNAL_FIXED_ITEM_MARGIN = Math.floor(paddingXXS / 2);
+
+  const filledToken = {
+    INTERNAL_FIXED_ITEM_MARGIN,
     cellHoverBg: token.controlItemBgHover,
     cellActiveWithRangeBg: token.controlItemBgActive,
     cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(),
@@ -157,13 +187,15 @@ export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken
     withoutTimeCellHeight: controlHeightLG * 1.65,
     multipleItemBg: token.colorFillSecondary,
     multipleItemBorderColor: 'transparent',
-    multipleItemHeight: controlHeight - paddingXXS * 2,
-    multipleItemHeightSM: controlHeightSM - paddingXXS * 2,
-    multipleItemHeightLG: controlHeightLG - paddingXXS * 2,
+    multipleItemHeight,
+    multipleItemHeightSM,
+    multipleItemHeightLG,
     multipleSelectorBgDisabled: colorBgContainerDisabled,
     multipleItemColorDisabled: token.colorTextDisabled,
     multipleItemBorderColorDisabled: 'transparent',
   };
+
+  return filledToken;
 };
 
 export const prepareComponentToken: GetDefaultToken<'DatePicker'> = (token) => ({

diff --git a/components/select/demo/component-token.tsx b/components/select/demo/component-token.tsx
@@ -11,10 +11,6 @@ for (let i = 10; i < 36; i++) {
   });
 }
 
-const handleChange = (value: string[]) => {
-  console.log(`selected ${value}`);
-};
-
 const App: React.FC = () => (
   <Space direction="vertical">
     <ConfigProvider
@@ -35,7 +31,6 @@ const App: React.FC = () => (
           style={{ width: '100%' }}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
-          onChange={handleChange}
           options={options}
         />
         <Select
@@ -44,7 +39,6 @@ const App: React.FC = () => (
           style={{ width: '100%' }}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
-          onChange={handleChange}
           options={options}
         />
       </Space>
@@ -64,7 +58,6 @@ const App: React.FC = () => (
           style={{ width: '100%' }}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
-          onChange={handleChange}
           options={options}
         />
         <Select
@@ -73,7 +66,26 @@ const App: React.FC = () => (
           style={{ width: '100%' }}
           placeholder="Please select"
           defaultValue={['a10', 'c12']}
-          onChange={handleChange}
+          options={options}
+        />
+      </Space>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Select: {
+            paddingXXS: 0,
+            controlHeight: 28,
+          },
+        },
+      }}
+    >
+      <Space style={{ width: '100%' }} direction="vertical">
+        <Select style={{ width: '100%' }} defaultValue="a10" options={options} />
+        <Select
+          mode="multiple"
+          style={{ width: '100%' }}
+          defaultValue={['a10', 'c12']}
           options={options}
         />
       </Space>

diff --git a/components/select/style/multiple.ts b/components/select/style/multiple.ts
@@ -7,8 +7,6 @@ import type { AliasToken } from '../../theme/internal';
 import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
 import type { SelectToken } from './token';
 
-export const FIXED_ITEM_MARGIN = 2;
-
 type SelectItemToken = Pick<
   SelectToken,
   | 'multipleSelectItemHeight'
@@ -19,6 +17,7 @@ type SelectItemToken = Pick<
   | 'lineWidth'
   | 'calc'
   | 'inputPaddingHorizontalBase'
+  | 'INTERNAL_FIXED_ITEM_MARGIN'
 >;
 
 /**
@@ -41,13 +40,21 @@ type SelectItemToken = Pick<
 export const getMultipleSelectorUnit = (
   token: Pick<
     SelectToken,
-    'max' | 'calc' | 'multipleSelectItemHeight' | 'paddingXXS' | 'lineWidth'
+    | 'max'
+    | 'calc'
+    | 'multipleSelectItemHeight'
+    | 'paddingXXS'
+    | 'lineWidth'
+    | 'INTERNAL_FIXED_ITEM_MARGIN'
   >,
 ) => {
-  const { multipleSelectItemHeight, paddingXXS, lineWidth } = token;
+  const { multipleSelectItemHeight, paddingXXS, lineWidth, INTERNAL_FIXED_ITEM_MARGIN } = token;
 
   const basePadding = token.max(token.calc(paddingXXS).sub(lineWidth).equal(), 0);
-  const containerPadding = token.max(token.calc(basePadding).sub(FIXED_ITEM_MARGIN).equal(), 0);
+  const containerPadding = token.max(
+    token.calc(basePadding).sub(INTERNAL_FIXED_ITEM_MARGIN).equal(),
+    0,
+  );
 
   return {
     basePadding,
@@ -87,6 +94,7 @@ export const genOverflowStyle = (
     | 'multipleItemBorderColorDisabled'
     | 'colorIcon'
     | 'colorIconHover'
+    | 'INTERNAL_FIXED_ITEM_MARGIN'
   >,
 ): CSSObject => {
   const {
@@ -99,6 +107,7 @@ export const genOverflowStyle = (
     multipleItemBorderColorDisabled,
     colorIcon,
     colorIconHover,
+    INTERNAL_FIXED_ITEM_MARGIN,
   } = token;
 
   const selectOverflowPrefixCls = `${componentCls}-selection-overflow`;
@@ -130,11 +139,11 @@ export const genOverflowStyle = (
         flex: 'none',
         boxSizing: 'border-box',
         maxWidth: '100%',
-        marginBlock: FIXED_ITEM_MARGIN,
+        marginBlock: INTERNAL_FIXED_ITEM_MARGIN,
         borderRadius: borderRadiusSM,
         cursor: 'default',
         transition: `font-size ${motionDurationSlow}, line-height ${motionDurationSlow}, height ${motionDurationSlow}`,
-        marginInlineEnd: token.calc(FIXED_ITEM_MARGIN).mul(2).equal(),
+        marginInlineEnd: token.calc(INTERNAL_FIXED_ITEM_MARGIN).mul(2).equal(),
         paddingInlineStart: paddingXS,
         paddingInlineEnd: token.calc(paddingXS).div(2).equal(),
 
@@ -181,7 +190,7 @@ const genSelectionStyle = (
   token: TokenWithCommonCls<AliasToken> & SelectItemToken,
   suffix?: string,
 ): CSSObject => {
-  const { componentCls } = token;
+  const { componentCls, INTERNAL_FIXED_ITEM_MARGIN } = token;
 
   const selectOverflowPrefixCls = `${componentCls}-selection-overflow`;
 
@@ -216,7 +225,7 @@ const genSelectionStyle = (
         '&:after': {
           display: 'inline-block',
           width: 0,
-          margin: `${unit(FIXED_ITEM_MARGIN)} 0`,
+          margin: `${unit(INTERNAL_FIXED_ITEM_MARGIN)} 0`,
           lineHeight: unit(selectItemHeight),
           visibility: 'hidden',
           content: '"\\a0"',

diff --git a/components/select/style/token.ts b/components/select/style/token.ts
@@ -120,12 +120,16 @@ export interface SelectorToken {
 
 export interface SelectToken extends FullToken<'Select'>, SelectorToken {
   rootPrefixCls: string;
+
+  /** @private Used for internal calculation */
+  INTERNAL_FIXED_ITEM_MARGIN: number;
 }
 
 export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
   const {
     fontSize,
     lineHeight,
+    lineWidth,
 
     controlHeight,
     controlHeightSM,
@@ -146,11 +150,28 @@ export const prepareComponentToken: GetDefaultToken<'Select'> = (token) => {
     colorTextDisabled,
   } = token;
 
-  const multipleItemHeight = controlHeight - paddingXXS * 2;
-  const multipleItemHeightSM = controlHeightSM - paddingXXS * 2;
-  const multipleItemHeightLG = controlHeightLG - paddingXXS * 2;
+  // Item height default use `controlHeight - 2 * paddingXXS`,
+  // but some case `paddingXXS=0`.
+  // Let's fallback it.
+  const dblPaddingXXS = paddingXXS * 2;
+  const dblLineWidth = lineWidth * 2;
+
+  const multipleItemHeight = Math.min(controlHeight - dblPaddingXXS, controlHeight - dblLineWidth);
+  const multipleItemHeightSM = Math.min(
+    controlHeightSM - dblPaddingXXS,
+    controlHeightSM - dblLineWidth,
+  );
+  const multipleItemHeightLG = Math.min(
+    controlHeightLG - dblPaddingXXS,
+    controlHeightLG - dblLineWidth,
+  );
+
+  // FIXED_ITEM_MARGIN is a hardcode calculation since calc not support rounding
+  const INTERNAL_FIXED_ITEM_MARGIN = Math.floor(paddingXXS / 2);
 
   return {
+    INTERNAL_FIXED_ITEM_MARGIN,
+
     zIndexPopup: zIndexPopupBase + 50,
     optionSelectedColor: colorText,
     optionSelectedFontWeight: fontWeightStrong,