style: [Cascader/TreeSelect] Modify the style of TagInput used in Cascader and TreeSelect (#1278, #1263)

Co-authored-by: pointhalo <[email protected]>

packages/semi-foundation/cascader/cascader.scss

@@ -159,23 +159,47 @@ $module: #{$prefix}-cascader;
             background: transparent;
             margin-left: $spacing-cascader_selection_tagInput-marginLeft;
         }
-
+        
         .#{$prefix}-tagInput {
+            &-wrapper {
+                &-default {
+                    min-height: $height-cascader_selection_tagInput_wrapper_default;
+                }
+    
+                &-small {
+                    min-height: $height-cascader_selection_tagInput_wrapper_small;
+                }
+    
+                &-large {
+                    min-height: $height-cascader_selection_tagInput_wrapper_large;
+                }
+            }
+
             .#{$prefix}-input-wrapper {
-                height: $height-cascader_selection_tagInput_input_default;
+                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
                     padding-left: 0;
                 }
-            }
 
-            .#{$prefix}-input-wrapper-small {
-                height: $height-cascader_selection_tagInput_input_small;
-            }
-            .#{$prefix}-input-wrapper-large {
-                height: $height-cascader_selection_tagInput_input_large;
+                &-default {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
+    
+                &-large {
+                    margin-top: $spacing-cascader_selection_tag-marginY;
+                    margin-bottom: $spacing-cascader_selection_tag-marginY;
+                }
             }
+
+            // .#{$prefix}-input-wrapper-small {
+            //     height: $height-cascader_selection_tagInput_input_small;
+            // }
+            // .#{$prefix}-input-wrapper-large {
+            //     height: $height-cascader_selection_tagInput_input_large;
+            // }
         }
 
         &-text {

packages/semi-foundation/cascader/variables.scss

@@ -93,9 +93,9 @@ $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 16px; // 级联选择图标尺寸
 $width-cascader_option:  150px; // 级联选择各级菜单宽度
 $height-cascader_option_list: 180px; // 级联选择菜单高度
-$height-cascader_selection_tagInput_input_small: 22px;
-$height-cascader_selection_tagInput_input_default: 30px;
-$height-cascader_selection_tagInput_input_large: 38px;
+$height-cascader_selection_tagInput_wrapper_small: 22px;  //级联选择多选搜索时搜索框最小高度 - 小尺寸
+$height-cascader_selection_tagInput_wrapper_default: 30px;  //级联选择多选搜索时搜索框最小高度 - 默认尺寸
+$height-cascader_selection_tagInput_wrapper_large: 38px;  //级联选择多选搜索时搜索框最小高度 - 大尺寸
 $height-cascader_selection_wrapper: 30px;
 
 $spacing-cascader_text-marginX: $spacing-base-tight; // 级联选择 prefix/suffix 文字水平内间距

packages/semi-foundation/tagInput/tagInput.scss

@@ -169,7 +169,7 @@ $module: #{$prefix}-tagInput;
         & &-input {
             flex-grow: 1;
             width: min-content;
-            min-width: 38px;
+            // min-width: 38px;
             border: none;
             outline: none;
             background-color: transparent;

packages/semi-foundation/treeSelect/treeSelect.scss

@@ -172,24 +172,46 @@ $module: #{$prefix}-tree-select;
             border: hidden;
             background: transparent;
 
-            .#{$prefix}-tagInput-wrapper{
+            .#{$prefix}-tagInput-wrapper {
                 padding-left: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
                 padding-right: $spacing-treeSelect_selection_tagInput_wrapper-paddingX;
 
-                .#{$prefix}-input-wrapper {
-                    height: $height-treeSelect_selection_tagInput_input_default;
+                &-default {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_default;
+                }
     
+                &-small {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_small;
+                }
+
+                &-large {
+                    min-height: $height-treeSelect_selection_tagInput_wrapper_large;
+                }
+
+                .#{$prefix}-input-wrapper {
+                    // height: $height-treeSelect_selection_tagInput_input_default;
+
                     .#{$prefix}-input {
                         padding-left: 0;
                     }
+
+                    &-default {
+                        margin-top: $spacing-treeSelect_tag-marginY;
+                        margin-bottom: $spacing-treeSelect_tag-marginY;
+                    }
+        
+                    &-large {
+                        margin-top: $spacing-treeSelect_tag-marginY;
+                        margin-bottom: $spacing-treeSelect_tag-marginY;
+                    }
                 }
     
-                .#{$prefix}-input-wrapper-small {
-                    height: $height-treeSelect_selection_tagInput_input_small;
-                }
-                .#{$prefix}-input-wrapper-large {
-                    height: $height-treeSelect_selection_tagInput_input_large;
-                }
+                // .#{$prefix}-input-wrapper-small {
+                //     height: $height-treeSelect_selection_tagInput_input_small;
+                // }
+                // .#{$prefix}-input-wrapper-large {
+                //     height: $height-treeSelect_selection_tagInput_input_large;
+                // }
             }
         }
     }

packages/semi-foundation/treeSelect/variables.scss

@@ -87,6 +87,6 @@ $font-treeSelect_insertLabel-fontWeight: 600; // 带搜索的树前缀标签文
 $width-treeSelect_arrow: 32px; // 树选择器展开箭头宽度
 $width-treeSelect_option:  230px; // 树选择器菜单项宽度
 $height-treeSelect_popover: 300px; // 树选择器菜单高度
