Merge pull request #15672 from ant-design/fix-clear-icon-style

Fix clear icon style

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -999,6 +999,32 @@ exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
     type="text"
     value=""
   />
+  <span
+    class="ant-input-suffix"
+  >
+    <i
+      aria-label="icon: info-circle"
+      class="anticon anticon-info-circle"
+      style="color:rgba(0,0,0,.45)"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="info-circle"
+        fill="currentColor"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
+        />
+        <path
+          d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
+        />
+      </svg>
+    </i>
+  </span>
 </span>
 `;
 

components/input/demo/presuffix.md

@@ -14,55 +14,17 @@ title:
 Add prefix or suffix icons inside input.
 
 ````jsx
-import { Input, Icon } from 'antd';
+import { Input, Tooltip, Icon } from 'antd';
 
-class App extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      userName: '',
-    };
-  }
-
-  emitEmpty = () => {
-    this.userNameInput.focus();
-    this.setState({ userName: '' });
-  }
-
-  onChangeUserName = (e) => {
-    this.setState({ userName: e.target.value });
-  }
-
-  render() {
-    const { userName } = this.state;
-    const suffix = userName ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
-    return (
-      <Input
-        placeholder="Enter your username"
-        prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
-        suffix={suffix}
-        value={userName}
-        onChange={this.onChangeUserName}
-        ref={node => this.userNameInput = node}
-      />
-    );
-  }
-}
-
-ReactDOM.render(<App />, mountNode);
-````
-
-````css
-.anticon-close-circle {
-  cursor: pointer;
-  color: #ccc;
-  transition: color 0.3s;
-  font-size: 12px;
-}
-.anticon-close-circle:hover {
-  color: #999;
-}
-.anticon-close-circle:active {
-  color: #666;
-}
+ReactDOM.render(
+  <Input
+    placeholder="Enter your username"
+    prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
+    suffix={
+      <Tooltip title="Extra information">
+        <Icon type="info-circle" style={{ color: 'rgba(0,0,0,.45)' }} />
+      </Tooltip>
+    }
+  />
+, mountNode);
 ````

components/input/style/index.less

@@ -32,11 +32,33 @@
 }
 
 .@{ant-prefix}-input-password-icon {
+  color: @text-color-secondary;
   cursor: pointer;
   transition: all 0.3s;
+
   &:hover {
     color: #333;
   }
 }
 
+.@{ant-prefix}-input-clear-icon {
+  color: @disabled-color;
+  font-size: @font-size-sm;
+  vertical-align: top;
+  cursor: pointer;
+  transition: color 0.3s;
+
+  &:hover {
+    color: @text-color-secondary;
+  }
+
+  &:active {
+    color: @text-color;
+  }
+
+  + i {
+    margin-left: 6px;
+  }
+}
+
 @import './search-input';