Merge pull request #345 from benjycui/feature-button

feat: button should be a component

components/button/button-group.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+const prefix = 'ant-btn-group-';
+
+export default class ButtonGroup extends React.Component {
+  render() {
+    const {size, className, ...others} = this.props;
+
+    let classSet = ['ant-btn-group'];
+    if (size) {
+      classSet.push(prefix + size);
+    }
+    if (className) {
+      classSet.push(className);
+    }
+
+    return <div {...others} className={classSet.join(' ')} />;
+  }
+}
+ButtonGroup.propTypes = {
+  size: React.PropTypes.string,
+};

components/button/button.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+const rxTwoCNChar = /^[\u4e00-\u9fa5]{2,2}$/;
+const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
+function isString(str) {
+  return typeof str === 'string';
+}
+
+const prefix = 'ant-btn-';
+function updateClassWithProp(classSet, prop) {
+  if (prop) {
+    classSet.push(prefix + prop);
+  }
+}
+
+// Insert one space between two chinese characters automatically.
+function insertSpace(child) {
+  if (isString(child) && isTwoCNChar(child)) {
+    return child.split('').join(' ');
+  }
+
+  if (isString(child.type) && isTwoCNChar(child.props.children)) {
+    return React.cloneElement(child, {},
+                              child.props.children.split('').join(' '));
+  }
+
+  return child;
+}
+
+export default class Button extends React.Component {
+  render() {
+    const props = this.props;
+    const {type, shape, size, onClick, className, children, ...others} = props;
+
+    let classSet = ['ant-btn'];
+    updateClassWithProp(classSet, type);
+    updateClassWithProp(classSet, shape);
+    updateClassWithProp(classSet, size);
+    if ('loading' in props && props.loading !== false) {
+      classSet.push(prefix + 'loading');
+    }
+    if (className) {
+      classSet.push(className);
+    }
+
+    const kids = React.Children.map(children, insertSpace);
+
+    return <button {...others} type="button" className={classSet.join(' ')} onClick={onClick}>
+      {kids}
+    </button>;
+  }
+}
+Button.defaultProps = {
+  onClick() {},
+};

components/button/demo/basic.md

@@ -1,29 +1,27 @@
-# 标准按钮
+# 按钮类型
 
-- order: 1 
+- order: 0
 
-为 `<button>` `<a>` 或 `<input>` 元素添加 `.ant-btn` 类即可使用 ant-design 提供的样式。
+按钮有三种类型：主按钮、次按钮、幽灵按钮。
 
-另外，通过使用下面的类可创建带有预定义样式的按钮，我们通过样式来显示重要程度的不同。
-
-`.ant-btn-primary` `.ant-btn-ghost`
-
-其中 `.ant-btn` 类定义了按钮的默认样式，语义上代表次按钮。
-
-**注**: 当按钮文字为两个字时，中间需要**间隔一个字符**。
+通过设置 `type` 为 `primary` `ghost` 可分别创建主按钮、幽灵按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
 
 ---
+ 
+````jsx
+var Button = antd.Button;
 
-````html
-<button class="ant-btn">Button</button>
-<a href="javascript:;" class="ant-btn" role="button">Link</a>
-<input class="ant-btn" type="button" value="Input" />
-<input class="ant-btn" type="submit" value="Submit" />
-
-<br>
-
-<!-- Styled Button -->
-<button class="ant-btn ant-btn-primary">主按钮</button>
-<button class="ant-btn">次按钮</button>
-<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
+React.render(<div>
+  <Button type="primary">主按钮</Button>
+  <Button>次按钮</Button>
+  <Button type="ghost">幽灵按钮</Button>
+</div>,
+document.getElementById('components-button-demo-basic'))
 ````
+
+<style>
+#components-button-demo-basic .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

components/button/demo/button-group.md

@@ -1,78 +1,86 @@
 # 按钮组合
 
-- order: 6
+- order: 5
 
-将一系列的 `.ant-btn` 放入 `.ant-btn-group` 的容器中。
+可以将多个 `Button` 放入 `ButtonGroup` 的容器中。
 
