Button: add circle attribute (#10359)

* Button: add circle attribute

* test: modify button round

* Button: update docs for round & circle

* Button: fix disabled docs

* Button: fix button margin

* Button: fix button margin

examples/docs/en-US/button.md

@@ -3,6 +3,9 @@
     .el-row {
       margin-bottom: 10px;
     }
+    .el-button {
+      margin-bottom: 20px;
+    }
     .el-button + .el-button {
       margin-left: 10px;
     }
@@ -26,7 +29,7 @@ Commonly used button.
 
 ### Basic usage
 
-:::demo Use `type`, `plain` and `round` to define Button's style.
+:::demo Use `type`, `plain`, `round` and `circle` to define Button's style.
 
 ```html
 <div>
@@ -38,7 +41,7 @@ Commonly used button.
   <el-button type="danger">Danger</el-button>
 </div>
 
-<div style="margin: 20px 0">
+<div>
   <el-button plain>Plain</el-button>
   <el-button type="primary" plain>Primary</el-button>
   <el-button type="success" plain>Success</el-button>
@@ -55,6 +58,15 @@ Commonly used button.
   <el-button type="warning" round>Warning</el-button>
   <el-button type="danger" round>Danger</el-button>
 </div>
+
+<div>
+  <el-button icon="el-icon-search" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</div>
 ```
 :::
 
@@ -74,7 +86,7 @@ The `disabled` attribute determines if the button is disabled.
   <el-button type="danger" disabled>Danger</el-button>
 </div>
 
-<div style="margin-top: 20px">
+<div>
   <el-button plain disabled>Plain</el-button>
   <el-button type="primary" plain disabled>Primary</el-button>
   <el-button type="success" plain disabled>Success</el-button>
@@ -154,7 +166,7 @@ Besides default size, Button component provides three additional sizes for you t
   <el-button size="small">Small</el-button>
   <el-button size="mini">Mini</el-button>
 </div>
-<div style="margin-top: 20px">
+<div>
   <el-button round>Default</el-button>
   <el-button size="medium" round>Medium</el-button>
   <el-button size="small" round>Small</el-button>
@@ -170,6 +182,7 @@ Besides default size, Button component provides three additional sizes for you t
 | type     | button type   | string    |   primary / success / warning / danger / info / text |     —    |
 | plain     | determine whether it's a plain button   | boolean    | — | false   |
 | round     | determine whether it's a round button   | boolean    | — | false   |
+| circle     | determine whether it's a circle button   | boolean    | — | false   |
 | loading   | determine whether it's loading   | boolean    | — | false   |
 | disabled  | disable the button    | boolean   | —   | false   |
 | icon  | icon class name | string   |  —  |  —  |

examples/docs/es/button.md

@@ -3,6 +3,9 @@
     .el-row {
       margin-bottom: 10px;
     }
+    .el-button {
+      margin-bottom: 20px;
+    }
     .el-button + .el-button {
       margin-left: 10px;
     }
@@ -26,7 +29,7 @@ Botones comúnmente usados.
 
 ### Uso básico
 
-:::demo Use `type`, `plain` y `round` para definir estilos a los botones.
+:::demo Use `type`, `plain`,`round` y `circle` para definir estilos a los botones.
 
 ```html
 <div>
@@ -38,7 +41,7 @@ Botones comúnmente usados.
   <el-button type="danger">Danger</el-button>
 </div>
 
-<div style="margin: 20px 0">
+<div>
   <el-button plain>Plain</el-button>
   <el-button type="primary" plain>Primary</el-button>
   <el-button type="success" plain>Success</el-button>
@@ -55,6 +58,15 @@ Botones comúnmente usados.
   <el-button type="warning" round>Warning</el-button>
   <el-button type="danger" round>Danger</el-button>
 </div>
+
+<div>
+  <el-button icon="el-icon-search" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</div>
 ```
 :::
 
@@ -74,7 +86,7 @@ El atributo `disabled` determina su un botón esta deshabilitado.
   <el-button type="danger" disabled>Danger</el-button>
 </div>
 
-<div style="margin-top: 20px">
+<div>
   <el-button plain disabled>Plain</el-button>
   <el-button type="primary" plain disabled>Primary</el-button>
   <el-button type="success" plain disabled>Success</el-button>
@@ -154,7 +166,7 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
   <el-button size="small">Small</el-button>
   <el-button size="mini">Mini</el-button>
 </div>
-<div style="margin-top: 20px">
+<div>
   <el-button round>Default</el-button>
   <el-button size="medium" round>Medium</el-button>
   <el-button size="small" round>Small</el-button>
@@ -170,6 +182,7 @@ Además del tamaño por defecto, el componente Button provee tres tamaños adici
 | type        | tipo de botón                            | string  | primary / success / warning / danger / info / text | —           |
 | plain       | determinar si es o no un botón plano     | boolean | —                                        | false       |
 | round       | determinar si es o no un botón redondo   | boolean | —                                        | false       |
+| circle      | determinar si es o no un botón circle    | boolean | —                                        | false       |
 | loading     | determinar si es o no un botón de descarga | boolean | —                                        | false       |
 | disabled    | deshabilitar el botón                    | boolean | —                                        | false       |
 | icon        | nombre de la clase del icono             | string  | —                                        | —           |

examples/docs/zh-CN/button.md

@@ -3,6 +3,9 @@
     .el-row {
       margin-bottom: 10px;
     }
+    .el-button {
+      margin-bottom: 20px;
+    }
     .el-button + .el-button {
       margin-left: 10px;
     }
@@ -27,7 +30,7 @@
 
 基础的按钮用法。
 
-:::demo 使用`type`、`plain`和`round`属性来定义 Button 的样式。
+:::demo 使用`type`、`plain`、`round`和`circle`属性来定义 Button 的样式。
 
 ```html
 <div>
@@ -39,7 +42,7 @@
   <el-button type="danger">危险按钮</el-button>
 </div>
 
-<div style="margin: 20px 0">
+<div>
   <el-button plain>朴素按钮</el-button>
   <el-button type="primary" plain>主要按钮</el-button>
   <el-button type="success" plain>成功按钮</el-button>
@@ -49,13 +52,22 @@
 </div>
 
 <div>
-  <el-button round>圆形按钮</el-button>
+  <el-button round>圆角按钮</el-button>
   <el-button type="primary" round>主要按钮</el-button>
   <el-button type="success" round>成功按钮</el-button>
   <el-button type="info" round>信息按钮</el-button>
   <el-button type="warning" round>警告按钮</el-button>
   <el-button type="danger" round>危险按钮</el-button>
 </div>
+
+<div>
+  <el-button icon="el-icon-search" circle></el-button>
+  <el-button type="primary" icon="el-icon-edit" circle></el-button>
+  <el-button type="success" icon="el-icon-check" circle></el-button>
+  <el-button type="info" icon="el-icon-message" circle></el-button>
+  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
+  <el-button type="danger" icon="el-icon-delete" circle></el-button>
+</div>
 ```
 :::
 
@@ -75,7 +87,7 @@
   <el-button type="danger" disabled>危险按钮</el-button>
 </div>
 
-<div style="margin-top: 20px">
+<div>
   <el-button plain disabled>朴素按钮</el-button>
   <el-button type="primary" plain disabled>主要按钮</el-button>
   <el-button type="success" plain disabled>成功按钮</el-button>
@@ -155,7 +167,7 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
   <el-button size="small">小型按钮</el-button>
   <el-button size="mini">超小按钮</el-button>
 </div>
-<div style="margin-top: 20px">
+<div>
   <el-button round>默认按钮</el-button>
   <el-button size="medium" round>中等按钮</el-button>
   <el-button size="small" round>小型按钮</el-button>
@@ -170,7 +182,8 @@ Button 组件提供除了默认值以外的三种尺寸，可以在不同场景
 | size     | 尺寸   | string  |   medium / small / mini            |    —     |
 | type     | 类型   | string    |   primary / success / warning / danger / info / text |     —    |
 | plain     | 是否朴素按钮   | boolean    | — | false   |
-| round     | 是否圆形按钮   | boolean    | — | false   |
+| round     | 是否圆角按钮   | boolean    | — | false   |
+| circle     | 是否圆形按钮   | boolean    | — | false   |
 | loading     | 是否加载中状态   | boolean    | — | false   |
 | disabled  | 是否禁用状态    | boolean   | —   | false   |
 | icon  | 图标类名 | string   |  —  |  —  |

packages/button/src/button.vue

@@ -12,7 +12,8 @@
         'is-disabled': buttonDisabled,
         'is-loading': loading,
         'is-plain': plain,
-        'is-round': round
+        'is-round': round,
+        'is-circle': circle
       }
     ]"
   >
