feat: update Select borderless token

packages/semi-foundation/select/select.scss

@@ -40,7 +40,7 @@ $overflowList: #{$prefix}-overflow-list;
         outline: 0;
     }
 
-    &:active{
+    &:active {
         background-color: $color-select-bg-active;
     }
 
@@ -52,6 +52,7 @@ $overflowList: #{$prefix}-overflow-list;
     &-large {
         min-height: $height-select_large;
         line-height: $height-select_large;
+
         .#{$module}-selection {
             @include font-size-header-6;
         }
@@ -196,6 +197,7 @@ $overflowList: #{$prefix}-overflow-list;
 
         .#{$prefix}-tag-group {
             height: inherit;
+
             .#{$prefix}-tag {
                 @include select-tag-margin;
             }
@@ -326,6 +328,7 @@ $overflowList: #{$prefix}-overflow-list;
         width: $width-select_clear-icon;
         color: $color-select_clearBtn-text-default;
         flex-shrink: 0;
+
         &:hover {
             color: $color-select_clearBtn-text-hover;
         }
@@ -435,6 +438,7 @@ $overflowList: #{$prefix}-overflow-list;
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
+
     &-chosen {
         .#{$module}-option-icon {
             display: flex;
@@ -475,36 +479,84 @@ $overflowList: #{$prefix}-overflow-list;
 
 .#{$module}-borderless {
 
-    &:not(:focus-within):not(:hover){
-        background-color:transparent;
-        border-color: transparent;
+    &:not(:focus-within):not(:hover) {
+        background-color: $color-select_borderless-bg-default;
+        border-color: $color-select_borderless-border-default;
+
         .#{$module}-arrow {
             opacity: 0;
         }
+
+        &.#{$module}-borderless-arrow {
+            .#{$module}-arrow {
+                opacity: 1;
+            }
+        }
     }
 
-    &:focus-within:not(:active){
-        background-color:transparent;
+    &:hover {
+        background-color: $color-select_borderless-bg-hover;
+        border: $width-select-border-hover solid $color-select_borderless-border-hover;
+    }
+
+    &:focus {
+        border: $width-select-border-focus solid $color-select_borderless-border-focus;
+        background-color: $color-select_borderless-bg-focus;
+        outline: 0;
+    }
+
+    &:active {
+        background-color: $color-select_borderless-bg-active;
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+    &.#{$module}-disabled {
+        background-color: $color-select_borderless_input_disabled-bg;
+
+        &:hover {
+            background-color: $color-select_borderless_input_disabled-bg;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$module}-arrow {
+            color: $color-select_borderless_input_disabled-text;
+        }
+
+        .#{$prefix}-tag {
+            color: $color-select_borderless_input_disabled-text;
+        }
     }
 
     // split style into not and normal to avoid style override
-    &.#{$module}-error:not(:focus-within){
+    &.#{$module}-error:not(:focus-within) {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:not(:focus-within){
+    &.#{$module}-warning:not(:focus-within) {
         border-color: $color-select_warning-border-focus;
     }
 
-    &.#{$module}-error:focus-within{
+    &.#{$module}-error:focus-within {
         border-color: $color-select_danger-border-focus;
     }
 
-    &.#{$module}-warning:focus-within{
+    &.#{$module}-warning:focus-within {
         border-color: $color-select_warning-border-focus;
     }
 
 }
 
 
-    @import './rtl.scss';
+@import './rtl.scss';

packages/semi-foundation/select/variables.scss

@@ -47,6 +47,16 @@ $color-select_option-border-default: var(--semi-color-border); // 分组选择
 $color-select_inset_label-text: var(--semi-color-text-2); // 分组选择器菜单项辅助文本颜色
 $color-select_create_tips-text: var(--semi-color-text-2); // 分组选择器菜单项提示文本颜色
 $color-select_group-text: var(--semi-color-text-2); // 分组选择器菜单项分组标题文本颜色
+$color-select_borderless-bg-default: transparent; // borderless 选择器输入框背景色 - 默认态
+$color-select_borderless-bg-hover: var(--semi-color-fill-1); // borderless 选择器输入框背景色 - 悬停态
+$color-select_borderless-bg-active: var(--semi-color-fill-2); // borderless 选择器输入框背景色 - 按下态
+$color-select_borderless-bg-focus: var(--semi-color-fill-0); // borderless 选择器输入框背景色 - 聚焦态
+$color-select_borderless-border-default: transparent; // borderless 选择器输入框边框颜色 - 默认态
+$color-select_borderless-border-hover: $color-select-border-default; // borderless 选择器输入框边框颜色  - 悬停态
+$color-select_borderless-border-active: var(--semi-color-focus-border); // borderless 选择器输入框边框颜色  - 按下态
+$color-select_borderless-border-focus: $color-select-border-active; // borderless 选择器输入框边框颜色  - 聚焦态
+$color-select_borderless_input_disabled-text: var(--semi-color-disabled-text); // borderless 选择器输入框文本颜色  - 禁用态
+$color-select_borderless_input_disabled-bg: var(--semi-color-disabled-fill); // borderless 禁用选择器输入框背景色 - 禁用态
 
 // Width/Height
 $width-select_icon_right: ($width-icon-medium + $spacing-tight * 2); // 选择器右侧图标大小

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

