Updates

components/datepicker/index.jsx

@@ -41,10 +41,10 @@ function createPicker(TheCalendar) {
         locale: {},
         // 自动换方向有很多视觉和交互问题
         // 需求不是很大，和设计师协商后不做
-        placement: {
+        align: {
           points: ['tl', 'tl'],
           overflow: { adjustX: 0, adjustY: 0 },
-          offset: [0, -3],
+          offset: [0, -8],
           targetOffset: [0, 0]
         }
       };
@@ -111,6 +111,7 @@ function createPicker(TheCalendar) {
           disabledDate={this.props.disabledDate}
           locale={getCalendarLocale(this.getLocale().lang)}
           defaultValue={defaultCalendarValue}
+          dateInputPlaceholder={this.props.placeholder}
           showTime={this.props.showTime}
           prefixCls="ant-calendar"
           showOk={this.props.showTime}
@@ -123,16 +124,16 @@ function createPicker(TheCalendar) {
         sizeClass = ' ant-input-sm';
       }
       let defaultValue = this.parseDateFromValue(this.props.defaultValue);
-      return (
+      return <span className="ant-calendar-picker">
         <Datepicker
           transitionName={this.props.transitionName}
           disabled={this.props.disabled}
           calendar={calendar}
           value={this.state.value}
           defaultValue={defaultValue}
-          prefixCls="ant-calendar-picker"
+          prefixCls="ant-calendar-picker-container"
           style={this.props.style}
-          placement={this.props.placement}
+          align={this.props.align}
           onChange={this.handleChange}>
           {
             ({value}) => {
@@ -147,7 +148,7 @@ function createPicker(TheCalendar) {
             }
           }
         </Datepicker>
-      );
+      </span>;
     }
   });
 }

components/slider/demo/mark.html

