fix(input): Fix input feedbacks (#1419)

* fix(Input): feedback issues of input

* fix(PopConfirm): feedback issues of PopConfirm

* fix(Search): feedback issues of Search

* fix(Tooltip): feedback issue of Tooltip

* fix(InputButton): fix input button style issue

* fix(InputButton): 可以限制value的字符数做缩略处理

* fix(style): eslint issues

* fix(style): resolve stylelint issue

* docs(input): update max width for Input button

* docs(Input): remove unnecessary story book

Co-authored-by: Zhang Rui <zhangrui@growingio.com>

src/input/Input.tsx

@@ -19,7 +19,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
 
   const inputClass = useMemo(
     () =>
-      classNames(prefixCls, className, {
+      classNames(className, prefixCls, {
         [`${prefixCls}__disabled`]: disabled,
         [`${prefixCls}__small`]: size === 'small',
       }),

src/input/InputButton.tsx

@@ -1,45 +1,50 @@
 import { CloseCircleFilled, DownFilled, EventsPresetOutlined } from '@gio-design/icons';
 import { usePrefixCls } from '@gio-design/utils';
 import classNames from 'classnames';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo } from 'react';
+import useControlledState from '../utils/hooks/useControlledState';
 import Input from './Input';
 import { InputButtonProps } from './interface';
 
-import './style';
-
 const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props, ref) => {
   const {
+    size,
     prefixCls: customizePrefixCls,
     prefix: customizePrefix,
     suffix: customizeSuffix,
     onInputChange,
+    placeholder,
+    defaultValue,
     value: enterValue,
     disabled,
     hidePrefix = false,
     allowClear,
     className,
     style = {},
+    maxWidth,
+    ...rest
   } = props;
 
   const prefixCls = usePrefixCls('input-btn-new', customizePrefixCls);
+  const inputCls = usePrefixCls('input-btn-new__input', customizePrefixCls);
 
-  const [value, setValue] = useState(enterValue);
+  const [value, setValue] = useControlledState(enterValue, defaultValue);
 
   const onClear = useCallback(() => {
     if (disabled) {
       return;
     }
     onInputChange?.('');
     setValue('');
-  }, [onInputChange, disabled]);
+  }, [onInputChange, disabled, setValue]);
 
   const onChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       const inputValue = e.target.value;
       onInputChange?.(inputValue);
       setValue(inputValue);
     },
-    [onInputChange]
+    [onInputChange, setValue]
   );
 
   const wrapperCls = useMemo(
@@ -54,21 +59,26 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
 
   const suffix = useMemo(() => {
     const hideClear = allowClear === false;
-    const defaultSuffix = value && !hideClear ? <CloseCircleFilled onClick={onClear} /> : <DownFilled />;
+    const defaultSuffix = value && !hideClear && !disabled ? <CloseCircleFilled onClick={onClear} /> : <DownFilled />;
     return customizeSuffix || defaultSuffix;
-  }, [customizeSuffix, value, onClear, allowClear]);
+  }, [customizeSuffix, value, onClear, allowClear, disabled]);
+
+  const styles = maxWidth ? { maxWidth } : {};
 
   return (
     <span className={wrapperCls}>
       <Input
-        style={style}
-        placeholder="请选择事件"
-        readOnly
-        value={value}
+        {...rest}
+        style={{ ...style, ...styles }}
+        className={inputCls}
+        type="button"
+        value={value || placeholder}
         onChange={onChange}
         prefix={prefix}
         suffix={suffix}
         ref={ref}
+        size={size}
+        disabled={disabled}
       />
     </span>
   );

src/input/demos/Input.stories.tsx

