fix(inputbutton): update inputbutton styles (#1486)

* fix(inputbutton): update inputbutton styles * fix(style): fix feedbacks * fix(popover): remove unnecessary code * fix(style): use 4px to instead of @radius-border-small * fix(hidePrefix): remove all hidePrefix Co-authored-by: Zhang Rui <zhangrui@growingio.com>
growingio · Nov 19, 2021 · c4577a8 · c4577a8 · vercel · Nov 19, 2021
1 parent 5558a2b
commit c4577a8
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 127 deletions.
diff --git a/src/cascader/demos/Cascader.stories.tsx b/src/cascader/demos/Cascader.stories.tsx
@@ -57,7 +57,7 @@ const Template: Story<CascaderProps> = (props) => {
         <Cascader
           options={options}
           overlayStyle={{ width: 240 }}
-          triggerProps={{ placeholder: '请选择', hidePrefix: true, style: { width: 240, textAlign: 'left' } }}
+          triggerProps={{ placeholder: '请选择', style: { width: 240, textAlign: 'left' } }}
           size="small"
           {...props}
         />

diff --git a/src/date-picker/Picker.tsx b/src/date-picker/Picker.tsx
@@ -24,7 +24,6 @@ export const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) =>
     format: formatString,
     prefix,
     suffix,
-    hidePrefix,
     size,
     ...restProps
   } = props;
@@ -64,7 +63,6 @@ export const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) =>
         value={controlledValue && formatDate(controlledValue)}
         size={size}
         suffix={suffix}
-        hidePrefix={hidePrefix}
       />
     );
   }

diff --git a/src/date-range-picker/Picker.tsx b/src/date-range-picker/Picker.tsx
@@ -29,7 +29,6 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = (props: DateRange
     format: formatString,
     prefix,
     suffix,
-    hidePrefix,
     size,
     ...restProps
   } = props;
@@ -80,7 +79,6 @@ export const DateRangePicker: React.FC<DateRangePickerProps> = (props: DateRange
         value={validValue(controlledValue) ? formatDates(controlledValue) : undefined}
         size={size}
         suffix={suffix}
-        hidePrefix={hidePrefix}
       />
     );
   }

diff --git a/src/input/Input.tsx b/src/input/Input.tsx
@@ -14,29 +14,26 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     placeholder,
     onPressEnter,
     onKeyPress,
+    style,
     ...rest
   } = props;
 
   const prefixCls = usePrefixCls('input-new', customizePrefixCls);
 
   const inputClass = useMemo(
     () =>
-      classNames(className, prefixCls, {
-        [`${prefixCls}__disabled`]: disabled,
-        [`${prefixCls}__small`]: size === 'small',
-      }),
+      classNames(
+        className,
+        {
+          [`${prefixCls}__hover`]: !disabled,
+          [`${prefixCls}__disabled`]: disabled,
+          [`${prefixCls}__small`]: size === 'small',
+        },
+        prefixCls
+      ),
     [prefixCls, className, size, disabled]
   );
 
-  const wrapper = useMemo(
-    () =>
-      classNames({
-        [`${prefixCls}__suffix-wrapper`]: !!customizeSuffix,
-        [`${prefixCls}__prefix-wrapper`]: !!customizePrefix,
-      }),
-    [prefixCls, customizeSuffix, customizePrefix]
-  );
-
   const handleKeyPress = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
       if (e.key === 'Enter') {
@@ -72,25 +69,11 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
     () => (customizeSuffix ? <div className={suffixCls}>{customizeSuffix}</div> : null),
     [suffixCls, customizeSuffix]
   );
-  const input = (
-    <input
-      {...rest}
-      disabled={disabled}
-      className={inputClass}
-      onKeyPress={handleKeyPress}
-      placeholder={placeholder}
-      ref={ref}
-    />
-  );
-
-  if (!suffix && !prefix) {
-    return input;
-  }
 
   return (
-    <span className={wrapper}>
+    <span className={inputClass} {...rest} style={style}>
       {prefix}
-      {input}
+      <input {...rest} disabled={disabled} onKeyPress={handleKeyPress} placeholder={placeholder} ref={ref} />
       {suffix}
     </span>
   );

diff --git a/src/input/InputButton.tsx b/src/input/InputButton.tsx
@@ -1,4 +1,4 @@
-import { CloseCircleFilled, DownFilled, EventsPresetOutlined } from '@gio-design/icons';
+import { CloseCircleFilled, DownFilled } from '@gio-design/icons';
 import { usePrefixCls } from '@gio-design/utils';
 import classNames from 'classnames';
 import React, { useCallback, useMemo } from 'react';
@@ -17,8 +17,7 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
     defaultValue,
     value: enterValue,
     disabled,
-    hidePrefix = false,
-    allowClear,
+    allowClear = false,
     className,
     style = {},
     maxWidth,
@@ -54,15 +53,15 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
   );
 
   const wrapperCls = useMemo(
-    () => classNames(className, prefixCls, { [`${prefixCls}__disabled`]: disabled, [`${prefixCls}__active`]: active }),
+    () =>
+      classNames(className, prefixCls, {
+        [`${prefixCls}__hover`]: !disabled,
+        [`${prefixCls}__disabled`]: disabled,
+        [`${prefixCls}__active`]: active,
+      }),
     [className, prefixCls, disabled, active]
   );
 
