✨ feat: remove tag border in select and tree-select (ant-design#41480)

* ✨ feat: new tag * update demo * update snap * fix * fix * fix * fix * fix * fix * fix style * update snap * revert * fix * fix * fix * fix * fix * Update components/select/style/multiple.tsx Co-authored-by: MadCcc <1075746765@qq.com> --------- Co-authored-by: MadCcc <1075746765@qq.com>
RedJue · Apr 25, 2023 · 3564325 · 3564325
1 parent 1564dfd
commit 3564325
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx
@@ -1,11 +1,11 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent, resetIcon, textEllipsis } from '../../style';
+import { genCompactItemStyle } from '../../style/compact-item';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genDropdownStyle from './dropdown';
 import genMultipleStyle from './multiple';
 import genSingleStyle from './single';
-import { resetComponent, resetIcon, textEllipsis } from '../../style';
-import { genCompactItemStyle } from '../../style/compact-item';
 
 export interface ComponentToken {
   zIndexPopup: number;

diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx
@@ -1,19 +1,19 @@
 import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import type { SelectToken } from '.';
-import { mergeToken } from '../../theme/internal';
 import { resetIcon } from '../../style';
+import { mergeToken } from '../../theme/internal';
 
 const FIXED_ITEM_MARGIN = 2;
 
-function getSelectItemStyle({
+const getSelectItemStyle = ({
   controlHeightSM,
   controlHeight,
   lineWidth: borderWidth,
-}: SelectToken) {
+}: SelectToken): readonly [number, number] => {
   const selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth;
   const selectItemMargin = Math.ceil(selectItemDist / 2);
-  return [selectItemDist, selectItemMargin];
-}
+  return [selectItemDist, selectItemMargin] as const;
+};
 
 function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
   const { componentCls, iconCls } = token;
@@ -95,7 +95,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
         marginBottom: FIXED_ITEM_MARGIN,
         lineHeight: `${selectItemHeight - token.lineWidth * 2}px`,
         background: token.colorFillSecondary,
-        border: `${token.lineWidth}px solid ${token.colorSplit}`,
         borderRadius: token.borderRadiusSM,
         cursor: 'default',
         transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`,
@@ -106,7 +105,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
 
         [`${componentCls}-disabled&`]: {
           color: token.colorTextDisabled,
-          borderColor: token.colorBorder,
           cursor: 'not-allowed',
         },
 
@@ -191,7 +189,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject {
   };
 }
 
-export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
+const genMultipleStyle = (token: SelectToken): CSSInterpolation => {
   const { componentCls } = token;
 
   const smallToken = mergeToken<SelectToken>(token, {
@@ -200,12 +198,20 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
     borderRadius: token.borderRadiusSM,
     borderRadiusSM: token.borderRadiusXS,
   });
+
+  const largeToken = mergeToken<SelectToken>(token, {
+    fontSize: token.fontSizeLG,
+    controlHeight: token.controlHeightLG,
+    controlHeightSM: token.controlHeight,
+    borderRadius: token.borderRadiusLG,
+    borderRadiusSM: token.borderRadius,
+  });
+
   const [, smSelectItemMargin] = getSelectItemStyle(token);
 
   return [
     genSizeStyle(token),
     // ======================== Small ========================
-    // Shared
     genSizeStyle(smallToken, 'sm'),
 
     // Padding
@@ -223,16 +229,8 @@ export default function genMultipleStyle(token: SelectToken): CSSInterpolation {
     },
 
     // ======================== Large ========================
-    // Shared
-    genSizeStyle(
-      mergeToken<any>(token, {
-        fontSize: token.fontSizeLG,
-        controlHeight: token.controlHeightLG,
-        controlHeightSM: token.controlHeight,
-        borderRadius: token.borderRadiusLG,
-        borderRadiusSM: token.borderRadius,
-      }),
-      'lg',
-    ),
+    genSizeStyle(largeToken, 'lg'),
   ];
-}
+};
+
+export default genMultipleStyle;
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
@@ -253,7 +253,7 @@ const InternalTreeSelect = <
       }
       treeLine={!!treeLine}
       inputIcon={suffixIcon}
-      multiple={multiple}
+      multiple={isMultiple}
       placement={memoizedPlacement}
       removeIcon={removeIcon}
       clearIcon={clearIcon}

diff --git a/components/tree-select/style/index.ts b/components/tree-select/style/index.ts
@@ -65,9 +65,7 @@ const genBaseStyle: GenerateStyle<TreeSelectToken> = (token) => {
 // ============================== Export ==============================
 export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) {
   return genComponentStyleHook('TreeSelect', (token) => {
-    const treeSelectToken = mergeToken<TreeSelectToken>(token, {
-      treePrefixCls,
-    });
+    const treeSelectToken = mergeToken<TreeSelectToken>(token, { treePrefixCls });
     return [genBaseStyle(treeSelectToken)];
   })(prefixCls);
 }