@salutejs/plasma-new-hope 0.75.1-canary.1179.8688877537.0 → 0.76.0-canary.1172.8687373718.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Chip/Chip.css +0 -2
- package/cjs/components/Chip/Chip.js +2 -14
- package/cjs/components/Chip/Chip.js.map +1 -1
- package/cjs/components/Chip/Chip.tokens.js +0 -5
- package/cjs/components/Chip/Chip.tokens.js.map +1 -1
- package/cjs/components/Combobox/Combobox.css +0 -2
- package/cjs/components/Combobox/ui/ComboboxChip/ComboboxChip.css +0 -2
- package/cjs/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +0 -2
- package/cjs/components/Pagination/Pagination.css +0 -2
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +0 -2
- package/cjs/components/Select/Select.css +0 -2
- package/cjs/components/Select/ui/SelectChip/SelectChip.css +0 -2
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +0 -2
- package/cjs/components/TextField/ui/TextFieldChip/TextFieldChip.css +0 -2
- package/cjs/index.css +0 -2
- package/es/components/Chip/Chip.css +0 -2
- package/es/components/Chip/Chip.js +3 -15
- package/es/components/Chip/Chip.js.map +1 -1
- package/es/components/Chip/Chip.tokens.js +1 -5
- package/es/components/Chip/Chip.tokens.js.map +1 -1
- package/es/components/Combobox/Combobox.css +0 -2
- package/es/components/Combobox/ui/ComboboxChip/ComboboxChip.css +0 -2
- package/es/components/Combobox/ui/ComboboxTarget/ComboboxTarget.css +0 -2
- package/es/components/Pagination/Pagination.css +0 -2
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +0 -2
- package/es/components/Select/Select.css +0 -2
- package/es/components/Select/ui/SelectChip/SelectChip.css +0 -2
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +0 -2
- package/es/components/TextField/ui/TextFieldChip/TextFieldChip.css +0 -2
- package/es/index.css +0 -2
- package/package.json +4 -4
- package/styled-components/cjs/components/Chip/Chip.js +2 -14
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.tokens.js +1 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.config.js +7 -10
- package/styled-components/cjs/examples/plasma_b2c/components/Chip/Chip.stories.tsx +2 -18
- package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.config.js +7 -10
- package/styled-components/cjs/examples/plasma_web/components/Chip/Chip.stories.tsx +2 -18
- package/styled-components/es/components/Chip/Chip.js +3 -15
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.tokens.js +0 -4
- package/styled-components/es/examples/plasma_b2c/components/Chip/Chip.config.js +7 -10
- package/styled-components/es/examples/plasma_b2c/components/Chip/Chip.stories.tsx +2 -18
- package/styled-components/es/examples/plasma_web/components/Chip/Chip.config.js +7 -10
- package/styled-components/es/examples/plasma_web/components/Chip/Chip.stories.tsx +2 -18
- package/types/components/Chip/Chip.d.ts +0 -4
- package/types/components/Chip/Chip.d.ts.map +1 -1
- package/types/components/Chip/Chip.tokens.d.ts +0 -4
- package/types/components/Chip/Chip.tokens.d.ts.map +1 -1
- package/types/components/Chip/Chip.types.d.ts +0 -6
- package/types/components/Chip/Chip.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Chip/Chip.config.d.ts +1 -4
- package/types/examples/plasma_b2c/components/Chip/Chip.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Chip/Chip.d.ts +1 -4
- package/types/examples/plasma_b2c/components/Chip/Chip.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Chip/Chip.config.d.ts +1 -4
- package/types/examples/plasma_web/components/Chip/Chip.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Chip/Chip.d.ts +1 -4
- package/types/examples/plasma_web/components/Chip/Chip.d.ts.map +1 -1
- package/cjs/components/Chip/variations/_pilled/base.js +0 -9
- package/cjs/components/Chip/variations/_pilled/base.js.map +0 -1
- package/cjs/components/Chip/variations/_pilled/base_3kce4h.css +0 -1
- package/es/components/Chip/variations/_pilled/base.js +0 -5
- package/es/components/Chip/variations/_pilled/base.js.map +0 -1
- package/es/components/Chip/variations/_pilled/base_3kce4h.css +0 -1
- package/styled-components/cjs/components/Chip/variations/_pilled/base.js +0 -9
- package/styled-components/cjs/components/Chip/variations/_pilled/tokens.json +0 -4
- package/styled-components/es/components/Chip/variations/_pilled/base.js +0 -3
- package/styled-components/es/components/Chip/variations/_pilled/tokens.json +0 -4
- package/types/components/Chip/variations/_pilled/base.d.ts +0 -2
- package/types/components/Chip/variations/_pilled/base.d.ts.map +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.76.0-canary.1172.8687373718.0",
|
|
4
4
|
"description": "Salute Design System blueprint",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"@rollup/plugin-babel": "^6.0.3",
|
|
68
68
|
"@rollup/plugin-commonjs": "^25.0.4",
|
|
69
69
|
"@rollup/plugin-node-resolve": "^15.1.0",
|
|
70
|
-
"@salutejs/plasma-sb-utils": "0.
|
|
70
|
+
"@salutejs/plasma-sb-utils": "0.156.0-canary.1172.8687373718.0",
|
|
71
71
|
"@storybook/addon-docs": "^7.6.17",
|
|
72
72
|
"@storybook/addon-essentials": "^7.6.17",
|
|
73
73
|
"@storybook/addons": "^7.6.17",
|
|
@@ -97,10 +97,10 @@
|
|
|
97
97
|
"@linaria/core": "5.0.2",
|
|
98
98
|
"@linaria/react": "5.0.3",
|
|
99
99
|
"@popperjs/core": "2.11.8",
|
|
100
|
-
"@salutejs/plasma-core": "1.
|
|
100
|
+
"@salutejs/plasma-core": "1.158.0-canary.1172.8687373718.0",
|
|
101
101
|
"focus-visible": "5.2.0",
|
|
102
102
|
"react-popper": "2.3.0",
|
|
103
103
|
"storeon": "3.1.5"
|
|
104
104
|
},
|
|
105
|
-
"gitHead": "
|
|
105
|
+
"gitHead": "bbc7f3fb9e9e9e726344b79612d60c7d48caa15f"
|
|
106
106
|
}
|
|
@@ -7,16 +7,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.chipRoot = exports.chipConfig = void 0;
|
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
|
9
9
|
var _IconClose = /*#__PURE__*/require("../_Icon/Icons/IconClose");
|
|
10
|
-
var _utils = /*#__PURE__*/require("../../utils");
|
|
11
10
|
var _base = /*#__PURE__*/require("./variations/_view/base");
|
|
12
11
|
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
|
13
12
|
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
|
14
13
|
var _base4 = /*#__PURE__*/require("./variations/_readonly/base");
|
|
15
14
|
var _base5 = /*#__PURE__*/require("./variations/_focused/base");
|
|
16
|
-
var _base6 = /*#__PURE__*/require("./variations/_pilled/base");
|
|
17
15
|
var _Chip = /*#__PURE__*/require("./Chip.styles");
|
|
18
16
|
var _Chip2 = /*#__PURE__*/require("./Chip.tokens");
|
|
19
|
-
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "
|
|
17
|
+
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "onClear", "onClick", "readOnly", "disabled"];
|
|
20
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
21
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
22
20
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -30,18 +28,14 @@ var chipRoot = exports.chipRoot = function chipRoot(Root) {
|
|
|
30
28
|
contentRight = props.contentRight,
|
|
31
29
|
contentClearButton = props.contentClearButton,
|
|
32
30
|
size = props.size,
|
|
33
|
-
className = props.className,
|
|
34
31
|
onClear = props.onClear,
|
|
35
32
|
onClick = props.onClick,
|
|
36
|
-
_props$pilled = props.pilled,
|
|
37
|
-
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
|
38
33
|
_props$readOnly = props.readOnly,
|
|
39
34
|
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
|
|
40
35
|
_props$disabled = props.disabled,
|
|
41
36
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
42
37
|
rest = _objectWithoutProperties(props, _excluded);
|
|
43
38
|
var txt = !text && typeof children === 'string' ? children : text;
|
|
44
|
-
var pilledClass = pilled ? _Chip2.classes.pilled : undefined;
|
|
45
39
|
var handleClick = function handleClick(event) {
|
|
46
40
|
if (disabled || readOnly) {
|
|
47
41
|
return;
|
|
@@ -58,11 +52,9 @@ var chipRoot = exports.chipRoot = function chipRoot(Root) {
|
|
|
58
52
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
|
59
53
|
type: "button",
|
|
60
54
|
ref: ref,
|
|
61
|
-
className: (0, _utils.cx)(pilledClass, className),
|
|
62
55
|
tabIndex: readOnly ? -1 : 0,
|
|
63
56
|
onClick: handleClick,
|
|
64
57
|
disabled: disabled,
|
|
65
|
-
pilled: pilled,
|
|
66
58
|
readOnly: !disabled && readOnly,
|
|
67
59
|
size: size
|
|
68
60
|
}, rest), contentLeft && /*#__PURE__*/_react["default"].createElement(_Chip.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Chip.StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/_react["default"].createElement(_Chip.StyledContentRight, null, contentRight), ClearContent);
|
|
@@ -90,14 +82,10 @@ var chipConfig = exports.chipConfig = {
|
|
|
90
82
|
},
|
|
91
83
|
focused: {
|
|
92
84
|
css: _base5.base
|
|
93
|
-
},
|
|
94
|
-
pilled: {
|
|
95
|
-
css: _base6.base,
|
|
96
|
-
attrs: true
|
|
97
85
|
}
|
|
98
86
|
},
|
|
99
87
|
defaults: {
|
|
100
|
-
view: '
|
|
88
|
+
view: 'primary',
|
|
101
89
|
size: 'm'
|
|
102
90
|
}
|
|
103
91
|
};
|
|
@@ -72,7 +72,7 @@ export function App() {
|
|
|
72
72
|
Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
|
|
73
73
|
+ `"default"` – основная;
|
|
74
74
|
+ `"secondary"` – вторичная;
|
|
75
|
-
+ `"
|
|
75
|
+
+ `"positive"` – успешное завершение;
|
|
76
76
|
|
|
77
77
|
```tsx live
|
|
78
78
|
import React from 'react';
|
|
@@ -83,7 +83,7 @@ export function App() {
|
|
|
83
83
|
<div>
|
|
84
84
|
<Chip text="Chip" size="m" view="default" />
|
|
85
85
|
<Chip text="Chip" size="m" view="secondary" />
|
|
86
|
-
<Chip text="Chip" size="m" view="
|
|
86
|
+
<Chip text="Chip" size="m" view="positive" />
|
|
87
87
|
</div>
|
|
88
88
|
);
|
|
89
89
|
}
|
|
@@ -3,10 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.tokens =
|
|
7
|
-
var classes = exports.classes = {
|
|
8
|
-
pilled: 'chip-pilled'
|
|
9
|
-
};
|
|
6
|
+
exports.tokens = void 0;
|
|
10
7
|
var tokens = exports.tokens = {
|
|
11
8
|
background: '--plasma-chip-background',
|
|
12
9
|
color: '--plasma-chip-color',
|
|
@@ -24,7 +21,6 @@ var tokens = exports.tokens = {
|
|
|
24
21
|
outlineSize: '--plasma-chip-outline-size',
|
|
25
22
|
closeIconColor: '--plasma-chip-close-icon-color',
|
|
26
23
|
borderRadius: '--plasma-chip-border-radius',
|
|
27
|
-
pilledBorderRadius: '--plasma-chip-pilled-border-radius',
|
|
28
24
|
width: '--plasma-chip-width',
|
|
29
25
|
height: '--plasma-chip-height',
|
|
30
26
|
paddingTop: '--plasma-chip-padding-top',
|
|
@@ -14,24 +14,21 @@ var config = exports.config = {
|
|
|
14
14
|
},
|
|
15
15
|
variations: {
|
|
16
16
|
view: {
|
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default
|
|
18
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary
|
|
19
|
-
|
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
|
|
18
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
|
|
19
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)
|
|
20
20
|
},
|
|
21
21
|
size: {
|
|
22
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":
|
|
23
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":
|
|
24
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":
|
|
25
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":
|
|
22
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
|
23
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
|
24
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
|
25
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize)
|
|
26
26
|
},
|
|
27
27
|
disabled: {
|
|
28
28
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Chip.chipTokens.disabledOpacity)
|
|
29
29
|
},
|
|
30
30
|
focused: {
|
|
31
31
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Chip.chipTokens.focusColor)
|
|
32
|
-
},
|
|
33
|
-
pilled: {
|
|
34
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
|
35
32
|
}
|
|
36
33
|
}
|
|
37
34
|
};
|
|
@@ -40,33 +40,17 @@ const TrashIcon = (props) => (
|
|
|
40
40
|
export const Default: Story = {
|
|
41
41
|
args: {
|
|
42
42
|
text: 'Hello',
|
|
43
|
-
view: '
|
|
43
|
+
view: 'primary',
|
|
44
44
|
size: 'm',
|
|
45
45
|
disabled: false,
|
|
46
46
|
focused: true,
|
|
47
|
-
pilled: false,
|
|
48
47
|
onClear,
|
|
49
48
|
},
|
|
50
49
|
};
|
|
51
50
|
|
|
52
51
|
export const WithIcon: Story = {
|
|
53
52
|
args: { ...Default.args },
|
|
54
|
-
render: (args) => {
|
|
55
|
-
const iconSizeMapper = {
|
|
56
|
-
l: '1.5rem',
|
|
57
|
-
m: '1.25rem',
|
|
58
|
-
s: '1rem',
|
|
59
|
-
xs: '0.75rem',
|
|
60
|
-
};
|
|
61
|
-
const iconSize = args.size || 'm';
|
|
62
|
-
|
|
63
|
-
return (
|
|
64
|
-
<Chip
|
|
65
|
-
contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
|
|
66
|
-
{...args}
|
|
67
|
-
/>
|
|
68
|
-
);
|
|
69
|
-
},
|
|
53
|
+
render: (args) => <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...args} />,
|
|
70
54
|
};
|
|
71
55
|
|
|
72
56
|
export const LongText: Story = {
|
|
@@ -14,24 +14,21 @@ var config = exports.config = {
|
|
|
14
14
|
},
|
|
15
15
|
variations: {
|
|
16
16
|
view: {
|
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default
|
|
18
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary
|
|
19
|
-
|
|
17
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
|
|
18
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover),
|
|
19
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], _Chip.chipTokens.color, _Chip.chipTokens.background, _Chip.chipTokens.colorHover, _Chip.chipTokens.backgroundHover, _Chip.chipTokens.colorActive, _Chip.chipTokens.backgroundActive, _Chip.chipTokens.backgroundReadOnly, _Chip.chipTokens.colorReadOnly, _Chip.chipTokens.backgroundReadOnlyHover, _Chip.chipTokens.colorReadOnlyHover)
|
|
20
20
|
},
|
|
21
21
|
size: {
|
|
22
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":
|
|
23
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":
|
|
24
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":
|
|
25
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":
|
|
22
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
|
23
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
|
24
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize),
|
|
25
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], _Chip.chipTokens.borderRadius, _Chip.chipTokens.width, _Chip.chipTokens.height, _Chip.chipTokens.paddingRight, _Chip.chipTokens.paddingLeft, _Chip.chipTokens.fontFamily, _Chip.chipTokens.fontSize, _Chip.chipTokens.fontStyle, _Chip.chipTokens.fontWeight, _Chip.chipTokens.letterSpacing, _Chip.chipTokens.lineHeight, _Chip.chipTokens.leftContentMarginLeft, _Chip.chipTokens.leftContentMarginRight, _Chip.chipTokens.clearContentMarginLeft, _Chip.chipTokens.clearContentMarginRight, _Chip.chipTokens.scaleHover, _Chip.chipTokens.scaleActive, _Chip.chipTokens.closeIconSize)
|
|
26
26
|
},
|
|
27
27
|
disabled: {
|
|
28
28
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Chip.chipTokens.disabledOpacity)
|
|
29
29
|
},
|
|
30
30
|
focused: {
|
|
31
31
|
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Chip.chipTokens.focusColor)
|
|
32
|
-
},
|
|
33
|
-
pilled: {
|
|
34
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
|
35
32
|
}
|
|
36
33
|
}
|
|
37
34
|
};
|
|
@@ -40,33 +40,17 @@ const TrashIcon = (props) => (
|
|
|
40
40
|
export const Default: Story = {
|
|
41
41
|
args: {
|
|
42
42
|
text: 'Hello',
|
|
43
|
-
view: '
|
|
43
|
+
view: 'primary',
|
|
44
44
|
size: 'm',
|
|
45
45
|
disabled: false,
|
|
46
46
|
focused: true,
|
|
47
|
-
pilled: false,
|
|
48
47
|
onClear,
|
|
49
48
|
},
|
|
50
49
|
};
|
|
51
50
|
|
|
52
51
|
export const WithIcon: Story = {
|
|
53
52
|
args: { ...Default.args },
|
|
54
|
-
render: (args) => {
|
|
55
|
-
const iconSizeMapper = {
|
|
56
|
-
l: '1.5rem',
|
|
57
|
-
m: '1.25rem',
|
|
58
|
-
s: '1rem',
|
|
59
|
-
xs: '0.75rem',
|
|
60
|
-
};
|
|
61
|
-
const iconSize = args.size || 'm';
|
|
62
|
-
|
|
63
|
-
return (
|
|
64
|
-
<Chip
|
|
65
|
-
contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
|
|
66
|
-
{...args}
|
|
67
|
-
/>
|
|
68
|
-
);
|
|
69
|
-
},
|
|
53
|
+
render: (args) => <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...args} />,
|
|
70
54
|
};
|
|
71
55
|
|
|
72
56
|
export const LongText: Story = {
|
|
@@ -1,18 +1,16 @@
|
|
|
1
|
-
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "
|
|
1
|
+
var _excluded = ["children", "text", "contentLeft", "contentRight", "contentClearButton", "size", "onClear", "onClick", "readOnly", "disabled"];
|
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
5
|
import React, { forwardRef, useMemo } from 'react';
|
|
6
6
|
import { IconClose } from '../_Icon/Icons/IconClose';
|
|
7
|
-
import { cx } from '../../utils';
|
|
8
7
|
import { base as viewCSS } from './variations/_view/base';
|
|
9
8
|
import { base as sizeCSS } from './variations/_size/base';
|
|
10
9
|
import { base as disabledCSS } from './variations/_disabled/base';
|
|
11
10
|
import { base as readonlyCSS } from './variations/_readonly/base';
|
|
12
11
|
import { base as focusedCSS } from './variations/_focused/base';
|
|
13
|
-
import { base as pilledCSS } from './variations/_pilled/base';
|
|
14
12
|
import { StyledContentClear, StyledContentLeft, StyledContentMain, StyledContentRight, base } from './Chip.styles';
|
|
15
|
-
import {
|
|
13
|
+
import { tokens } from './Chip.tokens';
|
|
16
14
|
export var chipRoot = function chipRoot(Root) {
|
|
17
15
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
|
18
16
|
var children = props.children,
|
|
@@ -21,18 +19,14 @@ export var chipRoot = function chipRoot(Root) {
|
|
|
21
19
|
contentRight = props.contentRight,
|
|
22
20
|
contentClearButton = props.contentClearButton,
|
|
23
21
|
size = props.size,
|
|
24
|
-
className = props.className,
|
|
25
22
|
onClear = props.onClear,
|
|
26
23
|
onClick = props.onClick,
|
|
27
|
-
_props$pilled = props.pilled,
|
|
28
|
-
pilled = _props$pilled === void 0 ? false : _props$pilled,
|
|
29
24
|
_props$readOnly = props.readOnly,
|
|
30
25
|
readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
|
|
31
26
|
_props$disabled = props.disabled,
|
|
32
27
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
33
28
|
rest = _objectWithoutProperties(props, _excluded);
|
|
34
29
|
var txt = !text && typeof children === 'string' ? children : text;
|
|
35
|
-
var pilledClass = pilled ? classes.pilled : undefined;
|
|
36
30
|
var handleClick = function handleClick(event) {
|
|
37
31
|
if (disabled || readOnly) {
|
|
38
32
|
return;
|
|
@@ -49,11 +43,9 @@ export var chipRoot = function chipRoot(Root) {
|
|
|
49
43
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
50
44
|
type: "button",
|
|
51
45
|
ref: ref,
|
|
52
|
-
className: cx(pilledClass, className),
|
|
53
46
|
tabIndex: readOnly ? -1 : 0,
|
|
54
47
|
onClick: handleClick,
|
|
55
48
|
disabled: disabled,
|
|
56
|
-
pilled: pilled,
|
|
57
49
|
readOnly: !disabled && readOnly,
|
|
58
50
|
size: size
|
|
59
51
|
}, rest), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(StyledContentMain, null, txt) : children, contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), ClearContent);
|
|
@@ -81,14 +73,10 @@ export var chipConfig = {
|
|
|
81
73
|
},
|
|
82
74
|
focused: {
|
|
83
75
|
css: focusedCSS
|
|
84
|
-
},
|
|
85
|
-
pilled: {
|
|
86
|
-
css: pilledCSS,
|
|
87
|
-
attrs: true
|
|
88
76
|
}
|
|
89
77
|
},
|
|
90
78
|
defaults: {
|
|
91
|
-
view: '
|
|
79
|
+
view: 'primary',
|
|
92
80
|
size: 'm'
|
|
93
81
|
}
|
|
94
82
|
};
|
|
@@ -72,7 +72,7 @@ export function App() {
|
|
|
72
72
|
Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
|
|
73
73
|
+ `"default"` – основная;
|
|
74
74
|
+ `"secondary"` – вторичная;
|
|
75
|
-
+ `"
|
|
75
|
+
+ `"positive"` – успешное завершение;
|
|
76
76
|
|
|
77
77
|
```tsx live
|
|
78
78
|
import React from 'react';
|
|
@@ -83,7 +83,7 @@ export function App() {
|
|
|
83
83
|
<div>
|
|
84
84
|
<Chip text="Chip" size="m" view="default" />
|
|
85
85
|
<Chip text="Chip" size="m" view="secondary" />
|
|
86
|
-
<Chip text="Chip" size="m" view="
|
|
86
|
+
<Chip text="Chip" size="m" view="positive" />
|
|
87
87
|
</div>
|
|
88
88
|
);
|
|
89
89
|
}
|
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
export var classes = {
|
|
2
|
-
pilled: 'chip-pilled'
|
|
3
|
-
};
|
|
4
1
|
export var tokens = {
|
|
5
2
|
background: '--plasma-chip-background',
|
|
6
3
|
color: '--plasma-chip-color',
|
|
@@ -18,7 +15,6 @@ export var tokens = {
|
|
|
18
15
|
outlineSize: '--plasma-chip-outline-size',
|
|
19
16
|
closeIconColor: '--plasma-chip-close-icon-color',
|
|
20
17
|
borderRadius: '--plasma-chip-border-radius',
|
|
21
|
-
pilledBorderRadius: '--plasma-chip-pilled-border-radius',
|
|
22
18
|
width: '--plasma-chip-width',
|
|
23
19
|
height: '--plasma-chip-height',
|
|
24
20
|
paddingTop: '--plasma-chip-padding-top',
|
|
@@ -8,24 +8,21 @@ export var config = {
|
|
|
8
8
|
},
|
|
9
9
|
variations: {
|
|
10
10
|
view: {
|
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default
|
|
12
|
-
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary
|
|
13
|
-
|
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
|
|
12
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
|
|
13
|
+
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
|
-
l: /*#__PURE__*/css(["", ":0.75rem;", ":
|
|
17
|
-
m: /*#__PURE__*/css(["", ":0.625rem;", ":
|
|
18
|
-
s: /*#__PURE__*/css(["", ":0.5rem;", ":
|
|
19
|
-
xs: /*#__PURE__*/css(["", ":0.375rem;", ":
|
|
16
|
+
l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
|
17
|
+
m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
|
18
|
+
s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
|
19
|
+
xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize)
|
|
20
20
|
},
|
|
21
21
|
disabled: {
|
|
22
22
|
"true": /*#__PURE__*/css(["", ":0.4;"], chipTokens.disabledOpacity)
|
|
23
23
|
},
|
|
24
24
|
focused: {
|
|
25
25
|
"true": /*#__PURE__*/css(["", ":var(--surface-accent);"], chipTokens.focusColor)
|
|
26
|
-
},
|
|
27
|
-
pilled: {
|
|
28
|
-
"true": /*#__PURE__*/css([""])
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
28
|
};
|
|
@@ -40,33 +40,17 @@ const TrashIcon = (props) => (
|
|
|
40
40
|
export const Default: Story = {
|
|
41
41
|
args: {
|
|
42
42
|
text: 'Hello',
|
|
43
|
-
view: '
|
|
43
|
+
view: 'primary',
|
|
44
44
|
size: 'm',
|
|
45
45
|
disabled: false,
|
|
46
46
|
focused: true,
|
|
47
|
-
pilled: false,
|
|
48
47
|
onClear,
|
|
49
48
|
},
|
|
50
49
|
};
|
|
51
50
|
|
|
52
51
|
export const WithIcon: Story = {
|
|
53
52
|
args: { ...Default.args },
|
|
54
|
-
render: (args) => {
|
|
55
|
-
const iconSizeMapper = {
|
|
56
|
-
l: '1.5rem',
|
|
57
|
-
m: '1.25rem',
|
|
58
|
-
s: '1rem',
|
|
59
|
-
xs: '0.75rem',
|
|
60
|
-
};
|
|
61
|
-
const iconSize = args.size || 'm';
|
|
62
|
-
|
|
63
|
-
return (
|
|
64
|
-
<Chip
|
|
65
|
-
contentLeft={<TrashIcon width={iconSizeMapper[iconSize]} height={iconSizeMapper[iconSize]} />}
|
|
66
|
-
{...args}
|
|
67
|
-
/>
|
|
68
|
-
);
|
|
69
|
-
},
|
|
53
|
+
render: (args) => <Chip contentLeft={<TrashIcon width="1.25rem" height="1.25rem" />} {...args} />,
|
|
70
54
|
};
|
|
71
55
|
|
|
72
56
|
export const LongText: Story = {
|
|
@@ -8,24 +8,21 @@ export var config = {
|
|
|
8
8
|
},
|
|
9
9
|
variations: {
|
|
10
10
|
view: {
|
|
11
|
-
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default
|
|
12
|
-
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary
|
|
13
|
-
|
|
11
|
+
"default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 85% );", ":var(--inverse-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-solid-default) 80% );", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
|
|
12
|
+
secondary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 85% );", ":var(--text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-transparent-secondary) 80% );", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover),
|
|
13
|
+
positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":color-mix( in srgb,var(--inverse-text-primary),var(--surface-positive) 85% );", ":var(--on-dark-text-primary);", ":color-mix(in srgb,var(--text-primary),var(--surface-positive) 85%);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
|
14
14
|
},
|
|
15
15
|
size: {
|
|
16
|
-
l: /*#__PURE__*/css(["", ":0.75rem;", ":
|
|
17
|
-
m: /*#__PURE__*/css(["", ":0.625rem;", ":
|
|
18
|
-
s: /*#__PURE__*/css(["", ":0.5rem;", ":
|
|
19
|
-
xs: /*#__PURE__*/css(["", ":0.375rem;", ":
|
|
16
|
+
l: /*#__PURE__*/css(["", ":0.75rem;", ":auto;", ":3rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.125rem;", ":0.5rem;", ":0.625rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1.5rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
|
17
|
+
m: /*#__PURE__*/css(["", ":0.625rem;", ":auto;", ":2.5rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":-0.125rem;", ":0.375rem;", ":0.5rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
|
18
|
+
s: /*#__PURE__*/css(["", ":0.5rem;", ":auto;", ":2rem;", ":0.875rem;", ":0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":-0.125rem;", ":0.25rem;", ":0.375rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize),
|
|
19
|
+
xs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":1.5rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem;", ":0.25rem;", ":0.25rem;", ":-0.25rem;", ":1.02;", ":0.98;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.leftContentMarginLeft, chipTokens.leftContentMarginRight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.scaleHover, chipTokens.scaleActive, chipTokens.closeIconSize)
|
|
20
20
|
},
|
|
21
21
|
disabled: {
|
|
22
22
|
"true": /*#__PURE__*/css(["", ":0.4;"], chipTokens.disabledOpacity)
|
|
23
23
|
},
|
|
24
24
|
focused: {
|
|
25
25
|
"true": /*#__PURE__*/css(["", ":var(--surface-accent);"], chipTokens.focusColor)
|
|
26
|
-
},
|
|
27
|
-
pilled: {
|
|
28
|
-
"true": /*#__PURE__*/css([""])
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
28
|
};
|