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
4 years ago · ca2c77e4bd
6 changed files with 87 additions and 60 deletions
--- a/components/form/style/index.less
+++ b/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.
--- a/components/input/ClearableLabeledInput.jsx
+++ b/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}
--- a/components/input/Input.jsx
+++ b/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} />;
  },
--- a/components/input/style/index.less
+++ b/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;
--- a/components/input/style/mixin.less
+++ b/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;
  }
--- a/components/style/themes/default.less
+++ b/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;