refactor(input): update input style (#2876)

* refactor(input): update input style

* refactor(form): update form style about input component

* refactor(input): update clearable icon style
Modify the clearable icon style to prevent the width of the input box from changing due to the insertion of the icon

Author: John60676

components/form/style/index.less

@@ -136,23 +136,11 @@
 
 form {
   .has-feedback {
-    .@{ant-prefix}-input {
-      padding-right: @input-padding-horizontal-base + @input-affix-width;
-    }
-
     // https://github.com/ant-design/ant-design/issues/19884
     .@{ant-prefix}-input-affix-wrapper {
       .@{ant-prefix}-input-suffix {
         padding-right: 18px;
       }
-      .@{ant-prefix}-input {
-        padding-right: @input-padding-horizontal-base + @input-affix-width * 2;
-      }
-      &.@{ant-prefix}-input-affix-wrapper-input-with-clear-btn {
-        .@{ant-prefix}-input {
-          padding-right: @input-padding-horizontal-base + @input-affix-width * 3;
-        }
-      }
     }
 
     // Fix overlapping between feedback icon and <Select>'s arrow.

components/input/ClearableLabeledInput.jsx

@@ -33,25 +33,30 @@ const ClearableLabeledInput = {
     addonBefore: PropTypes.any,
     addonAfter: PropTypes.any,
     readonly: PropTypes.bool,
+    isFocused: PropTypes.bool,
+    style: PropTypes.object,
   },
   methods: {
     renderClearIcon(prefixCls) {
       const { allowClear, value, disabled, readonly, inputType, handleReset } = this.$props;
-      if (
-        !allowClear ||
-        disabled ||
-        readonly ||
-        value === undefined ||
-        value === null ||
-        value === ''
-      ) {
+      if (!allowClear) {
         return null;
       }
+      const showClearIcon =
+        !disabled && !readonly && value !== undefined && value !== null && value !== '';
       const className =
         inputType === ClearableInputType[0]
           ? `${prefixCls}-textarea-clear-icon`
           : `${prefixCls}-clear-icon`;
-      return <CloseCircleFilled onClick={handleReset} class={className} role="button" />;
+      return (
+        <CloseCircleFilled
+          onClick={handleReset}
+          class={classNames(className, {
+            [`${className}-hidden`]: !showClearIcon,
+          })}
+          role="button"
+        />
+      );
     },
 
     renderSuffix(prefixCls) {
@@ -81,12 +86,13 @@ const ClearableLabeledInput = {
       ) : null;
 
       const affixWrapperCls = classNames(this.$attrs?.class, `${prefixCls}-affix-wrapper`, {
+        [`${prefixCls}-affix-wrapper-focused`]: props.isFocused,
+        [`${prefixCls}-affix-wrapper-disabled`]: props.disabled,
         [`${prefixCls}-affix-wrapper-sm`]: props.size === 'small',
         [`${prefixCls}-affix-wrapper-lg`]: props.size === 'large',
         [`${prefixCls}-affix-wrapper-input-with-clear-btn`]:
           props.suffix && props.allowClear && this.$props.value,
       });
-
       return (
         <span class={affixWrapperCls} style={props.style}>
           {prefix}

components/input/Input.jsx

@@ -64,6 +64,7 @@ export default {
     const value = typeof props.value === 'undefined' ? props.defaultValue : props.value;
     return {
       stateValue: typeof value === 'undefined' ? '' : value,
+      isFocused: false,
     };
   },
   watch: {
@@ -87,6 +88,16 @@ export default {
     }
   },
   methods: {
+    handleInputFocus(e) {
+      this.isFocused = true;
+      this.onFocus && this.onFocus(e);
+    },
+
+    handleInputBlur(e) {
+      this.isFocused = false;
+      this.onBlur && this.onBlur(e);
+    },
+
     focus() {
       this.input.focus();
     },
@@ -147,7 +158,15 @@ export default {
         'inputPrefixCls',
         'loading',
       ]);
-      const { handleKeyDown, handleChange, size, disabled, $attrs } = this;
+      const {
+        handleKeyDown,
+        handleChange,
+        handleInputFocus,
+        handleInputBlur,
+        size,
+        disabled,
+        $attrs,
+      } = this;
 
       const inputProps = {
         ...otherProps,
@@ -160,6 +179,8 @@ export default {
         key: 'ant-input',
         onInput: handleChange,
         onChange: handleChange,
+        onFocus: handleInputFocus,
+        onBlur: handleInputBlur,
       };
       if (!inputProps.autofocus) {
         delete inputProps.autofocus;
@@ -205,7 +226,7 @@ export default {
     //   return <TextArea {...textareaProps} ref="input" />;
     // }
     const { prefixCls: customizePrefixCls } = this.$props;
-    const { stateValue } = this.$data;
+    const { stateValue, isFocused } = this.$data;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('input', customizePrefixCls);
     const addonAfter = getComponent(this, 'addonAfter');
@@ -224,6 +245,7 @@ export default {
       addonBefore,
       suffix,
       prefix,
+      isFocused,
     };
     return <ClearableLabeledInput {...props} ref={this.saveClearableInput} />;
   },

components/input/style/index.less

@@ -41,6 +41,14 @@
   vertical-align: 0;
 }
 
+.@{ant-prefix}-input-clear-icon-hidden {
+  visibility: hidden;
+}
+
+.@{ant-prefix}-input-textarea-clear-icon-hidden {
+  visibility: hidden;
+}
+
 .@{ant-prefix}-input-textarea-clear-icon {
   .clear-icon;
   position: absolute;

components/input/style/mixin.less

@@ -1,18 +1,17 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 
+@input-affix-margin: 4px;
 @input-affix-width: 19px;
 @input-affix-with-clear-btn-width: 38px;
 
 // size mixins for input
 .input-lg() {
-  height: @input-height-lg;
   padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
   font-size: @font-size-lg;
 }
 
 .input-sm() {
-  height: @input-height-sm;
   padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
 }
 
@@ -47,7 +46,6 @@
   position: relative;
   display: inline-block;
   width: 100%;
-  height: @input-height-base;
   padding: @input-padding-vertical-base @input-padding-horizontal-base;
   color: @input-color;
   font-size: @font-size-base;
@@ -264,12 +262,6 @@
     height: @input-height-sm;
   }
 
-  .@{inputClass}-affix-wrapper {
-    display: table-cell;
-    float: left;
-    width: 100%;
-  }
-
   &&-compact {
     display: block;
     .clearfix;
@@ -297,6 +289,10 @@
       border-radius: 0;
     }
 
+    & > .@{inputClass}-affix-wrapper {
+      display: inline-flex;
+    }
+
     & > *:not(:last-child) {
       margin-right: -@border-width-base;
       border-right-width: @border-width-base;
@@ -364,17 +360,44 @@
 
 .input-affix-wrapper(@inputClass) {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  border: @border-width-base @border-style-base @input-border-color;
+  border-radius: @border-radius-base;
+  padding: @input-padding-vertical-base @input-padding-horizontal-base;
   width: 100%;
   text-align: start;
 
-  &:hover .@{inputClass}:not(.@{inputClass}-disabled) {
+  &:hover {
     .hover();
   }
 
+  &-disabled {
+    .disabled();
+  }
+
+  &-focused {
+    .active();
+  }
+
+  // Size
+  &-lg {
+    .input-lg();
+  }
+
+  &-sm {
+    .input-sm();
+  }
+
   .@{inputClass} {
     position: relative;
     text-align: inherit;
+    border: none;
+    padding: 0;
+    &:focus {
+      border: none;
+      outline: none;
+      box-shadow: none;
+    }
   }
 
   // Should not break align of icon & text
@@ -385,14 +408,10 @@
   // https://codesandbox.io/embed/nifty-benz-gb7ml
   .@{inputClass}-prefix,
   .@{inputClass}-suffix {
-    position: absolute;
-    top: 50%;
-    z-index: 2;
     display: flex;
     align-items: center;
     color: @input-color;
-    line-height: 0;
-    transform: translateY(-50%);
+    white-space: nowrap;
 
     :not(.anticon) {
       line-height: @line-height-base;
@@ -407,27 +426,11 @@
   }
 
   .@{inputClass}-prefix {
-    left: @input-padding-horizontal-base + 1px;
+    margin-right: @input-affix-margin;
   }
 
   .@{inputClass}-suffix {
-    right: @input-padding-horizontal-base + 1px;
-  }
-
-  .@{inputClass}:not(:first-child) {
-    padding-left: @input-padding-horizontal-base + @input-affix-width;
-  }
-
-  .@{inputClass}:not(:last-child) {
-    padding-right: @input-padding-horizontal-base + @input-affix-width;
-  }
-
-  &.@{inputClass}-affix-wrapper-input-with-clear-btn .@{inputClass}:not(:last-child) {
-    padding-right: @input-padding-horizontal-base + @input-affix-with-clear-btn-width;
-  }
-
-  &.@{inputClass}-affix-wrapper-textarea-with-clear-btn .@{inputClass} {
-    padding-right: 22px;
+    margin-left: @input-affix-margin;
   }
 }
 
@@ -438,7 +441,7 @@
   // https://codesandbox.io/s/wizardly-sun-u10br
   cursor: pointer;
   transition: color 0.3s;
-
+  margin: 0 @input-affix-margin;
   &:hover {
     color: @text-color-secondary;
   }

components/style/themes/default.less

@@ -318,7 +318,7 @@
 @input-padding-horizontal-lg: @input-padding-horizontal;
 @input-padding-vertical-base: 4px;
 @input-padding-vertical-sm: 1px;
-@input-padding-vertical-lg: 6px;
+@input-padding-vertical-lg: 6.5px;
 @input-placeholder-color: hsv(0, 0, 75%);
 @input-color: @text-color;
 @input-border-color: @border-color-base;