Skip to content

Commit

Permalink
feat(Tag): support custom color
Browse files Browse the repository at this point in the history
  • Loading branch information
@lianmin
lianmin committed Nov 1, 2019
1 parent f4f4e42 commit 09191b6
Show file tree
Hide file tree
Showing 9 changed files with 257 additions and 45 deletions.
59 changes: 59 additions & 0 deletions docs/tag/demo/colorful-tag.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
# 彩色标签

- order: 1

在非 `closeable` 和 `selectable` 类型下，可以通过增加 `color` 属性来为 tag 设置自定义颜色。

:::lang=en-us

# Colorful Tag

- order: 1

you can set custom color for `Tag` by adding `color` properity when it's neither `closable` nor `selectable` mode

:::

---

```jsx
import { Tag, Icon } from '@alifd/next';

const { Group: TagGroup } = Tag;

const presetColors = ['blue', 'green', 'orange', 'red', 'turquoise', 'yellow'];
// set custom color with hex value, do not use color keywords
const customColos = ['#f50', '#2db7f5', '#87d068', '#108ee9'];

ReactDOM.render(
<div className="tag-list">
<h4>presets</h4>
<TagGroup>
{presetColors.map(color => (
<Tag key={`p_n_${color}`} type="normal" color={color}>
{color}
</Tag>
))}
</TagGroup>

<TagGroup>
{presetColors.map(color => (
<Tag key={`p_p_${color}`} type="primary" color={color}>
{color}
</Tag>
))}
</TagGroup>

<h4>custom colors</h4>

<TagGroup>
{customColos.map(color => (
<Tag key={`c_${color}`} color={color}>
{color}
</Tag>
))}
</TagGroup>
</div>,
mountNode
);
```
47 changes: 24 additions & 23 deletions docs/tag/index.en-us.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,37 +23,38 @@ Tags are used to mark something for its atrribute, or to classify things

### Tag

| Param | Descripiton | Type | Default Value |
| ----------- | ----------------------------------------------------------------------------------- | -------- | --------- |
| size | size of tag（large = medium for compatible with form situation ）<br><br>**optional**:<br>'small', 'medium', 'large' | Enum | 'medium' |
| type | type of tag <br><br>**optional**:<br>'normal', 'primary' | Enum | 'normal' |
| animation | enable animation or not | Boolean | false |
| afterAppear | callback when animation ends<br><br>**signatures**:<br>Function() => void | Function | func.noop |
| onClick | callback when it is clicked<br><br>**signatures**:<br>Function() => void | Function | func.noop |
| Param | Descripiton | Type | Default Value |
| ----------- | --------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| size | size of tag（large = medium for compatible with form situation ）<br><br>**optional**:<br>'small', 'medium', 'large' | Enum | 'medium' |
| type | type of tag <br><br>**optional**:<br>'normal', 'primary' | Enum | 'normal' |
| animation | enable animation or not | Boolean | false |
| color | color of tag <br><br>**signatures**: <br>'orange', 'green','blue', 'red', 'turquoise', 'yellow' <br>or<br> `hex` color value | String | |
| afterAppear | callback when animation ends<br><br>**signatures**:<br>Function() => void | Function | func.noop |
| onClick | callback when it is clicked<br><br>**signatures**:<br>Function() => void | Function | func.noop |

### Tag.Closeable

| Param | Descripiton | Type | Default Value |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --- |
| closeArea | area for responsing close action, tag: entire tag, tail(default): only the button at the end <br><br>**optional**:<br>'tag', 'tail' | Enum | - |
| size | size of tag（large = medium for compatible with form situation ）<br><br>**optional**:<br>'small', 'medium', 'large' | Enum | - |
| onClose | callback when closeArea is clicked<br><br>**signatures**:<br>Function(from: String) => Boolean<br>**params**:<br>_from_: {String} clicked place, tag: entire, tail: button at the end<br>**returns**:<br>{Boolean} true to close tag, false to prevent the close action<br> | Function | - |
| afterClose | callback when tag has been closed <br><br>**signatures**:<br>Function() => void | Function | - |
| onClick | callback when tag is clicked<br><br>**signatures**:<br>Function() => void | Function | - |
| Param | Descripiton | Type | Default Value |
| ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| closeArea | area for responsing close action, tag: entire tag, tail(default): only the button at the end <br><br>**optional**:<br>'tag', 'tail' | Enum | - |
| size | size of tag（large = medium for compatible with form situation ）<br><br>**optional**:<br>'small', 'medium', 'large' | Enum | - |
| onClose | callback when closeArea is clicked<br><br>**signatures**:<br>Function(from: String) => Boolean<br>**params**:<br>_from_: {String} clicked place, tag: entire, tail: button at the end<br>**returns**:<br>{Boolean} true to close tag, false to prevent the close action<br> | Function | - |
| afterClose | callback when tag has been closed <br><br>**signatures**:<br>Function() => void | Function | - |
| onClick | callback when tag is clicked<br><br>**signatures**:<br>Function() => void | Function | - |