-按钮组合尺寸
-
-只要给 `.ant-btn-group` 加上 `.ant-btn-group-*` 类，即可设置不同的尺寸，目前支持大中小三种尺寸。
+通过设置 `size` 为 `lg` `sm` 分别把按钮组合设为大、小尺寸。若不设置 `size`，则尺寸为中。
 
 ---
 
-````html
+````jsx
+var Button = antd.Button;
+var ButtonGroup = antd.ButtonGroup;
+var Icon = antd.Icon;
+
+React.render(<div>
 <h4>基本组合</h4>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-primary">确 定</button>
-  <button class="ant-btn ant-btn-primary">取 消</button>
-</div>
-<div class="ant-btn-group">
-  <button class="ant-btn">左</button>
-  <button class="ant-btn">中</button>
-  <button class="ant-btn">右</button>
-</div>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-primary">左</button>
-  <button class="ant-btn ant-btn-ghost">中</button>
-  <button class="ant-btn ant-btn-ghost">中</button>
-  <button class="ant-btn">右</button>
-</div>
+<ButtonGroup>
+  <Button type="primary">确定</Button>
+  <Button type="primary">取消</Button>
+</ButtonGroup>
+<ButtonGroup>
+  <Button>左</Button>
+  <Button>中</Button>
+  <Button>右</Button>
+</ButtonGroup>
+<ButtonGroup>
+  <Button type="primary">左</Button>
+  <Button type="ghost">中</Button>
+  <Button type="ghost">中</Button>
+  <Button>右</Button>
+</ButtonGroup>
+  
 <h4>带图标按钮组合 </h4>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-left"></span>
-  <span>后 退</span>
-  </button>
-  <button class="ant-btn ant-btn-primary">
-  <span>前 进</span>
-  <span class="anticon anticon-right"></span>
-  </button>
-</div>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-cloud"></span>
-  </button>
-  <button class="ant-btn ant-btn-primary">
-  <span class="anticon anticon-cloud-download"></span>
-  </button>
-</div>
+<ButtonGroup>
+  <Button type="primary">
+    <Icon type="left" />
+    <span>后退</span>
+  </Button>
+  <Button type="primary">
+    前进
+    <Icon type="right" />
+  </Button>
+</ButtonGroup>
+<ButtonGroup>
+  <Button type="primary">
+    <Icon type="cloud" />
+  </Button>
+  <Button type="primary">
+    <Icon type="cloud-download" />
+  </Button>
+</ButtonGroup>
+  
 <h4>多个组合</h4>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-ghost">1</button>
-  <button class="ant-btn ant-btn-ghost">2</button>
-  <button class="ant-btn ant-btn-ghost">3</button>
-  <button class="ant-btn ant-btn-ghost">4</button>
-  <button class="ant-btn ant-btn-ghost">
-  <span>前 进</span>
-  <span class="anticon anticon-right"></span>
-  </button>
-</div>
+<ButtonGroup>
+  <Button type="ghost">1</Button>
+  <Button type="ghost">2</Button>
+  <Button type="ghost">3</Button>
+  <Button type="ghost">4</Button>
+  <Button type="ghost">
+    <span>前进</span>
+    <Icon type="right" />
+  </Button>
+</ButtonGroup>
+  
 <h4>尺寸</h4>
-<div class="ant-btn-group ant-btn-group-lg">
-  <button class="ant-btn ant-btn-ghost">大</button>
-  <button class="ant-btn ant-btn-ghost">大</button>
-  <button class="ant-btn ant-btn-ghost">大</button>
-</div>
-<div class="ant-btn-group">
-  <button class="ant-btn ant-btn-ghost">默 认</button>
-  <button class="ant-btn ant-btn-ghost">默 认</button>
-  <button class="ant-btn ant-btn-ghost">默 认</button>
-</div>
-<div class="ant-btn-group ant-btn-group-sm">
-  <button class="ant-btn ant-btn-ghost">小</button>
-  <button class="ant-btn ant-btn-ghost">小</button>
-  <button class="ant-btn ant-btn-ghost">小</button>
+<ButtonGroup size="lg">
+  <Button type="ghost">大</Button>
+  <Button type="ghost">大</Button>
+  <Button type="ghost">大</Button>
+</ButtonGroup>
+<ButtonGroup>
+  <Button type="ghost">默认</Button>
+  <Button type="ghost">默认</Button>
+  <Button type="ghost">默认</Button>
+</ButtonGroup>
+<ButtonGroup size="sm">
+  <Button type="ghost">小</Button>
+  <Button type="ghost">小</Button>
+  <Button type="ghost">小</Button>
+</ButtonGroup>
 </div>
+, document.getElementById('components-button-demo-button-group'));
 ````
 
 <style>
