fix for code review

components/spin/demo/full-page-load.md

@@ -12,14 +12,14 @@ var Spin = antd.Spin;
 var container = document.getElementById('components-spin-demo-full-page-load');
 
 var pageStyle = {
-	paddingBottom: '60px',
+  paddingBottom: '60px',
-	paddingTop: '60px',
+  paddingTop: '60px',
-	textAlign: 'center'
+  textAlign: 'center'
 }
 
-React.render(
+ReactDOM.render(
-	<div style={ pageStyle }>
+  <div style={ pageStyle }>
-		<Spin size="lg" />
+    <Spin size="large" type="primary" />
-	</div>, container);
+  </div>, container);
 
 ````

components/spin/demo/page-element.md

@@ -11,26 +11,23 @@ var Spin = antd.Spin;
 var container = document.getElementById('components-spin-demo-page-element');
 
 var divStyle = {
-	textAlign: 'center',
+  textAlign: 'center',
-	width: '100%',
+  width: '100%',
-	backgroundColor: 'rgba(0,0,0,0.05)',
+  backgroundColor: 'rgba(0,0,0,0.05)',
     borderRadius: '4px',
     marginBottom: '20px',
     padding: '.66em 1.5em',
     margin: '20px 0'
 }
 
-React.render(
+ReactDOM.render(
-	<div>
+  <div>
-		<div style={ divStyle }>
+    <div style={ divStyle }>
-			<Spin size="md" />
+      <Spin />
-		</div>
+    </div>
-		<div style={ divStyle }>
+    <div style={ divStyle }>
-			<Spin size="md" type="primary" />
+      <Spin type="primary" />
-		</div>
+    </div>
-		<div style={ divStyle }>
+  </div>, container);
-			<Spin size="md" type="inverted" />
-		</div>
-	</div>, container);
 
 ````

components/spin/index.jsx