@@ -84,7 +84,7 @@ const Template: Story<InputProps> = (args) => (
           <Password {...args} />
         </td>
         <td>
-          <Password {...args} />
+          <Password {...args} size="small" />
         </td>
         <td>
           <Password {...args} />
@@ -286,3 +286,10 @@ export const InputButtonCustomIcon = customPrefixTemplate.bind({});
 InputButtonCustomIcon.args = {
   onChange: () => action('onChange'),
 };
+
+const InputButtonMaxWidthTemplate = (args: InputButtonProps) => (
+  <InputButton {...args} value="可以限制value的字符数做缩略处理" maxWidth={200} />
+);
+
+export const InputButtonMaxWidth = InputButtonMaxWidthTemplate.bind({});
+InputButtonMaxWidth.args = {};

src/input/interface.ts

@@ -73,7 +73,8 @@ export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextArea
     | React.LegacyRef<HTMLTextAreaElement>;
 }
 
-export interface InputButtonProps {
+export interface InputButtonProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'suffix'> {
   /**
    * Input button 的 class name
    */
@@ -114,6 +115,8 @@ export interface InputButtonProps {
    */
   value?: string;
 
+  maxWidth?: number;
+
   /**
    * Input Button size
    */
@@ -127,8 +130,5 @@ export interface InputButtonProps {
    * 当Input Button的值修改后的方法
    */
   onInputChange?: (value: string) => void;
-  forwardRef?:
-    | React.RefObject<HTMLInputElement>
-    | React.MutableRefObject<HTMLInputElement>
-    | React.LegacyRef<HTMLInputElement>;
+  forwardRef?: React.MutableRefObject<HTMLInputElement | null> | ((instance: HTMLInputElement | null) => void) | null;
 }

src/input/style/InputButton.less

@@ -1,23 +1,32 @@
-@import '../../stylesheet/index.less';
-@import '../../stylesheet/mixin/border.less';
-@import '../../stylesheet/mixin/elevation.less';
+@import '../../stylesheet/variables/index.less';
 
 @input-btn-prefix-cls: ~'@{component-prefix}-input-btn-new';
 @icon-prefix-cls: ~'@{component-prefix}-input-new__prefix';
 @input-prefix-cls: ~'@{component-prefix}-input-new';
 
+@input-btn-input-prefix-cls: ~'@{component-prefix}-input-btn-new__input';
+
 .@{input-btn-prefix-cls} {
-  .@{input-prefix-cls} {
+  display: flex;
+  cursor: pointer;
+
+  .@{input-btn-input-prefix-cls} {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background-color: @gray-0;
+    cursor: pointer;
+
     &:not([disabled])::placeholder {
       color: @gray-5;
-      font-size: @font-size-base;
+      .text-body1();
     }
     &:disabled {
       color: @gray-3;
       background-color: @gray-0;
       &::placeholder {
         color: @gray-3;
-        font-size: @font-size-base;
+        .text-body1();
       }
       &:hover {
         color: @gray-3;
@@ -28,57 +37,75 @@
       }
     }
 
+    &:not([disabled]):hover {
+      color: @blue-3;
+      border: 1px solid @gray-2;
+    }
+    &:is([disabled]):hover {
+      color: @gray-3;
+      border: 1px solid @gray-2;
+    }
+
     &:not([disabled]):focus {
       border: 1px solid @gray-2;
       outline: none;
     }
   }
   &:hover {
-    .@{input-prefix-cls}:not([disabled]) {
+    .@{input-btn-input-prefix-cls} {
       color: @blue-3;
-      &:not([disabled])::placeholder {
-        color: @blue-3;
-      }
-
-      &:not([disabled]):hover {
-        color: @blue-3;
-        border: 1px solid @gray-2;
-      }
+      background-color: @gray-1;
     }
-    .@{icon-prefix-cls} {
-      color: @blue-3;
-      cursor: auto;
-      svg {
+    .@{input-prefix-cls} {
+      &__prefix {
         color: @blue-3;
-        cursor: auto;
+        cursor: pointer;
+        svg {
+          color: @blue-3;
+          cursor: pointer;
+        }
       }
     }
   }
   &__disabled {
+    background-color: @gray-0;
     svg {
-      color: @gray-3 !important;
+      color: @gray-3;
       cursor: not-allowed;
     }
 
     &:hover {
+      .@{input-btn-input-prefix-cls} {
+        color: @gray-3;
+        background-color: @gray-0;
+        cursor: not-allowed;
+      }
       .@{input-prefix-cls} {
-        color: @gray-3 !important;
+        &__prefix {
+          color: @gray-3;
+          cursor: not-allowed;
+          svg {
+            color: @gray-3;
+            cursor: not-allowed;
+          }
+        }
+
+        &__suffix {
+          cursor: not-allowed;
+        }
       }
     }
 
-    .@{input-prefix-cls} {
-      color: @gray-3;
+    .@{input-btn-input-prefix-cls} {
       background-color: @gray-0;
-      cursor: not-allowed;
-      &::placeholder {
-        color: @gray-3 !important;
-        font-size: @font-size-base;
-      }
-      &:hover {
-        color: @gray-3 !important;
-        background-color: @gray-0 !important;
-        &::placeholder {
+    }
+    .@{input-prefix-cls} {
+      &__prefix-disabled {
+        color: @gray-3;
+        cursor: not-allowed;
+        svg {
           color: @gray-3;
+          cursor: not-allowed;
         }
       }
     }

src/input/style/index.less

@@ -1,6 +1,4 @@
-@import '../../stylesheet/index.less';
-@import '../../stylesheet/mixin/border.less';
-@import '../../stylesheet/mixin/elevation.less';
+@import '../../stylesheet/variables/index.less';
 
 @input-prefix-cls: ~'@{component-prefix}-input-new';
 @textarea-prefix-cls: ~'@{component-prefix}-textarea-new';
@@ -10,15 +8,16 @@
   box-sizing: border-box;
   height: 36px;
   padding: 7px 12px;
+  color: @gray-5;
   font-family+: @font-family-primary;
   font-family+: @font-family-number;
-  font-size: @font-size-base;
   border: 1px solid @gray-2;
   border-radius: @radius-border-small;
+  .text-body1();
 
   &::placeholder {
     color: @gray-2;
-    font-size: @font-size-base;
+    .text-body1();
   }
 
   &:not([disabled]):hover {
@@ -42,47 +41,58 @@
   }
   &__small {
     height: 30px;
+    padding: 4px 12px;
   }
   &__error {
     border: 1px solid @red-3;
   }
 
   &__suffix {
     position: absolute;
-    top: 1px;
     right: 0;
     padding-right: 12px;
 
     &-wrapper {
       position: relative;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
+
       .@{input-prefix-cls} {
-        padding-right: 32px;
+        padding-right: 36px;
       }
     }
 
     .@{icon-prefix-cls} {
       cursor: pointer;
       svg {
+        width: 14px;
+        height: 14px;
         color: @gray-3;
       }
     }
   }
 
   &__prefix {
     position: absolute;
-    top: 1px;
     left: 0;
     padding-left: 12px;
 
     &-wrapper {
+      position: relative;
+      display: flex;
+      flex-direction: row-reverse;
+      align-items: center;
       .@{input-prefix-cls} {
-        padding-left: 36px;
+        padding-left: 34px;
       }
     }
 
     .@{icon-prefix-cls} {
       cursor: pointer;
       svg {
+        width: 14px;
+        height: 14px;
         color: @gray-5;
       }
     }

src/popconfirm/PopConfirm.tsx

@@ -64,7 +64,7 @@ const PopConfirm: React.FC<PopConfirmProps> = (props) => {
     <div className={`${prefixCls}`}>
       <div className={`${prefixCls}__content`}>
         <div className={`${prefixCls}__content-title`}>
-          {icon || <WarningCircleFilled />}
+          <span className={`${prefixCls}__content-title-icon`}>{icon || <WarningCircleFilled />}</span>
           <span className={`${prefixCls}__content-title-text`}>{title}</span>
         </div>
         {desc && <div className={`${prefixCls}__content-desc`}>{desc}</div>}