@@ -88,4 +96,12 @@
 .nico-insert-code .ant-btn {
   margin-bottom: 8px;
 }
+
+
+#components-button-demo-button-group .ant-btn-group {
+  margin-right: 8px;
+}
+#components-button-demo-button-group .ant-btn {
+  margin-bottom: 12px;
+}
 </style>

components/button/demo/icon.md

@@ -1,45 +1,58 @@
 # 图标按钮
 
-- order: 4
+- order: 6
 
-图标一般放在文字前面，也可以单独存在。
+`Button` 内可以嵌套图标，图标可以放在文字前、后，也可以单独存在。
 
 ---
 
-````html
-<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-primary ant-btn-lg">
-  <i class="anticon anticon-search"></i>
+````jsx
+var Button = antd.Button;
+var Icon = antd.Icon;
+
+React.render(<div>
+  <Button type="primary" shape="circle" size="lg">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary" size="lg">
+    <Icon type="search" />
   大按钮
-</button>
+  </Button>
 
-<button class="ant-btn ant-btn-primary ant-btn-circle">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-primary">
-  <i class="anticon anticon-search"></i>
+  <Button type="primary" shape="circle">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary">
+    <Icon type="search" />
   中按钮
-</button>
+  </Button>
 
-<button class="ant-btn ant-btn-primary ant-btn-circle ant-btn-sm">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-primary ant-btn-sm">
-  <i class="anticon anticon-search"></i>
+  <Button type="primary" shape="circle" size="sm">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary" size="sm">
+    <Icon type="search" />
   小按钮
-</button>
+  </Button>
 
-<p></p>
+  <br />
 
-<button class="ant-btn ant-btn-ghost ant-btn-circle-outline ant-btn-lg">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-ghost ant-btn-circle-outline">
-  <i class="anticon anticon-search"></i>
-</button>
-<button class="ant-btn ant-btn-circle-outline ant-btn-sm">
-  <i class="anticon anticon-search"></i>
-</button>
+  <Button type="ghost" shape="circle-outline" size="lg">
+    <Icon type="search" />
+  </Button>
+  <Button type="ghost" shape="circle-outline">
+    <Icon type="search" />
+  </Button>
+  <Button type="ghost" shape="circle-outline" size="sm">
+    <Icon type="search" />
+  </Button>
+</div>,
+document.getElementById('components-button-demo-icon'));
 ````
+
+<style>
+#components-button-demo-icon .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

components/button/demo/loading.md

@@ -1,12 +1,14 @@
 # 加载中
 
-- order: 7
+- order: 4
 
-加载按钮。最后一个按钮演示点击后进入加载状态。
+添加 `loading` 属性即可让按钮处于加载状态，最后一个按钮演示点击后进入加载状态。
 
 ---
 
 ````jsx
