@semcore/tag 3.5.1 → 3.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/lib/cjs/Tag.js +24 -26
- package/lib/cjs/Tag.js.map +1 -1
- package/lib/cjs/style/tag.shadow.css +2 -3
- package/lib/es6/Tag.js +24 -25
- package/lib/es6/Tag.js.map +1 -1
- package/lib/es6/style/tag.shadow.css +2 -3
- package/lib/types/index.d.ts +1 -1
- package/package.json +2 -2
- package/src/Tag.js +2 -9
- package/src/index.d.ts +1 -1
- package/src/style/tag.shadow.css +2 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.6.0] - 2022-01-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Up version icons and use new icon.
|
|
10
|
+
|
|
11
|
+
## [3.5.4] - 2021-12-28
|
|
12
|
+
|
|
13
|
+
### Fixed
|
|
14
|
+
|
|
15
|
+
- [ts] Added type `custom` in property `use`.
|
|
16
|
+
|
|
17
|
+
## [3.5.3] - 2021-12-23
|
|
18
|
+
|
|
19
|
+
### Changed
|
|
20
|
+
|
|
21
|
+
- Changed `line-height` from 1.2 to 1.1 for correct display in all browsers.
|
|
22
|
+
|
|
23
|
+
## [3.5.2] - 2021-12-17
|
|
24
|
+
|
|
25
|
+
### Fixed
|
|
26
|
+
|
|
27
|
+
- Fixed hover for non-interactive tag
|
|
28
|
+
|
|
5
29
|
## [3.5.1] - 2021-12-17
|
|
6
30
|
|
|
7
31
|
### Added
|
|
@@ -14,6 +38,10 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
|
|
|
14
38
|
|
|
15
39
|
- Added property for Tag color
|
|
16
40
|
|
|
41
|
+
### Changed
|
|
42
|
+
|
|
43
|
+
- Changed the opacity of the Tag color from 0.15 to 0.5.
|
|
44
|
+
|
|
17
45
|
## [3.4.2] - 2021-8-26
|
|
18
46
|
|
|
19
47
|
### Changed
|
package/lib/cjs/Tag.js
CHANGED
|
@@ -31,9 +31,7 @@ var _color = _interopRequireWildcard(require("@semcore/utils/lib/color"));
|
|
|
31
31
|
|
|
32
32
|
var _addonTextChildren = _interopRequireDefault(require("@semcore/utils/lib/addonTextChildren"));
|
|
33
33
|
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
var _xxs = _interopRequireDefault(require("@semcore/icon/lib/Close/xxs"));
|
|
34
|
+
var _m = _interopRequireDefault(require("@semcore/icon/Close/m"));
|
|
37
35
|
|
|
38
36
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
39
37
|
|
|
@@ -48,31 +46,31 @@ var style = (
|
|
|
48
46
|
/*__reshadow_css_start__*/
|
|
49
47
|
_core.sstyled.insert(
|
|
50
48
|
/*__inner_css_start__*/
|
|
51
|
-
".
|
|
49
|
+
".___STag_8gdoa_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:21px}.___STag_8gdoa_gg_,.___SText_8gdoa_gg_{padding-left:4px;padding-right:4px}.___SText_8gdoa_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SText_8gdoa_gg_:not(:only-child):first-child{padding-right:0}.___SText_8gdoa_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_8gdoa_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_8gdoa_gg_{flex-shrink:0;padding-left:4px;padding-right:4px}.___SAddon_8gdoa_gg_,.___SCircle_8gdoa_gg_{display:inline-flex;align-items:center;justify-content:center}.___SCircle_8gdoa_gg_{overflow:hidden;border-radius:50%;margin-right:4px}.___STag_8gdoa_gg_.__disabled_8gdoa_gg_{opacity:.3;cursor:default;pointer-events:none}.___STag_8gdoa_gg_.__interactive_8gdoa_gg_{cursor:pointer}.___STag_8gdoa_gg_._size_xl_8gdoa_gg_{height:42px;min-width:42px;font-size:16px}.___STag_8gdoa_gg_._size_xl_8gdoa_gg_ .___SCircle_8gdoa_gg_{width:28px;height:28px}.___STag_8gdoa_gg_._size_l_8gdoa_gg_{height:32px;min-width:32px;font-size:14px}.___STag_8gdoa_gg_._size_l_8gdoa_gg_ .___SCircle_8gdoa_gg_{width:24px;height:24px}.___STag_8gdoa_gg_._size_m_8gdoa_gg_{height:26px;min-width:26px;font-size:12px}.___STag_8gdoa_gg_._size_m_8gdoa_gg_ .___SCircle_8gdoa_gg_{width:20px;height:20px}.___STag_8gdoa_gg_._size_s_8gdoa_gg_{height:18px;min-width:18px;font-size:10px}.___STag_8gdoa_gg_._size_s_8gdoa_gg_ .___SCircle_8gdoa_gg_{width:12px;height:12px}.___STag_8gdoa_gg_._theme_primary-muted_8gdoa_gg_{background-color:rgba(224,225,233,.5);color:#6c6e79}.___STag_8gdoa_gg_._theme_primary-muted_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_primary-muted_8gdoa_gg_.__interactive_8gdoa_gg_:active,.___STag_8gdoa_gg_._theme_primary-muted_8gdoa_gg_.__interactive_8gdoa_gg_:hover{background-color:#e0e1e9}.___STag_8gdoa_gg_._theme_primary-warning_8gdoa_gg_{background-color:#ff7f00;color:#fff;border-color:#ff7f00}.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_{background-color:hsla(0,0%,100%,.2);color:#fff}.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_.__interactive_8gdoa_gg_:active,.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_.__interactive_8gdoa_gg_:hover{background-color:#fff;color:#333}.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_.__interactive_8gdoa_gg_ .___SClose_8gdoa_gg_:hover{color:#333}.___STag_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_{background-color:#fff;color:#666;border-color:#a6b0b3}.___STag_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_.__interactive_8gdoa_gg_:hover{color:#333}.___STag_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_.__interactive_8gdoa_gg_:active{background-color:#eee;color:#333}.___STag_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_{border-color:hsla(0,0%,100%,.2);color:#fff}.___STag_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_.__interactive_8gdoa_gg_:hover{border-color:hsla(0,0%,100%,.5)}.___STag_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_.__interactive_8gdoa_gg_:active{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.___STag_8gdoa_gg_._theme_custom_8gdoa_gg_{color:var(--colorText_f8cly9);background-color:var(--colorTag_f8cly9)}.___STag_8gdoa_gg_._theme_custom_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_custom_8gdoa_gg_.__interactive_8gdoa_gg_:active,.___STag_8gdoa_gg_._theme_custom_8gdoa_gg_.__interactive_8gdoa_gg_:hover{color:#fff;background-color:var(--colorText_f8cly9)}.___SClose_8gdoa_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}.___SClose_8gdoa_gg_._theme_primary-warning_8gdoa_gg_,.___SClose_8gdoa_gg_._theme_primary-warning_8gdoa_gg_:hover{color:#fff}.___SClose_8gdoa_gg_._theme_primary-invert_8gdoa_gg_{color:#999}.___SClose_8gdoa_gg_._theme_primary-invert_8gdoa_gg_:hover{color:#fff}.___SClose_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_{color:hsla(0,0%,40%,.5)}.___SClose_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_:hover{color:#333}.___SClose_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_{color:hsla(0,0%,100%,.5)}.___SClose_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_:hover{color:#fff}.___SClose_8gdoa_gg_._theme_custom_8gdoa_gg_{opacity:.5}.___SClose_8gdoa_gg_._theme_custom_8gdoa_gg_:hover{opacity:1}"
|
|
52
50
|
/*__inner_css_end__*/
|
|
53
|
-
, "
|
|
51
|
+
, "f8cly9_gg_")
|
|
54
52
|
/*__reshadow_css_end__*/
|
|
55
53
|
, {
|
|
56
|
-
"__STag": "
|
|
57
|
-
"__SText": "
|
|
58
|
-
"__SAddon": "
|
|
59
|
-
"__SCircle": "
|
|
60
|
-
"_disabled": "
|
|
61
|
-
"_interactive": "
|
|
62
|
-
"_size_xl": "
|
|
63
|
-
"_size_l": "
|
|
64
|
-
"_size_m": "
|
|
65
|
-
"_size_s": "
|
|
66
|
-
"_theme_primary-muted": "_theme_primary-
|
|
67
|
-
"_active": "
|
|
68
|
-
"_theme_primary-warning": "_theme_primary-
|
|
69
|
-
"_theme_primary-invert": "_theme_primary-
|
|
70
|
-
"__SClose": "
|
|
71
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
72
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
73
|
-
"_theme_custom": "
|
|
74
|
-
"--colorText": "--
|
|
75
|
-
"--colorTag": "--
|
|
54
|
+
"__STag": "___STag_8gdoa_gg_",
|
|
55
|
+
"__SText": "___SText_8gdoa_gg_",
|
|
56
|
+
"__SAddon": "___SAddon_8gdoa_gg_",
|
|
57
|
+
"__SCircle": "___SCircle_8gdoa_gg_",
|
|
58
|
+
"_disabled": "__disabled_8gdoa_gg_",
|
|
59
|
+
"_interactive": "__interactive_8gdoa_gg_",
|
|
60
|
+
"_size_xl": "_size_xl_8gdoa_gg_",
|
|
61
|
+
"_size_l": "_size_l_8gdoa_gg_",
|
|
62
|
+
"_size_m": "_size_m_8gdoa_gg_",
|
|
63
|
+
"_size_s": "_size_s_8gdoa_gg_",
|
|
64
|
+
"_theme_primary-muted": "_theme_primary-muted_8gdoa_gg_",
|
|
65
|
+
"_active": "__active_8gdoa_gg_",
|
|
66
|
+
"_theme_primary-warning": "_theme_primary-warning_8gdoa_gg_",
|
|
67
|
+
"_theme_primary-invert": "_theme_primary-invert_8gdoa_gg_",
|
|
68
|
+
"__SClose": "___SClose_8gdoa_gg_",
|
|
69
|
+
"_theme_secondary-muted": "_theme_secondary-muted_8gdoa_gg_",
|
|
70
|
+
"_theme_secondary-invert": "_theme_secondary-invert_8gdoa_gg_",
|
|
71
|
+
"_theme_custom": "_theme_custom_8gdoa_gg_",
|
|
72
|
+
"--colorText": "--colorText_f8cly9",
|
|
73
|
+
"--colorTag": "--colorTag_f8cly9"
|
|
76
74
|
});
|
|
77
75
|
|
|
78
76
|
function isCustomTheme(use, theme) {
|
|
@@ -180,7 +178,7 @@ function Close(props) {
|
|
|
180
178
|
size = props.size;
|
|
181
179
|
return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref8.cn("SClose", _objectSpread({}, (0, _core.assignProps)({
|
|
182
180
|
"use:theme": getThemeName(use, theme),
|
|
183
|
-
"tag":
|
|
181
|
+
"tag": _m["default"]
|
|
184
182
|
}, _ref3))));
|
|
185
183
|
}
|
|
186
184
|
|
package/lib/cjs/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.js"],"names":["isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","size","STag","Box","Children","styles","color","interactive","disabled","addonLeft","addonRight","useTheme","colorTag","colorText","Tag","Text","Addon","Component","style","props","SText","Close","SClose","
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.js"],"names":["isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","size","STag","Box","Children","styles","color","interactive","disabled","addonLeft","addonRight","useTheme","colorTag","colorText","Tag","Text","Addon","Component","style","props","SText","Close","SClose","CloseM","SAddon","Circle","SCircle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { opacity } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport CloseM from '@semcore/icon/Close/m';\n\nimport style from './style/tag.shadow.css';\n\nfunction isCustomTheme(use, theme) {\n const type = {\n primary: ['muted', 'invert', 'warning'],\n secondary: ['muted', 'invert'],\n };\n return type[use] ? !type[use].includes(theme) : true;\n}\n\nfunction getThemeName(use, theme) {\n return isCustomTheme(use, theme) ? 'custom' : `${use}-${theme}`;\n}\n\nclass RootTag extends Component {\n static displayName = 'Tag';\n static style = style;\n static defaultProps = {\n use: 'secondary',\n theme: 'muted',\n size: 'm',\n };\n\n getCloseProps() {\n const { use, theme, size } = this.asProps;\n return { use, theme, size };\n }\n\n render() {\n const STag = Root;\n let {\n Children,\n styles,\n theme,\n use,\n color,\n interactive,\n disabled,\n addonLeft,\n addonRight,\n } = this.asProps;\n\n if (disabled) {\n interactive = false;\n }\n\n const useTheme = getThemeName(use, theme);\n const colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';\n const colorText = color ? resolveColor(color) : resolveColor(theme);\n\n return sstyled(styles)(\n <STag\n render={Box}\n use:theme={useTheme}\n use:interactive={interactive}\n colorText={colorText}\n colorTag={colorTag}\n >\n {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n </STag>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Close(props) {\n const SClose = Root;\n const { styles, use, theme, size } = props;\n\n return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nfunction Circle(props) {\n const SCircle = Root;\n const { styles } = props;\n return sstyled(styles)(<SCircle render={Box} tag=\"span\" />);\n}\n\nconst Tag = createComponent(RootTag, {\n Text,\n Addon,\n Close,\n Circle,\n});\n\nexport default Tag;\n"],"file":"Tag.js"}
|
|
@@ -21,7 +21,7 @@ SText {
|
|
|
21
21
|
white-space: nowrap;
|
|
22
22
|
overflow: hidden;
|
|
23
23
|
text-overflow: ellipsis;
|
|
24
|
-
line-height: 1.
|
|
24
|
+
line-height: 1.1;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
SText:not(:only-child):first-child {
|
|
@@ -114,8 +114,7 @@ STag[theme='primary-muted'] {
|
|
|
114
114
|
color: #6c6e79;
|
|
115
115
|
&[interactive]:active,
|
|
116
116
|
&[active],
|
|
117
|
-
&[interactive]:hover
|
|
118
|
-
&:hover {
|
|
117
|
+
&[interactive]:hover {
|
|
119
118
|
background-color: #e0e1e9;
|
|
120
119
|
}
|
|
121
120
|
}
|
package/lib/es6/Tag.js
CHANGED
|
@@ -24,39 +24,38 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
24
24
|
import { Box } from '@semcore/flex-box';
|
|
25
25
|
import resolveColor, { opacity } from '@semcore/utils/lib/color';
|
|
26
26
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
27
|
-
import
|
|
28
|
-
import CloseXXS from '@semcore/icon/lib/Close/xxs';
|
|
27
|
+
import CloseM from '@semcore/icon/Close/m';
|
|
29
28
|
|
|
30
29
|
/*__reshadow-styles__:"./style/tag.shadow.css"*/
|
|
31
30
|
var style = (
|
|
32
31
|
/*__reshadow_css_start__*/
|
|
33
32
|
_sstyled.insert(
|
|
34
33
|
/*__inner_css_start__*/
|
|
35
|
-
".
|
|
34
|
+
".___STag_8gdoa_gg_{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;box-sizing:border-box;border-width:1px;border-style:solid;border-color:transparent;border-radius:21px}.___STag_8gdoa_gg_,.___SText_8gdoa_gg_{padding-left:4px;padding-right:4px}.___SText_8gdoa_gg_{display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.1}.___SText_8gdoa_gg_:not(:only-child):first-child{padding-right:0}.___SText_8gdoa_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_8gdoa_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_8gdoa_gg_{flex-shrink:0;padding-left:4px;padding-right:4px}.___SAddon_8gdoa_gg_,.___SCircle_8gdoa_gg_{display:inline-flex;align-items:center;justify-content:center}.___SCircle_8gdoa_gg_{overflow:hidden;border-radius:50%;margin-right:4px}.___STag_8gdoa_gg_.__disabled_8gdoa_gg_{opacity:.3;cursor:default;pointer-events:none}.___STag_8gdoa_gg_.__interactive_8gdoa_gg_{cursor:pointer}.___STag_8gdoa_gg_._size_xl_8gdoa_gg_{height:42px;min-width:42px;font-size:16px}.___STag_8gdoa_gg_._size_xl_8gdoa_gg_ .___SCircle_8gdoa_gg_{width:28px;height:28px}.___STag_8gdoa_gg_._size_l_8gdoa_gg_{height:32px;min-width:32px;font-size:14px}.___STag_8gdoa_gg_._size_l_8gdoa_gg_ .___SCircle_8gdoa_gg_{width:24px;height:24px}.___STag_8gdoa_gg_._size_m_8gdoa_gg_{height:26px;min-width:26px;font-size:12px}.___STag_8gdoa_gg_._size_m_8gdoa_gg_ .___SCircle_8gdoa_gg_{width:20px;height:20px}.___STag_8gdoa_gg_._size_s_8gdoa_gg_{height:18px;min-width:18px;font-size:10px}.___STag_8gdoa_gg_._size_s_8gdoa_gg_ .___SCircle_8gdoa_gg_{width:12px;height:12px}.___STag_8gdoa_gg_._theme_primary-muted_8gdoa_gg_{background-color:rgba(224,225,233,.5);color:#6c6e79}.___STag_8gdoa_gg_._theme_primary-muted_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_primary-muted_8gdoa_gg_.__interactive_8gdoa_gg_:active,.___STag_8gdoa_gg_._theme_primary-muted_8gdoa_gg_.__interactive_8gdoa_gg_:hover{background-color:#e0e1e9}.___STag_8gdoa_gg_._theme_primary-warning_8gdoa_gg_{background-color:#ff7f00;color:#fff;border-color:#ff7f00}.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_{background-color:hsla(0,0%,100%,.2);color:#fff}.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_.__interactive_8gdoa_gg_:active,.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_.__interactive_8gdoa_gg_:hover{background-color:#fff;color:#333}.___STag_8gdoa_gg_._theme_primary-invert_8gdoa_gg_.__interactive_8gdoa_gg_ .___SClose_8gdoa_gg_:hover{color:#333}.___STag_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_{background-color:#fff;color:#666;border-color:#a6b0b3}.___STag_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_.__interactive_8gdoa_gg_:hover{color:#333}.___STag_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_.__interactive_8gdoa_gg_:active{background-color:#eee;color:#333}.___STag_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_{border-color:hsla(0,0%,100%,.2);color:#fff}.___STag_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_.__interactive_8gdoa_gg_:hover{border-color:hsla(0,0%,100%,.5)}.___STag_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_.__interactive_8gdoa_gg_:active{background-color:hsla(0,0%,100%,.1);border-color:hsla(0,0%,100%,.5)}.___STag_8gdoa_gg_._theme_custom_8gdoa_gg_{color:var(--colorText_f8cly9);background-color:var(--colorTag_f8cly9)}.___STag_8gdoa_gg_._theme_custom_8gdoa_gg_.__active_8gdoa_gg_,.___STag_8gdoa_gg_._theme_custom_8gdoa_gg_.__interactive_8gdoa_gg_:active,.___STag_8gdoa_gg_._theme_custom_8gdoa_gg_.__interactive_8gdoa_gg_:hover{color:#fff;background-color:var(--colorText_f8cly9)}.___SClose_8gdoa_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:4px}.___SClose_8gdoa_gg_._theme_primary-warning_8gdoa_gg_,.___SClose_8gdoa_gg_._theme_primary-warning_8gdoa_gg_:hover{color:#fff}.___SClose_8gdoa_gg_._theme_primary-invert_8gdoa_gg_{color:#999}.___SClose_8gdoa_gg_._theme_primary-invert_8gdoa_gg_:hover{color:#fff}.___SClose_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_{color:hsla(0,0%,40%,.5)}.___SClose_8gdoa_gg_._theme_secondary-muted_8gdoa_gg_:hover{color:#333}.___SClose_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_{color:hsla(0,0%,100%,.5)}.___SClose_8gdoa_gg_._theme_secondary-invert_8gdoa_gg_:hover{color:#fff}.___SClose_8gdoa_gg_._theme_custom_8gdoa_gg_{opacity:.5}.___SClose_8gdoa_gg_._theme_custom_8gdoa_gg_:hover{opacity:1}"
|
|
36
35
|
/*__inner_css_end__*/
|
|
37
|
-
, "
|
|
36
|
+
, "f8cly9_gg_")
|
|
38
37
|
/*__reshadow_css_end__*/
|
|
39
38
|
, {
|
|
40
|
-
"__STag": "
|
|
41
|
-
"__SText": "
|
|
42
|
-
"__SAddon": "
|
|
43
|
-
"__SCircle": "
|
|
44
|
-
"_disabled": "
|
|
45
|
-
"_interactive": "
|
|
46
|
-
"_size_xl": "
|
|
47
|
-
"_size_l": "
|
|
48
|
-
"_size_m": "
|
|
49
|
-
"_size_s": "
|
|
50
|
-
"_theme_primary-muted": "_theme_primary-
|
|
51
|
-
"_active": "
|
|
52
|
-
"_theme_primary-warning": "_theme_primary-
|
|
53
|
-
"_theme_primary-invert": "_theme_primary-
|
|
54
|
-
"__SClose": "
|
|
55
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
56
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
57
|
-
"_theme_custom": "
|
|
58
|
-
"--colorText": "--
|
|
59
|
-
"--colorTag": "--
|
|
39
|
+
"__STag": "___STag_8gdoa_gg_",
|
|
40
|
+
"__SText": "___SText_8gdoa_gg_",
|
|
41
|
+
"__SAddon": "___SAddon_8gdoa_gg_",
|
|
42
|
+
"__SCircle": "___SCircle_8gdoa_gg_",
|
|
43
|
+
"_disabled": "__disabled_8gdoa_gg_",
|
|
44
|
+
"_interactive": "__interactive_8gdoa_gg_",
|
|
45
|
+
"_size_xl": "_size_xl_8gdoa_gg_",
|
|
46
|
+
"_size_l": "_size_l_8gdoa_gg_",
|
|
47
|
+
"_size_m": "_size_m_8gdoa_gg_",
|
|
48
|
+
"_size_s": "_size_s_8gdoa_gg_",
|
|
49
|
+
"_theme_primary-muted": "_theme_primary-muted_8gdoa_gg_",
|
|
50
|
+
"_active": "__active_8gdoa_gg_",
|
|
51
|
+
"_theme_primary-warning": "_theme_primary-warning_8gdoa_gg_",
|
|
52
|
+
"_theme_primary-invert": "_theme_primary-invert_8gdoa_gg_",
|
|
53
|
+
"__SClose": "___SClose_8gdoa_gg_",
|
|
54
|
+
"_theme_secondary-muted": "_theme_secondary-muted_8gdoa_gg_",
|
|
55
|
+
"_theme_secondary-invert": "_theme_secondary-invert_8gdoa_gg_",
|
|
56
|
+
"_theme_custom": "_theme_custom_8gdoa_gg_",
|
|
57
|
+
"--colorText": "--colorText_f8cly9",
|
|
58
|
+
"--colorTag": "--colorTag_f8cly9"
|
|
60
59
|
});
|
|
61
60
|
|
|
62
61
|
function isCustomTheme(use, theme) {
|
|
@@ -168,7 +167,7 @@ function Close(props) {
|
|
|
168
167
|
size = props.size;
|
|
169
168
|
return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SClose, _ref8.cn("SClose", _objectSpread({}, _assignProps3({
|
|
170
169
|
"use:theme": getThemeName(use, theme),
|
|
171
|
-
"tag":
|
|
170
|
+
"tag": CloseM
|
|
172
171
|
}, _ref3))));
|
|
173
172
|
}
|
|
174
173
|
|
package/lib/es6/Tag.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Tag.js"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","opacity","addonTextChildren","
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.js"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","opacity","addonTextChildren","CloseM","isCustomTheme","use","theme","type","primary","secondary","includes","getThemeName","RootTag","asProps","size","STag","Children","styles","color","interactive","disabled","addonLeft","addonRight","useTheme","colorTag","colorText","Tag","Text","Addon","style","props","SText","Close","SClose","SAddon","Circle","SCircle"],"mappings":"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","sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { opacity } from '@semcore/utils/lib/color';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport CloseM from '@semcore/icon/Close/m';\n\nimport style from './style/tag.shadow.css';\n\nfunction isCustomTheme(use, theme) {\n const type = {\n primary: ['muted', 'invert', 'warning'],\n secondary: ['muted', 'invert'],\n };\n return type[use] ? !type[use].includes(theme) : true;\n}\n\nfunction getThemeName(use, theme) {\n return isCustomTheme(use, theme) ? 'custom' : `${use}-${theme}`;\n}\n\nclass RootTag extends Component {\n static displayName = 'Tag';\n static style = style;\n static defaultProps = {\n use: 'secondary',\n theme: 'muted',\n size: 'm',\n };\n\n getCloseProps() {\n const { use, theme, size } = this.asProps;\n return { use, theme, size };\n }\n\n render() {\n const STag = Root;\n let {\n Children,\n styles,\n theme,\n use,\n color,\n interactive,\n disabled,\n addonLeft,\n addonRight,\n } = this.asProps;\n\n if (disabled) {\n interactive = false;\n }\n\n const useTheme = getThemeName(use, theme);\n const colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';\n const colorText = color ? resolveColor(color) : resolveColor(theme);\n\n return sstyled(styles)(\n <STag\n render={Box}\n use:theme={useTheme}\n use:interactive={interactive}\n colorText={colorText}\n colorTag={colorTag}\n >\n {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n </STag>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { styles } = props;\n return sstyled(styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Close(props) {\n const SClose = Root;\n const { styles, use, theme, size } = props;\n\n return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n const { styles } = props;\n return sstyled(styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nfunction Circle(props) {\n const SCircle = Root;\n const { styles } = props;\n return sstyled(styles)(<SCircle render={Box} tag=\"span\" />);\n}\n\nconst Tag = createComponent(RootTag, {\n Text,\n Addon,\n Close,\n Circle,\n});\n\nexport default Tag;\n"],"file":"Tag.js"}
|
|
@@ -21,7 +21,7 @@ SText {
|
|
|
21
21
|
white-space: nowrap;
|
|
22
22
|
overflow: hidden;
|
|
23
23
|
text-overflow: ellipsis;
|
|
24
|
-
line-height: 1.
|
|
24
|
+
line-height: 1.1;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
SText:not(:only-child):first-child {
|
|
@@ -114,8 +114,7 @@ STag[theme='primary-muted'] {
|
|
|
114
114
|
color: #6c6e79;
|
|
115
115
|
&[interactive]:active,
|
|
116
116
|
&[active],
|
|
117
|
-
&[interactive]:hover
|
|
118
|
-
&:hover {
|
|
117
|
+
&[interactive]:hover {
|
|
119
118
|
background-color: #e0e1e9;
|
|
120
119
|
}
|
|
121
120
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { IIconProps } from '@semcore/icon';
|
|
|
5
5
|
|
|
6
6
|
export type TagSize = 'xl' | 'l' | 'm' | 's';
|
|
7
7
|
export type TagTheme = 'muted' | 'invert' | 'warning' | string;
|
|
8
|
-
export type TagUse = 'primary' | 'secondary';
|
|
8
|
+
export type TagUse = 'primary' | 'secondary' | 'custom';
|
|
9
9
|
|
|
10
10
|
export interface ITagProps extends IBoxProps {
|
|
11
11
|
/** Value responsible for tag availability
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/tag",
|
|
3
3
|
"description": "SEMRush Tag Component",
|
|
4
|
-
"version": "3.
|
|
4
|
+
"version": "3.6.0",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"@semcore/utils": "^3.15",
|
|
17
|
-
"@semcore/icon": "^2",
|
|
17
|
+
"@semcore/icon": "^2.16",
|
|
18
18
|
"@semcore/flex-box": "^4"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
package/src/Tag.js
CHANGED
|
@@ -3,8 +3,7 @@ import createComponent, { Component, sstyled, Root } from '@semcore/core';
|
|
|
3
3
|
import { Box } from '@semcore/flex-box';
|
|
4
4
|
import resolveColor, { opacity } from '@semcore/utils/lib/color';
|
|
5
5
|
import addonTextChildren from '@semcore/utils/lib/addonTextChildren';
|
|
6
|
-
import
|
|
7
|
-
import CloseXXS from '@semcore/icon/lib/Close/xxs';
|
|
6
|
+
import CloseM from '@semcore/icon/Close/m';
|
|
8
7
|
|
|
9
8
|
import style from './style/tag.shadow.css';
|
|
10
9
|
|
|
@@ -82,13 +81,7 @@ function Close(props) {
|
|
|
82
81
|
const SClose = Root;
|
|
83
82
|
const { styles, use, theme, size } = props;
|
|
84
83
|
|
|
85
|
-
return sstyled(styles)(
|
|
86
|
-
<SClose
|
|
87
|
-
render={Box}
|
|
88
|
-
use:theme={getThemeName(use, theme)}
|
|
89
|
-
tag={size === 'xl' ? CloseXS : CloseXXS}
|
|
90
|
-
/>,
|
|
91
|
-
);
|
|
84
|
+
return sstyled(styles)(<SClose render={Box} use:theme={getThemeName(use, theme)} tag={CloseM} />);
|
|
92
85
|
}
|
|
93
86
|
|
|
94
87
|
function Addon(props) {
|
package/src/index.d.ts
CHANGED
|
@@ -5,7 +5,7 @@ import { IIconProps } from '@semcore/icon';
|
|
|
5
5
|
|
|
6
6
|
export type TagSize = 'xl' | 'l' | 'm' | 's';
|
|
7
7
|
export type TagTheme = 'muted' | 'invert' | 'warning' | string;
|
|
8
|
-
export type TagUse = 'primary' | 'secondary';
|
|
8
|
+
export type TagUse = 'primary' | 'secondary' | 'custom';
|
|
9
9
|
|
|
10
10
|
export interface ITagProps extends IBoxProps {
|
|
11
11
|
/** Value responsible for tag availability
|
package/src/style/tag.shadow.css
CHANGED
|
@@ -21,7 +21,7 @@ SText {
|
|
|
21
21
|
white-space: nowrap;
|
|
22
22
|
overflow: hidden;
|
|
23
23
|
text-overflow: ellipsis;
|
|
24
|
-
line-height: 1.
|
|
24
|
+
line-height: 1.1;
|
|
25
25
|
}
|
|
26
26
|
|
|
27
27
|
SText:not(:only-child):first-child {
|
|
@@ -114,8 +114,7 @@ STag[theme='primary-muted'] {
|
|
|
114
114
|
color: #6c6e79;
|
|
115
115
|
&[interactive]:active,
|
|
116
116
|
&[active],
|
|
117
|
-
&[interactive]:hover
|
|
118
|
-
&:hover {
|
|
117
|
+
&[interactive]:hover {
|
|
119
118
|
background-color: #e0e1e9;
|
|
120
119
|
}
|
|
121
120
|
}
|