### Tag.Selectable

| Param | Descripiton | Type | Default Value |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------- | --------- |
| checked | check the tag, under controlled way | Boolean | - |
| defaultChecked | tag is checked by default, under uncontrolled way | Boolean | - |
| onChange | callback when check state changes <br><br>**signatures**:<br>Function(checked: Boolean, e: Event) => void<br>**params**:<br>_checked_: {Boolean} whether tag is checked or not <br>_e_: {Event} Dom Event Object | Function | func.noop |
| disabled | disable tag | Boolean | - |
| Param | Descripiton | Type | Default Value |
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------------- |
| checked | check the tag, under controlled way | Boolean | - |
| defaultChecked | tag is checked by default, under uncontrolled way | Boolean | - |
| onChange | callback when check state changes <br><br>**signatures**:<br>Function(checked: Boolean, e: Event) => void<br>**params**:<br>_checked_: {Boolean} whether tag is checked or not <br>_e_: {Event} Dom Event Object | Function | func.noop |
| disabled | disable tag | Boolean | - |



## ARIA and KeyBoard

| KeyBoard | Descripiton |
| :---------- | :------------------------------ |
| SPACE | Select,cancel or delete the current tag |
| KeyBoard | Descripiton |
| :------- | :-------------------------------------- |
| SPACE | Select,cancel or delete the current tag |
15 changes: 8 additions & 7 deletions docs/tag/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@

### Tag

| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ----------------------------------------------------------------------------------- | -------- | --------- |
| size | 标签的尺寸（large 尺寸为兼容表单场景 large = medium）<br><br>**可选值**:<br>'small', 'medium', 'large' | Enum | 'medium' |
| type | 标签的类型<br><br>**可选值**:<br>'normal', 'primary' | Enum | 'normal' |
| animation | 是否开启动效 | Boolean | false |
| afterAppear | 标签出现动画结束后执行的回调<br><br>**签名**:<br>Function() => void | Function | func.noop |
| onClick | 点击回调<br><br>**签名**:<br>Function() => void | Function | func.noop |
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------------------------------------------------------------------------------------------ | -------- | --------- |
| size | 标签的尺寸（large 尺寸为兼容表单场景 large = medium）<br><br>**可选值**:<br>'small', 'medium', 'large' | Enum | 'medium' |
| type | 标签的类型<br><br>**可选值**:<br>'normal', 'primary' | Enum | 'normal' |
| color | 标签颜色, 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效 | String | - |
| animation | 是否开启动效 | Boolean | false |
| afterAppear | 标签出现动画结束后执行的回调<br><br>**签名**:<br>Function() => void | Function | func.noop |
| onClick | 点击回调<br><br>**签名**:<br>Function() => void | Function | func.noop |

### Tag.Closeable

Expand Down
8 changes: 8 additions & 0 deletions src/tag/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,14 @@
cursor: not-allowed;
pointer-events: none;
}

/* 预设颜色值 */
@include tag-preset-color('blue', $tag-color-preset-blue);
@include tag-preset-color('green', $tag-color-preset-green);
@include tag-preset-color('orange', $tag-color-preset-orange);
@include tag-preset-color('red', $tag-color-preset-red);
@include tag-preset-color('turquoise', $tag-color-preset-turquoise);
@include tag-preset-color('yellow', $tag-color-preset-yellow);
}

&tag-large {
Expand Down
14 changes: 14 additions & 0 deletions src/tag/scss/mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,3 +206,17 @@
right: 0;
bottom: 0;
}

