@douyinfe/semi-foundation 2.32.2 → 2.33.0

package/cascader/cascader.scss

@@ -25,6 +25,17 @@ $module: #{$prefix}-cascader;
         border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
+    &:focus {
+        border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
+        background-color: $color-cascader_default-bg-default;
+        outline: 0;
+    }
+
+
+    &:active {
+        background-color: $color-cascader_default-bg-active;
+    }
+
     &-small {
         min-height: $height-cascader_small;
         line-height: $height-cascader_small;
@@ -41,11 +52,13 @@ $module: #{$prefix}-cascader;
     &-focus {
         border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         outline: 0;
-        &:hover,
-        &:active {
+        &:hover{
             background-color: $color-cascader_default-bg-default;
             border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         }
+        &:active {
+            background-color: $color-cascader_default-bg-active;
+        }
     }
 
     &-warning {
@@ -495,4 +508,36 @@ $module: #{$prefix}-cascader;
     }
 }
 
+.#{$module}-borderless{
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-cascader_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-cascader_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-cascader_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-cascader_warning-border-focus;
+    }
+
+
+}
+
 @import './rtl.scss';

package/cascader/foundation.ts

@@ -109,6 +109,7 @@ export interface BasicScrollPanelProps {
 }
 
 export interface BasicCascaderProps {
+    borderless?: boolean;
     mouseEnterDelay?: number;
     mouseLeaveDelay?: number;
     separator?: string;

package/cascader/variables.scss

@@ -5,6 +5,7 @@ $color-cascader_default-border-hover: transparent; // 级联选择描边颜色 -
 $color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
 $color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 默认
 $color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 悬浮
+$color-cascader_default-bg-active: var(--semi-color-fill-2); // 级联选择菜单项背景颜色 - 按下
 $color-cascader_option_list-border-default: var(--semi-color-fill-0); // 级联选择各级菜单分割线颜色
 $color-cascader_option_main-text-default: var(--semi-color-text-0); // 级联选择菜单项文字颜色
 $color-cascader_option-bg-hover: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 悬浮

package/collapse/foundation.ts

@@ -7,6 +7,7 @@ export interface CollapseProps{
     activeKey?: string | string[];
     defaultActiveKey?: string | string[];
     accordion?: boolean;
+    clickHeaderToExpand?: boolean;
     onChange?: (activeKey: CollapseProps['activeKey'], e: any) => void;
     expandIcon?: any;
     collapseIcon?: any;

package/datePicker/datePicker.scss

@@ -77,6 +77,7 @@ $module-list: #{$prefix}-scrolllist;
                 &[x-open-type=year] {
                     min-height: $height-datepicker_month_grid_yearType_insetInput;
                 }
+
                 &[x-open-type=time] {
                     min-height: $height-datepicker_month_grid_timeType_insetInput;
                 }
@@ -101,7 +102,7 @@ $module-list: #{$prefix}-scrolllist;
 
         // when preset postion is left or right, and insetinput is false, let the month panel get the fixed height
         &[x-preset-position=left][x-insetinput=false],
-        &[x-preset-position=right][x-insetinput=false] { 
+        &[x-preset-position=right][x-insetinput=false] {
             .#{$module}-month {
                 height: $height-datepicker_month_max;
             }
@@ -234,6 +235,7 @@ $module-list: #{$prefix}-scrolllist;
             &:first-of-type {
                 margin-right: $spacing-datepicker_footer_cancel_button-marginRight;
             }
+
             // confirm button
             &:nth-of-type(2) {
                 margin-right: $spacing-datepicker_footer_confirm_button-marginRight;
@@ -564,6 +566,7 @@ $module-list: #{$prefix}-scrolllist;
                 }
             }
         }
+
         // 以上是天状态
     }
 
@@ -662,11 +665,12 @@ $module-list: #{$prefix}-scrolllist;
             display: grid;
             align-content: flex-start;
             grid-gap: $spacing-datepicker_quick_control_item-margin;
-            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_left_and_right_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5 , $width-datepicker_presetPanel_left_and_right_two_col_button));
+            grid-template-columns: repeat(2, minmax($width-datepicker_presetPanel_left_and_right_two_col_button - $width-datepicker_presetPanel_scroll_bar * 0.5, $width-datepicker_presetPanel_left_and_right_two_col_button));
             padding: 0 $spacing-datepicker_quick_control_content-paddingX $spacing-datepicker_quick_control_content-paddingX;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_left_and_right_two_col_button;
