feat(Button): add accept warning and danger button type (#40)

webapp-suite · Jan 27, 2019 · fc14984 · fc14984
1 parent 2900e55
commit fc14984
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 10 deletions.
diff --git a/src/components/Button/docs/Button.dox b/src/components/Button/docs/Button.dox
@@ -8,11 +8,11 @@ const ButtonDefault = () => {
 }
 
 /**
- * @title 按钮类型
+ * @title 主次按钮
  */
 import Button from 'earth-ui/lib/Button'
 
-const ButtonType = () => {
+const ButtonPST = () => {
   return (
     <div>
       <Button type="primary">Primary</Button>
@@ -22,6 +22,21 @@ const ButtonType = () => {
   )
 }
 
+/**
+ * @title 颜色按钮
+ */
+import Button from 'earth-ui/lib/Button'
+
+const ButtonColor = () => {
+  return (
+    <div>
+      <Button type="accept">Accept</Button>
+      <Button type="warning">warning</Button>
+      <Button type="danger">Danger</Button>
+    </div>
+  )
+}
+
 /**
  * @title 微型按钮
  */

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
@@ -50,12 +50,12 @@ Button.propTypes = {
   className: PropTypes.string,
 
   // 按钮类型
-  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary']),
+  type: PropTypes.oneOf(['primary', 'secondary', 'tertiary', 'accept', 'warning', 'danger']),
 
-  // 是否为微缩
+  // 是否为微型按钮
   micro: PropTypes.bool,
 
-  // 是否为block
+  // 是否为block按钮
   block: PropTypes.bool,
 
   // 按钮图标

diff --git a/src/components/Button/index.less b/src/components/Button/index.less
@@ -7,7 +7,10 @@
   &.@{prefix-cls}-button,
   &.@{prefix-cls}-button_primary,
   &.@{prefix-cls}-button_secondary,
-  &.@{prefix-cls}-button_tertiary {
+  &.@{prefix-cls}-button_tertiary,
+  &.@{prefix-cls}-button_accept,
+  &.@{prefix-cls}-button_warning,
+  &.@{prefix-cls}-button_danger {
     .ui-mixin-fixheight(@ui-unit);
     border-radius: @ui-unit-half;
     padding: 0;
@@ -71,7 +74,13 @@
     }
   }
 
-  &_primary, &_secondary, &_tertiary, &[disabled] {
+  &_primary,
+  &_secondary,
+  &_tertiary,
+  &_accept,
+  &_warning,
+  &_danger,
+  &[disabled] {
     padding: @ui-unit-half;
     border-radius: @ui-unit;
     //.ui-mixin-fixheight(@ui-unit-double); // IE10 may otherwise grow on focus :/
@@ -104,7 +113,6 @@
     color: @theme-text;
     border: 1px solid @theme;
     &:hover {
-      color: @theme-text;
       border-color: @theme-dark;
       background-color: @theme-dark;
     }
@@ -118,8 +126,7 @@
     border: 1px solid @theme;
     color: @theme;
     &:hover {
-      background-color: @theme;
-      color: @ui-color-white;
+      background-color: @theme-lightest;
     }
     &:focus:before {
       border-color: @theme-dark;
@@ -138,6 +145,39 @@
     }
   }
 
+  &_accept {
+    background-color: @ui-color-green;
+    color: @ui-color-white;
+    &:hover {
+      background-color: @ui-color-green-dark;
+    }
+    &:focus:before {
+      border-color: @ui-color-green-darker;
+    }
+  }
+  &_warning {
+    background-color: @ui-color-orange;
+    color: @ui-color-white;
+    &:hover {
+      background-color: @ui-color-orange-dark;
+    }
+    &:focus:before {
+      border-color: @ui-color-orange-darker;
+    }
+  }
+
+  &_danger {
+    background-color: @ui-color-red;
+    border: 1px solid @ui-color-red;
+    color: @ui-color-white;
+    &:hover {
+      background-color: @ui-color-red-dark;
+    }
+    &:focus:before {
+      border-color: @ui-color-red-darker;
+    }
+  }
+
   &_micro {
     .mixin-micro-button()
   }

diff --git a/src/styles/ui-variables.less b/src/styles/ui-variables.less
@@ -156,11 +156,13 @@
 @ui-color-slate-darkest: hsl(196, 23%, 3%);
 
 // Theme
+@theme-lightest: @ui-color-blue-lightest;
 @theme-lighter: @ui-color-blue-lighter;
 @theme-light: @ui-color-blue-light;
 @theme: @ui-color-blue;
 @theme-dark: @ui-color-blue-dark;
 @theme-darker:@ui-color-blue-darker;
+@theme-darkest:@ui-color-blue-darkest;
 @theme-text: @ui-color-white;
 
 // Animations ..................................................................