@mixin tag-preset-color($name, $color) {
&-#{$name} {
background-color: $color;
border-color: $color;
color: #FFF;

&-inverse {
background-color: rgba($color, .25);
border-color: $color;
color: $color;
}
}
}
8 changes: 8 additions & 0 deletions src/tag/scss/variable.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -548,3 +548,11 @@ $tag-closable-primary-fill-border-color-disabled: $color-fill1-1 !default;
/// background
/// @namespace statement/disabled/bounding
$tag-closable-primary-fill-bg-color-disabled: $color-fill1-1 !default;

// preset colors , unconfigurable
$tag-color-preset-blue: #4494F9;
$tag-color-preset-green: #46BC15;
$tag-color-preset-orange: #FF9300;
$tag-color-preset-red: #FF3000;
$tag-color-preset-turquoise: #01C1B2;
$tag-color-preset-yellow: #FCCC12;
56 changes: 47 additions & 9 deletions src/tag/tag.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import Animate from '../animate';
import Icon from '../icon';
import { obj, func, support, KEYCODE } from '../util';
import { func, KEYCODE, obj, support } from '../util';
import zhCN from '../locale/zh-cn';
import ConfigProvider from '../config-provider';

const { noop, bindCtx } = func;

const PRESET_COLOR_REG = /blue|green|orange|red|turquoise|yellow/;

/**
* Tag
*/
Expand All @@ -28,12 +30,16 @@ class Tag extends Component {
*/
size: PropTypes.oneOf(['small', 'medium', 'large']),

closable: PropTypes.bool,
/**
* 标签颜色, 目前支持：blue、 green、 orange、red、 turquoise、 yellow 和 hex 颜色值 （`color keywords`作为 Tag 组件的保留字，请勿直接使用 ）, `1.19.0` 以上版本生效
*/
color: PropTypes.string,
/**
* 是否开启动效
*/
animation: PropTypes.bool,
closeArea: PropTypes.oneOf(['tag', 'tail']),
closable: PropTypes.bool,
onClose: PropTypes.func,
afterClose: PropTypes.func,
/**
Expand Down Expand Up @@ -184,11 +190,38 @@ class Tag extends Component {
</span>
);
}

isPresetColor() {
const { color } = this.props;

if (!color) {
return false;
}

return PRESET_COLOR_REG.test(color);
}

getTagStyle() {
const { color = '', style } = this.props;
const isPresetColor = this.isPresetColor();
const customColorStyle = {
backgroundColor: color,
borderColor: color,
color: '#fff',
};

return {
...(color && !isPresetColor ? customColorStyle : null),
...style,
};
}

render() {
const {
prefix,
type,
size,
color,
_shape,
closable,
closeArea,
Expand All @@ -199,21 +232,25 @@ class Tag extends Component {
rtl,
} = this.props;
const { visible } = this.state;
const isPresetColor = this.isPresetColor();
const others = obj.pickOthers(Tag.propTypes, this.props);
// eslint-disable-next-line no-unused-vars
const { style, ...otherTagProps } = others;
const shape = closable ? 'closable' : _shape;
const bodyClazz = classNames(
[
`${prefix}tag`,
`${prefix}tag-${shape}`,
`${prefix}tag-level-${type}`,
`${prefix}tag-${size}`,
],
[`${prefix}tag`, `${prefix}tag-${shape}`, `${prefix}tag-${size}`],
{
[`${prefix}tag-level-${type}`]: !color,
[`${prefix}tag-closable`]: closable,
[`${prefix}tag-body-pointer`]: closable && closeArea === 'tag',
[`${prefix}tag-${color}`]:
color && isPresetColor && type === 'primary',
[`${prefix}tag-${color}-inverse`]:
color && isPresetColor && type === 'normal',
},
className
);

// close btn
const tailNode = this.renderTailNode();
// tag node
Expand All @@ -228,7 +265,8 @@ class Tag extends Component {
disabled={disabled}
dir={rtl ? 'rtl' : undefined}
ref={n => (this.tagNode = n)}
{...others}
style={this.getTagStyle()}
{...otherTagProps}
>
<span className={`${prefix}tag-body`}>{children}</span>
{tailNode}
Expand Down
Loading

0 comments on commit 09191b6

Please sign in to comment.