-$height-treeSelect_selection_tagInput_input_small: 22px; // 树选择器多选标签高度 - 小尺寸
-$height-treeSelect_selection_tagInput_input_default: 30px; // 树选择器多选标签高度 - 默认尺寸
-$height-treeSelect_selection_tagInput_input_large: 38px; // 树选择器多选标签高度 - 大尺寸
+$height-treeSelect_selection_tagInput_wrapper_small: 22px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 小尺寸
+$height-treeSelect_selection_tagInput_wrapper_default: 30px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 默认尺寸
+$height-treeSelect_selection_tagInput_wrapper_large: 38px; // 树选择器多选搜索，搜索框在选择框时选择框最小高度 - 大尺寸

packages/semi-ui/cascader/_story/cascader.stories.jsx

@@ -159,6 +159,60 @@ const treeData4 = [
     },
 ];
 
+const treeData5 = [
+  {
+    label: 'Node1',
+    value: '0-0',
+    children: [
+      {
+        label: 'Child Node1',
+        value: '0-0-1',
+      },
+      {
+        label: 'Child Node2',
+        value: '0-0-2',
+        key: '0-0-2',
+      },
+      {
+        label: 'Child Node3',
+        value: '0-0-3',
+      },
+      {
+        label: 'Child Node4',
+        value: '0-0-4',
+      },
+      {
+        label: 'Child Node5',
+        value: '0-0-5',
+      },
+      {
+        label: 'Child Node6',
+        value: '0-0-6',
+      },
+      {
+        label: 'Child Node7',
+        value: '0-0-7',
+      },
+      {
+        label: 'Child Node8',
+        value: '0-0-8',
+      },
+      {
+        label: 'Child Node9',
+        value: '0-0-9',
+      },
+      {
+        label: 'Child Node10',
+        value: '0-0-10',
+      },
+    ],
+  },
+  {
+    label: 'Node2',
+    value: '0-1',
+  },
+];
+
 const treeOrder = [
     {
         label: '-1',
@@ -1582,4 +1636,28 @@ export const SuperLongList = () => {
             onListScroll={()=>{console.log(123)}}
         />
     );
-};
+};
+
+export const size = () => {
+  const props = {
+    // defaultValue: [
+    //   ["0-0","0-0-1"],["0-0","0-0-2"],["0-0","0-0-3"],["0-0","0-0-4"],["0-0","0-0-5"],
+    //   ["0-0","0-0-6"],["0-0","0-0-7"],["0-0","0-0-8"],["0-0","0-0-9"]
+    // ],
+     defaultValue: [["0-0","0-0-9"]
+    ],
+    style: { width: 300 },
+    treeData: treeData5,
+    multiple: true,
+    filterTreeNode: true,
+    leafOnly: true,
+  };
+
+  return (<>
+    <Cascader {...props} size={'small'} />
+    <br/><br/>
+    <Cascader {...props} size={'default'} />
+    <br/><br/>
+    <Cascader {...props} size={'large'}/>
+  </>);
+}

packages/semi-ui/treeSelect/_story/treeSelect.stories.jsx

@@ -4,6 +4,7 @@ import TreeSelect from '../index';
 import { flattenDeep } from 'lodash';
 import CustomTrigger from './CustomTrigger';
 import { IconCreditCard } from '@douyinfe/semi-icons';
+import { setFocusToPreviousMenuItem } from '@douyinfe/semi-foundation/utils/a11y';
 const TreeNode = TreeSelect.TreeNode;
 const { Title } = Typography;
 
@@ -100,6 +101,71 @@ const treeData2 = [
   },
 ];
 
+const treeData3 = [
+  {
+    label: 'Node1',
+    value: '0-0',
+    key: '0-0',
+    children: [
+      {
+        label: 'Child Node1',
+        value: '0-0-1',
+        key: '0-0-1',
+      },
+      {
+        label: 'Child Node2',
+        value: '0-0-2',
+        key: '0-0-2',
+      },
+      {
+        label: 'Child Node3',
+        value: '0-0-3',
+        key: '0-0-3',
+      },
+      {
+        label: 'Child Node4',
+        value: '0-0-4',
+        key: '0-0-4',
+      },
+      {
+        label: 'Child Node5',
+        value: '0-0-5',
+        key: '0-0-5',
+      },
+      {
+        label: 'Child Node6',
+        value: '0-0-6',
+        key: '0-0-6',
+      },
+      {
+        label: 'Child Node7',
+        value: '0-0-7',
+        key: '0-0-7',
+      },
+      {
+        label: 'Child Node8',
+        value: '0-0-8',
+        key: '0-0-8',
+      },
+      {
+        label: 'Child Node9',
+        value: '0-0-9',
+        key: '0-0-9',
+      },
+      {
+        label: 'Child Node10',
+        value: '0-0-10',
+        key: '0-0-10',
+      },
+    ],
+  },
+  {
+    label: 'Node2',
+    value: '0-1',
+    key: '0-1',
+  },
+];
+
 const treeDataWithoutValue = [
   {
     label: '亚洲',
@@ -1659,3 +1725,23 @@ export const loadDataAndLoadedkeys = () => {
         />
     );
 }
+
+export const size = () => {
+  const props = {
+    style: { width: 300 },
+    dropdownStyle: { maxHeight: 400, overflow: 'auto' },
+    defaultValue: ['0-0-1', '0-0-2', '0-0-3', '0-0-4', '0-0-5', '0-0-6', '0-0-7'],
+    treeData: treeData3,
+    multiple: true,
+    filterTreeNode: true,
+    searchPosition: "trigger"
+  };
+
+  return (<>
+    <TreeSelect {...props} size={'small'} placeholder={'small'} />
+    <br/><br/>
+    <TreeSelect {...props} size={'default'} placeholder={'default'} />
+    <br/><br/>
+    <TreeSelect {...props} size={'large'} placeholder={'large'} />
+  </>);
+}