Merge pull request #422 from ant-design/unify-size-prop

unify all size prop to: large default small

components/button/button-group.jsx

@@ -6,9 +6,17 @@ const prefix = 'ant-btn-group-';
 export default class ButtonGroup extends React.Component {
   render() {
     const {size, className, ...others} = this.props;
+
+    // large => lg
+    // small => sm
+    const sizeCls = ({
+      'large': 'lg',
+      'small': 'sm'
+    })[size] || '';
+
     const classes = rcUtil.classSet({
       'ant-btn-group': true,
-      [prefix + size]: size,
+      [prefix + sizeCls]: sizeCls,
       [className]: className
     });
 

components/button/button.jsx

@@ -28,11 +28,18 @@ export default class Button extends React.Component {
     const props = this.props;
     const {type, shape, size, onClick, className, htmlType, children, ...others} = props;
 
+    // large => lg
+    // small => sm
+    const sizeCls = ({
+      'large': 'lg',
+      'small': 'sm'
+    })[size] || '';
+
     const classes = rcUtil.classSet({
       'ant-btn': true,
       [prefix + type]: type,
       [prefix + shape]: shape,
-      [prefix + size]: size,
+      [prefix + sizeCls]: sizeCls,
       [prefix + 'loading']: ('loading' in props && props.loading !== false),
       [className]: className
     });

components/button/demo/button-group.md

@@ -4,7 +4,7 @@
 
 可以将多个 `Button` 放入 `ButtonGroup` 的容器中。
 
-通过设置 `size` 为 `lg` `sm` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
+通过设置 `size` 为 `large` `small` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
 
 ---
 
@@ -64,7 +64,7 @@ ReactDOM.render(<div>
 </ButtonGroup>
 
 <h4>尺寸</h4>
-<ButtonGroup size="lg">
+<ButtonGroup size="large">
   <Button type="ghost">大</Button>
   <Button type="ghost">大</Button>
   <Button type="ghost">大</Button>
@@ -74,7 +74,7 @@ ReactDOM.render(<div>
   <Button type="ghost">默认</Button>
   <Button type="ghost">默认</Button>
 </ButtonGroup>
-<ButtonGroup size="sm">
+<ButtonGroup size="small">
   <Button type="ghost">小</Button>
   <Button type="ghost">小</Button>
   <Button type="ghost">小</Button>

components/button/demo/size.md

@@ -4,7 +4,7 @@
 
 按钮有大、中、小三种尺寸。
 
-通过设置 `size` 为 `lg` `sm` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
 
 ---
 
@@ -12,9 +12,9 @@
 var Button = antd.Button;
 
 ReactDOM.render(<div>
-  <Button type="primary" size="lg">大号按钮</Button>
+  <Button type="primary" size="large">大号按钮</Button>
   <Button type="primary">中号按钮(默认)</Button>
-  <Button type="primary" size="sm">小号按钮</Button>
+  <Button type="primary" size="small">小号按钮</Button>
 </div>
 , document.getElementById('components-button-demo-size'));
 ````

components/button/index.md

@@ -24,7 +24,7 @@
 type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined
 htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 HTML标准 | Enum | `button`
 shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
-size | 设置按钮大小，可选值为 `sm` `lg` 或者不设 | Enum | undefined
+size | 设置按钮大小，可选值为 `small` `large` 或者不设 | Enum | undefined
 loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false
 onClick | `click` 事件的 handler | Function | `function() {}`
 

components/pagination/demo/mini.md

@@ -14,6 +14,6 @@ function onChange(page) {
 }
 
 ReactDOM.render(
-  <Pagination className="mini" onChange={onChange} total={50} />,
+  <Pagination size="small" onChange={onChange} total={50} />,
  document.getElementById('components-pagination-demo-mini'));
 ````

components/pagination/index.jsx

@@ -6,9 +6,13 @@ const prefixCls = 'ant-pagination';
 
 export default class AntPagination extends React.Component {
   render() {
+    let className = this.props.className;
+    if (this.props.size === 'small') {
+      className += ' mini';
+    }
     return <Pagination selectComponentClass={Select}
       selectPrefixCls="ant-select"
       prefixCls={prefixCls}
-      {...this.props} />;
+      {...this.props} className={className} />;
   }
 }

components/pagination/index.md

@@ -28,5 +28,5 @@
 | showSizeChanger  | 是否可以改变 pageSize              | Bool     | false          |
 | onShowSizeChange | pageSize 变化的回调                | Function | noop           |
 | showQuickJumper  | 是否可以快速跳转至某页             | Bool     | false          |
-| className        | 当为「mini」时，是小尺寸分页       | String   | ant-pagination |
+| size             | 当为「small」时，是小尺寸分页      | String   | ""             |
 | simple           | 当添加该属性时，显示为简单分页     | Object   | 无             |

components/select/index.jsx

@@ -7,7 +7,8 @@ let AntSelect = React.createClass({
       prefixCls: 'ant-select',
       transitionName: 'slide-up',
       optionLabelProp: 'children',
-      showSearch: false
+      showSearch: false,
+      size: 'default'
     };
   },
   render() {

components/select/index.md

@@ -37,7 +37,7 @@
 | searchPlaceholder | 搜索框默认文字 | string | 无 |
 | optionFilterProp | 输入项过滤对应的 option 属性 | string | value |
 | combobox | 输入框自动提示模式 | | false |
-| size    | 选择框大小  | String      |      无      |
+| size    | 选择框大小，可选 `large` `small`  | String      |      default      |
 
 ### Option props
 

components/table/index.jsx

@@ -65,7 +65,7 @@ let AntTable = React.createClass({
       useFixedHeader: false,
       rowSelection: null,
       className: '',
-      size: 'normal',
+      size: 'default',
       bordered: false,
       onChange: function () {
       }

components/table/index.md

@@ -63,7 +63,7 @@ var dataSource = new Table.DataSource({
 |---------------|--------------------------|-----------------|---------------------|---------|
 | rowSelection  | 列表项是否可选择         | Object          |                     | false   |
 | pagination    | 分页器                   | Object   | 配置项参考 [pagination](/components/pagination)，设为 false 时不显示分页 |         |
-| size          | 正常或迷你类型           | String          | `normal` or `small` | normal  |
+| size          | 正常或迷你类型           | String          | `default` or `small`| default |
 | dataSource    | 数据源，可以为数组（本地模式）或一个数据源描述对象（远程模式） | Array or Object |                     |         |
 | columns       | 表格列的配置描述，具体项见下表 | Array |                     |    无    |
 | rowKey        | 表格列 key 的取值 | Function(recode, index):string |                     |    record.key    |

components/tabs/demo/size.md

@@ -11,7 +11,7 @@ var Tabs = antd.Tabs;
 var TabPane = Tabs.TabPane;
 
 ReactDOM.render(
-  <Tabs defaultActiveKey="2" size="mini">
+  <Tabs defaultActiveKey="2" size="small">
     <TabPane tab="选项卡一" key="1">选项卡一内容</TabPane>
     <TabPane tab="选项卡二" key="2">选项卡二内容</TabPane>
     <TabPane tab="选项卡三" key="3">选项卡三内容</TabPane>

components/tabs/index.jsx

@@ -5,7 +5,7 @@ const prefixCls = 'ant-tabs';
 class AntTabs extends React.Component {
   render() {
     let className = (this.props.className || '');
-    if (this.props.size === 'mini') {
+    if (this.props.size === 'small' || this.props.size === 'mini') {
       className += ' ' + prefixCls + '-mini';
     }
     if (this.props.tabPosition === 'left' || this.props.tabPosition === 'right') {
@@ -17,7 +17,7 @@ class AntTabs extends React.Component {
 
 AntTabs.defaultProps = {
   prefixCls: prefixCls,
-  size: 'normal'
+  size: 'default'
 };
 
 AntTabs.TabPane = Tabs.TabPane;