@@ -19,7 +19,7 @@ ReactDOM.render(React.createElement(
     null,
     "并列关系"
   ),
-  React.createElement(_antd.Slider, { marks: ["状态1", "状态2", "状态3", "状态4"], isIncluded: false, defaultIndex: 1 })
+  React.createElement(_antd.Slider, { marks: ["状态1", "状态2", "状态3", "状态4"], included: false, defaultIndex: 1 })
 ), document.getElementById('components-slider-demo-mark'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Slider } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
 
 ReactDOM.render(
@@ -27,7 +27,7 @@ ReactDOM.render(
   <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>包含关系<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{["状态1","状态2","状态3","状态4"]}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{1}</span> /&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>并列关系<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{["状态1","状态2","状态3","状态4"]}</span> <span class="hljs-attribute">isIncluded</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{1}</span> /&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{["状态1","状态2","状态3","状态4"]}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{1}</span> /&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
 , document.getElementById('components-slider-demo-mark'));</span></code></pre></div>
   </div>

components/slider/demo/range.html

@@ -8,14 +8,14 @@ var _antd = require('antd');
 ReactDOM.render(React.createElement(
   'div',
   null,
-  React.createElement(_antd.Slider, { range: true, defaultValues: [0, 30] }),
-  React.createElement(_antd.Slider, { range: true, step: 10, values: [20, 50] })
+  React.createElement(_antd.Slider, { range: true, defaultValue: [0, 30] }),
+  React.createElement(_antd.Slider, { range: true, step: 10, value: [20, 50] })
 ), document.getElementById('components-slider-demo-range'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Slider } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
 
 ReactDOM.render(
 <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span>=<span class="hljs-value">{true}</span> <span class="hljs-attribute">defaultValues</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">30</span>]} /&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span>=<span class="hljs-value">{true}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">values</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} /&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">30</span>]} /&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} /&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
 , document.getElementById('components-slider-demo-range'));</span></code></pre></div>
   </div>
@@ -23,7 +23,7 @@ ReactDOM.render(
     <div class="code-box-title">
       <a href="#demo-range">双滑块</a>
     </div>
-    <p>设置 <code>range</code> 为 <code>true</code>，将会渲染两个滑块，此时应用 <code>defaultValues</code> <code>values</code> 设置滑块的值，而非 <code>defaultValue</code> <code>values</code>。</p>
+    <p>设置 <code>range</code> 为 <code>true</code>，将会渲染两个滑块。</p>
     <span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
   </div>
 </div>

components/slider/index.html

@@ -601,27 +601,15 @@ Slider 滑动输入条 - Ant Design
 </tr>
 <tr>
 <td>value</td>
-<td>Number</td>
+<td>Number or [Number, Number]</td>
 <td></td>
-<td>当 <code>range</code> 为 <code>false</code> 时，设置当前取值</td>
-</tr>
-<tr>
-<td>values</td>
-<td>[Number, Number]</td>
-<td></td>
-<td>当 <code>range</code> 为 <code>true</code> 时，设置当前取值</td>
+<td>设置当前取值。当 <code>range</code> 为 <code>false</code> 时，使用 <code>Number</code>。否则用 <code>[Number, Number]</code></td>
 </tr>
 <tr>
 <td>defaultValue</td>
-<td>Number</td>
-<td>0</td>
-<td>当 <code>range</code> 为 <code>false</code> 时，设置初始取值</td>
-</tr>
-<tr>
-<td>defaultValues</td>
-<td>[Number, Number]</td>
-<td>[0, 0]</td>
-<td>当 <code>range</code> 为 <code>true</code> 时，设置初始取值</td>
+<td>Number or [Number, Number]</td>
+<td>0 or [0, 0]</td>
+<td>设置初始取值。当 <code>range</code> 为 <code>false</code> 时，使用 <code>Number</code>。否则用 <code>[Number, Number]</code></td>
 </tr>
 <tr>
 <td>marks</td>
@@ -630,7 +618,7 @@ Slider 滑动输入条 - Ant Design
 <td>分段标记，标记每一个 step，如果 step 属性没有定义，则 <code>marks</code> 属性会被忽略。当 <code>range</code> 为 <code>true</code> 时，忽略该属性</td>
 </tr>
 <tr>
-<td>isIncluded</td>
+<td>included</td>
 <td>Boolean</td>
 <td>true</td>
 <td>分段式滑块，值为 true 时表示值为包含关系，false 表示并列</td>
@@ -824,14 +812,14 @@ var _antd = require('antd');
 ReactDOM.render(React.createElement(
   'div',
   null,
-  React.createElement(_antd.Slider, { range: true, defaultValues: [0, 30] }),
-  React.createElement(_antd.Slider, { range: true, step: 10, values: [20, 50] })
+  React.createElement(_antd.Slider, { range: true, defaultValue: [0, 30] }),
+  React.createElement(_antd.Slider, { range: true, step: 10, value: [20, 50] })
 ), document.getElementById('components-slider-demo-range'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Slider } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
 
 ReactDOM.render(
 <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span>=<span class="hljs-value">{true}</span> <span class="hljs-attribute">defaultValues</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">30</span>]} /&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span>=<span class="hljs-value">{true}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">values</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} /&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">30</span>]} /&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} /&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
 , document.getElementById('components-slider-demo-range'));</span></code></pre></div>
   </div>
@@ -839,7 +827,7 @@ ReactDOM.render(
     <div class="code-box-title">
       <a href="#demo-range">双滑块</a>
     </div>
-    <p>设置 <code>range</code> 为 <code>true</code>，将会渲染两个滑块，此时应用 <code>defaultValues</code> <code>values</code> 设置滑块的值，而非 <code>defaultValue</code> <code>values</code>。</p>
+    <p>设置 <code>range</code> 为 <code>true</code>，将会渲染两个滑块。</p>
     <span class="collapse anticon anticon-circle-o-right" unselectable="none" style="-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;"></span>
   </div>
 </div>
@@ -941,7 +929,7 @@ ReactDOM.render(React.createElement(
     null,
     "并列关系"
   ),
-  React.createElement(_antd.Slider, { marks: ["状态1", "状态2", "状态3", "状态4"], isIncluded: false, defaultIndex: 1 })
+  React.createElement(_antd.Slider, { marks: ["状态1", "状态2", "状态3", "状态4"], included: false, defaultIndex: 1 })
 ), document.getElementById('components-slider-demo-mark'));})()</script><div class="highlight"><pre><code class="javascript"><span class="hljs-keyword">import</span> { Slider } <span class="hljs-keyword">from</span> <span class="hljs-string">'antd'</span>;
 
 ReactDOM.render(
@@ -949,7 +937,7 @@ ReactDOM.render(
   <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>包含关系<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{["状态1","状态2","状态3","状态4"]}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{1}</span> /&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>并列关系<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
-  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{["状态1","状态2","状态3","状态4"]}</span> <span class="hljs-attribute">isIncluded</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{1}</span> /&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{["状态1","状态2","状态3","状态4"]}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{1}</span> /&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
 , document.getElementById('components-slider-demo-mark'));</span></code></pre></div>
   </div>

components/spin/index.html

@@ -570,7 +570,7 @@ Spin 加载中 - Ant Design
       Spin 加载中
     </h1>
     <p>用于页面和区块的加载中状态。</p>
-<h2 id="何时使用">何时使用<a href="#何时使用" class="anchor">#</a> </h2><p>页面局部处于等待异步数据或正在渲染过程时，合适的加载的动效会有效缓解用户的焦虑。</p>
+<h2 id="何时使用">何时使用<a href="#何时使用" class="anchor">#</a> </h2><p>页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。</p>
 <h2 id="api">API<a href="#api" class="anchor">#</a> </h2><table>
 <thead>
 <tr>

components/tabs/demo/add.html

@@ -85,7 +85,7 @@ var Test = React.createClass({
     var addBtn = React.createElement(_antd.Icon, { style: addStyle, type: 'plus-circle', onClick: this.add });
     var operations = React.createElement(
       _antd.Button,
-      null,
+      { style: { marginTop: 2 } },
       '操作'
     );
     return React.createElement(
@@ -185,7 +185,7 @@ ReactDOM.render(React.createElement(Test, null), document.getElementById('compon
   },
   render() {
     <span class="hljs-keyword">const</span> addBtn = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{addStyle}</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"plus-circle"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.add}</span> /&gt;</span>;</span>
-    <span class="hljs-keyword">const</span> operations = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Button</span>&gt;</span>操作<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>;</span>
+    <span class="hljs-keyword">const</span> operations = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginTop:</span> <span class="hljs-attribute">2</span> }}&gt;</span>操作<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>;</span>
     <span class="hljs-keyword">return</span> (
       <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Tabs</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onChange}</span>
         <span class="hljs-attribute">activeKey</span>=<span class="hljs-value">{this.state.activeKey}</span>

components/tabs/index.html

@@ -858,7 +858,7 @@ var Test = React.createClass({
     var addBtn = React.createElement(_antd.Icon, { style: addStyle, type: 'plus-circle', onClick: this.add });
     var operations = React.createElement(
       _antd.Button,
-      null,
+      { style: { marginTop: 2 } },
       '操作'
     );
     return React.createElement(
@@ -958,7 +958,7 @@ ReactDOM.render(React.createElement(Test, null), document.getElementById('compon
   },
   render() {
     <span class="hljs-keyword">const</span> addBtn = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Icon</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{addStyle}</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"plus-circle"</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.add}</span> /&gt;</span>;</span>
-    <span class="hljs-keyword">const</span> operations = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Button</span>&gt;</span>操作<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>;</span>
+    <span class="hljs-keyword">const</span> operations = <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Button</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{{</span> <span class="hljs-attribute">marginTop:</span> <span class="hljs-attribute">2</span> }}&gt;</span>操作<span class="hljs-tag">&lt;/<span class="hljs-title">Button</span>&gt;</span>;</span>
     <span class="hljs-keyword">return</span> (
       <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Tabs</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onChange}</span>
         <span class="hljs-attribute">activeKey</span>=<span class="hljs-value">{this.state.activeKey}</span>

dist/demo.css

@@ -4204,15 +4204,13 @@ fieldset[disabled] .ant-btn-ghost.active {
 .ant-calendar * {
   box-sizing: border-box;
 }
+.ant-calendar-picker-container {
+  position: absolute;
+}
 .ant-calendar-picker-container .ant-calendar {
   position: absolute;
-  left: -9999px;
-  top: -9999px;
   z-index: 1070;
 }
-.ant-calendar-picker-container .ant-calendar-hidden {
-  display: none;
-}
 .ant-calendar-picker {
   position: relative;
   display: inline-block;
@@ -4246,10 +4244,6 @@ fieldset[disabled] .ant-btn-ghost.active {
   line-height: 1;
   vertical-align: bottom;
 }
-.ant-calendar-picker-open .ant-calendar,
-.ant-calendar-picker-container-open .ant-calendar {
-  display: block;
-}
 .ant-calendar {
   position: relative;
   outline: none;
@@ -4281,7 +4275,6 @@ fieldset[disabled] .ant-btn-ghost.active {
   text-align: center;
 }
 .ant-calendar-header {
-  padding: 0 10px;
   height: 34px;
   line-height: 34px;
   text-align: center;
@@ -4458,7 +4451,7 @@ fieldset[disabled] .ant-btn-ghost.active {
 .ant-calendar .ant-calendar-clear-btn {
   position: absolute;
   right: 6px;
-  text-indent: -99px;
+  text-indent: -76px;
   overflow: hidden;
   width: 20px;
   height: 20px;
@@ -4759,7 +4752,6 @@ textarea.ant-calendar-time-input {
   display: none;
 }
 .ant-calendar-month-panel-header {
-  padding: 0 10px;
   height: 34px;
   line-height: 34px;
   text-align: center;
@@ -4870,7 +4862,6 @@ textarea.ant-calendar-time-input {
   display: none;
 }
 .ant-calendar-year-panel-header {
-  padding: 0 10px;
   height: 34px;
   line-height: 34px;
   text-align: center;
@@ -4999,7 +4990,6 @@ textarea.ant-calendar-time-input {
   display: none;
 }
 .ant-calendar-decade-panel-header {
-  padding: 0 10px;
   height: 34px;
   line-height: 34px;
   text-align: center;

package.json

@@ -38,7 +38,7 @@
     "gregorian-calendar-format": "~3.0.1",
     "object-assign": "~4.0.1",
     "rc-animate": "~2.0.0",
-    "rc-calendar": "4.0.0-alpha6",
+    "rc-calendar": "4.0.0-alpha9",
     "rc-checkbox": "~1.1.1",
     "rc-collapse": "~1.4.0",
     "rc-dialog": "~5.1.0",
@@ -52,7 +52,7 @@
     "rc-queue-anim": "~0.10.5",
     "rc-radio": "~2.0.0",
     "rc-select": "~5.0.0",
-    "rc-slider": "~1.6.0",
+    "rc-slider": "~2.0.0",
     "rc-steps": "~1.4.0",
     "rc-switch": "~1.2.0",
     "rc-table": "~3.4.0",

spec/font.html

@@ -521,6 +521,9 @@
 .disabled-text .font-text {
   color: #ccc;
 }
+.help-text .font-text {
+  color: #999;
+}
 </style>
 
   </article>

style/components/datepicker/Calendar.less

@@ -1,5 +1,4 @@
 .calendarPanelHeader(@calendar-prefix-cls) {
-  padding: 0 10px;
   height: 34px;
   line-height: 34px;
   text-align: center;
@@ -238,7 +237,7 @@
   .@{calendar-prefix-cls}-clear-btn {
     position: absolute;
     right: 6px;
-    text-indent: -99px;
+    text-indent: -76px;
     overflow: hidden;
     width: 20px;
     height: 20px;

style/components/datepicker/Picker.less

@@ -1,12 +1,9 @@
-.@{calendar-prefix-cls}-picker-container .@{calendar-prefix-cls} {
-  &-hidden {
-    display: none;
-  }
-
+.@{calendar-prefix-cls}-picker-container  {
   position: absolute;
-  left: -9999px;
-  top: -9999px;
-  z-index: 1070;
+  .@{calendar-prefix-cls} {
+    position: absolute;
+    z-index: 1070;
+  }
 }
 
 .@{calendar-prefix-cls}-picker {
@@ -39,8 +36,4 @@
       vertical-align: bottom;
     }
   }
-  &-open .@{calendar-prefix-cls},
-  &-container-open .@{calendar-prefix-cls} {
-    display: block;
-  }
 }