+var Button = antd.Button;
+
 var App = React.createClass({
   getInitialState() {
     return {
@@ -19,21 +21,20 @@ var App = React.createClass({
     });
   },
   render() {
-    var loadingClass = this.state.loading ? 'ant-btn-loading' : '';
     return <div>
-      <button className="ant-btn ant-btn-primary ant-btn-lg ant-btn-loading">
+      <Button type="primary" size="lg" loading>
         加载中
-      </button>
-      <button className="ant-btn ant-btn-primary ant-btn-loading">
+      </Button>
+      <Button type="primary" loading="true">
         加载中
-      </button>
-      <button className="ant-btn ant-btn-primary ant-btn-sm ant-btn-loading">
+      </Button>
+      <Button type="primary" size="sm" loading>
         加载中
-      </button>
+      </Button>
       <br />
-      <button className={'ant-btn ant-btn-primary ' + loadingClass} onClick={this.enterLoading}>
+      <Button type="primary" loading={this.state.loading} onClick={this.enterLoading}>
         点击变加载
-      </button>
+      </Button>
     </div>;
   }
 });

components/button/demo/menu.md

@@ -1,19 +0,0 @@
-# 菜单按钮
-
-- order: 5
-
-**注**: 下拉按钮的 icon 大小统一成 **10px**。
-
-> 更多交互，详见 [Dropdown 下拉菜单](http://ant.design/components/dropdown/)。
-
----
-
-````html
-<button class="ant-btn ant-btn-primary ant-btn-menu">
-  <span>菜单按钮</span>
-  <span class="anticon anticon-down"></span>
-</button>
-<button class="ant-btn ant-btn-ghost ant-btn-circle ant-btn-menu">
-  <span class="anticon anticon-down"></span>
-</button>
-````

components/button/demo/shape.md

@@ -0,0 +1,42 @@
+# 按钮形状
+
+- order: 1
+
+通过设置 `shape` 为 `circle` `circle-outline`，可以把按钮形状设为圆形，并且 `circle-outline` 在 hover 时会有动画效果。
+
+---
+
+````jsx
+var Button = antd.Button;
+var Icon = antd.Icon;
+
+React.render(<div>
+  <Button type="primary" shape="circle" size="lg">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary" shape="circle">
+    <Icon type="search" />
+  </Button>
+  <Button type="primary" shape="circle" size="sm">
+    <Icon type="search" />
+  </Button>
+  <br />
+  <Button type="ghost" shape="circle-outline" size="lg">
+    <Icon type="search" />
+  </Button>
+  <Button type="ghost" shape="circle-outline">
+    <Icon type="search" />
+  </Button>
+  <Button type="ghost" shape="circle-outline" size="sm">
+    <Icon type="search" />
+  </Button>
+</div>
+, document.getElementById('components-button-demo-shape'));
+````
+
+<style>
+#components-button-demo-shape .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

components/button/demo/size.md

@@ -2,14 +2,25 @@
 
 - order: 2
 
-提供 大 中 小 三种尺寸。
+按钮有大、中、小三种尺寸。
 
-使用 `.ant-btn-lg` `.ant-btn-sm` 即可获得大 小尺寸，默认尺寸为中。
+通过设置 `size` 为 `lg` `sm` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
 
 ---
 
-````html
-<button class="ant-btn ant-btn-primary ant-btn-lg">大号按钮</button>
-<button class="ant-btn ant-btn-primary">中号按钮(默认)</button>
-<button class="ant-btn ant-btn-primary ant-btn-sm">小号按钮</button>
+````jsx
+var Button = antd.Button;
+
+React.render(<div>
+  <Button type="primary" size="lg">大号按钮</Button>
+  <Button type="primary">中号按钮(默认)</Button>
+  <Button type="primary" size="sm">小号按钮</Button>
+</div>
+, document.getElementById('components-button-demo-size'));
 ````
+
+<style>
+#components-button-demo-size .ant-btn {
+  margin-right: 8px;
+}
+</style>

components/button/demo/status.md

@@ -2,19 +2,31 @@
 
 - order: 3
 
-通过背景色透明度的变化来体现不同的操作状态，移入或点击元素可以查看状态。
-
-失效状态：为 `<button>` 元素添加 `disabled` 属性，即可体现。
+添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。如果只是想使用按钮 disabled 后的样式，以便继续处理用户的点击事件，则使用 `.disabled` class 而非 `disabled` 属性。
 
 ---
 
-````html
-<button class="ant-btn ant-btn-primary">主按钮</button>
-<button class="ant-btn ant-btn-primary disabled">主按钮(失效)</button>
-<p></p>
-<button class="ant-btn">次按钮</button>
-<button class="ant-btn disabled">次按钮(失效)</button>
-<p></p>
-<button class="ant-btn ant-btn-ghost">幽灵按钮</button>
-<button class="ant-btn ant-btn-ghost disabled">幽灵按钮(失效)</button>
+````jsx
+var Button = antd.Button;
+
+React.render(<div>
+  <h4>使用 `disabled` 属性</h4>
+  <Button type="primary">主按钮</Button>
+  <Button type="primary" disabled>主按钮(失效)</Button>
+  <br />
+  <Button>次按钮</Button>
+  <Button disabled>次按钮(失效)</Button>
+  <br />
+  <h4>使用 `.disabled` class</h4>
+  <Button type="ghost">幽灵按钮</Button>
+  <Button type="ghost" className="disabled">幽灵按钮(失效)</Button>
+</div>
+, document.getElementById('components-button-demo-status'));
 ````
+
+<style>
+#components-button-demo-status .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 12px;
+}
+</style>

