More types of Button (#4679)

* Add Button[ghost] property, close #4625 * Add danger button close #1308 * update API doc about ghost and danger property
ant-design · Jan 23, 2017 · f850993 · imhele · Jan 26, 2019 · f850993
1 parent 720ea36
commit f850993
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 26 deletions.
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
@@ -15,17 +15,17 @@ exports[`test renders ./components/button/demo/basic.md correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-ghost"
+    class="ant-btn ant-btn-dashed"
     type="button">
     <span>
-      Ghost
+      Dashed
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-dashed"
+    class="ant-btn ant-btn-danger"
     type="button">
     <span>
-      Dashed
+      Danger
     </span>
   </button>
 </div>
@@ -221,6 +221,33 @@ exports[`test renders ./components/button/demo/disabled.md correctly 1`] = `
 </div>
 `;
 
+exports[`test renders ./components/button/demo/ghost.md correctly 1`] = `
+<div
+  style="background:rgb(190, 200, 200);padding:26px 16px 16px;">
+  <button
+    class="ant-btn ant-btn-primary ant-btn-background-ghost"
+    type="button">
+    <span>
+      Primary Ghost
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-background-ghost"
+    type="button">
+    <span>
+      Default Ghost
+    </span>
+  </button>
+  <button
+    class="ant-btn ant-btn-dashed ant-btn-background-ghost"
+    type="button">
+    <span>
+      Dashed Ghost
+    </span>
+  </button>
+</div>
+`;
+
 exports[`test renders ./components/button/demo/icon.md correctly 1`] = `
 <div>
   <button

diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -24,7 +24,7 @@ function insertSpace(child) {
   return child;
 }
 
-export type ButtonType = "primary" | "ghost" | "dashed"
+export type ButtonType = "primary" | "ghost" | "dashed" | "danger"
 export type ButtonShape = 'circle' | 'circle-outline'
 export type ButtonSize = 'small' | 'large'
 
@@ -41,6 +41,7 @@ export interface ButtonProps {
   style?: React.CSSProperties;
   prefixCls?: string;
   className?: string;
+  ghost?: boolean;
 }
 
 export default class Button extends React.Component<ButtonProps, any> {
@@ -49,6 +50,7 @@ export default class Button extends React.Component<ButtonProps, any> {
   static defaultProps = {
     prefixCls: 'ant-btn',
     loading: false,
+    ghost: false,
   };
 
   static propTypes = {
@@ -101,7 +103,9 @@ export default class Button extends React.Component<ButtonProps, any> {
   }
 
   render() {
-    const { type, shape, size = '', className, htmlType, children, icon, loading, prefixCls, ...others } = this.props;
+    const {
+      type, shape, size = '', className, htmlType, children, icon, loading, prefixCls, ghost, ...others,
+    } = this.props;
 
     // large => lg
     // small => sm
@@ -116,6 +120,7 @@ export default class Button extends React.Component<ButtonProps, any> {
       [`${prefixCls}-${sizeCls}`]: sizeCls,
       [`${prefixCls}-icon-only`]: !children && icon,
       [`${prefixCls}-loading`]: loading,
+      [`${prefixCls}-background-ghost`]: ghost,
     }, className);
 
     const iconType = loading ? 'loading' : icon;

diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
@@ -7,19 +7,15 @@ title:
 
 ## zh-CN
 
-按钮有四种类型：主按钮、次按钮、幽灵按钮、虚线按钮。
+按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。
 
-通过设置 `type` 为 `primary` `ghost` `dashed` 可分别创建主按钮、幽灵按钮、虚线按钮，若不设置 `type` 值则为次按钮。不同的样式可以用来区别其重要程度。
-
-主按钮和次按钮可独立使用，幽灵按钮用于和主按钮组合。需要强引导用主按钮，切记主按钮在同一个操作区域最多出现一次。
+> `danger` 在 `[email protected]` 后支持。
 
 ## en-US
 
-There are primary button, default button, ghost button and dashed button in antd.
-
-`type` can be set as `primary` or `ghost` or `dashed`, in order to create primary button or ghost button or dashed button. If nothing is provided to `type`, we will get default button. Users can tell the significance of button from it's appearance.
+There are `primary` button, `default` button, `dashed` button and `danger` button in antd.
 
-Primary button and default button can be used without other button, but ghost button must be used with primary button.
+> `danger` is supported after `[email protected]`.
 
 ````__react
 import { Button } from 'antd';
@@ -28,8 +24,8 @@ ReactDOM.render(
   <div>
     <Button type="primary">Primary</Button>
     <Button>Default</Button>
-    <Button type="ghost">Ghost</Button>
     <Button type="dashed">Dashed</Button>
+    <Button type="danger">Danger</Button>
   </div>
 , mountNode);
 ````
diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md
@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 title:
   zh-CN: 按钮组合
   en-US: Button Group

diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
@@ -0,0 +1,26 @@
+---
+order: 8
+title:
+  zh-CN: 幽灵按钮
+  en-US: Ghost Button
+---
+
+## zh-CN
+
+幽灵按钮将其他按钮的内容反色，背景变为透明，常用在有色背景上。
+
+## en-US
+
+`ghost` property will make button's background transparent, it is common used in colored background.
+
+````__react
+import { Button } from 'antd';
+
+ReactDOM.render(
+  <div style={{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }}>
+    <Button type="primary" ghost>Primary Ghost</Button>
+    <Button ghost>Default Ghost</Button>
+    <Button type="dashed" ghost>Dashed Ghost</Button>
+  </div>
+, mountNode);
+````
diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 5
 title:
   zh-CN: 多个按钮组合
   en-US: Multiple Buttons

diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -16,13 +16,14 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 
 Property | Description | Type | Default
 -----|-----|-----|------
-type | can be set to `primary` `ghost` `dashed` or omitted | string | -
+type | can be set to `primary` `dashed` `danger`(added in 2.7) or omitted | string | "default"
 htmlType | to set the original `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
 icon | set the icon of button, see: Icon component | string | -
 shape | can be set to `circle` or omitted | string | -
 size | can be set to `small` `large` or omitted | string | `default`
 loading | to set the loading status of button | boolean | false
 onClick | set the handler to handle `click` event | function | -
+ghost | make background transparent and invert text and border color, added in 2.7 | boolean | false
 
 `<Button>Hello world!</Button>` will be rendered into `<button>Hello world!</button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.
 

diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -19,13 +19,14 @@ subtitle: 按钮
 
 属性 | 说明 | 类型 | 默认值
 -----|-----|-----|------
-type | 设置按钮类型，可选值为 `primary` `ghost` `dashed` 或者不设 | string | -
+type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | -
 htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
 icon | 设置按钮的图标类型 | string | -
 shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | -
 size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
 loading | 设置按钮载入状态 | boolean | false
 onClick | `click` 事件的 handler | function | -
+ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false
 
 `<Button>Hello world!</Button>` 最终会被渲染为 `<button>Hello world!</button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`。
 

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -4,6 +4,11 @@
 
 @btn-prefix-cls: ~"@{ant-prefix}-btn";
 
+// for compatibile
+@btn-ghost-color        : @text-color;
+@btn-ghost-bg           : transparent;
+@btn-ghost-border       : @border-color-base;
+
 // Button styles
 // -----------------------------
 .@{btn-prefix-cls} {
@@ -48,6 +53,10 @@
     .btn-dashed;
   }
 
+  &-danger {
+    .btn-danger;
+  }
+
   &-circle,
   &-circle-outline {
     .btn-circle(@btn-prefix-cls);
@@ -117,6 +126,17 @@
     animation: buttonEffect 0.36s ease-out forwards;
     display: block;
   }
+
+  &-background-ghost {
+    background: transparent!important;
+    border-color: #fff;
+    color: #fff;
+  }
+
+  &-primary&-background-ghost {
+    color: @primary-color;
+    border-color: @primary-color;
+  }
 }
 
 @keyframes buttonEffect {

diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
@@ -177,12 +177,17 @@
   .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
 }
 
-// ghost button style
+// dashed button style
 .btn-dashed() {
-  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
+  .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
   border-style: dashed;
 }
 
+// danger button style
+.btn-danger() {
+  .button-variant-primary(@btn-danger-color, @btn-danger-bg);
+}
+
 // circle button: the content only contains icon
 .btn-circle(@btnClassName: btn) {
   .square(@btn-circle-size);

diff --git a/components/style/themes/default.less b/components/style/themes/default.less
@@ -93,15 +93,13 @@
 
 @btn-primary-color      : #fff;
 @btn-primary-bg         : @primary-color;
-@btn-group-border       : @primary-7;
 
 @btn-default-color      : @text-color;
-@btn-default-bg         : @background-color-base;
+@btn-default-bg         : #fff;
 @btn-default-border     : @border-color-base;
 
-@btn-ghost-color        : @text-color;
-@btn-ghost-bg           : transparent;
-@btn-ghost-border       : @border-color-base;
+@btn-danger-color      : #fff;
+@btn-danger-bg         : @red-6;
 
 @btn-disable-color      : @disabled-color;
 @btn-disable-bg         : @background-color-base;
@@ -116,6 +114,8 @@
 @btn-circle-size-lg     : 32px;
 @btn-circle-size-sm     : 22px;
 
+@btn-group-border       : @primary-7;
+
 // Media queries breakpoints
 // Extra small screen / phone
 @screen-xs              : 480px;