+
                 &-ellipsis {
                     // ellipsis text content, $spacing-datepicker_quick_control_item-margin（default 8px）space left and right
                     width: $width-datepicker_presetPanel_left_and_right_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
@@ -686,6 +690,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_three_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_three_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -705,6 +710,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_five_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_five_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -723,6 +729,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button;
+
                 &-ellipsis {
                     max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     color: $color-datepicker_quick_button-text-default;
@@ -733,6 +740,7 @@ $module-list: #{$prefix}-scrolllist;
 
         &-month {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
@@ -748,12 +756,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-date {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -762,12 +772,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTime {
             max-width: $width-datepicker_monthPanel_max;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -776,12 +788,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateRange {
             max-width: $width-datepicker_monthPanel_max * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -790,12 +804,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTimeRange {
             max-width: $width-datepicker_monthPanel_max * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input - $height-datepicker_presetPanel_left_and_right_except_content;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel - $height-datepicker_presetPanel_left_and_right_except_content;
@@ -838,10 +854,12 @@ $module-list: #{$prefix}-scrolllist;
             padding-bottom: $spacing-datepicker_insetInput_wrapper-paddingBottom;
 
             width: $width-datepicker_insetInput_date_type_wrapper;
+
             &[x-type=dateRange],
             &[x-type=dateTimeRange] {
                 width: $width-datepicker_insetInput_date_range_type_wrapper;
             }
+
             &[x-type=month] {
                 width: $width-datepicker_insetInput_month_type_wrapper;
             }
@@ -877,12 +895,13 @@ $module-list: #{$prefix}-scrolllist;
             background-color: $color-datepicker_range_input-bg-default;
             border: $width-datepicker_range_trigger-border solid $color-datepicker_range_trigger-border;
 
-            &:hover{
-                border-color: $color-datepicker_range_trigger-border-hover
+            &:hover {
+                border-color: $color-datepicker_range_trigger-border-hover;
             }
 
-            &:active{
-                border-color: $color-datepicker_range_trigger-border-active ;
+            &:active {
+                border-color: $color-datepicker_range_trigger-border-active;
+
             }
 
             .#{$module}-monthRange-input {
@@ -914,7 +933,7 @@ $module-list: #{$prefix}-scrolllist;
                     & ~ .#{$module}-range-input-clearbtn {
                         display: flex;
                     }
-    
+
                     & ~ .#{$module}-range-input-clearbtn ~ .#{$module}-range-input-suffix {
                         display: none;
                     }
@@ -939,7 +958,7 @@ $module-list: #{$prefix}-scrolllist;
 
                 &-start-with-prefix {
                     border-radius: 0;
-                }                
+                }
 
                 &-end {
                     border-radius: 0;
@@ -994,7 +1013,7 @@ $module-list: #{$prefix}-scrolllist;
                         background-color: $color-datepicker_range_input_inputWrapper-bg-default;
                     }
                 }
-                
+
                 &:hover {
                     background-color: $color-datepicker_range_input_disabled-bg-hover;
                 }
@@ -1012,8 +1031,8 @@ $module-list: #{$prefix}-scrolllist;
                 .#{$module}-range-input-wrapper {
                     &:hover {
                         background-color: $color-datepicker_range_input_warning-bg-hover;
-                    } 
-                    
+                    }
+
                     &-active {
                         border-color: $color-datepicker_range_input_warning-border-active;
                         background-color: $color-datepicker_range_input_warning-bg-active;
@@ -1028,8 +1047,8 @@ $module-list: #{$prefix}-scrolllist;
                 .#{$module}-range-input-wrapper {
                     &:hover {
                         background-color: $color-datepicker_range_input_error-bg-hover;
-                    } 
-                    
+                    }
+
                     &-active {
                         border-color: $color-datepicker_range_input_error-border-active;
                         background-color: $color-datepicker_range_input_error-bg-active;
@@ -1063,7 +1082,7 @@ $module-list: #{$prefix}-scrolllist;
             &-suffix {
                 padding-left: $spacing-datepicker_range_input_suffix-paddingLeft;
                 padding-right: $spacing-datepicker_range_input_suffix-paddingRight;
-                
+
                 &-hidden {
                     display: none;
                 }
@@ -1083,7 +1102,7 @@ $module-list: #{$prefix}-scrolllist;
 .#{$module}-compact {
     @include font-size-small;
     line-height: $lineHeight-datepicker_compact;
-  
+
     .#{$module}-month-grid {
 
         &[x-type="dateTime"],
@@ -1093,7 +1112,7 @@ $module-list: #{$prefix}-scrolllist;
                 height: calc(100% - #{$height-datepicker_switch_compact});
             }
         }
-    
+
         &[x-type="dateRange"],
         &[x-type="dateTimeRange"] {
             .#{$module}-month-grid-left {
@@ -1113,7 +1132,7 @@ $module-list: #{$prefix}-scrolllist;
 
         // when preset postion is left or right, and insetinput is false, let the month panel get the fixed height
         &[x-preset-position=left][x-insetinput=false],
-        &[x-preset-position=right][x-insetinput=false] { 
+        &[x-preset-position=right][x-insetinput=false] {
 
             .#{$module}-month {
                 height: $height-datepicker_month_max_compact;
@@ -1184,6 +1203,7 @@ $module-list: #{$prefix}-scrolllist;
                 &[x-open-type=year] {
                     min-height: $height-datepicker_tpk_compact;
                 }
+
                 &[x-open-type=time] {
                     min-height: $height-datepicker_tpk_compact;
                 }
@@ -1272,7 +1292,7 @@ $module-list: #{$prefix}-scrolllist;
     .#{$module}-day {
         width: $width-datepicker_day_compact;
         height: $width-datepicker_day_compact;
-  
+
         &-main {
             width: $width-datepicker_day_main_compact;
             height: $width-datepicker_day_main_compact;
@@ -1384,6 +1404,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_left_and_right_two_col_button;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_left_and_right_two_col_button - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1403,6 +1424,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_three_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1421,6 +1443,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact;
+
                 &-ellipsis {
                     width: $width-datepicker_presetPanel_top_and_bottom_five_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1439,6 +1462,7 @@ $module-list: #{$prefix}-scrolllist;
 
             &-item {
                 max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact;
+
                 &-ellipsis {
                     max-width: $width-datepicker_presetPanel_top_and_bottom_two_col_button_compact - ($spacing-datepicker_quick_control_item-margin * 2);
                     font-size: $fontSize-datepicker_insetInput_compact-fontSize;
@@ -1449,12 +1473,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-month {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content_compact + $height-datepicker_inset_input_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_panel_yam_scrolllist - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1463,12 +1489,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-date {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1477,12 +1505,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTime {
             max-width: $width-datepicker_panel_compact;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1491,12 +1521,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateRange {
             max-width: $width-datepicker_panel_compact * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1505,12 +1537,14 @@ $module-list: #{$prefix}-scrolllist;
 
         &-dateTimeRange {
             max-width: $width-datepicker_panel_compact * 2;
+
             &[x-insetinput=true] {
                 .#{$module}-quick-control-right-content-wrapper,
                 .#{$module}-quick-control-left-content-wrapper {
                     max-height: $height-datepicker_preset_panel_inset_input_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
                 }
             }
+
             .#{$module}-quick-control-right-content-wrapper,
             .#{$module}-quick-control-left-content-wrapper {
                 max-height: $height-datepicker_date_time_panel_compact - $height-datepicker_presetPanel_left_and_right_except_content_compact;
@@ -1531,6 +1565,7 @@ $module-list: #{$prefix}-scrolllist;
             padding-bottom: $spacing-datepicker_insetInput_wrapper_compact-paddingBottom;
 
             width: $width-datepicker_insetInput_date_type_wrapper_compact;
+
             &[x-type=dateRange],
             &[x-type=dateTimeRange] {
                 width: $width-datepicker_insetInput_date_range_type_wrapper_compact;
@@ -1540,6 +1575,7 @@ $module-list: #{$prefix}-scrolllist;
                     margin-top: $spacing-datepicker_insetInput_wrapper_compact-paddingY;
                 }
             }
+
             &[x-type=month] {
                 width: $width-datepicker_insetInput_month_type_wrapper_compact;
             }
@@ -1585,4 +1621,73 @@ $module-list: #{$prefix}-scrolllist;
     }
 }
 
+.#{$module}-borderless {
+
+    &:not(:focus-within):not(:hover){
+        background-color: transparent;
+        border-color: transparent;
+
+        .#{$prefix}-input-suffix, .#{$module}-range-input-suffix {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active) {
+        background-color: transparent;
+    }
+
+
+    &.#{$module}-range-input-error {
+
+        .#{$module}-range-input-wrapper {
+            &-active {
+                border-color: transparent;
+            }
+        }
+        &:hover {
+            background-color: $color-datepicker_range_input_error-border-default;
+        }
+
+        &:focus-within {
+            background-color: $color-datepicker_range_input_error-border-default;
+        }
+    }
+    &.#{$module}-range-input-error:not(:focus-within){
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_error-border-active;
+    }
+    &.#{$module}-range-input-error:focus-within {
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_error-border-active;
+    }
+
+    // split style into not and normal to avoid style override
+    &.#{$module}-range-input-warning {
+
+        .#{$module}-range-input-wrapper {
+            &-active {
+                border-color: transparent;
+            }
+        }
+        &:hover {
+            background-color: $color-datepicker_range_input_warning-border-default;
+        }
+
+        &:focus-within {
+            background-color: $color-datepicker_range_input_warning-border-default;
+        }
+    }
+
+    &.#{$module}-range-input-warning:not(:focus-within){
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_warning-border-active;
+    }
+    &.#{$module}-range-input-warning:focus-within {
+        border-width: $width-datepicker_range_input-border;
+        border-color: $color-datepicker_range_input_warning-border-active;
+    }
+
+}
+
+
 @import "./rtl.scss";

package/datePicker/foundation.ts

@@ -121,6 +121,7 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean;
     autoSwitchDate?: boolean;
+    borderless?: boolean;
     className?: string;
     defaultOpen?: boolean;
     defaultPickerValue?: ValueType;

package/datePicker/inputFoundation.ts

@@ -34,6 +34,7 @@ export interface DateInputEventHandlerProps {
 }
 
 export interface DateInputElementProps {
+    borderless?: boolean;
     insetLabel?: any;
     prefix?: any
 }

package/input/input.scss

@@ -30,6 +30,7 @@ $module: #{$prefix}-input;
     transform: scale($transform_scale-input);
 }
 
+
 .#{$module}-wrapper {
     display: inline-block;
     position: relative;
@@ -687,4 +688,31 @@ $module: #{$prefix}-input;
     }
 }
 
+
+
+.#{$module}-borderless{
+
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+
+    &.#{$module}-wrapper-error:not(:focus-within){
+        border-color: $color-input_danger-border-focus;
+    }
+
+    &.#{$module}-wrapper-warning:not(:focus-within){
+        border-color: $color-input_warning-border-focus;
+    }
+
+
+
+
+}
+
 @import "./rtl.scss";