components/button/index.jsx

@@ -0,0 +1,7 @@
+import Button from './button';
+import ButtonGroup from './button-group';
+
+export {
+  Button,
+  ButtonGroup,
+};

components/button/index.md

@@ -15,27 +15,16 @@
 
 ## 如何使用
 
-- 按钮的基础样式为 `ant-btn`。
+- 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`
 
-- 通过类组装的形式来产生不同的按钮样式，推荐遵循如下顺序：
-```
-  .ant-btn
-  	↓
-  .ant-btn-primary | .ant-btn-ghost
-  	↓
-  .ant-btn-circle | .ant-btn-circle-outline
-  	↓
-  .ant-btn-lg | .ant-btn-sm
- ```
+- 按钮的属性说明如下：
 
-- 按钮的样式参数说明如下：
+属性 | 说明 | 类型 | 默认值
+-----|-----|-----|------
+type | 设置按钮类型，可选值为 `primary` `ghost` 或者不设 | Enum | undefined
+shape | 设置按钮形状，可选值为 `circle` `circle-outline` 或者不设 | Enum | undefined
+size | 设置按钮大小，可选值为 `sm` `lg` 或者不设 | Enum | undefined
+loading | 设置按钮载入状态，存在为 `true`，不存在为 `false`，或直接设置值，如：`loading="true"` | Bool | false
+onClick | `click` 事件的 handler | Function | `function() {}`
 
-| 类名  | 说明 |
-| ------------- | ------------- |
-| `.ant-btn`  | 按钮基础样式。 |
-| `.ant-btn-primary` `.ant-btn-ghost`  | 使用这些列出的类可以快速创建一个带有预定义样式的按钮。  |
-| `.ant-btn-circle` `.ant-btn-circle-outline`  | 用于创建圆形按钮，`.ant-btn-circle-outline` 为描边按钮。 |
-| `.ant-btn-lg` `.ant-btn-sm`  | 定义按钮大小尺寸，目前提供三种尺寸：大中小，默认为中。 |
-| `.ant-btn-group` | 按钮组合，通过按钮组容器把一组按钮放在同一行里。 |
-
-> 当按钮只有两个汉字时，需要在两字中加空格。
+- `<Button>Hello world!</Button>` 最终会被渲染为 `<button type="button">Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`

index.js

@@ -44,6 +44,8 @@ const antd = {
   Badge: require('./components/badge'),
   Menu: require('./components/menu'),
   Timeline: require('./components/timeline'),
+  Button: require('./components/button').Button,
+  ButtonGroup: require('./components/button').ButtonGroup,
   Icon: require('./components/iconfont')
 };
 

style/components/button.less

@@ -81,4 +81,9 @@
   &-group {
     .btn-group(@btn-prefix-cls);
   }
+
+  // To ensure that a space will be placed between character and `Icon`.
+  > .@{iconfont-css-prefix} + span, > span + .@{iconfont-css-prefix} {
+    margin-left: 0.5em;
+  }
 }