chore:backup

packages/semi-foundation/datePicker/datePicker.scss

@@ -878,11 +878,12 @@ $module-list: #{$prefix}-scrolllist;
             border: $width-datepicker_range_trigger-border solid $color-datepicker_range_trigger-border;
 
             &:hover{
-                border-color: $color-datepicker_range_trigger-border-hover
+                border-color: $color-datepicker_range_trigger-border-hover;
             }
 
             &:active{
-                border-color: $color-datepicker_range_trigger-border-active ;
+                border-color: $color-datepicker_range_trigger-border-active;
+
             }
 
             .#{$module}-monthRange-input {
@@ -1585,4 +1586,29 @@ $module-list: #{$prefix}-scrolllist;
     }
 }
 
+.#{$module}-noBorder{
+    background-color: transparent;
+    &.#{$module}-input{
+        //&:hover{
+        //    background-color: $color-datepicker_range_input-bg-default;
+        //}
+        //&:active{
+        //    background-color: $color-datepicker_range_input-bg-default;
+        //}
+
+    }
+    &.#{$module}-range{
+       &-input-wrapper{
+           background-color: transparent;
+           &:hover{
+               background-color: $color-datepicker_range_input-bg-hover;
+           }
+           &:active{
+               background-color: $color-datepicker_range_input-bg-hover;
+           }
+       }
+    }
+}
+
+
 @import "./rtl.scss";

packages/semi-foundation/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;

packages/semi-foundation/datePicker/inputFoundation.ts

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

packages/semi-foundation/input/input.scss

@@ -708,7 +708,7 @@ $module: #{$prefix}-input;
             border-color: $color-input_default-border-focus;
         }
         &:active {
-
+            background-color: $color-input_default-bg-active;
             border-color: $color-input_default-border-focus;
         }
     }

packages/semi-foundation/input/textarea.scss

@@ -195,4 +195,77 @@ $module: #{$prefix}-input;
     }
 }
 
+.#{$module}-textarea-noBorder{
+    background-color: transparent;
+    border-color: transparent;
+
+    &.#{$module}-textarea-wrapper:hover{
+        background-color: $color-input_default-bg-hover;
+        border-color: $color-input_default-border-hover;
+    }
+
+    &.#{$module}-textarea-wrapper-focus{
+        background-color: $color-input_default-bg-focus;
+        border-color: $color-input_default-border-focus;
+        &:hover {
+            border-color:  $color-input_default-border-focus
+        }
+        &:active {
+            background-color: $color-input_default-bg-focus;
+            border-color:  $color-input_default-border-focus
+        }
+    }
+
+    &.#{$module}-textarea-wrapper-error{
+        background-color:transparent;
+        border-color: $color-input_danger-border-focus;
+
+        &:hover {
+            background-color: $color-input_danger-bg-hover;
+            border-color: $color-input_danger-border-focus;
+        }
+
+        &.#{$module}-textarea-wrapper-focus {
+            border-color: $color-input_danger-border-focus;
+            background-color: transparent;
+        }
+
+        &:active {
+            background-color: $color-input_danger-bg-active;
+            border-color: $color-input_danger-border-focus;
+        }
+        .#{$module}-textarea-counter{
+            color: $color-input_danger-border-focus;
+        }
+
+    }
+
+    &.#{$module}-textarea-wrapper-warning{
+        background-color:transparent;
+        border-color: $color-input_warning-border-focus;
+
+        &:hover {
+            background-color: $color-input_warning-bg-hover;
+            border-color: $color-input_warning-border-focus;
+        }
+
+        &.#{$module}-textarea-wrapper-focus {
+            border-color: $color-input_warning-border-focus;
+            background-color: transparent;
+        }
+
+        &:active {
+            background-color: $color-input_warning-bg-active;
+            border-color: $color-input_warning-border-focus;
+        }
+
+        .#{$module}-textarea-counter{
+            color: $color-input_warning-border-focus;
+        }
+
+    }
+
+
+}
+
 @import "./rtl.scss";

