Merge branch 'master' of github.com:ant-design/ant-design

README.md

@@ -9,11 +9,12 @@
 
 ## 特性
 
-- 丰富实用的 UI 组件。
+- 企业级金融产品的交互语言和视觉体系。
+- 丰富实用的 React UI 组件。
 - 基于 React 的组件化开发模式。
-- 基于 webpack 的调试构建方案，支持 ES6。
 - 背靠 npm 生态圈。
-- 提炼于企业级金融产品的交互语言和视觉体系，使用 Sketch³ 设计。
+- 基于 webpack 的调试构建方案，支持 ES6。
+
 
 ## 范例
 
@@ -27,9 +28,12 @@ React.render(<Datepicker />, mountNode);
 ## 链接
 
 - [首页](http://ant.design/)
-- [使用文档](http://ant.design/docs/introduce)
+- [文档](http://ant.design/docs/introduce)
 - [组件](http://ant.design/components/)
+- [发布计划](https://github.com/ant-design/ant-design/issues/9)
 - [React 模块](http://react-component.github.io/)
+- [React 代码规范](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-code-style.md)
+- [组件设计原则](https://github.com/react-component/react-component.github.io/blob/master/docs/zh-cn/component-design.md)
 
 
 ## 如何贡献

components/form/demo/input-size.md

@@ -11,13 +11,13 @@
 ````html
 
 <div class="row">
-  <div class="col-6 pdrg-8">
+  <div class="col-6">
     <input class="ant-input ant-input-lg" type="text" id="largeInput" placeholder="大尺寸"/>
   </div>
-  <div class="col-6 pdrg-8">
+  <div class="col-6">
     <input class="ant-input" type="text" id="defaultInput" placeholder="默认尺寸"/>
   </div>
-  <div class="col-6 pdrg-8">
+  <div class="col-6">
     <input class="ant-input ant-input-sm" type="text" id="smallInput" placeholder="小尺寸"/>
   </div>
 </div>

components/form/demo/inputs.md

@@ -6,93 +6,112 @@
 
 ---
 
-````html
-<form class="ant-form-horizontal">
-  <div class="ant-form-item">
-    <label class="col-6" for="site1">标签输入框：</label>
-    <div class="col-16">
-      <div class="ant-input-group">
-        <span class="ant-input-group-addon" id="basic-addon1">Http://</span>
-        <input type="text" id="site1" class="ant-input" value="mysite.com">
+````jsx
+
+var Menu = antd.Menu;
+var Dropdown = antd.Dropdown;
+
+var menu = <Menu>
+  <Menu.Item>
+    <a target="_blank" href="http://www.alipay.com/">.net</a>
+  </Menu.Item>
+  <Menu.Item>
+    <a target="_blank" href="http://www.taobao.com/">.jp</a>
+  </Menu.Item>
+  <Menu.Item>
+    <a target="_blank" href="http://www.tmall.com/">.org</a>
+  </Menu.Item>
+</Menu>;
+
+React.render(
+<form className="ant-form-horizontal">
+  <div className="ant-form-item">
+    <label className="col-6" for="site1">标签输入框：</label>
+    <div className="col-16">
+      <div className="ant-input-group">
+        <span className="ant-input-group-addon" id="basic-addon1">Http://</span>
+        <input type="text" id="site1" className="ant-input" value="mysite.com" />
       </div>
     </div>
   </div>
-  <div class="ant-form-item">
-    <label class="col-6" for="site3">标签输入框：</label>
-    <div class="col-16">
-      <div class="ant-input-group">
-        <span class="ant-input-group-addon" id="basic-addon3">Http://</span>
-        <input type="text" class="ant-input" id="site3" value="mysite">
-        <span class="ant-input-group-addon" id="basic-addon4">.com</span>
+  <div className="ant-form-item">
+    <label className="col-6" for="site3">标签输入框：</label>
+    <div className="col-16">
+      <div className="ant-input-group">
+        <span className="ant-input-group-addon" id="basic-addon3">Http://</span>
+        <input type="text" className="ant-input" id="site3" value="mysite" />
+        <span className="ant-input-group-addon" id="basic-addon4">.com</span>
       </div>
     </div>
   </div>
-  <div class="ant-form-item">
-    <label class="col-6" for="site4">按钮式下拉输入框：</label>
-    <div class="col-16">
-      <div class="ant-input-group">
-        <input type="text" class="ant-input" id="site4" placeholder="Search for...">
-        <div class="ant-input-group-btn">
-          <button class="input-btn" type="button">
-            <span>.com</span>
-            <i class="anticon anticon-down"></i>
-          </button>
+  <div className="ant-form-item">
+    <label className="col-6" for="site4">按钮式下拉输入框：</label>
+    <div className="col-16">
+      <div className="ant-input-group">
+        <input type="text" className="ant-input" id="site4" placeholder="Search for..." />
+        <div className="ant-input-group-btn">    
+          <Dropdown overlay={menu}>
+            <button className="ant-btn ant-btn-menu">
+              .com <i className="anticon anticon-down"></i>
+            </button>
+          </Dropdown>
         </div>
       </div>
     </div>
   </div>
-  <div class="ant-form-item">
-    <label class="col-6" for="site5">带按钮的输入框：</label>
-    <div class="col-16">
-      <div class="ant-input-group">
-        <input type="text" class="ant-input" id="site5" placeholder="Search for...">
-        <div class="ant-input-group-btn">
-          <button class="input-btn" type="button">GO!</button>
+  <div className="ant-form-item">
+    <label className="col-6" for="site5">带按钮的输入框：</label>
+    <div className="col-16">
+      <div className="ant-input-group">
+        <input type="text" className="ant-input" id="site5" placeholder="Search for..." />
+        <div className="ant-input-group-btn">
+          <button className="ant-btn" type="button">GO!</button>
         </div>
       </div>
     </div>
   </div>
-  <div class="ant-form-item">
-    <label class="col-6">输入身份证：</label>
-    <div class="col-16">
-    <div class="row">
-      <div class="col-6 pdrg-8">
-        <input class="ant-input" type="text" id="certNo1" />
+  <div className="ant-form-item">
+    <label className="col-6">输入身份证：</label>
+    <div className="col-16">
+    <div className="row">
+      <div className="col-6">
+        <input className="ant-input" type="text" id="certNo1" />
       </div>
-      <div class="col-6 pdrg-8">
-        <input class="ant-input" type="text" id="certNo2" />
+      <div className="col-6">
+        <input className="ant-input" type="text" id="certNo2" />
       </div>
-      <div class="col-6 pdrg-8">
-        <input class="ant-input" type="text" id="certNo3" />
+      <div className="col-6">
+        <input className="ant-input" type="text" id="certNo3" />
       </div>      
-      <div class="col-6 pdrg-8">
-        <input class="ant-input" type="text" id="certNo4" />
+      <div className="col-6">
+        <input className="ant-input" type="text" id="certNo4" />
       </div>
     </div>
     </div>
   </div>
-  <div class="ant-form-item has-error">
-    <label class="col-6">电话号码：</label>
-    <div class="col-16">
-      <div class="row">
-        <div class="col-4 pdrg-8">
-          <input class="ant-input" type="text" id="tel1" value="086" />
+  <div className="ant-form-item has-error">
+    <label className="col-6">电话号码：</label>
+    <div className="col-16">
+      <div className="row">
+        <div className="col-4">
+          <input className="ant-input" type="text" id="tel1" value="086" />
         </div>
-        <div class="col-2 pdrg-8">
-          <p class="ant-form-split">--</p>
+        <div className="col-2">
+          <p className="ant-form-split">--</p>
         </div>
-        <div class="col-6 pdrg-8">
-          <input class="ant-input" type="text" id="tel2" />
+        <div className="col-6">
+          <input className="ant-input" type="text" id="tel2" />
         </div>
-        <div class="col-6 pdrg-8">
-          <input class="ant-input" type="text" id="tel3" />
+        <div className="col-6">
+          <input className="ant-input" type="text" id="tel3" />
         </div>      
-        <div class="col-6 pdrg-8">
-          <input class="ant-input" type="text" id="tel4" />
+        <div className="col-6">
+          <input className="ant-input" type="text" id="tel4" />
         </div>
-        <p class="ant-form-explain">请输入正确的电话号码</p>
+        <p className="ant-form-explain">请输入正确的电话号码</p>
       </div>
     </div>
   </div>
-</form>
+</form> 
+, document.getElementById('components-form-demo-inputs'));
 ````

components/form/demo/mix.md

@@ -26,14 +26,14 @@ React.render(
   <form className="ant-form-horizontal">
     <div className="ant-form-item">
       <label className="col-6" required>Input-Number:</label>
-      <div className="col-6 pdrg-8">
+      <div className="col-6">
         <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} style={{width:100}}/>
       </div>
       <div className="col-3"><p className="ant-form-text"> 台机器</p></div>
     </div>
     <div className="ant-form-item">
       <label className="col-6" required><i className="anticon anticon-exclamation-circle"></i>我是标题:</label>
-      <div className="col-7 pdrg-8">
+      <div className="col-7">
         <p className="ant-form-text">唧唧复唧唧木兰当户织呀</p>
       </div>
       <div className="col-9">

docs/introduce.md

@@ -11,11 +11,12 @@
 
 ## 特性
 
+- 企业级金融产品的交互语言和视觉体系。
 - 丰富实用的 React UI 组件。
 - 基于 React 的组件化开发模式。
-- 基于 webpack 的调试构建方案，支持 ES6。
 - 背靠 npm 生态圈。
-- 提炼于企业级金融产品的交互语言和视觉体系，使用 Sketch³ 设计。
+- 基于 webpack 的调试构建方案，支持 ES6。
+
 
 ## 范例
 

style/components/button.less

@@ -24,6 +24,10 @@
     .@{btnPrefixClass}-group &:last-child:not(:first-child) {
       border-left-color: @btn-primary-border;
     }
+
+    .@{btnPrefixClass}-group & + .@{btnPrefixClass} {
+      border-left-color: @btn-primary-border;
+    }
   }
 
   &-ghost {

style/components/form.less

@@ -1,4 +1,5 @@
 @import "../mixins/index";
+@btnClass: ~"@{css-prefix}btn";
 
 .reset-form();
 
@@ -45,26 +46,21 @@ label {
 
 //== Style for input-group
 .@{css-prefix}input-group {
-  .input-group(~"@{css-prefix}input");
+  .input-group(~"@{css-prefix}input"; @btnClass)
 }
 
 // 表单下的输入框尺寸唯一: 大尺寸
 form {
-  .@{css-prefix}input {
-    height: @input-height-lg;
-    font-size: @font-size-base;
-    padding: @input-padding-horizontal;
-  }
   .has-feedback {
     .@{iconfont-css-prefix} {
       .square(@input-height-lg);
       line-height: @input-height-lg;
     }
   }
-
-  .@{css-prefix}input-group > .@{css-prefix}input,
-  .@{css-prefix}input-group > .@{css-prefix}input-group-addon,
-  .@{css-prefix}input-group > .@{css-prefix}input-group-btn > .input-btn {
+  .@{css-prefix}input,
+  .@{css-prefix}input-group .@{css-prefix}input,
+  .@{css-prefix}input-group .@{css-prefix}input-group-addon,
+  .@{css-prefix}input-group .@{css-prefix}input-group-btn .@{btnClass} {
     height: @input-height-lg;
     font-size: @font-size-base;
     padding: @input-padding-horizontal;

style/components/typography.less

@@ -1,12 +1,3 @@
 //== Typography
 
-//** Headings: h1 h2 h3 h4 h5 h6
-
-
-.pdrg-8 {
-	padding-right: 8px;
-}
-
-.pdlf-8 {
-	padding-left: 8px;
-}
+//** Headings: h1 h2 h3 h4 h5 h6

style/mixins/input.less

@@ -17,8 +17,8 @@
   display: inline-block;
   padding: @input-padding-vertical-base @input-padding-horizontal;
   width: 100%;
-  cursor: text;
   height: @input-height-base;
+  cursor: text;
   font-size: @input-font-size;
   line-height: @line-height-base;
   color: @input-color;
@@ -85,11 +85,8 @@
   }
 }
 
-// Input-group
-.input-group(@inputClass) {
-  // define the button style for input-group
-  @inputBtn: input-btn;
-
+// label input
+.input-group(@inputClass; @btnclass) {
   position: relative;
   display: table;
   border-collapse: separate;
@@ -101,10 +98,7 @@
     padding-right: 0;
   }
 
-  &-addon,
-  &-btn,
-  &-btn-vertical,
-  .@{inputClass} {
+  &-addon, &-btn, .@{inputClass} {
     display: table-cell;
 
     &:not(:first-child):not(:last-child) {
@@ -112,9 +106,7 @@
     }
   }
 
-  &-addon,
-  &-btn,
-  &-btn-vertical {
+  &-addon, &-btn {
     width: 1%;
     white-space: nowrap;
     vertical-align: middle;
@@ -138,24 +130,18 @@
     background-color: #eee;
     border: 1px solid @input-border-color;
     border-radius: @border-radius-base;
-
-    input[type="radio"],
-    input[type="checkbox"] {
-      margin-top: 0;
-    }
   }
 
-  .@{inputBtn} {
-    .btn();
-    .button-size(@input-padding-vertical-base @input-padding-horizontal; @font-size-base; @border-radius-base);
+  .@{btnclass} {
+    border-radius: @border-radius-base;
     .button-variant(@input-color; #eee; @input-border-color);
+    margin-left: -1px;
 
     &:hover {
-      .button-color(tint(@input-color, 20%); #eee; @input-border-color);
+      .button-color(@input-color; tint(#eee, 20%); @input-border-color);
     }
-    &:active,
-    &.active {
-      .button-color(shade(@input-color, 5%); #eee; @input-border-color);
+    &:active, &.active {
+      .button-color(@input-color; shade(#eee, 5%); @input-border-color);
     }
 
     .@{iconfont-css-prefix} {
@@ -164,34 +150,8 @@
     }
   }
 
-  &-btn {
-    position: relative;
-
-    > .@{inputBtn} {
-      position: relative;
-      + .@{inputBtn} {
-        margin-left: -1px;
-      }
-    }
-
-    // Negative margin to only have a 1px border between the two
-    &:first-child {
-      > .@{inputBtn} {
-        margin-right: -1px;
-      }
-    }
-    &:last-child {
-      > .@{inputBtn} {
-        margin-left: -1px;
-      }
-    }
-  }
-
   // Reset rounded corners
-  .@{inputClass}:first-child,
-  &-addon:first-child,
-  &-btn:first-child > .@{inputBtn},
-  &-btn:last-child > .@{inputBtn}:not(:last-child):not(.dropdown-toggle) {
+  .@{inputClass}:first-child, &-addon:first-child {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }
@@ -199,33 +159,31 @@
   &-addon:first-child {
     border-right: 0;
   }
+  &-addon:last-child {
+    border-left: 0;
+  }
 
   .@{inputClass}:last-child,
   &-addon:last-child,
-  &-btn:last-child > .@{inputBtn},
-  &-btn:first-child > .@{inputBtn}:not(:first-child) {
+  &-btn .@{btnclass}{
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 
-  &-addon:last-child {
-    border-left: 0;
-  }
-
   // Sizing options
   &-lg > .@{inputClass},
   &-lg > &-addon,
-  &-lg > &-btn > .@{inputBtn} {
+  &-lg > &-btn .@{btnclass} {
     .input-lg();
   }
 
   &-sm > .@{inputClass},
   &-sm > &-addon,
-  &-sm > &-btn > .@{inputBtn} {
+  &-sm > &-btn .@{btnclass} {
     .input-sm();
   }
 
-  &-sm > &-btn > .@{inputBtn} {
+  &-sm > &-btn .@{btnclass} {
     margin-top: ~"-2px \9";
   }
 }