fix(input): fix input style feedbacks (#1425)

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

src/input/InputButton.tsx

@@ -22,6 +22,7 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
     className,
     style = {},
     maxWidth,
+    active = false,
     ...rest
   } = props;
 
@@ -48,8 +49,8 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
   );
 
   const wrapperCls = useMemo(
-    () => classNames(className, prefixCls, { [`${prefixCls}__disabled`]: disabled }),
-    [className, prefixCls, disabled]
+    () => classNames(className, prefixCls, { [`${prefixCls}__disabled`]: disabled, [`${prefixCls}__active`]: active }),
+    [className, prefixCls, disabled, active]
   );
 
   const prefix = useMemo(

src/input/demos/Input.stories.tsx

@@ -296,3 +296,8 @@ const InputButtonMaxWidthTemplate = (args: InputButtonProps) => (
 
 export const InputButtonMaxWidth = InputButtonMaxWidthTemplate.bind({});
 InputButtonMaxWidth.args = {};
+
+const InputButtonActiveTemplate = (args: InputButtonProps) => <InputButton {...args} value="请选择事件" active />;
+
+export const InputButtonActive = InputButtonActiveTemplate.bind({});
+InputButtonActive.args = {};

src/input/interface.ts

@@ -126,6 +126,12 @@ export interface InputButtonProps
    * 空值时，显示的样式
    */
   placeholder?: string;
+
+  /**
+   * 设置是否active
+   * @default false
+   */
+  active?: boolean;
   /**
    * 当Input Button的值修改后的方法
    */

src/input/style/InputButton.less

@@ -51,6 +51,7 @@
       outline: none;
     }
   }
+  &__active,
   &:hover {
     .@{input-btn-input-prefix-cls} {
       color: @blue-3;

src/input/style/index.less

@@ -7,7 +7,7 @@
 .@{input-prefix-cls} {
   box-sizing: border-box;
   height: 36px;
-  padding: 7px 12px;
+  padding: 6px 12px;
   color: @gray-5;
   font-family+: @font-family-primary;
   font-family+: @font-family-number;
@@ -41,7 +41,7 @@
   }
   &__small {
     height: 30px;
-    padding: 4px 12px;
+    padding: 3px 12px;
   }
   &__error {
     border: 1px solid @red-3;
@@ -50,6 +50,8 @@
   &__suffix {
     position: absolute;
     right: 0;
+    display: flex;
+    align-items: center;
     padding-right: 12px;
 
     &-wrapper {
@@ -76,6 +78,8 @@
   &__prefix {
     position: absolute;
     left: 0;
+    display: flex;
+    align-items: center;
     padding-left: 12px;
 
     &-wrapper {

src/popconfirm/style/index.less

@@ -15,6 +15,8 @@
   &__content {
     &-title {
       .text-h4();
+      display: flex;
+      align-items: center;
       color: @gray-5;
       svg {
         color: @yellow-3;