packages/semi-ui/datePicker/dateInput.tsx

@@ -44,6 +44,7 @@ export interface DateInputProps extends DateInputFoundationProps, BaseProps {
 // eslint-disable-next-line @typescript-eslint/ban-types
 export default class DateInput extends BaseComponent<DateInputProps, {}> {
     static propTypes = {
+        borderless: PropTypes.bool,
         onClick: PropTypes.func,
         onChange: PropTypes.func,
         onEnterPress: PropTypes.func,
@@ -78,6 +79,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
     };
 
     static defaultProps = {
+        borderless: false,
         showClear: true,
         onClick: noop,
         onChange: noop,
@@ -244,6 +246,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
             rangeInputFocus,
             prefixCls,
             rangeSeparator,
+            borderless
         } = rangeProps;
 
         const [rangeStart, rangeEnd = ''] = text.split(rangeSeparator) || [];
@@ -253,9 +256,11 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
         const inputLeftWrapperCls = cls(`${prefixCls}-range-input-wrapper-start`, `${prefixCls}-range-input-wrapper`, {
             [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeStart' && !disabled,
             [`${prefixCls}-range-input-wrapper-start-with-prefix`]: this.props.prefix || this.props.insetLabel,
+            [`${prefixCls}-noBorder`]: borderless
         });
         const inputRightWrapperCls = cls(`${prefixCls}-range-input-wrapper-end`, `${prefixCls}-range-input-wrapper`, {
             [`${prefixCls}-range-input-wrapper-active`]: rangeInputFocus === 'rangeEnd' && !disabled,
+            [`${prefixCls}-noBorder`]: borderless
         });
         return (
             <>
@@ -265,6 +270,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
                     className={`${inputCls} ${inputLeftWrapperCls}`}
                 >
                     <Input
+                        borderless={borderless}
                         size={rangeSize}
                         style={inputStyle}
                         disabled={disabled}
@@ -286,6 +292,7 @@ export default class DateInput extends BaseComponent<DateInputProps, {}> {
                     onClick={e => !disabled && this.handleRangeInputFocus(e, 'rangeEnd')}
                 >
                     <Input
+                        borderless={borderless}
                         size={rangeSize}
                         style={inputStyle}
                         disabled={disabled}

packages/semi-ui/datePicker/datePicker.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { noop, stubFalse, isDate, get, isFunction, isEqual } from 'lodash';
+import { noop, stubFalse, isDate, get, isFunction, isEqual, pick } from 'lodash';
 import ConfigContext, { ContextValue } from '../configProvider/context';
 import DatePickerFoundation, { DatePickerAdapter, DatePickerFoundationProps, DatePickerFoundationState, DayStatusType, PresetType, Type, RangeType } from '@douyinfe/semi-foundation/datePicker/foundation';
 import { cssClasses, strings, numbers } from '@douyinfe/semi-foundation/datePicker/constants';
@@ -71,6 +71,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         'aria-invalid': PropTypes.bool,
         'aria-labelledby': PropTypes.string,
         'aria-required': PropTypes.bool,
+        borderless: PropTypes.bool,
         type: PropTypes.oneOf(strings.TYPE_SET),
         size: PropTypes.oneOf(strings.SIZE_SET),
         clearIcon: PropTypes.node,
@@ -150,6 +151,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
 
     static defaultProps = {
         onChangeWithDateFirst: true,
+        borderless: false,
         autoAdjustOverflow: true,
         stopPropagation: true,
         motion: true,
@@ -633,7 +635,8 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             inputReadOnly,
             rangeSeparator,
             insetInput,
-            defaultPickerValue
+            defaultPickerValue,
+            borderless
         } = this.props;
         const { value, inputValue, rangeInputFocus, triggerDisabled } = this.state;
         // This class is not needed when triggerRender is function
@@ -645,6 +648,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             [`${cssClasses.PREFIX}-range-input-active`]: isRangeType && rangeInputFocus && !inputDisabled,
             [`${cssClasses.PREFIX}-range-input-disabled`]: isRangeType && inputDisabled,
             [`${cssClasses.PREFIX}-range-input-${validateStatus}`]: isRangeType && validateStatus,
+            [`${cssClasses.PREFIX}-noBorder`]: borderless
         });
         const phText = placeholder || locale.placeholder[type]; // i18n
         // These values should be passed to triggerRender, do not delete any key if it is not necessary
@@ -855,7 +859,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
             'aria-required': this.props['aria-required'],
         };
 
-        const inner = this.renderInner();
+        const inner = this.renderInner(pick(this.props, []));
         const wrappedInner = this.wrapPopover(inner);
 
         return <div {...outerProps}>{wrappedInner}</div>;

packages/semi-ui/input/textarea.tsx

@@ -25,6 +25,7 @@ type OmitTextareaAttr =
 export interface TextAreaProps extends
     Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, OmitTextareaAttr> {
     autosize?: boolean;
+    borderless?: boolean;
     placeholder?: string;
     value?: string;
     rows?: number;
@@ -64,6 +65,7 @@ export interface TextAreaState {
 class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
     static propTypes = {
         autosize: PropTypes.bool,
+        borderless: PropTypes.bool,
         placeholder: PropTypes.string,
         value: PropTypes.string,
         rows: PropTypes.number,
@@ -83,6 +85,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
 
     static defaultProps = {
         autosize: false,
+        borderless: false,
         rows: 4,
         cols: 20,
         showCounter: false,
@@ -276,6 +279,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             maxLength,
             minLength,
             showClear,
+            borderless,
             ...rest
         } = this.props;
         const { isFocus, value, minLength: stateMinLength } = this.state;
@@ -283,6 +287,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             className,
             `${prefixCls}-textarea-wrapper`,
             {
+                [`${prefixCls}-textarea-noBorder`]: borderless,
                 [`${prefixCls}-textarea-wrapper-disabled`]: disabled,
                 [`${prefixCls}-textarea-wrapper-readonly`]: readonly,
                 [`${prefixCls}-textarea-wrapper-${validateStatus}`]: Boolean(validateStatus),

packages/semi-ui/timePicker/TimeInput.tsx

@@ -34,6 +34,7 @@ export type TimeInputProps = Pick<TimePickerProps,
 'localeCode' |
 'insetLabel' |
 'validateStatus' |
+'borderless'|
 'preventScroll'> & BaseProps & {
     onChange?: (value: string) => void;
     onEsc?: () => void;
@@ -46,6 +47,7 @@ export type TimeInputProps = Pick<TimePickerProps,
 
 class TimeInput extends BaseComponent<TimeInputProps, any> {
     static propTypes = {
+        borderless: PropTypes.bool,
         format: PropTypes.string,
         prefixCls: PropTypes.string,
         placeholder: PropTypes.string,
@@ -74,6 +76,7 @@ class TimeInput extends BaseComponent<TimeInputProps, any> {
     };
 
     static defaultProps = {
+        borderless: false,
         inputReadOnly: false,
         onChange: noop,
         onBlur: noop,

packages/semi-ui/timePicker/TimePicker.tsx

@@ -42,6 +42,7 @@ export type TimePickerProps = {
     'aria-required'?: React.AriaAttributes['aria-required'];
     autoAdjustOverflow?: boolean;
     autoFocus?: boolean; // TODO: autoFocus did not take effect
+    borderless?: boolean;
     className?: string;
     clearText?: string;
     clearIcon?: React.ReactNode;
@@ -118,6 +119,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
         'aria-describedby': PropTypes.string,
         'aria-required': PropTypes.bool,
         prefixCls: PropTypes.string,
+        borderless: PropTypes.bool,
         clearText: PropTypes.string,
         clearIcon: PropTypes.node,
         value: TimeShape,
@@ -173,6 +175,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
 
     static defaultProps = {
         autoAdjustOverflow: true,
+        borderless: false,
         getPopupContainer: () => document.body,
         showClear: true,
         zIndex: popoverNumbers.DEFAULT_Z_INDEX,