-  const prefix = useMemo(
-    () => (hidePrefix ? null : customizePrefix || <EventsPresetOutlined />),
-    [customizePrefix, hidePrefix]
-  );
-
   const suffix = useMemo(() => {
     const hideClear = allowClear === false;
     const defaultSuffix = value && !hideClear && !disabled ? <CloseCircleFilled onClick={onClear} /> : <DownFilled />;
@@ -78,9 +77,10 @@ const InputButton = React.forwardRef<HTMLInputElement, InputButtonProps>((props,
         style={{ ...style, ...styles }}
         className={inputCls}
         type="button"
-        value={value || placeholder}
+        value={value}
+        placeholder={placeholder}
         onChange={onChange}
-        prefix={prefix}
+        prefix={customizePrefix}
         suffix={suffix}
         ref={ref}
         size={size}

diff --git a/src/input/demos/Input.stories.tsx b/src/input/demos/Input.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
-import { PlusOutlined, FilterOutlined } from '@gio-design/icons';
+import { PlusOutlined, FilterOutlined, EventsPresetOutlined } from '@gio-design/icons';
 import { InputProps, InputButtonProps } from '../interface';
 import Input from '../Input';
 import '../style';
@@ -248,17 +248,17 @@ const InputButtonTemplate: Story<InputButtonProps> = (args) => (
           <InputButton {...args} />
         </td>
         <td>
-          <InputButton {...args} hidePrefix />
+          <InputButton {...args} prefix="" />
         </td>
       </tr>
       <tr>
         <td>Removable</td>
         <td>是否可以清除选中内容</td>
         <td>
-          <InputButton {...args} value="浏览商品详情页" />
+          <InputButton {...args} value="浏览商品详情页" allowClear />
         </td>
         <td>
-          <InputButton {...args} value="浏览商品详情页" allowClear={false} />
+          <InputButton {...args} value="浏览商品详情页" />
         </td>
       </tr>
     </table>
@@ -268,23 +268,18 @@ const InputButtonTemplate: Story<InputButtonProps> = (args) => (
 export const InputButtonDemo = InputButtonTemplate.bind({});
 InputButtonDemo.args = {
   onChange: () => action('onChange'),
+  prefix: <EventsPresetOutlined />,
   placeholder: '请选择事件',
 };
 
 const InputButtonDefaultTemplate = () => <InputButton />;
 export const InputButtonDefault = InputButtonDefaultTemplate.bind({});
 InputButtonDefault.args = {
   allowClear: false,
+  prefix: <EventsPresetOutlined />,
   onChange: () => action('onChange'),
 };
 
-const HidePrefixTemplate = (args: InputButtonProps) => <InputButton {...args} value="请选择事件" />;
-export const InputButtonHidePrefix = HidePrefixTemplate.bind({});
-InputButtonHidePrefix.args = {
-  hidePrefix: true,
-  onChange: () => action('onChange'),
-  placeholder: '请选择事件',
-};
 const customPrefixTemplate = (args: InputButtonProps) => (
   <InputButton {...args} value="请选择事件" prefix={<PlusOutlined />} suffix={<FilterOutlined />} />
 );
@@ -304,11 +299,27 @@ InputButtonMaxWidth.args = {};
 const InputButtonActiveTemplate = (args: InputButtonProps) => <InputButton {...args} value="请选择事件" active />;
 
 export const InputButtonActive = InputButtonActiveTemplate.bind({});
-InputButtonActive.args = {};
+InputButtonActive.args = {
+  prefix: <EventsPresetOutlined />,
+  allowClear: true,
+};
 
 const InputButtonCustomWidthExample = (args: InputButtonProps) => (
   <InputButton {...args} value="请选择事件" style={{ width: 300 }} />
 );
 
 export const InputButtonCustomWidth = InputButtonCustomWidthExample.bind({});
-InputButtonCustomWidth.args = {};
+InputButtonCustomWidth.args = {
+  prefix: <EventsPresetOutlined />,
+  allowClear: true,
+};
+
+const InputButtonWidthExample = (args: InputButtonProps) => (
+  <InputButton {...args} value="请选择事件" style={{ width: '100%' }} />
+);
+
+export const InputButtonWidth = InputButtonWidthExample.bind({});
+InputButtonWidth.args = {
+  prefix: <EventsPresetOutlined />,
+};
+InputButtonWidth.storyName = 'Input Button Width 100%';
diff --git a/src/input/interface.ts b/src/input/interface.ts
@@ -100,13 +100,10 @@ export interface InputButtonProps
 
   /**
    * 是否可以被清空
+   * @default false
    */
   allowClear?: boolean;
 
-  /**
-   * 是否隐藏前缀的icon，默认是false
-   */
-  hidePrefix?: boolean;
   /**
    * 自定义前缀icon
    */

diff --git a/src/input/style/InputButton.less b/src/input/style/InputButton.less
@@ -7,13 +7,13 @@
 @input-btn-input-prefix-cls: ~'@{component-prefix}-input-btn-new__input';
 
 .@{input-btn-prefix-cls} {
-  display: flex;
   cursor: pointer;
-
   .@{input-btn-input-prefix-cls} {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+    input {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
     background-color: @gray-0;
     cursor: pointer;
 
@@ -52,24 +52,33 @@
     }
   }
   &__active,
-  &:hover {
-    .@{input-btn-input-prefix-cls} {
-      color: @blue-3;
-      background-color: @gray-1;
-    }
-    .@{input-prefix-cls} {
-      &__prefix {
+  &__hover {
+    &:hover {
+      .@{input-btn-input-prefix-cls} {
+        background-color: @gray-1;
+      }
+      input {
         color: @blue-3;
         cursor: pointer;
-        svg {
+      }
+      .@{input-prefix-cls} {
+        &__prefix {
           color: @blue-3;
           cursor: pointer;
+          svg {
+            color: @blue-3;
+            cursor: pointer;
+          }
         }
       }
     }
   }
   &__disabled {
     background-color: @gray-0;
+
+    input {
+      color: @gray-3;
+    }
     svg {
       color: @gray-3;
       cursor: not-allowed;