Merge pull request #19837 from ant-design/fix-button-demo

feat: 4.0 danger button
ant-design · Nov 29, 2019 · 4357444 · 4357444
2 parents 5ef6b04 + e8dd412
commit 4357444
Show file tree

Hide file tree

Showing 21 changed files with 275 additions and 605 deletions.
diff --git a/components/button/__tests__/__snapshots__/demo.test.js.snap b/components/button/__tests__/__snapshots__/demo.test.js.snap
diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -83,6 +83,7 @@ export interface BaseButtonProps {
   prefixCls?: string;
   className?: string;
   ghost?: boolean;
+  danger?: boolean;
   block?: boolean;
   children?: React.ReactNode;
 }
@@ -218,6 +219,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
     const {
       prefixCls: customizePrefixCls,
       type,
+      danger,
       shape,
       size,
       className,
@@ -257,6 +259,7 @@ class Button extends React.Component<ButtonProps, ButtonState> {
       [`${prefixCls}-background-ghost`]: ghost,
       [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
       [`${prefixCls}-block`]: block,
+      [`${prefixCls}-dangerous`]: !!danger,
     });
 
     const iconNode = loading ? <LoadingOutlined /> : icon || null;

diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
@@ -21,7 +21,13 @@ ReactDOM.render(
     <Button type="primary">Primary</Button>
     <Button>Default</Button>
     <Button type="dashed">Dashed</Button>
-    <Button type="danger">Danger</Button>
+    <Button type="primary" danger>
+      Danger
+    </Button>
+    <Button danger>Danger Default</Button>
+    <Button type="link" danger>
+      Danger Link
+    </Button>
     <Button type="link">Link</Button>
   </div>,
   mountNode,

diff --git a/components/button/demo/block.md b/components/button/demo/block.md
@@ -25,9 +25,15 @@ ReactDOM.render(
     <Button type="dashed" block>
       Dashed
     </Button>
-    <Button type="danger" block>
+    <Button type="primary" danger block>
       Danger
     </Button>
+    <Button danger block>
+      Danger Default
+    </Button>
+    <Button type="link" danger block>
+      Danger Link
+    </Button>
     <Button type="link" block>
       Link
     </Button>

diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md
diff --git a/components/button/demo/disabled.md b/components/button/demo/disabled.md
@@ -35,6 +35,18 @@ ReactDOM.render(
     <Button type="link" disabled>
       Link(disabled)
     </Button>
+    <br />
+    <Button type="link" danger>
+      Danger Link
+    </Button>
+    <Button type="link" danger disabled>
+      Danger Link(disabled)
+    </Button>
+    <br />
+    <Button danger>Danger Default</Button>
+    <Button danger disabled>
+      Danger Default(disabled)
+    </Button>
     <div style={{ padding: '8px 8px 0 8px', background: 'rgb(190, 200, 200)' }}>
       <Button ghost>Ghost</Button>
       <Button ghost disabled>

diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
@@ -22,12 +22,15 @@ ReactDOM.render(
       Primary
     </Button>
     <Button ghost>Default</Button>
-    <Button type="dashed" ghost>
-      Dashed
-    </Button>
-    <Button type="danger" ghost>
+    <Button type="primary" danger ghost>
       danger
     </Button>
+    <Button danger ghost>
+      Danger Default
+    </Button>
+    <Button type="link" danger ghost>
+      Danger Link
+    </Button>
     <Button type="link" ghost>
       link
     </Button>

diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md
@@ -18,24 +18,32 @@ title:
 If you want specific control over the positioning and placement of the `Icon`, then that should be done by placing the `Icon` component within the `Button` rather than using the `icon` property.
 
 ```jsx
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <div>
-    <Button type="primary" shape="circle" icon={<SearchOutlined />} />
+    <Tooltip title="search">
+      <Button type="primary" shape="circle" icon={<SearchOutlined />} />
+    </Tooltip>
     <Button type="primary" shape="circle">
       A
     </Button>
     <Button type="primary" icon={<SearchOutlined />}>
       Search
     </Button>
-    <Button shape="circle" icon={<SearchOutlined />} />
+    <Tooltip title="search">
+      <Button shape="circle" icon={<SearchOutlined />} />
+    </Tooltip>
     <Button icon={<SearchOutlined />}>Search</Button>
     <br />
-    <Button shape="circle" icon={<SearchOutlined />} />
+    <Tooltip title="search">
+      <Button shape="circle" icon={<SearchOutlined />} />
+    </Tooltip>
     <Button icon={<SearchOutlined />}>Search</Button>
-    <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
+    <Tooltip title="search">
+      <Button type="dashed" shape="circle" icon={<SearchOutlined />} />
+    </Tooltip>
     <Button type="dashed" icon={<SearchOutlined />}>
       Search
     </Button>

diff --git a/components/button/demo/loading.md b/components/button/demo/loading.md
@@ -51,10 +51,6 @@ class App extends React.Component {
         >
           Click me!
         </Button>
-        <br />
-        <Button type="primary" loading />
-        <Button type="primary" shape="circle" loading />
-        <Button type="danger" shape="round" loading />
       </div>
     );
   }

diff --git a/components/button/demo/size.md b/components/button/demo/size.md
@@ -19,7 +19,7 @@ If a large or small button is desired, set the `size` property to either `large`
 
 ```jsx
 import { Button, Radio } from 'antd';
-import { DownloadOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
+import { DownloadOutlined } from '@ant-design/icons';
 
 class ButtonSize extends React.Component {
   state = {
@@ -44,13 +44,20 @@ class ButtonSize extends React.Component {
         <Button type="primary" size={size}>
           Primary
         </Button>
-        <Button size={size}>Normal</Button>
+        <Button size={size}>Default</Button>
         <Button type="dashed" size={size}>
           Dashed
         </Button>
-        <Button type="danger" size={size}>
+        <br />
+        <Button type="primary" danger size={size}>
           Danger
         </Button>
+        <Button danger size={size}>
+          Danger Default
+        </Button>
+        <Button danger type="link" size={size}>
+          Danger Link
+        </Button>
         <Button type="link" size={size}>
           Link
         </Button>
@@ -64,17 +71,6 @@ class ButtonSize extends React.Component {
         <Button type="primary" icon={<DownloadOutlined />} size={size}>
           Download
         </Button>
-        <br />
-        <Button.Group size={size}>
-          <Button type="primary">
-            <LeftOutlined />
-            Backward
-          </Button>
-          <Button type="primary">
-            Forward
-            <RightOutlined />
-          </Button>
-        </Button.Group>
       </div>
     );
   }

diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -25,9 +25,10 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
 | shape | can be set to `circle`, `round` or omitted | string | - |  |
 | size | can be set to `small` `large` or omitted | string | `default` |  |
 | target | same as target attribute of a, works when href is specified | string | - |  |
-| type | can be set to `primary` `ghost` `dashed` `danger` `link` or omitted (meaning `default`) | string | `default` |  |
+| type | can be set to `primary` `ghost` `dashed` `link` or omitted (meaning `default`) | string | `default` |  |
 | onClick | set the handler to handle `click` event | (event) => void | - |  |
 | block | option to fit button width to its parent width | boolean | `false` |  |
+| danger | set the danger status of button | boolean | `false` |  |
 
 It accepts all props which native buttons support.
 

diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -28,9 +28,10 @@ subtitle: 按钮
 | shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |  |
 | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
-| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link` 或者不设 | string | - |  |
+| type | 设置按钮类型，可选值为 `primary` `dashed` `link` 或者不设 | string | - |  |
 | onClick | 点击按钮时的回调 | (event) => void | - |  |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |  |
+| danger | 设置危险按钮 | boolean | `false` |  |
 
 支持原生 button 的其他所有属性。
 

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -63,6 +63,8 @@
     .btn-dashed;
   }
 
+  // type="danger" will deprecated
+  // use danger instead
   &-danger {
     .btn-danger;
   }
@@ -71,6 +73,18 @@
     .btn-link;
   }
 
+  &-dangerous {
+    .btn-danger-default;
+  }
+
+  &-dangerous&-primary {
+    .btn-danger;
+  }
+
+  &-dangerous&-link {
+    .btn-danger-link;
+  }
+
   &-icon-only {
     .btn-square(@btn-prefix-cls);
   }
@@ -169,6 +183,14 @@
     .button-variant-ghost(@btn-danger-border);
   }
 
+  &-background-ghost&-dangerous {
+    .button-variant-ghost(@btn-danger-border);
+  }
+
+  &-background-ghost&-dangerous&-link {
+    .button-variant-ghost(@btn-danger-border, transparent);
+  }
+
   &-background-ghost&-link {
     .button-variant-ghost(@link-color; transparent);
 

diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
@@ -225,6 +225,36 @@
 .btn-danger() {
   .button-variant-primary(@btn-danger-color, @btn-danger-bg);
 }
+// danger default button style
+.btn-danger-default() {
+  .button-color(@error-color, @btn-default-bg, @error-color);
+  &:hover,
+  &:focus {
+    .button-color(
+      ~`colorPalette('@{error-color}', 5) `; @btn-default-bg; ~`colorPalette('@{error-color}', 5) `
+    );
+  }
+  &:active,
+  &.active {
+    .button-color(
+      ~`colorPalette('@{error-color}', 7) `; @btn-default-bg; ~`colorPalette('@{error-color}', 7) `
+    );
+  }
+  .button-disabled();
+}
+// danger link button style
+.btn-danger-link() {
+  .button-variant-other(@error-color, transparent, transparent);
+  box-shadow: none;
+  &:hover,
+  &:focus {
+    .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
+  }
+  &:active {
+    .button-color(~`colorPalette('@{error-color}', 7) `; transparent; transparent);
+  }
+  .button-disabled(@disabled-color; transparent; transparent);
+}
 // link button style
 .btn-link() {
   .button-variant-other(@link-color, transparent, transparent);

diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -248,7 +248,6 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
         <a
           style="margin-left:8px;font-size:12px"
         >
-          Collapse 
           <span
             aria-label="down"
             class="anticon anticon-down"
@@ -269,6 +268,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
               />
             </svg>
           </span>
+           Collapse
         </a>
       </div>
     </div>