@@ -3288,4 +3288,48 @@ export const Fix1584 = () => {
   );
 }
 
-
+export const FeatBorderless = () => {
+  return (
+    <>
+      showArrow=false
+      <br />
+      <Select 
+        borderless
+        defaultValue={'abc'}
+      >
+        <Select.Option value="abc">抖音</Select.Option>
+        <Select.Option value="ulikecam">轻颜相机</Select.Option>
+        <Select.Option value="jianying">剪映</Select.Option>
+        <Select.Option value="xigua">西瓜视频</Select.Option>
+      </Select>
+      <br />
+      <br />
+      showArrow=true
+      <br />
+      <Select 
+        borderless
+        showArrowInBorderless
+        defaultValue={'abc'}
+      >
+        <Select.Option value="abc">抖音</Select.Option>
+        <Select.Option value="ulikecam">轻颜相机</Select.Option>
+        <Select.Option value="jianying">剪映</Select.Option>
+        <Select.Option value="xigua">西瓜视频</Select.Option>
+      </Select>
+      <br />
+      showArrow=true,disabled=true
+      <br />
+      <Select 
+        borderless
+        showArrowInBorderless
+        disabled
+        defaultValue={'abc'}
+      >
+        <Select.Option value="abc">抖音</Select.Option>
+        <Select.Option value="ulikecam">轻颜相机</Select.Option>
+        <Select.Option value="jianying">剪映</Select.Option>
+        <Select.Option value="xigua">西瓜视频</Select.Option>
+      </Select>
+    </>
+  );
+}

packages/semi-ui/select/index.tsx

@@ -118,6 +118,7 @@ export type SelectProps = {
     autoClearSearchValue?: boolean;
     arrowIcon?: React.ReactNode;
     borderless?: boolean;
+    showArrowInBorderless?: boolean;
     clearIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
     value?: string | number | any[] | Record<string, any>;
@@ -354,6 +355,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         restTagsPopoverProps: {},
         expandRestTagsOnClick: false,
         ellipsisTrigger: false,
+        showArrowInBorderless: false,
         // Radio selection is different from the default renderSelectedItem for multiple selection, so it is not declared here
         // renderSelectedItem: (optionNode) => optionNode.label,
         // The default creator rendering is related to i18, so it is not declared here
@@ -923,7 +925,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 ref={this.setOptionContainerEl}
                 onKeyDown={e => this.foundation.handleContainerKeyDown(e)}
             >
-                {outerTopSlot ? <div className={`${prefixcls}-option-list-outer-top-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{outerTopSlot}</div> : null }
+                {outerTopSlot ? <div className={`${prefixcls}-option-list-outer-top-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{outerTopSlot}</div> : null}
                 <div
                     style={{ maxHeight: `${maxHeight}px` }}
                     className={optionListCls}
@@ -931,11 +933,11 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                     aria-multiselectable={multiple}
                     onScroll={e => this.foundation.handleListScroll(e)}
                 >
-                    {innerTopSlot ? <div className={`${prefixcls}-option-list-inner-top-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{innerTopSlot}</div> : null }
+                    {innerTopSlot ? <div className={`${prefixcls}-option-list-inner-top-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{innerTopSlot}</div> : null}
                     {loading ? this.renderLoading() : isEmpty ? this.renderEmpty() : listContent}
-                    {innerBottomSlot ? <div className={`${prefixcls}-option-list-inner-bottom-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{innerBottomSlot}</div> : null }
+                    {innerBottomSlot ? <div className={`${prefixcls}-option-list-inner-bottom-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{innerBottomSlot}</div> : null}
                 </div>
-                {outerBottomSlot ? <div className={`${prefixcls}-option-list-outer-bottom-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{outerBottomSlot}</div> : null }
+                {outerBottomSlot ? <div className={`${prefixcls}-option-list-outer-bottom-slot`} onMouseEnter={() => this.foundation.handleSlotMouseEnter()}>{outerBottomSlot}</div> : null}
             </div>
         );
     }
@@ -1309,6 +1311,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             arrowIcon,
             clearIcon,
             borderless,
+            showArrowInBorderless,
             ...rest
         } = this.props;
 
@@ -1319,6 +1322,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             cls(className) :
             cls(prefixcls, className, {
                 [`${prefixcls}-borderless`]: borderless,
+                [`${prefixcls}-borderless-arrow`]: showArrowInBorderless,
                 [`${prefixcls}-open`]: isOpen,
                 [`${prefixcls}-focus`]: isFocus,
                 [`${prefixcls}-disabled`]: disabled,