Add preset color Tag, close #4528

ant-design · Jan 11, 2017 · 5825a5e · 5825a5e
1 parent 47fcd76
commit 5825a5e
Show file tree

Hide file tree

Showing 5 changed files with 226 additions and 9 deletions.
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -82,6 +82,15 @@ exports[`test renders ./components/tag/demo/colorful.md correctly 1`] = `
       #f50
     </span>
   </div>
+  <div
+    class="ant-tag ant-tag-#2db7f5 ant-tag-has-color"
+    data-show="true"
+    style="background-color:#2db7f5;">
+    <span
+      class="ant-tag-text">
+      #2db7f5
+    </span>
+  </div>
   <div
     class="ant-tag ant-tag-#87d068 ant-tag-has-color"
     data-show="true"
@@ -162,3 +171,137 @@ exports[`test renders ./components/tag/demo/hot-tags.md correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`test renders ./components/tag/demo/preset-color.md correctly 1`] = `
+<div>
+  <div
+    class="ant-tag ant-tag-preset-color-pink"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      pink
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-red"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      red
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-orange"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      orange
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-yellow"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      yellow
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-green"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      green
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-cyan"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      cyan
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-blue"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      blue
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-purple"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      purple
+    </span>
+  </div>
+  <br />
+  <div
+    class="ant-tag ant-tag-preset-color-pink-inverse"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      pink-inverse
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-red-inverse"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      red-inverse
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-orange-inverse"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      orange-inverse
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-yellow-inverse"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      yellow-inverse
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-green-inverse"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      green-inverse
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-cyan-inverse"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      cyan-inverse
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-blue-inverse"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      blue-inverse
+    </span>
+  </div>
+  <div
+    class="ant-tag ant-tag-preset-color-purple-inverse"
+    data-show="true">
+    <span
+      class="ant-tag-text">
+      purple-inverse
+    </span>
+  </div>
+</div>
+`;
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
@@ -1,24 +1,25 @@
 ---
-order: 1
+order: 2
 title:
-  zh-CN: 多彩标签
-  en-US: Colorful
+  zh-CN: 自定义色彩
+  en-US: Custom Color
 ---
 
 ## zh-CN
 
-基本标签可以通过 `color` 设置背景色，以提供视觉暗示区分不同目的的标签。
+如果预设值不能满足你的需求，可以用 `color` 属性定制你需要的色彩。
 
 ## en-US
 
-We can set the background color of basic Tag by `color`, and it"s helpful to tell different Tags.
+Use `color` property to set tag"s color which is not included in preset colors.
 
 ````jsx
 import { Tag } from 'antd';
 
 ReactDOM.render(
   <div>
     <Tag color="#f50">#f50</Tag>
+    <Tag color="#2db7f5">#2db7f5</Tag>
     <Tag color="#87d068">#87d068</Tag>
     <Tag color="#108ee9">#108ee9</Tag>
   </div>,

diff --git a/components/tag/demo/preset-color.md b/components/tag/demo/preset-color.md
@@ -0,0 +1,47 @@
+---
+order: 1
+title:
+  zh-CN: 预设彩色标签
+  en-US: Preset Color
+---
+
+## zh-CN
+
+`[email protected]` 之后，我们添加了多种预设色彩的标签样式，用作不同场景使用。
+
+## en-US
+
+After `[email protected]`, We preset a series of colorful tag style for different situation usage.
+
+````jsx
+import { Tag } from 'antd';
+
+ReactDOM.render(
+  <div>
+    <Tag presetColor="pink">pink</Tag>
+    <Tag presetColor="red">red</Tag>
+    <Tag presetColor="orange">orange</Tag>
+    <Tag presetColor="yellow">yellow</Tag>
+    <Tag presetColor="green">green</Tag>
+    <Tag presetColor="cyan">cyan</Tag>
+    <Tag presetColor="blue">blue</Tag>
+    <Tag presetColor="purple">purple</Tag>
+    <br />
+    <Tag presetColor="pink-inverse">pink-inverse</Tag>
+    <Tag presetColor="red-inverse">red-inverse</Tag>
+    <Tag presetColor="orange-inverse">orange-inverse</Tag>
+    <Tag presetColor="yellow-inverse">yellow-inverse</Tag>
+    <Tag presetColor="green-inverse">green-inverse</Tag>
+    <Tag presetColor="cyan-inverse">cyan-inverse</Tag>
+    <Tag presetColor="blue-inverse">blue-inverse</Tag>
+    <Tag presetColor="purple-inverse">purple-inverse</Tag>
+  </div>,
+  mountNode
+);
+````
+
+````css
+#components-demo-preset-color .ant-tag {
+  text-transform: uppercase;
+}
+````
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
@@ -18,6 +18,7 @@ export interface TagProps {
   onClose?: Function;
   /** 动画关闭后的回调 */
   afterClose?: Function;
+  presetColor: string;
   style?: React.CSSProperties;
 }
 
@@ -74,12 +75,13 @@ export default class Tag extends React.Component<TagProps, any> {
   }
 
   render() {
-    const { prefixCls, closable, color, className, children, style, ...otherProps } = this.props;
+    const { prefixCls, closable, presetColor, color, className, children, style, ...otherProps } = this.props;
     const closeIcon = closable ? <Icon type="cross" onClick={this.close} /> : '';
     const classString = classNames(prefixCls, {
       [`${prefixCls}-${color}`]: !!color,
       [`${prefixCls}-has-color`]: !!color,
       [`${prefixCls}-close`]: this.state.closing,
+      [`${prefixCls}-preset-color-${presetColor}`]: !!presetColor,
     }, className);
     // fix https://fb.me/react-unknown-prop
     const divProps = omit(otherProps, [

diff --git a/components/tag/style/index.less b/components/tag/style/index.less
@@ -42,7 +42,6 @@
     cursor: pointer;
     font-weight: bold;
     margin-left: 3px;
-    color: @text-color;
     transition: all 0.3s ease;
     opacity: 0.66;
 
@@ -62,6 +61,8 @@
     }
   }
 
+  // Those four classes are deperated, please use presetColor
+  // keep it for compatibility
   &-blue {
     background: @link-color;
   }
@@ -81,7 +82,6 @@
   &-checkable {
     background-color: transparent;
     border-color: transparent;
-
     &:hover,
     &:active,
     &-checked {
@@ -90,8 +90,10 @@
     &:hover {
       background-color: @primary-5;
     }
-    &:active,
     &-checked {
+      background-color: @primary-6;
+    }
+    &:active {
       background-color: @primary-7;
     }
   }
@@ -112,4 +114,26 @@
     animation: antZoomOut .3s @ease-in-out-circ;
     animation-fill-mode: both;
   }
+
+  @colors: pink, red, orange, yellow, cyan, green, blue, 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}-2";
+    @darkColor: "@{color}-6";
+    &-preset-color-@{color} {
+      color: @@darkColor;
+      background: @@lightColor;
+      border-color: @@lightColor;
+    }
+    &-preset-color-@{color}-inverse {
+      background: @@darkColor;
+      border-color: @@darkColor;
+      color: #fff;
+    }
+  }
+
+  .make-color-classes();
 }