From e2c4ad3ba773fe77a52114bf49d3e9f327cc850c Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 16 Oct 2017 15:35:54 +0800
Subject: [PATCH] More preseted colors of tag

---
 .../__tests__/__snapshots__/demo.test.js.snap | 43 ++++++++++++++++++-
 components/tag/demo/colorful.md               | 10 ++---
 components/tag/index.tsx                      |  5 ++-
 components/tag/style/index.less               |  4 +-
 4 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
index 7e909c1dac..32257e9b33 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -84,9 +84,8 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
   </h4>
   <div>
     <div
-      class="ant-tag ant-tag-has-color"
+      class="ant-tag ant-tag-magenta"
       data-show="true"
-      style="background-color:magenta"
     >
       <span
         class="ant-tag-text"
@@ -104,6 +103,16 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
         red
       </span>
     </div>
+    <div
+      class="ant-tag ant-tag-volcano"
+      data-show="true"
+    >
+      <span
+        class="ant-tag-text"
+      >
+        volcano
+      </span>
+    </div>
     <div
       class="ant-tag ant-tag-orange"
       data-show="true"
@@ -114,6 +123,26 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
         orange
       </span>
     </div>
+    <div
+      class="ant-tag ant-tag-gold"
+      data-show="true"
+    >
+      <span
+        class="ant-tag-text"
+      >
+        gold
+      </span>
+    </div>
+    <div
+      class="ant-tag ant-tag-lime"
+      data-show="true"
+    >
+      <span
+        class="ant-tag-text"
+      >
+        lime
+      </span>
+    </div>
     <div
       class="ant-tag ant-tag-green"
       data-show="true"
@@ -144,6 +173,16 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
         blue
       </span>
     </div>
+    <div
+      class="ant-tag ant-tag-geekblue"
+      data-show="true"
+    >
+      <span
+        class="ant-tag-text"
+      >
+        geekblue
+      </span>
+    </div>
     <div
       class="ant-tag ant-tag-purple"
       data-show="true"
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
index e4d1939590..b6f68bd447 100644
--- a/components/tag/demo/colorful.md
+++ b/components/tag/demo/colorful.md
@@ -9,15 +9,11 @@ title:
 
 我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。
 
-> 预设色彩在 `antd@2.7.0` 之后支持。
-
 ## en-US
 
-After `antd@2.7.0`, We preset a series of colorful tag style for different situation usage.
+We preset a series of colorful tag style for different situation usage.
 And you can always set it to a hex color string for custom color.
 
-> Preset colors are supported after `antd@2.7.0`.
-
 ````jsx
 import { Tag } from 'antd';
 
@@ -27,10 +23,14 @@ ReactDOM.render(
     <div>
       <Tag color="magenta">magenta</Tag>
       <Tag color="red">red</Tag>
+      <Tag color="volcano">volcano</Tag>
       <Tag color="orange">orange</Tag>
+      <Tag color="gold">gold</Tag>
+      <Tag color="lime">lime</Tag>
       <Tag color="green">green</Tag>
       <Tag color="cyan">cyan</Tag>
       <Tag color="blue">blue</Tag>
+      <Tag color="geekblue">geekblue</Tag>
       <Tag color="purple">purple</Tag>
     </div>
     <h4 style={{ margin: '16px 0' }}>Custom:</h4>
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index 7de676a0e2..7548c4f6a5 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -75,7 +75,10 @@ export default class Tag extends React.Component<TagProps, TagState> {
 
   isPresetColor(color?: string): boolean {
     if (!color) { return false; }
-    return /^(pink|red|yellow|orange|cyan|green|blue|purple)(-inverse)?$/.test(color);
+    return (
+      /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/
+      .test(color)
+    );
   }
 
   render() {
diff --git a/components/tag/style/index.less b/components/tag/style/index.less
index bbd14e5034..61cc554622 100644
--- a/components/tag/style/index.less
+++ b/components/tag/style/index.less
@@ -98,14 +98,14 @@
     animation-fill-mode: both;
   }
 
-  @colors: pink, magenta, red, orange, yellow, cyan, green, blue, purple;
+  @colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
 
   // mixin to iterate over colors and create CSS class for each one
   .make-color-classes(@i: length(@colors)) when (@i > 0) {
     .make-color-classes(@i - 1);
     @color: extract(@colors, @i);
     @lightColor: "@{color}-1";
-    @lightBorderColor: "@{color}-2";
+    @lightBorderColor: "@{color}-3";
     @darkColor: "@{color}-6";
     &-@{color} {
       color: @@darkColor;