@semcore/pills 3.5.4 → 4.0.1
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 +19 -0
- package/lib/cjs/Pills.js +18 -20
- package/lib/cjs/Pills.js.map +1 -1
- package/lib/cjs/index.d.ts +52 -0
- package/lib/cjs/index.js +2 -19
- package/lib/cjs/index.js.map +1 -1
- package/lib/cjs/style/pills.shadow.css +21 -78
- package/lib/es6/Pills.js +18 -20
- package/lib/es6/Pills.js.map +1 -1
- package/lib/es6/index.d.ts +52 -0
- package/lib/es6/index.js +0 -1
- package/lib/es6/index.js.map +1 -1
- package/lib/es6/style/pills.shadow.css +21 -78
- package/lib/types/index.d.ts +5 -3
- package/package.json +6 -1
- package/src/{Pills.js → Pills.jsx} +0 -0
- package/src/index.d.ts +5 -3
- package/src/index.js +0 -1
- package/src/style/pills.shadow.css +21 -78
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,25 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [4.0.1] - 2022-05-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/icon` [2.24.0 ~> 2.25.0]).
|
|
10
|
+
|
|
11
|
+
## [4.0.0] - 2022-05-17
|
|
12
|
+
|
|
13
|
+
### BREAK
|
|
14
|
+
|
|
15
|
+
- Updated styles according to the library redesign policy.
|
|
16
|
+
- Remove value "xl"/"s"" for "size".
|
|
17
|
+
|
|
18
|
+
## [3.5.5] - 2022-03-14
|
|
19
|
+
|
|
20
|
+
### Changed
|
|
21
|
+
|
|
22
|
+
- Version patch update due to children dependencies update (`@semcore/utils` [3.31.2 ~> 3.31.2], `@semcore/flex-box` [4.5.0 ~> 4.5.1], `@semcore/neighbor-location` [2.3.4 ~> 2.3.5]).
|
|
23
|
+
|
|
5
24
|
## [3.5.4] - 2022-02-24
|
|
6
25
|
|
|
7
26
|
### Added
|
package/lib/cjs/Pills.js
CHANGED
|
@@ -52,25 +52,23 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___SPills_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:#ffffff;border:1px solid #c4c7cf;border-radius:6px}.___SPill_1frzm_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1frzm_gg_:active,.___SPill_1frzm_gg_:focus,.___SPill_1frzm_gg_:hover{outline:0;text-decoration:none}.___SPill_1frzm_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_1frzm_gg_.__selected_1frzm_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_1frzm_gg_.__disabled_1frzm_gg_{cursor:default;pointer-events:none}.___SPill_1frzm_gg_.__disabled_1frzm_gg_>*{opacity:0.3}.___SPill_1frzm_gg_.__keyboardFocused_1frzm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1frzm_gg_{color:#191b23;display:inline-flex}.___SAddon_1frzm_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_._size_m_1frzm_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._neighborLocation_right_1frzm_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1frzm_gg_._neighborLocation_both_1frzm_gg_{border-radius:0;margin-left:-1px}.___SPill_1frzm_gg_._neighborLocation_left_1frzm_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "1dqcagg_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SPills": "
|
|
61
|
-
"__SPill": "
|
|
62
|
-
"_selected": "
|
|
63
|
-
"_disabled": "
|
|
64
|
-
"_keyboardFocused": "
|
|
65
|
-
"__SText": "
|
|
66
|
-
"__SAddon": "
|
|
67
|
-
"
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"_neighborLocation_both": "_neighborLocation_both_1gi6g_gg_",
|
|
73
|
-
"_neighborLocation_left": "_neighborLocation_left_1gi6g_gg_"
|
|
60
|
+
"__SPills": "___SPills_1frzm_gg_",
|
|
61
|
+
"__SPill": "___SPill_1frzm_gg_",
|
|
62
|
+
"_selected": "__selected_1frzm_gg_",
|
|
63
|
+
"_disabled": "__disabled_1frzm_gg_",
|
|
64
|
+
"_keyboardFocused": "__keyboardFocused_1frzm_gg_",
|
|
65
|
+
"__SText": "___SText_1frzm_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_1frzm_gg_",
|
|
67
|
+
"_size_m": "_size_m_1frzm_gg_",
|
|
68
|
+
"_size_l": "_size_l_1frzm_gg_",
|
|
69
|
+
"_neighborLocation_right": "_neighborLocation_right_1frzm_gg_",
|
|
70
|
+
"_neighborLocation_both": "_neighborLocation_both_1frzm_gg_",
|
|
71
|
+
"_neighborLocation_left": "_neighborLocation_left_1frzm_gg_"
|
|
74
72
|
});
|
|
75
73
|
|
|
76
74
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
@@ -120,7 +118,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
120
118
|
}, {
|
|
121
119
|
key: "render",
|
|
122
120
|
value: function render() {
|
|
123
|
-
var _ref = this
|
|
121
|
+
var _ref = this.asProps,
|
|
124
122
|
_ref5;
|
|
125
123
|
|
|
126
124
|
var SPills = _flexBox.Box;
|
|
@@ -144,7 +142,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
144
142
|
});
|
|
145
143
|
|
|
146
144
|
function Pill(props) {
|
|
147
|
-
var _ref2 =
|
|
145
|
+
var _ref2 = arguments[0],
|
|
148
146
|
_ref6;
|
|
149
147
|
|
|
150
148
|
var SPill = _flexBox.Box;
|
|
@@ -165,7 +163,7 @@ function Pill(props) {
|
|
|
165
163
|
Pill.enhance = [(0, _keyboardFocusEnhance["default"])(), (0, _neighborLocation.neighborLocationEnhance)()];
|
|
166
164
|
|
|
167
165
|
function Text(props) {
|
|
168
|
-
var _ref3 =
|
|
166
|
+
var _ref3 = arguments[0],
|
|
169
167
|
_ref7;
|
|
170
168
|
|
|
171
169
|
var SText = _flexBox.Box;
|
|
@@ -175,7 +173,7 @@ function Text(props) {
|
|
|
175
173
|
}
|
|
176
174
|
|
|
177
175
|
function Addon(props) {
|
|
178
|
-
var _ref4 =
|
|
176
|
+
var _ref4 = arguments[0],
|
|
179
177
|
_ref8;
|
|
180
178
|
|
|
181
179
|
var SAddon = _flexBox.Box;
|
package/lib/cjs/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Pills.
|
|
1
|
+
{"version":3,"sources":["../../src/Pills.jsx"],"names":["RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Box","Children","styles","controlsLength","Component","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"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 NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = {\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props) {\n const { value, size, disabled } = this.asProps;\n return {\n size,\n disabled,\n selected: value === props.value,\n onClick: this.bindHandlerClick(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <SPills render={Box}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <SPill render={Box} type=\"button\" tag=\"button\">\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"file":"Pills.js"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
|
|
7
|
+
export type PillsValue = string | number | boolean;
|
|
8
|
+
|
|
9
|
+
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
10
|
+
/** Pills size */
|
|
11
|
+
size?: 'l' | 'm';
|
|
12
|
+
/** Disabled state */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** Called when the selection is changed */
|
|
15
|
+
onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
|
|
16
|
+
/** Value for the selected pill */
|
|
17
|
+
value?: T;
|
|
18
|
+
/** Default value for the selected pill */
|
|
19
|
+
defaultValue?: T;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
23
|
+
/** Pill value */
|
|
24
|
+
value?: PillsValue;
|
|
25
|
+
/** Disabled state */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Selected state */
|
|
28
|
+
selected?: boolean;
|
|
29
|
+
/** Left addon text */
|
|
30
|
+
addonLeft?: React.ElementType;
|
|
31
|
+
/** Right addon tag */
|
|
32
|
+
addonRight?: React.ElementType;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export interface IPillsContext {
|
|
36
|
+
getItemProps: PropGetterFn;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export interface IPopperHandlers {
|
|
40
|
+
value: (value: PillsValue) => void;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
declare const Pills: (<T, V extends PillsValue = PillsValue>(
|
|
44
|
+
props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
|
|
45
|
+
) => ReturnEl) & {
|
|
46
|
+
Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
|
|
47
|
+
Text: typeof Box;
|
|
48
|
+
Addon: typeof Box;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export default Pills;
|
package/lib/cjs/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
4
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
var _exportNames = {};
|
|
9
8
|
Object.defineProperty(exports, "default", {
|
|
10
9
|
enumerable: true,
|
|
11
10
|
get: function get() {
|
|
@@ -13,21 +12,5 @@ Object.defineProperty(exports, "default", {
|
|
|
13
12
|
}
|
|
14
13
|
});
|
|
15
14
|
|
|
16
|
-
var _Pills =
|
|
17
|
-
|
|
18
|
-
Object.keys(_Pills).forEach(function (key) {
|
|
19
|
-
if (key === "default" || key === "__esModule") return;
|
|
20
|
-
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
21
|
-
if (key in exports && exports[key] === _Pills[key]) return;
|
|
22
|
-
Object.defineProperty(exports, key, {
|
|
23
|
-
enumerable: true,
|
|
24
|
-
get: function get() {
|
|
25
|
-
return _Pills[key];
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
31
|
-
|
|
32
|
-
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
var _Pills = _interopRequireDefault(require("./Pills"));
|
|
33
16
|
//# sourceMappingURL=index.js.map
|
package/lib/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default } from './Pills';\n"],"file":"index.js"}
|
|
@@ -28,9 +28,9 @@ SPill {
|
|
|
28
28
|
vertical-align: middle;
|
|
29
29
|
font-family: inherit;
|
|
30
30
|
cursor: pointer;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
border:
|
|
31
|
+
background: var(--white);
|
|
32
|
+
border: 1px solid var(--gray-200);
|
|
33
|
+
border-radius: var(--rounded-m);
|
|
34
34
|
|
|
35
35
|
&::-moz-focus-inner {
|
|
36
36
|
border: none;
|
|
@@ -45,18 +45,14 @@ SPill {
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
&:hover {
|
|
48
|
-
background: color-mod(var(--
|
|
48
|
+
background: color-mod(var(--gray-400) a(20%));
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
SPill[selected] {
|
|
53
|
-
background: color-mod(var(--
|
|
54
|
-
border-color: var(--
|
|
53
|
+
background: color-mod(var(--blue-400) a(20%));
|
|
54
|
+
border-color: var(--blue-400);
|
|
55
55
|
z-index: 1;
|
|
56
|
-
|
|
57
|
-
&:enabled:hover {
|
|
58
|
-
background: color-mod(var(--light-blue) a(20%));
|
|
59
|
-
}
|
|
60
56
|
}
|
|
61
57
|
|
|
62
58
|
SPill[disabled] {
|
|
@@ -69,55 +65,25 @@ SPill[disabled] {
|
|
|
69
65
|
}
|
|
70
66
|
|
|
71
67
|
SPill[keyboardFocused] {
|
|
72
|
-
box-shadow: var(--
|
|
68
|
+
box-shadow: var(--keyboard-focus);
|
|
73
69
|
}
|
|
74
70
|
|
|
75
71
|
SText {
|
|
76
|
-
color: var(--
|
|
72
|
+
color: var(--gray-800);
|
|
77
73
|
display: inline-flex;
|
|
78
|
-
line-height: 1.1;
|
|
79
74
|
}
|
|
80
75
|
|
|
81
76
|
SAddon {
|
|
82
|
-
color: var(--
|
|
77
|
+
color: var(--gray-500);
|
|
83
78
|
display: inline-flex;
|
|
84
79
|
align-items: center;
|
|
85
80
|
justify-content: center;
|
|
86
|
-
line-height: 1.1;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
SPill[size='s'] {
|
|
90
|
-
height: 18px;
|
|
91
|
-
min-width: 18px;
|
|
92
|
-
border-radius: 2px;
|
|
93
|
-
font-size: 10px;
|
|
94
|
-
|
|
95
|
-
& SText {
|
|
96
|
-
margin-left: 4px;
|
|
97
|
-
margin-right: 4px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
& SAddon {
|
|
101
|
-
&:not(:only-child):first-child {
|
|
102
|
-
margin-left: 4px;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&:not(:only-child):last-child {
|
|
106
|
-
margin-right: 4px;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&:only-child {
|
|
110
|
-
margin-left: -2px;
|
|
111
|
-
margin-right: -2px;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
81
|
}
|
|
115
82
|
|
|
116
83
|
SPill[size='m'] {
|
|
117
|
-
height:
|
|
118
|
-
min-width:
|
|
119
|
-
|
|
120
|
-
font-size: 12px;
|
|
84
|
+
height: var(--form-control-m);
|
|
85
|
+
min-width: var(--form-control-m);
|
|
86
|
+
font-size: var(--fs-200);
|
|
121
87
|
|
|
122
88
|
& SText {
|
|
123
89
|
margin-left: 8px;
|
|
@@ -134,49 +100,26 @@ SPill[size='m'] {
|
|
|
134
100
|
}
|
|
135
101
|
|
|
136
102
|
&:only-child {
|
|
137
|
-
margin-left:
|
|
138
|
-
margin-right:
|
|
103
|
+
margin-left: 8px;
|
|
104
|
+
margin-right: 8px;
|
|
139
105
|
}
|
|
140
106
|
}
|
|
141
107
|
}
|
|
142
108
|
|
|
143
109
|
SPill[size='l'] {
|
|
144
|
-
height:
|
|
145
|
-
min-width:
|
|
146
|
-
|
|
147
|
-
font-size: 14px;
|
|
110
|
+
height: var(--form-control-l);
|
|
111
|
+
min-width: var(--form-control-l);
|
|
112
|
+
font-size: var(--fs-300);
|
|
148
113
|
|
|
149
114
|
& SText {
|
|
150
115
|
margin-left: 8px;
|
|
151
116
|
margin-right: 8px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
& SAddon {
|
|
155
|
-
&:not(:only-child):first-child {
|
|
156
|
-
margin-left: 8px;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
&:not(:only-child):last-child {
|
|
160
|
-
margin-right: 8px;
|
|
161
|
-
}
|
|
162
117
|
|
|
163
118
|
&:only-child {
|
|
164
|
-
margin-left:
|
|
165
|
-
margin-right:
|
|
119
|
+
margin-left: 12px;
|
|
120
|
+
margin-right: 12px;
|
|
166
121
|
}
|
|
167
122
|
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
SPill[size='xl'] {
|
|
171
|
-
height: 42px;
|
|
172
|
-
min-width: 42px;
|
|
173
|
-
border-radius: 5px;
|
|
174
|
-
font-size: 16px;
|
|
175
|
-
|
|
176
|
-
& SText {
|
|
177
|
-
margin-left: 12px;
|
|
178
|
-
margin-right: 12px;
|
|
179
|
-
}
|
|
180
123
|
|
|
181
124
|
& SAddon {
|
|
182
125
|
&:not(:only-child):first-child {
|
|
@@ -188,8 +131,8 @@ SPill[size='xl'] {
|
|
|
188
131
|
}
|
|
189
132
|
|
|
190
133
|
&:only-child {
|
|
191
|
-
margin-left:
|
|
192
|
-
margin-right:
|
|
134
|
+
margin-left: 12px;
|
|
135
|
+
margin-right: 12px;
|
|
193
136
|
}
|
|
194
137
|
}
|
|
195
138
|
}
|
package/lib/es6/Pills.js
CHANGED
|
@@ -31,25 +31,23 @@ var style = (
|
|
|
31
31
|
/*__reshadow_css_start__*/
|
|
32
32
|
_sstyled.insert(
|
|
33
33
|
/*__inner_css_start__*/
|
|
34
|
-
".
|
|
34
|
+
".___SPills_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_{display:inline-flex;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:inherit;cursor:pointer;background:#ffffff;border:1px solid #c4c7cf;border-radius:6px}.___SPill_1frzm_gg_::-moz-focus-inner{border:none;padding:0}.___SPill_1frzm_gg_:active,.___SPill_1frzm_gg_:focus,.___SPill_1frzm_gg_:hover{outline:0;text-decoration:none}.___SPill_1frzm_gg_:hover{background:rgba(138,142,155,.2)}.___SPill_1frzm_gg_.__selected_1frzm_gg_{background:rgba(0,143,248,.2);border-color:#008ff8;z-index:1}.___SPill_1frzm_gg_.__disabled_1frzm_gg_{cursor:default;pointer-events:none}.___SPill_1frzm_gg_.__disabled_1frzm_gg_>*{opacity:0.3}.___SPill_1frzm_gg_.__keyboardFocused_1frzm_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SText_1frzm_gg_{color:#191b23;display:inline-flex}.___SAddon_1frzm_gg_{color:#6c6e79;display:inline-flex;align-items:center;justify-content:center}.___SPill_1frzm_gg_._size_m_1frzm_gg_{height:28px;min-width:28px;font-size:14px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:8px}.___SPill_1frzm_gg_._size_m_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_{height:40px;min-width:40px;font-size:16px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_{margin-left:8px;margin-right:8px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SText_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):first-child{margin-left:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:not(:only-child):last-child{margin-right:12px}.___SPill_1frzm_gg_._size_l_1frzm_gg_ .___SAddon_1frzm_gg_:only-child{margin-left:12px;margin-right:12px}.___SPill_1frzm_gg_._neighborLocation_right_1frzm_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SPill_1frzm_gg_._neighborLocation_both_1frzm_gg_{border-radius:0;margin-left:-1px}.___SPill_1frzm_gg_._neighborLocation_left_1frzm_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}"
|
|
35
35
|
/*__inner_css_end__*/
|
|
36
|
-
, "
|
|
36
|
+
, "1dqcagg_gg_")
|
|
37
37
|
/*__reshadow_css_end__*/
|
|
38
38
|
, {
|
|
39
|
-
"__SPills": "
|
|
40
|
-
"__SPill": "
|
|
41
|
-
"_selected": "
|
|
42
|
-
"_disabled": "
|
|
43
|
-
"_keyboardFocused": "
|
|
44
|
-
"__SText": "
|
|
45
|
-
"__SAddon": "
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
50
|
-
"
|
|
51
|
-
"_neighborLocation_both": "_neighborLocation_both_1gi6g_gg_",
|
|
52
|
-
"_neighborLocation_left": "_neighborLocation_left_1gi6g_gg_"
|
|
39
|
+
"__SPills": "___SPills_1frzm_gg_",
|
|
40
|
+
"__SPill": "___SPill_1frzm_gg_",
|
|
41
|
+
"_selected": "__selected_1frzm_gg_",
|
|
42
|
+
"_disabled": "__disabled_1frzm_gg_",
|
|
43
|
+
"_keyboardFocused": "__keyboardFocused_1frzm_gg_",
|
|
44
|
+
"__SText": "___SText_1frzm_gg_",
|
|
45
|
+
"__SAddon": "___SAddon_1frzm_gg_",
|
|
46
|
+
"_size_m": "_size_m_1frzm_gg_",
|
|
47
|
+
"_size_l": "_size_l_1frzm_gg_",
|
|
48
|
+
"_neighborLocation_right": "_neighborLocation_right_1frzm_gg_",
|
|
49
|
+
"_neighborLocation_both": "_neighborLocation_both_1frzm_gg_",
|
|
50
|
+
"_neighborLocation_left": "_neighborLocation_left_1frzm_gg_"
|
|
53
51
|
});
|
|
54
52
|
|
|
55
53
|
var RootPills = /*#__PURE__*/function (_Component) {
|
|
@@ -101,7 +99,7 @@ var RootPills = /*#__PURE__*/function (_Component) {
|
|
|
101
99
|
}, {
|
|
102
100
|
key: "render",
|
|
103
101
|
value: function render() {
|
|
104
|
-
var _ref = this
|
|
102
|
+
var _ref = this.asProps,
|
|
105
103
|
_ref5;
|
|
106
104
|
|
|
107
105
|
var SPills = Box;
|
|
@@ -128,7 +126,7 @@ _defineProperty(RootPills, "defaultProps", {
|
|
|
128
126
|
});
|
|
129
127
|
|
|
130
128
|
function Pill(props) {
|
|
131
|
-
var _ref2 =
|
|
129
|
+
var _ref2 = arguments[0],
|
|
132
130
|
_ref6;
|
|
133
131
|
|
|
134
132
|
var SPill = Box;
|
|
@@ -149,7 +147,7 @@ function Pill(props) {
|
|
|
149
147
|
Pill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];
|
|
150
148
|
|
|
151
149
|
function Text(props) {
|
|
152
|
-
var _ref3 =
|
|
150
|
+
var _ref3 = arguments[0],
|
|
153
151
|
_ref7;
|
|
154
152
|
|
|
155
153
|
var SText = Box;
|
|
@@ -159,7 +157,7 @@ function Text(props) {
|
|
|
159
157
|
}
|
|
160
158
|
|
|
161
159
|
function Addon(props) {
|
|
162
|
-
var _ref4 =
|
|
160
|
+
var _ref4 = arguments[0],
|
|
163
161
|
_ref8;
|
|
164
162
|
|
|
165
163
|
var SAddon = Box;
|
package/lib/es6/Pills.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Pills.
|
|
1
|
+
{"version":3,"sources":["../../src/Pills.jsx"],"names":["React","createComponent","Component","sstyled","Root","Box","NeighborLocation","neighborLocationEnhance","keyboardFocusEnhance","addonTextChildren","RootPills","value","e","handlers","props","asProps","size","disabled","selected","onClick","bindHandlerClick","SPills","Children","styles","controlsLength","style","defaultValue","Pill","SPill","addonLeft","addonRight","Pills","Item","Text","Addon","enhance","SText","SAddon"],"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 NeighborLocation, { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/pills.shadow.css';\n\nclass RootPills extends Component {\n static displayName = 'Pills';\n static style = style;\n static defaultProps = {\n size: 'm',\n defaultValue: null,\n };\n\n uncontrolledProps() {\n return {\n value: null,\n };\n }\n\n bindHandlerClick = (value) => (e) => {\n this.handlers.value(value, e);\n };\n\n getItemProps(props) {\n const { value, size, disabled } = this.asProps;\n return {\n size,\n disabled,\n selected: value === props.value,\n onClick: this.bindHandlerClick(props.value),\n };\n }\n\n render() {\n const SPills = Root;\n const { Children, styles, controlsLength } = this.asProps;\n\n return sstyled(styles)(\n <SPills render={Box}>\n <NeighborLocation controlsLength={controlsLength}>\n <Children />\n </NeighborLocation>\n </SPills>,\n );\n }\n}\n\nfunction Pill(props) {\n const SPill = Root;\n const { Children, styles, addonLeft, addonRight } = props;\n\n return sstyled(styles)(\n <SPill render={Box} type=\"button\" tag=\"button\">\n {addonLeft ? <Pills.Item.Addon tag={addonLeft} /> : null}\n {addonTextChildren(Children, Pills.Item.Text, Pills.Item.Addon)}\n {addonRight ? <Pills.Item.Addon tag={addonRight} /> : null}\n </SPill>,\n );\n}\n\nPill.enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\nfunction Text(props) {\n const SText = Root;\n return sstyled(props.styles)(<SText render={Box} tag=\"span\" />);\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} tag=\"span\" />);\n}\n\nconst Pills = createComponent(RootPills, {\n Item: [Pill, { Text, Addon }],\n});\n\nexport default Pills;\n"],"file":"Pills.js"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
|
|
3
|
+
import { Box, IBoxProps } from '@semcore/flex-box';
|
|
4
|
+
import { INeighborItemProps, INeighborLocationProps } from '@semcore/neighbor-location';
|
|
5
|
+
import { IKeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
6
|
+
|
|
7
|
+
export type PillsValue = string | number | boolean;
|
|
8
|
+
|
|
9
|
+
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
10
|
+
/** Pills size */
|
|
11
|
+
size?: 'l' | 'm';
|
|
12
|
+
/** Disabled state */
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/** Called when the selection is changed */
|
|
15
|
+
onChange?: (value: T, e?: React.SyntheticEvent<HTMLSpanElement>) => void;
|
|
16
|
+
/** Value for the selected pill */
|
|
17
|
+
value?: T;
|
|
18
|
+
/** Default value for the selected pill */
|
|
19
|
+
defaultValue?: T;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
23
|
+
/** Pill value */
|
|
24
|
+
value?: PillsValue;
|
|
25
|
+
/** Disabled state */
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
/** Selected state */
|
|
28
|
+
selected?: boolean;
|
|
29
|
+
/** Left addon text */
|
|
30
|
+
addonLeft?: React.ElementType;
|
|
31
|
+
/** Right addon tag */
|
|
32
|
+
addonRight?: React.ElementType;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export interface IPillsContext {
|
|
36
|
+
getItemProps: PropGetterFn;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export interface IPopperHandlers {
|
|
40
|
+
value: (value: PillsValue) => void;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
declare const Pills: (<T, V extends PillsValue = PillsValue>(
|
|
44
|
+
props: CProps<IPillsProps<V> & T, IPillsContext, IPopperHandlers>,
|
|
45
|
+
) => ReturnEl) & {
|
|
46
|
+
Item: (<T>(props: CProps<IPillProps & T, {}, IPopperHandlers>) => ReturnEl) & {
|
|
47
|
+
Text: typeof Box;
|
|
48
|
+
Addon: typeof Box;
|
|
49
|
+
};
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
export default Pills;
|
package/lib/es6/index.js
CHANGED
package/lib/es6/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB
|
|
1
|
+
{"version":3,"sources":["../../src/index.js"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,SAAxB","sourcesContent":["export { default } from './Pills';\n"],"file":"index.js"}
|
|
@@ -28,9 +28,9 @@ SPill {
|
|
|
28
28
|
vertical-align: middle;
|
|
29
29
|
font-family: inherit;
|
|
30
30
|
cursor: pointer;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
border:
|
|
31
|
+
background: var(--white);
|
|
32
|
+
border: 1px solid var(--gray-200);
|
|
33
|
+
border-radius: var(--rounded-m);
|
|
34
34
|
|
|
35
35
|
&::-moz-focus-inner {
|
|
36
36
|
border: none;
|
|
@@ -45,18 +45,14 @@ SPill {
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
&:hover {
|
|
48
|
-
background: color-mod(var(--
|
|
48
|
+
background: color-mod(var(--gray-400) a(20%));
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
SPill[selected] {
|
|
53
|
-
background: color-mod(var(--
|
|
54
|
-
border-color: var(--
|
|
53
|
+
background: color-mod(var(--blue-400) a(20%));
|
|
54
|
+
border-color: var(--blue-400);
|
|
55
55
|
z-index: 1;
|
|
56
|
-
|
|
57
|
-
&:enabled:hover {
|
|
58
|
-
background: color-mod(var(--light-blue) a(20%));
|
|
59
|
-
}
|
|
60
56
|
}
|
|
61
57
|
|
|
62
58
|
SPill[disabled] {
|
|
@@ -69,55 +65,25 @@ SPill[disabled] {
|
|
|
69
65
|
}
|
|
70
66
|
|
|
71
67
|
SPill[keyboardFocused] {
|
|
72
|
-
box-shadow: var(--
|
|
68
|
+
box-shadow: var(--keyboard-focus);
|
|
73
69
|
}
|
|
74
70
|
|
|
75
71
|
SText {
|
|
76
|
-
color: var(--
|
|
72
|
+
color: var(--gray-800);
|
|
77
73
|
display: inline-flex;
|
|
78
|
-
line-height: 1.1;
|
|
79
74
|
}
|
|
80
75
|
|
|
81
76
|
SAddon {
|
|
82
|
-
color: var(--
|
|
77
|
+
color: var(--gray-500);
|
|
83
78
|
display: inline-flex;
|
|
84
79
|
align-items: center;
|
|
85
80
|
justify-content: center;
|
|
86
|
-
line-height: 1.1;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
SPill[size='s'] {
|
|
90
|
-
height: 18px;
|
|
91
|
-
min-width: 18px;
|
|
92
|
-
border-radius: 2px;
|
|
93
|
-
font-size: 10px;
|
|
94
|
-
|
|
95
|
-
& SText {
|
|
96
|
-
margin-left: 4px;
|
|
97
|
-
margin-right: 4px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
& SAddon {
|
|
101
|
-
&:not(:only-child):first-child {
|
|
102
|
-
margin-left: 4px;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&:not(:only-child):last-child {
|
|
106
|
-
margin-right: 4px;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&:only-child {
|
|
110
|
-
margin-left: -2px;
|
|
111
|
-
margin-right: -2px;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
81
|
}
|
|
115
82
|
|
|
116
83
|
SPill[size='m'] {
|
|
117
|
-
height:
|
|
118
|
-
min-width:
|
|
119
|
-
|
|
120
|
-
font-size: 12px;
|
|
84
|
+
height: var(--form-control-m);
|
|
85
|
+
min-width: var(--form-control-m);
|
|
86
|
+
font-size: var(--fs-200);
|
|
121
87
|
|
|
122
88
|
& SText {
|
|
123
89
|
margin-left: 8px;
|
|
@@ -134,49 +100,26 @@ SPill[size='m'] {
|
|
|
134
100
|
}
|
|
135
101
|
|
|
136
102
|
&:only-child {
|
|
137
|
-
margin-left:
|
|
138
|
-
margin-right:
|
|
103
|
+
margin-left: 8px;
|
|
104
|
+
margin-right: 8px;
|
|
139
105
|
}
|
|
140
106
|
}
|
|
141
107
|
}
|
|
142
108
|
|
|
143
109
|
SPill[size='l'] {
|
|
144
|
-
height:
|
|
145
|
-
min-width:
|
|
146
|
-
|
|
147
|
-
font-size: 14px;
|
|
110
|
+
height: var(--form-control-l);
|
|
111
|
+
min-width: var(--form-control-l);
|
|
112
|
+
font-size: var(--fs-300);
|
|
148
113
|
|
|
149
114
|
& SText {
|
|
150
115
|
margin-left: 8px;
|
|
151
116
|
margin-right: 8px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
& SAddon {
|
|
155
|
-
&:not(:only-child):first-child {
|
|
156
|
-
margin-left: 8px;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
&:not(:only-child):last-child {
|
|
160
|
-
margin-right: 8px;
|
|
161
|
-
}
|
|
162
117
|
|
|
163
118
|
&:only-child {
|
|
164
|
-
margin-left:
|
|
165
|
-
margin-right:
|
|
119
|
+
margin-left: 12px;
|
|
120
|
+
margin-right: 12px;
|
|
166
121
|
}
|
|
167
122
|
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
SPill[size='xl'] {
|
|
171
|
-
height: 42px;
|
|
172
|
-
min-width: 42px;
|
|
173
|
-
border-radius: 5px;
|
|
174
|
-
font-size: 16px;
|
|
175
|
-
|
|
176
|
-
& SText {
|
|
177
|
-
margin-left: 12px;
|
|
178
|
-
margin-right: 12px;
|
|
179
|
-
}
|
|
180
123
|
|
|
181
124
|
& SAddon {
|
|
182
125
|
&:not(:only-child):first-child {
|
|
@@ -188,8 +131,8 @@ SPill[size='xl'] {
|
|
|
188
131
|
}
|
|
189
132
|
|
|
190
133
|
&:only-child {
|
|
191
|
-
margin-left:
|
|
192
|
-
margin-right:
|
|
134
|
+
margin-left: 12px;
|
|
135
|
+
margin-right: 12px;
|
|
193
136
|
}
|
|
194
137
|
}
|
|
195
138
|
}
|
package/lib/types/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export type PillsValue = string | number | boolean;
|
|
|
8
8
|
|
|
9
9
|
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
10
10
|
/** Pills size */
|
|
11
|
-
size?: '
|
|
11
|
+
size?: 'l' | 'm';
|
|
12
12
|
/** Disabled state */
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
/** Called when the selection is changed */
|
|
@@ -20,10 +20,12 @@ export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighbo
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
23
|
+
/** Pill value */
|
|
24
|
+
value?: PillsValue;
|
|
23
25
|
/** Disabled state */
|
|
24
26
|
disabled?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
|
|
27
|
+
/** Selected state */
|
|
28
|
+
selected?: boolean;
|
|
27
29
|
/** Left addon text */
|
|
28
30
|
addonLeft?: React.ElementType;
|
|
29
31
|
/** Right addon tag */
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/pills",
|
|
3
3
|
"description": "SEMRush Pills Component",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "4.0.1",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -28,5 +28,10 @@
|
|
|
28
28
|
"type": "git",
|
|
29
29
|
"url": "https://github.com/semrush/intergalactic.git",
|
|
30
30
|
"directory": "semcore/pills"
|
|
31
|
+
},
|
|
32
|
+
"devDependencies": {
|
|
33
|
+
"@semcore/jest-preset-ui": "1.0.0",
|
|
34
|
+
"@semcore/icon": "*",
|
|
35
|
+
"@semcore/badge": "*"
|
|
31
36
|
}
|
|
32
37
|
}
|
|
File without changes
|
package/src/index.d.ts
CHANGED
|
@@ -8,7 +8,7 @@ export type PillsValue = string | number | boolean;
|
|
|
8
8
|
|
|
9
9
|
export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighborLocationProps {
|
|
10
10
|
/** Pills size */
|
|
11
|
-
size?: '
|
|
11
|
+
size?: 'l' | 'm';
|
|
12
12
|
/** Disabled state */
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
/** Called when the selection is changed */
|
|
@@ -20,10 +20,12 @@ export interface IPillsProps<T extends PillsValue = PillsValue> extends INeighbo
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
export interface IPillProps extends IBoxProps, INeighborItemProps, IKeyboardFocusProps {
|
|
23
|
+
/** Pill value */
|
|
24
|
+
value?: PillsValue;
|
|
23
25
|
/** Disabled state */
|
|
24
26
|
disabled?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
|
|
27
|
+
/** Selected state */
|
|
28
|
+
selected?: boolean;
|
|
27
29
|
/** Left addon text */
|
|
28
30
|
addonLeft?: React.ElementType;
|
|
29
31
|
/** Right addon tag */
|
package/src/index.js
CHANGED
|
@@ -28,9 +28,9 @@ SPill {
|
|
|
28
28
|
vertical-align: middle;
|
|
29
29
|
font-family: inherit;
|
|
30
30
|
cursor: pointer;
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
border:
|
|
31
|
+
background: var(--white);
|
|
32
|
+
border: 1px solid var(--gray-200);
|
|
33
|
+
border-radius: var(--rounded-m);
|
|
34
34
|
|
|
35
35
|
&::-moz-focus-inner {
|
|
36
36
|
border: none;
|
|
@@ -45,18 +45,14 @@ SPill {
|
|
|
45
45
|
}
|
|
46
46
|
|
|
47
47
|
&:hover {
|
|
48
|
-
background: color-mod(var(--
|
|
48
|
+
background: color-mod(var(--gray-400) a(20%));
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
52
|
SPill[selected] {
|
|
53
|
-
background: color-mod(var(--
|
|
54
|
-
border-color: var(--
|
|
53
|
+
background: color-mod(var(--blue-400) a(20%));
|
|
54
|
+
border-color: var(--blue-400);
|
|
55
55
|
z-index: 1;
|
|
56
|
-
|
|
57
|
-
&:enabled:hover {
|
|
58
|
-
background: color-mod(var(--light-blue) a(20%));
|
|
59
|
-
}
|
|
60
56
|
}
|
|
61
57
|
|
|
62
58
|
SPill[disabled] {
|
|
@@ -69,55 +65,25 @@ SPill[disabled] {
|
|
|
69
65
|
}
|
|
70
66
|
|
|
71
67
|
SPill[keyboardFocused] {
|
|
72
|
-
box-shadow: var(--
|
|
68
|
+
box-shadow: var(--keyboard-focus);
|
|
73
69
|
}
|
|
74
70
|
|
|
75
71
|
SText {
|
|
76
|
-
color: var(--
|
|
72
|
+
color: var(--gray-800);
|
|
77
73
|
display: inline-flex;
|
|
78
|
-
line-height: 1.1;
|
|
79
74
|
}
|
|
80
75
|
|
|
81
76
|
SAddon {
|
|
82
|
-
color: var(--
|
|
77
|
+
color: var(--gray-500);
|
|
83
78
|
display: inline-flex;
|
|
84
79
|
align-items: center;
|
|
85
80
|
justify-content: center;
|
|
86
|
-
line-height: 1.1;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
SPill[size='s'] {
|
|
90
|
-
height: 18px;
|
|
91
|
-
min-width: 18px;
|
|
92
|
-
border-radius: 2px;
|
|
93
|
-
font-size: 10px;
|
|
94
|
-
|
|
95
|
-
& SText {
|
|
96
|
-
margin-left: 4px;
|
|
97
|
-
margin-right: 4px;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
& SAddon {
|
|
101
|
-
&:not(:only-child):first-child {
|
|
102
|
-
margin-left: 4px;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
&:not(:only-child):last-child {
|
|
106
|
-
margin-right: 4px;
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
&:only-child {
|
|
110
|
-
margin-left: -2px;
|
|
111
|
-
margin-right: -2px;
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
81
|
}
|
|
115
82
|
|
|
116
83
|
SPill[size='m'] {
|
|
117
|
-
height:
|
|
118
|
-
min-width:
|
|
119
|
-
|
|
120
|
-
font-size: 12px;
|
|
84
|
+
height: var(--form-control-m);
|
|
85
|
+
min-width: var(--form-control-m);
|
|
86
|
+
font-size: var(--fs-200);
|
|
121
87
|
|
|
122
88
|
& SText {
|
|
123
89
|
margin-left: 8px;
|
|
@@ -134,49 +100,26 @@ SPill[size='m'] {
|
|
|
134
100
|
}
|
|
135
101
|
|
|
136
102
|
&:only-child {
|
|
137
|
-
margin-left:
|
|
138
|
-
margin-right:
|
|
103
|
+
margin-left: 8px;
|
|
104
|
+
margin-right: 8px;
|
|
139
105
|
}
|
|
140
106
|
}
|
|
141
107
|
}
|
|
142
108
|
|
|
143
109
|
SPill[size='l'] {
|
|
144
|
-
height:
|
|
145
|
-
min-width:
|
|
146
|
-
|
|
147
|
-
font-size: 14px;
|
|
110
|
+
height: var(--form-control-l);
|
|
111
|
+
min-width: var(--form-control-l);
|
|
112
|
+
font-size: var(--fs-300);
|
|
148
113
|
|
|
149
114
|
& SText {
|
|
150
115
|
margin-left: 8px;
|
|
151
116
|
margin-right: 8px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
& SAddon {
|
|
155
|
-
&:not(:only-child):first-child {
|
|
156
|
-
margin-left: 8px;
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
&:not(:only-child):last-child {
|
|
160
|
-
margin-right: 8px;
|
|
161
|
-
}
|
|
162
117
|
|
|
163
118
|
&:only-child {
|
|
164
|
-
margin-left:
|
|
165
|
-
margin-right:
|
|
119
|
+
margin-left: 12px;
|
|
120
|
+
margin-right: 12px;
|
|
166
121
|
}
|
|
167
122
|
}
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
SPill[size='xl'] {
|
|
171
|
-
height: 42px;
|
|
172
|
-
min-width: 42px;
|
|
173
|
-
border-radius: 5px;
|
|
174
|
-
font-size: 16px;
|
|
175
|
-
|
|
176
|
-
& SText {
|
|
177
|
-
margin-left: 12px;
|
|
178
|
-
margin-right: 12px;
|
|
179
|
-
}
|
|
180
123
|
|
|
181
124
|
& SAddon {
|
|
182
125
|
&:not(:only-child):first-child {
|
|
@@ -188,8 +131,8 @@ SPill[size='xl'] {
|
|
|
188
131
|
}
|
|
189
132
|
|
|
190
133
|
&:only-child {
|
|
191
|
-
margin-left:
|
|
192
|
-
margin-right:
|
|
134
|
+
margin-left: 12px;
|
|
135
|
+
margin-right: 12px;
|
|
193
136
|
}
|
|
194
137
|
}
|
|
195
138
|
}
|