package/input/textarea.scss

@@ -195,4 +195,38 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-textarea-borderless{
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    &.#{$module}-textarea-wrapper-error:not(:focus-within){
+        border-color: $color-input_danger-border-focus;
+    }
+
+
+
+    &.#{$module}-textarea-wrapper-warning:not(:focus-within){
+        border-color: $color-input_warning-border-focus;
+    }
+
+    &.#{$module}-textarea-wrapper-error{
+            .#{$module}-textarea-counter{
+                color: $color-input_danger-border-focus;
+            }
+    }
+
+    &.#{$module}-textarea-wrapper-warning{
+        .#{$module}-textarea-counter{
+            color: $color-input_warning-border-focus;
+        }
+    }
+
+}
+
 @import "./rtl.scss";

package/input/variables.scss

@@ -111,3 +111,5 @@ $width-textarea-icon: $width-icon-medium + $spacing-tight; // clear 图标最小
 $height-textarea-default: 32px; // 多行文本 clear 图标的高度
 $spacing-textarea_withShowClear-paddingRight: 36px; // 多行文本设置 showClear 后的右内边距
 $spacing-textarea-icon-right: $spacing-extra-tight;// 多行文本 clear 图标的右边距
+
+

package/inputNumber/inputNumber.scss

@@ -108,4 +108,13 @@ $module: #{$prefix}-input-number;
     }
 }
 
+
+.#{$module}:not(:focus-within):not(:hover){
+    .#{$prefix}-input-borderless{
+        & + .#{$module}-suffix-btns{
+            opacity: 0;
+        }
+    }
+}
+
 @import "./rtl.scss";