@semcore/tag 3.5.0 → 3.5.4
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 +23 -28
- package/lib/cjs/Tag.js.map +1 -1
- package/lib/cjs/style/tag.shadow.css +11 -1
- package/lib/es6/Tag.js +23 -28
- package/lib/es6/Tag.js.map +1 -1
- package/lib/es6/style/tag.shadow.css +11 -1
- package/lib/types/index.d.ts +1 -1
- package/package.json +1 -1
- package/src/Tag.js +1 -5
- package/src/index.d.ts +1 -1
- package/src/style/tag.shadow.css +11 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,12 +2,40 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.5.4] - 2021-12-28
|
|
6
|
+
|
|
7
|
+
### Fixed
|
|
8
|
+
|
|
9
|
+
- [ts] Added type `custom` in property `use`.
|
|
10
|
+
|
|
11
|
+
## [3.5.3] - 2021-12-23
|
|
12
|
+
|
|
13
|
+
### Changed
|
|
14
|
+
|
|
15
|
+
- Changed `line-height` from 1.2 to 1.1 for correct display in all browsers.
|
|
16
|
+
|
|
17
|
+
## [3.5.2] - 2021-12-17
|
|
18
|
+
|
|
19
|
+
### Fixed
|
|
20
|
+
|
|
21
|
+
- Fixed hover for non-interactive tag
|
|
22
|
+
|
|
23
|
+
## [3.5.1] - 2021-12-17
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- Added primary-muted theme
|
|
28
|
+
|
|
5
29
|
## [3.5.0] - 2021-12-08
|
|
6
30
|
|
|
7
31
|
### Added
|
|
8
32
|
|
|
9
33
|
- Added property for Tag color
|
|
10
34
|
|
|
35
|
+
### Changed
|
|
36
|
+
|
|
37
|
+
- Changed the opacity of the Tag color from 0.15 to 0.5.
|
|
38
|
+
|
|
11
39
|
## [3.4.2] - 2021-8-26
|
|
12
40
|
|
|
13
41
|
### Changed
|
package/lib/cjs/Tag.js
CHANGED
|
@@ -48,35 +48,36 @@ var style = (
|
|
|
48
48
|
/*__reshadow_css_start__*/
|
|
49
49
|
_core.sstyled.insert(
|
|
50
50
|
/*__inner_css_start__*/
|
|
51
|
-
".
|
|
51
|
+
".___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
52
|
/*__inner_css_end__*/
|
|
53
|
-
, "
|
|
53
|
+
, "f8cly9_gg_")
|
|
54
54
|
/*__reshadow_css_end__*/
|
|
55
55
|
, {
|
|
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-
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"_theme_secondary-
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"--
|
|
56
|
+
"__STag": "___STag_8gdoa_gg_",
|
|
57
|
+
"__SText": "___SText_8gdoa_gg_",
|
|
58
|
+
"__SAddon": "___SAddon_8gdoa_gg_",
|
|
59
|
+
"__SCircle": "___SCircle_8gdoa_gg_",
|
|
60
|
+
"_disabled": "__disabled_8gdoa_gg_",
|
|
61
|
+
"_interactive": "__interactive_8gdoa_gg_",
|
|
62
|
+
"_size_xl": "_size_xl_8gdoa_gg_",
|
|
63
|
+
"_size_l": "_size_l_8gdoa_gg_",
|
|
64
|
+
"_size_m": "_size_m_8gdoa_gg_",
|
|
65
|
+
"_size_s": "_size_s_8gdoa_gg_",
|
|
66
|
+
"_theme_primary-muted": "_theme_primary-muted_8gdoa_gg_",
|
|
67
|
+
"_active": "__active_8gdoa_gg_",
|
|
68
|
+
"_theme_primary-warning": "_theme_primary-warning_8gdoa_gg_",
|
|
69
|
+
"_theme_primary-invert": "_theme_primary-invert_8gdoa_gg_",
|
|
70
|
+
"__SClose": "___SClose_8gdoa_gg_",
|
|
71
|
+
"_theme_secondary-muted": "_theme_secondary-muted_8gdoa_gg_",
|
|
72
|
+
"_theme_secondary-invert": "_theme_secondary-invert_8gdoa_gg_",
|
|
73
|
+
"_theme_custom": "_theme_custom_8gdoa_gg_",
|
|
74
|
+
"--colorText": "--colorText_f8cly9",
|
|
75
|
+
"--colorTag": "--colorTag_f8cly9"
|
|
75
76
|
});
|
|
76
77
|
|
|
77
78
|
function isCustomTheme(use, theme) {
|
|
78
79
|
var type = {
|
|
79
|
-
primary: ['invert', 'warning'],
|
|
80
|
+
primary: ['muted', 'invert', 'warning'],
|
|
80
81
|
secondary: ['muted', 'invert']
|
|
81
82
|
};
|
|
82
83
|
return type[use] ? !type[use].includes(theme) : true;
|
|
@@ -130,12 +131,6 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
130
131
|
if (disabled) {
|
|
131
132
|
interactive = false;
|
|
132
133
|
}
|
|
133
|
-
/* hack */
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
if (use === 'primary' && theme === 'muted') {
|
|
137
|
-
theme = 'asphalt';
|
|
138
|
-
}
|
|
139
134
|
|
|
140
135
|
var useTheme = getThemeName(use, theme);
|
|
141
136
|
var colorTag = theme ? (0, _color.opacity)((0, _color["default"])(theme), 0.5) : '';
|
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","CloseXS","CloseXXS","SAddon","Circle","SCircle"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA
|
|
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","CloseXS","CloseXXS","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 CloseXS from '@semcore/icon/lib/Close/xs';\nimport CloseXXS from '@semcore/icon/lib/Close/xxs';\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)(\n <SClose\n render={Box}\n use:theme={getThemeName(use, theme)}\n tag={size === 'xl' ? CloseXS : CloseXXS}\n />,\n );\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 {
|
|
@@ -109,6 +109,16 @@ STag[size='s'] {
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
STag[theme='primary-muted'] {
|
|
113
|
+
background-color: rgba(224, 225, 233, 0.5);
|
|
114
|
+
color: #6c6e79;
|
|
115
|
+
&[interactive]:active,
|
|
116
|
+
&[active],
|
|
117
|
+
&[interactive]:hover {
|
|
118
|
+
background-color: #e0e1e9;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
112
122
|
STag[theme='primary-warning'] {
|
|
113
123
|
background-color: var(--orange);
|
|
114
124
|
color: #fff;
|
package/lib/es6/Tag.js
CHANGED
|
@@ -32,35 +32,36 @@ var style = (
|
|
|
32
32
|
/*__reshadow_css_start__*/
|
|
33
33
|
_sstyled.insert(
|
|
34
34
|
/*__inner_css_start__*/
|
|
35
|
-
".
|
|
35
|
+
".___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
36
|
/*__inner_css_end__*/
|
|
37
|
-
, "
|
|
37
|
+
, "f8cly9_gg_")
|
|
38
38
|
/*__reshadow_css_end__*/
|
|
39
39
|
, {
|
|
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-
|
|
51
|
-
"
|
|
52
|
-
"
|
|
53
|
-
"
|
|
54
|
-
"
|
|
55
|
-
"_theme_secondary-
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"--
|
|
40
|
+
"__STag": "___STag_8gdoa_gg_",
|
|
41
|
+
"__SText": "___SText_8gdoa_gg_",
|
|
42
|
+
"__SAddon": "___SAddon_8gdoa_gg_",
|
|
43
|
+
"__SCircle": "___SCircle_8gdoa_gg_",
|
|
44
|
+
"_disabled": "__disabled_8gdoa_gg_",
|
|
45
|
+
"_interactive": "__interactive_8gdoa_gg_",
|
|
46
|
+
"_size_xl": "_size_xl_8gdoa_gg_",
|
|
47
|
+
"_size_l": "_size_l_8gdoa_gg_",
|
|
48
|
+
"_size_m": "_size_m_8gdoa_gg_",
|
|
49
|
+
"_size_s": "_size_s_8gdoa_gg_",
|
|
50
|
+
"_theme_primary-muted": "_theme_primary-muted_8gdoa_gg_",
|
|
51
|
+
"_active": "__active_8gdoa_gg_",
|
|
52
|
+
"_theme_primary-warning": "_theme_primary-warning_8gdoa_gg_",
|
|
53
|
+
"_theme_primary-invert": "_theme_primary-invert_8gdoa_gg_",
|
|
54
|
+
"__SClose": "___SClose_8gdoa_gg_",
|
|
55
|
+
"_theme_secondary-muted": "_theme_secondary-muted_8gdoa_gg_",
|
|
56
|
+
"_theme_secondary-invert": "_theme_secondary-invert_8gdoa_gg_",
|
|
57
|
+
"_theme_custom": "_theme_custom_8gdoa_gg_",
|
|
58
|
+
"--colorText": "--colorText_f8cly9",
|
|
59
|
+
"--colorTag": "--colorTag_f8cly9"
|
|
59
60
|
});
|
|
60
61
|
|
|
61
62
|
function isCustomTheme(use, theme) {
|
|
62
63
|
var type = {
|
|
63
|
-
primary: ['invert', 'warning'],
|
|
64
|
+
primary: ['muted', 'invert', 'warning'],
|
|
64
65
|
secondary: ['muted', 'invert']
|
|
65
66
|
};
|
|
66
67
|
return type[use] ? !type[use].includes(theme) : true;
|
|
@@ -115,12 +116,6 @@ var RootTag = /*#__PURE__*/function (_Component) {
|
|
|
115
116
|
if (disabled) {
|
|
116
117
|
interactive = false;
|
|
117
118
|
}
|
|
118
|
-
/* hack */
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
if (use === 'primary' && theme === 'muted') {
|
|
122
|
-
theme = 'asphalt';
|
|
123
|
-
}
|
|
124
119
|
|
|
125
120
|
var useTheme = getThemeName(use, theme);
|
|
126
121
|
var colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';
|
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","CloseXS","CloseXXS","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":";;;;;;;;;;;;;;;;;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,eAAP,IAA0BC,SAA1B,EAAqCC,OAArC,EAA8CC,IAA9C,QAA0D,eAA1D;AACA,SAASC,GAAT,QAAoB,mBAApB;AACA,OAAOC,YAAP,IAAuBC,OAAvB,QAAsC,0BAAtC;AACA,OAAOC,iBAAP,MAA8B,sCAA9B;AACA,OAAOC,OAAP,MAAoB,4BAApB;AACA,OAAOC,QAAP,MAAqB,6BAArB
|
|
1
|
+
{"version":3,"sources":["../../src/Tag.js"],"names":["React","createComponent","Component","sstyled","Root","Box","resolveColor","opacity","addonTextChildren","CloseXS","CloseXXS","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 CloseXS from '@semcore/icon/lib/Close/xs';\nimport CloseXXS from '@semcore/icon/lib/Close/xxs';\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)(\n <SClose\n render={Box}\n use:theme={getThemeName(use, theme)}\n tag={size === 'xl' ? CloseXS : CloseXXS}\n />,\n );\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 {
|
|
@@ -109,6 +109,16 @@ STag[size='s'] {
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
STag[theme='primary-muted'] {
|
|
113
|
+
background-color: rgba(224, 225, 233, 0.5);
|
|
114
|
+
color: #6c6e79;
|
|
115
|
+
&[interactive]:active,
|
|
116
|
+
&[active],
|
|
117
|
+
&[interactive]:hover {
|
|
118
|
+
background-color: #e0e1e9;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
112
122
|
STag[theme='primary-warning'] {
|
|
113
123
|
background-color: var(--orange);
|
|
114
124
|
color: #fff;
|
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
package/src/Tag.js
CHANGED
|
@@ -10,7 +10,7 @@ import style from './style/tag.shadow.css';
|
|
|
10
10
|
|
|
11
11
|
function isCustomTheme(use, theme) {
|
|
12
12
|
const type = {
|
|
13
|
-
primary: ['invert', 'warning'],
|
|
13
|
+
primary: ['muted', 'invert', 'warning'],
|
|
14
14
|
secondary: ['muted', 'invert'],
|
|
15
15
|
};
|
|
16
16
|
return type[use] ? !type[use].includes(theme) : true;
|
|
@@ -51,10 +51,6 @@ class RootTag extends Component {
|
|
|
51
51
|
if (disabled) {
|
|
52
52
|
interactive = false;
|
|
53
53
|
}
|
|
54
|
-
/* hack */
|
|
55
|
-
if (use === 'primary' && theme === 'muted') {
|
|
56
|
-
theme = 'asphalt';
|
|
57
|
-
}
|
|
58
54
|
|
|
59
55
|
const useTheme = getThemeName(use, theme);
|
|
60
56
|
const colorTag = theme ? opacity(resolveColor(theme), 0.5) : '';
|
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 {
|
|
@@ -109,6 +109,16 @@ STag[size='s'] {
|
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
111
|
|
|
112
|
+
STag[theme='primary-muted'] {
|
|
113
|
+
background-color: rgba(224, 225, 233, 0.5);
|
|
114
|
+
color: #6c6e79;
|
|
115
|
+
&[interactive]:active,
|
|
116
|
+
&[active],
|
|
117
|
+
&[interactive]:hover {
|
|
118
|
+
background-color: #e0e1e9;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
112
122
|
STag[theme='primary-warning'] {
|
|
113
123
|
background-color: var(--orange);
|
|
114
124
|
color: #fff;
|