Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add preset color Tag #4571

Merged
merged 4 commits into from
Jan 13, 2017
Merged

Add preset color Tag #4571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5825a5e
Add preset color Tag, close #4528
afc163 Jan 11, 2017
7bb9569
Use color back over presetColor
afc163 Jan 12, 2017
6bfd956
fix snap
afc163 Jan 12, 2017
a5daab8
simplify isPresetColor
afc163 Jan 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 144 additions & 3 deletions components/tag/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,139 @@ exports[`test renders ./components/tag/demo/checkable.md correctly 1`] = `
exports[`test renders ./components/tag/demo/colorful.md correctly 1`] = `
<div>
<div
class="ant-tag ant-tag-#f50 ant-tag-has-color"
class="ant-tag ant-tag-pink"
data-show="true">
<span
class="ant-tag-text">
pink
</span>
</div>
<div
class="ant-tag ant-tag-red"
data-show="true">
<span
class="ant-tag-text">
red
</span>
</div>
<div
class="ant-tag ant-tag-orange"
data-show="true">
<span
class="ant-tag-text">
orange
</span>
</div>
<div
class="ant-tag ant-tag-yellow"
data-show="true">
<span
class="ant-tag-text">
yellow
</span>
</div>
<div
class="ant-tag ant-tag-green"
data-show="true">
<span
class="ant-tag-text">
green
</span>
</div>
<div
class="ant-tag ant-tag-cyan"
data-show="true">
<span
class="ant-tag-text">
cyan
</span>
</div>
<div
class="ant-tag ant-tag-blue"
data-show="true">
<span
class="ant-tag-text">
blue
</span>
</div>
<div
class="ant-tag ant-tag-purple"
data-show="true">
<span
class="ant-tag-text">
purple
</span>
</div>
<br />
<br />
<div
class="ant-tag ant-tag-pink-inverse"
data-show="true">
<span
class="ant-tag-text">
pink-inverse
</span>
</div>
<div
class="ant-tag ant-tag-red-inverse"
data-show="true">
<span
class="ant-tag-text">
red-inverse
</span>
</div>
<div
class="ant-tag ant-tag-orange-inverse"
data-show="true">
<span
class="ant-tag-text">
orange-inverse
</span>
</div>
<div
class="ant-tag ant-tag-yellow-inverse"
data-show="true">
<span
class="ant-tag-text">
yellow-inverse
</span>
</div>
<div
class="ant-tag ant-tag-green-inverse"
data-show="true">
<span
class="ant-tag-text">
green-inverse
</span>
</div>
<div
class="ant-tag ant-tag-cyan-inverse"
data-show="true">
<span
class="ant-tag-text">
cyan-inverse
</span>
</div>
<div
class="ant-tag ant-tag-blue-inverse"
data-show="true">
<span
class="ant-tag-text">
blue-inverse
</span>
</div>
<div
class="ant-tag ant-tag-purple-inverse"
data-show="true">
<span
class="ant-tag-text">
purple-inverse
</span>
</div>
<br />
<br />
<div
class="ant-tag ant-tag-has-color"
data-show="true"
style="background-color:#f50;">
<span
Expand All @@ -83,7 +215,16 @@ exports[`test renders ./components/tag/demo/colorful.md correctly 1`] = `
</span>
</div>
<div
class="ant-tag ant-tag-#87d068 ant-tag-has-color"
class="ant-tag 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-has-color"
data-show="true"
style="background-color:#87d068;">
<span
Expand All @@ -92,7 +233,7 @@ exports[`test renders ./components/tag/demo/colorful.md correctly 1`] = `
</span>
</div>
<div
class="ant-tag ant-tag-#108ee9 ant-tag-has-color"
class="ant-tag ant-tag-has-color"
data-show="true"
style="background-color:#108ee9;">
<span
Expand Down
37 changes: 31 additions & 6 deletions components/tag/demo/colorful.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,51 @@
order: 1
title:
zh-CN: 多彩标签
en-US: Colorful
en-US: Colorful Tag
---

## zh-CN

基本标签可以通过 `color` 设置背景色，以提供视觉暗示区分不同目的的标签。
我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。

> 预设色彩在 `antd@2.7.0` 之后支持。

## en-US