@@ -4,32 +4,37 @@ import { classSet } from 'rc-util';
 let AntSpin = React.createClass({
   getDefaultProps() {
     return {
-      size: 'sm',
+      size: 'default',
       type: 'default'
     };
   },
 
   propTypes: {
     className: React.PropTypes.string,
-    size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
+    size: React.PropTypes.oneOf(['small', 'default', 'large']),
-    type: React.PropTypes.oneOf(['default', 'primary', 'inverted'])
+    type: React.PropTypes.oneOf(['default', 'primary'])
   },
 
   render() {
-    const props = this.props;
+    const prefix = 'ant-spin';
+    const {type, size, className, ...others} = this.props;
+    const sizeCls = ({
+      'large': 'lg',
+      'small': 'sm'
+    })[size] || '';
 
-    let className = classSet({
+    let componentClassName = classSet({
-      spin: 1,
+      'ant-spin': true,
-      [`spin-${props.type}`]: 1,
+      [`${prefix}-${type}`]: type,
-      [`spin-${props.size}`]: 1,
+      [`${prefix}-${sizeCls}`]: sizeCls,
-      [props.className]: !!props.className
+      [className]: !!className
     });
 
     return (
-      <div {...this.props} className={ className }>
+      <div {...this.props} className={ componentClassName }>
-        <span className="spin-dot spin-dot-first" />
+        <span className="ant-spin-dot ant-spin-dot-first" />
-        <span className="spin-dot spin-dot-second" />
+        <span className="ant-spin-dot ant-spin-dot-second" />
-        <span className="spin-dot spin-dot-third" />
+        <span className="ant-spin-dot ant-spin-dot-third" />
       </div>
     );
   }

components/spin/index.md

@@ -15,6 +15,6 @@
 ## API
 
 | 参数       | 类型            | 默认值       |说明           |
-|------------|----------------|-------------|--------------|
+|-----------|----------------|-------------|--------------|
-| size        | enum			| sm				| spin组件中点的大小，可选值为sm md lg
+| size        | enum      | default       | spin组件中点的大小，可选值为large default small
-| type        | enum			| default           | spin组件中点的而色值，可选值为default primary inverted
+| type        | enum      | default       | spin组件中点的而色值，可选值为default primary

components/table/index.jsx

@@ -600,7 +600,7 @@ let AntTable = React.createClass({
       let spinClass = `${paginationPatchClass} ant-table-spin-holder`;
 
       spinEl = <div className={spinClass}>
-          <Spin size="md" type="primary"/>
+          <Spin type="primary"/>
         </div>;
 
       spinWrapperClass = ' ant-table-loading';

style/components/spin.less

@@ -1,70 +1,64 @@
 @import "../mixins/index";
 
+@spin-prefix-cls: ant-spin;
+
 // root of component
 // ------------------------------
 
-.spin {
+.@{spin-prefix-cls} {
-	display: inline-block;
+  display: inline-block;
-	font-size: @spin-dot-size;
+  font-size: @spin-dot-size;
-	height: @spin-dot-size;
+  height: @spin-dot-size;
-	position: relative;
+  position: relative;
-	text-align: center;
+  text-align: center;
-	vertical-align: middle;
+  vertical-align: middle;
-}
 
-// dots
+  // dots
-// ------------------------------
+  // ------------------------------
+  
+  &-dot {
+    .animation(antSpinPulse 1s infinite ease-in-out);
+    .square(1em);
+    border-radius: 50%;
+    display: inline-block;
+    vertical-align: top;
+  }
+  &-dot-second {
+    .animation-delay(200ms);
+    margin-left: 1em;
+  }
+  &-dot-third {
+    .animation-delay(400ms);
+    margin-left: 1em;
+  }
 
-.spin-dot {
+  // Types
-	.animation(pulse 1s infinite ease-in-out);
+  // ------------------------------
-	.square(1em);
-	border-radius: 50%;
-	display: inline-block;
-	vertical-align: top;
-}
-&.spin-dot-second {
-	.animation-delay(200ms);
-	margin-left: 1em;
-}
-&.spin-dot-third {
-	.animation-delay(400ms);
-	margin-left: 1em;
-}
 
-// Types
+  // default
-// ------------------------------
+  &-default > &-dot { background-color: @spin-dot-default; }
 
-// default
+  // primary
-.spin-default > .spin-dot { background-color: @spin-dot-default; }
+  &-primary > &-dot { background-color: @primary-color; }
 
-// primary
+  // Sizes
-.spin-primary > .spin-dot { background-color: @spin-dot-primary; }
+  // ------------------------------
 
-// inverted
+  // small
-.spin-inverted > .spin-dot { background-color: @spin-dot-inverted; }
+  &-sm {
+    font-size: @spin-dot-size-sm;
+    height: @spin-dot-size-sm;
+  }
 
-
+  // large
-// Sizes
+  &-lg {
-// ------------------------------
+    font-size: @spin-dot-size-lg;
-
+    height: @spin-dot-size-lg;
-// small
+  }
-.spin-sm {
-	font-size: @spin-dot-size-sm;
-	height: @spin-dot-size-sm;
-}
-
-// large
-.spin-lg {
-	font-size: @spin-dot-size-lg;
-	height: @spin-dot-size-lg;
 }
 
 // pulse
-@-webkit-keyframes pulse {
+@keyframes antSpinPulse {
-	0%, 80%, 100% { opacity: 0; }
+  0%, 80%, 100% { opacity: 0; }
-	40% { opacity: 1; }
+  40% { opacity: 1; }
-}
-@keyframes pulse {
-	0%, 80%, 100% { opacity: 0; }
-	40% { opacity: 1; }
 }

style/themes/default/custom.less

@@ -142,10 +142,7 @@
 // Spin
 // --------------------------------
 @spin-dot-default            : #999;
-@spin-dot-inverted           : #fff;
-@spin-dot-primary            : #2db7f5;
 
 @spin-dot-size               : 8px;
 @spin-dot-size-sm            : @spin-dot-size / 2;
 @spin-dot-size-lg            : @spin-dot-size * 2;
-