@@ -52,7 +53,8 @@
       disabled: Boolean,
       plain: Boolean,
       autofocus: Boolean,
-      round: Boolean
+      round: Boolean,
+      circle: Boolean
     },
 
     computed: {

packages/theme-chalk/src/button.scss

@@ -117,6 +117,10 @@
     border-radius: 20px;
     padding: 12px 23px;
   }
+  @include when(circle) {
+    border-radius: 50%;
+    padding: 12px;
+  }
   @include m(primary) {
     @include button-variant($--button-primary-color, $--button-primary-fill, $--button-primary-border);
   }

test/unit/specs/button.spec.js

@@ -57,6 +57,20 @@ describe('Button', () => {
     let buttonElm = vm.$el;
     expect(buttonElm.classList.contains('is-plain')).to.be.true;
   });
+  it('round', () => {
+    vm = createTest(Button, {
+      round: true
+    }, true);
+    let buttonElm = vm.$el;
+    expect(buttonElm.classList.contains('is-round')).to.be.true;
+  });
+  it('circle', () => {
+    vm = createTest(Button, {
+      circle: true
+    }, true);
+    let buttonElm = vm.$el;
+    expect(buttonElm.classList.contains('is-circle')).to.be.true;
+  });
   it('click', done => {
     let result;
     vm = createVue({