We can set the background color of basic Tag by `color`, and it's helpful to tell different Tags.
After `antd@2.7.0`, 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';

ReactDOM.render(
<div>
<Tag color="pink">pink</Tag>
<Tag color="red">red</Tag>
<Tag color="orange">orange</Tag>
<Tag color="yellow">yellow</Tag>
<Tag color="green">green</Tag>
<Tag color="cyan">cyan</Tag>
<Tag color="blue">blue</Tag>
<Tag color="purple">purple</Tag>
<br />
<br />
<Tag color="pink-inverse">pink-inverse</Tag>
<Tag color="red-inverse">red-inverse</Tag>
<Tag color="orange-inverse">orange-inverse</Tag>
<Tag color="yellow-inverse">yellow-inverse</Tag>
<Tag color="green-inverse">green-inverse</Tag>
<Tag color="cyan-inverse">cyan-inverse</Tag>
<Tag color="blue-inverse">blue-inverse</Tag>
<Tag color="purple-inverse">purple-inverse</Tag>
<br />
<br />
<Tag color="#f50">#f50</Tag>
<Tag color="#2db7f5">#2db7f5</Tag>
<Tag color="#87d068">#87d068</Tag>
<Tag color="#108ee9">#108ee9</Tag>
</div>,
mountNode
);
</div>
, mountNode);
````
17 changes: 8 additions & 9 deletions components/tag/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import classNames from 'classnames';
import omit from 'omit.js';
import assign from 'object-assign';
import Icon from '../icon';
import warning from '../_util/warning';
import CheckableTag from './CheckableTag';

export interface TagProps {
Expand All @@ -30,11 +29,6 @@ export default class Tag extends React.Component<TagProps, any> {

constructor(props: TagProps) {
super(props);
warning(
!/blue|red|green|yellow/.test(props.color || ''),
'`Tag[color=red|green|blue|yellow]` is deprecated, ' +
'please set color by `#abc` or `rgb(a, b, c)` instead.'
);

this.state = {
closing: false,
Expand Down Expand Up @@ -73,12 +67,17 @@ export default class Tag extends React.Component<TagProps, any> {
}
}

isPresetColor(color) {
return /^(pink|red|yellow|orange|cyan|green|blue|purple)(-inverse)?$/.test(color);
}

render() {
const { prefixCls, closable, color, className, children, style, ...otherProps } = this.props;
const closeIcon = closable ? <Icon type="cross" onClick={this.close} /> : '';
const isPresetColor = this.isPresetColor(color);
const classString = classNames(prefixCls, {
[`${prefixCls}-${color}`]: !!color,
[`${prefixCls}-has-color`]: !!color,
[`${prefixCls}-${color}`]: isPresetColor,
[`${prefixCls}-has-color`]: (color && !isPresetColor),
[`${prefixCls}-close`]: this.state.closing,
}, className);
// fix https://fb.me/react-unknown-prop
Expand All @@ -87,7 +86,7 @@ export default class Tag extends React.Component<TagProps, any> {
'afterClose',
]);
const tagStyle = assign({
backgroundColor: color && /blue|red|green|yellow/.test(color) ? null : color,
backgroundColor: (color && !isPresetColor) ? color : null,
}, style);
const tag = this.state.closed ? null : (
<div
Expand Down
44 changes: 25 additions & 19 deletions components/tag/style/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@
cursor: pointer;
font-weight: bold;
margin-left: 3px;
color: @text-color;
transition: all 0.3s ease;
opacity: 0.66;

Expand All @@ -62,26 +61,9 @@
}
}

&-blue {
background: @link-color;
}

&-green {
background: @success-color;
}

&-yellow {
background: @warning-color;
}

&-red {
background: @error-color;
}

&-checkable {
background-color: transparent;
border-color: transparent;

&:hover,
&:active,
&-checked {
Expand All @@ -90,8 +72,10 @@
&:hover {
background-color: @primary-5;
}
&:active,
&-checked {
background-color: @primary-6;
}
&:active {
background-color: @primary-7;
}
}
Expand All @@ -112,4 +96,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";
&-@{color} {
color: @@darkColor;
background: @@lightColor;
border-color: @@lightColor;
}
&-@{color}-inverse {
background: @@darkColor;
border-color: @@darkColor;
color: #fff;
}
}

.make-color-classes();
}