Add search input style, ref #413

components/form/demo/search-input.md

@@ -0,0 +1,61 @@
+# 搜索框
+
+- order: 10
+
+带有搜索按钮。
+
+---
+
+
+````jsx
+import { Icon, Input, Button } from 'antd';
+import classNames from 'classnames';
+const InputGroup = Input.Group;
+
+const SearchInput = React.createClass({
+  getInitialState() {
+    return {
+      value: '',
+      focus: false
+    };
+  },
+  handleInputChange(e) {
+    this.setState({
+      value: e.target.value,
+    });
+  },
+  handleFocusBlur(e) {
+    this.setState({
+      focus: e.target === document.activeElement,
+    });
+  },
+  handleSearch() {
+    if (this.props.onSearch) {
+      this.props.onSearch();
+    }
+  },
+  render() {
+    const btnCls = classNames({
+      'ant-search-btn': true,
+      'ant-search-btn-noempty': !!this.state.value.trim(),
+    });
+    const searchCls = classNames({
+      'ant-search-input': true,
+      'ant-search-input-focus': this.state.focus,
+    });
+    return <InputGroup className={searchCls} style={this.props.style}>
+      <Input {...this.props} value={this.state.value} onChange={this.handleInputChange}
+        onFocus={this.handleFocusBlur} onBlur={this.handleFocusBlur} />
+      <div className="ant-input-group-wrap">
+        <Button className={btnCls} onClick={this.handleSearch}>
+          <Icon type="search" />
+        </Button>
+      </div>
+    </InputGroup>;
+  }
+});
+
+ReactDOM.render(
+  <SearchInput placeholder="input search text" style={{width: 200}} />
+, document.getElementById('components-form-demo-search-input'));
+````

components/input/index.jsx

@@ -16,9 +16,10 @@ function ieGT9() {
 
 class Group extends React.Component {
   render() {
+    const className = 'ant-input-group ' + (this.props.className || '');
     return (
-      <span className={this.props.className}
-           style={this.props.style}>
+      <span className={className}
+            style={this.props.style}>
         {this.props.children}
       </span>
     );
@@ -26,15 +27,9 @@ class Group extends React.Component {
 }
 
 Group.propTypes = {
-  className: React.PropTypes.string,
   children: React.PropTypes.any,
 };
 
-Group.defaultProps = {
-  className: 'ant-input-group',
-};
-
-
 class Input extends React.Component {
   renderLabledInput(children) {
     const props = this.props;

style/components/form.less

@@ -125,33 +125,6 @@ form {
     .input-lg();
   }
 
-  // Input combined with select
-  .@{css-prefix}input-group {
-    .@{select-prefix-cls}-selection {
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-      &:hover {
-        border-color: #d9d9d9;
-      }
-    }
-
-    .@{select-prefix-cls}-selection--single {
-      margin-left: -1px;
-      height: @input-height-lg;
-      background-color: #eee;
-      .@{select-prefix-cls}-selection__rendered {
-        padding-left: 8px;
-        padding-right: 25px;
-        line-height: 30px;
-      }
-    }
-
-    .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
-      border-color: #d9d9d9;
-      box-shadow: none;
-    }
-  }
-
   // input[type=file]
   .@{css-prefix}upload {
     background: transparent;
@@ -193,6 +166,57 @@ form {
   }
 }
 
+// Input combined with select
+.@{css-prefix}input-group {
+  .@{select-prefix-cls}-selection {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    &:hover {
+      border-color: #d9d9d9;
+    }
+  }
+
+  .@{select-prefix-cls}-selection--single {
+    margin-left: -1px;
+    height: @input-height-lg;
+    background-color: #eee;
+    .@{select-prefix-cls}-selection__rendered {
+      padding-left: 8px;
+      padding-right: 25px;
+      line-height: 30px;
+    }
+  }
+
+  .@{select-prefix-cls}-open .@{select-prefix-cls}-selection {
+    border-color: #d9d9d9;
+    box-shadow: none;
+  }
+}
+
+.ant-search-input {
+  &.ant-input-group .ant-input:first-child {
+    border-radius: @border-radius-base;
+  }
+  .ant-search-btn {
+    .btn;
+    .btn-default;
+    border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
+    margin-left: -30px;
+    position: relative;
+    border-width: 0 0 0 1px;
+    z-index: 2;
+    padding-left: 8px;
+    padding-right: 8px;
+    &:hover {
+      border-color: @border-color-base;
+    }
+  }
+  &&-focus .ant-search-btn-noempty,
+  &:hover .ant-search-btn-noempty {
+    .btn-primary;
+  }
+}
+
 // Form layout
 //== Horizontal Form
 .@{css-prefix}form-horizontal {