@salutejs/sdds-cs 0.235.1-dev.0 → 0.236.0-canary.1713.12904792306.0
Sign up to get free protection for your applications and to get access to all the features.
- package/api/sdds-cs.api.md +1 -0
- package/components/Chip/Chip.config.d.ts +1 -0
- package/components/Chip/Chip.config.js +6 -5
- package/components/Chip/Chip.d.ts +1 -0
- package/emotion/cjs/components/Chip/Chip.config.js +6 -5
- package/emotion/cjs/components/Chip/Chip.stories.tsx +4 -3
- package/emotion/es/components/Chip/Chip.config.js +6 -5
- package/emotion/es/components/Chip/Chip.stories.tsx +4 -3
- package/es/components/Chip/Chip.config.js +6 -5
- package/package.json +3 -3
package/api/sdds-cs.api.md
CHANGED
|
@@ -12,6 +12,7 @@ export declare const config: {
|
|
|
12
12
|
};
|
|
13
13
|
size: {
|
|
14
14
|
s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
15
|
+
xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
15
16
|
};
|
|
16
17
|
disabled: {
|
|
17
18
|
true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.config = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("@salutejs/plasma-new-hope/styled-components");
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
10
|
var config = exports.config = {
|
|
11
11
|
defaults: {
|
|
@@ -20,16 +20,17 @@ var config = exports.config = {
|
|
|
20
20
|
accent: /*#__PURE__*/(0, _styledComponents.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), _styledComponents.chipTokens.color, _styledComponents.chipTokens.background, _styledComponents.chipTokens.colorHover, _styledComponents.chipTokens.backgroundHover, _styledComponents.chipTokens.colorActive, _styledComponents.chipTokens.backgroundActive, _styledComponents.chipTokens.backgroundReadOnly, _styledComponents.chipTokens.colorReadOnly, _styledComponents.chipTokens.backgroundReadOnlyHover, _styledComponents.chipTokens.colorReadOnlyHover)
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), _styledComponents.chipTokens.borderRadius, _styledComponents.chipTokens.pilledBorderRadius, _styledComponents.chipTokens.width, _styledComponents.chipTokens.height, _styledComponents.chipTokens.padding, _styledComponents.chipTokens.fontFamily, _styledComponents.chipTokens.fontSize, _styledComponents.chipTokens.fontStyle, _styledComponents.chipTokens.fontWeight, _styledComponents.chipTokens.letterSpacing, _styledComponents.chipTokens.lineHeight, _styledComponents.chipTokens.leftContentMarginLeft, _styledComponents.chipTokens.leftContentMarginRight, _styledComponents.chipTokens.clearContentMarginLeft, _styledComponents.chipTokens.clearContentMarginRight, _styledComponents.chipTokens.scaleHover, _styledComponents.chipTokens.scaleActive, _styledComponents.chipTokens.closeIconSize)
|
|
23
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), _styledComponents.chipTokens.borderRadius, _styledComponents.chipTokens.pilledBorderRadius, _styledComponents.chipTokens.width, _styledComponents.chipTokens.height, _styledComponents.chipTokens.padding, _styledComponents.chipTokens.fontFamily, _styledComponents.chipTokens.fontSize, _styledComponents.chipTokens.fontStyle, _styledComponents.chipTokens.fontWeight, _styledComponents.chipTokens.letterSpacing, _styledComponents.chipTokens.lineHeight, _styledComponents.chipTokens.leftContentMarginLeft, _styledComponents.chipTokens.leftContentMarginRight, _styledComponents.chipTokens.clearContentMarginLeft, _styledComponents.chipTokens.clearContentMarginRight, _styledComponents.chipTokens.scaleHover, _styledComponents.chipTokens.scaleActive, _styledComponents.chipTokens.closeIconSize),
|
|
24
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), _styledComponents.chipTokens.borderRadius, _styledComponents.chipTokens.pilledBorderRadius, _styledComponents.chipTokens.width, _styledComponents.chipTokens.height, _styledComponents.chipTokens.padding, _styledComponents.chipTokens.fontFamily, _styledComponents.chipTokens.fontSize, _styledComponents.chipTokens.fontStyle, _styledComponents.chipTokens.fontWeight, _styledComponents.chipTokens.letterSpacing, _styledComponents.chipTokens.lineHeight, _styledComponents.chipTokens.leftContentMarginLeft, _styledComponents.chipTokens.leftContentMarginRight, _styledComponents.chipTokens.clearContentMarginLeft, _styledComponents.chipTokens.clearContentMarginRight, _styledComponents.chipTokens.scaleHover, _styledComponents.chipTokens.scaleActive, _styledComponents.chipTokens.closeIconSize)
|
|
24
25
|
},
|
|
25
26
|
disabled: {
|
|
26
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(
|
|
27
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _styledComponents.chipTokens.disabledOpacity)
|
|
27
28
|
},
|
|
28
29
|
focused: {
|
|
29
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(
|
|
30
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), _styledComponents.chipTokens.focusColor)
|
|
30
31
|
},
|
|
31
32
|
pilled: {
|
|
32
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)(
|
|
33
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
};
|
|
@@ -10,6 +10,7 @@ export declare const Chip: import("react").FunctionComponent<import("@salutejs/p
|
|
|
10
10
|
};
|
|
11
11
|
size: {
|
|
12
12
|
s: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
13
|
+
xs: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
13
14
|
};
|
|
14
15
|
disabled: {
|
|
15
16
|
true: import("@salutejs/plasma-new-hope/types/engines/types").PolymorphicClassName;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.config = void 0;
|
|
7
7
|
var _emotion = /*#__PURE__*/require("@salutejs/plasma-new-hope/emotion");
|
|
8
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
8
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
9
9
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
10
|
var config = exports.config = {
|
|
11
11
|
defaults: {
|
|
@@ -20,16 +20,17 @@ var config = exports.config = {
|
|
|
20
20
|
accent: /*#__PURE__*/(0, _emotion.css)(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), _emotion.chipTokens.color, _emotion.chipTokens.background, _emotion.chipTokens.colorHover, _emotion.chipTokens.backgroundHover, _emotion.chipTokens.colorActive, _emotion.chipTokens.backgroundActive, _emotion.chipTokens.backgroundReadOnly, _emotion.chipTokens.colorReadOnly, _emotion.chipTokens.backgroundReadOnlyHover, _emotion.chipTokens.colorReadOnlyHover)
|
|
21
21
|
},
|
|
22
22
|
size: {
|
|
23
|
-
s: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), _emotion.chipTokens.borderRadius, _emotion.chipTokens.pilledBorderRadius, _emotion.chipTokens.width, _emotion.chipTokens.height, _emotion.chipTokens.padding, _emotion.chipTokens.fontFamily, _emotion.chipTokens.fontSize, _emotion.chipTokens.fontStyle, _emotion.chipTokens.fontWeight, _emotion.chipTokens.letterSpacing, _emotion.chipTokens.lineHeight, _emotion.chipTokens.leftContentMarginLeft, _emotion.chipTokens.leftContentMarginRight, _emotion.chipTokens.clearContentMarginLeft, _emotion.chipTokens.clearContentMarginRight, _emotion.chipTokens.scaleHover, _emotion.chipTokens.scaleActive, _emotion.chipTokens.closeIconSize)
|
|
23
|
+
s: /*#__PURE__*/(0, _emotion.css)(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), _emotion.chipTokens.borderRadius, _emotion.chipTokens.pilledBorderRadius, _emotion.chipTokens.width, _emotion.chipTokens.height, _emotion.chipTokens.padding, _emotion.chipTokens.fontFamily, _emotion.chipTokens.fontSize, _emotion.chipTokens.fontStyle, _emotion.chipTokens.fontWeight, _emotion.chipTokens.letterSpacing, _emotion.chipTokens.lineHeight, _emotion.chipTokens.leftContentMarginLeft, _emotion.chipTokens.leftContentMarginRight, _emotion.chipTokens.clearContentMarginLeft, _emotion.chipTokens.clearContentMarginRight, _emotion.chipTokens.scaleHover, _emotion.chipTokens.scaleActive, _emotion.chipTokens.closeIconSize),
|
|
24
|
+
xs: /*#__PURE__*/(0, _emotion.css)(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), _emotion.chipTokens.borderRadius, _emotion.chipTokens.pilledBorderRadius, _emotion.chipTokens.width, _emotion.chipTokens.height, _emotion.chipTokens.padding, _emotion.chipTokens.fontFamily, _emotion.chipTokens.fontSize, _emotion.chipTokens.fontStyle, _emotion.chipTokens.fontWeight, _emotion.chipTokens.letterSpacing, _emotion.chipTokens.lineHeight, _emotion.chipTokens.leftContentMarginLeft, _emotion.chipTokens.leftContentMarginRight, _emotion.chipTokens.clearContentMarginLeft, _emotion.chipTokens.clearContentMarginRight, _emotion.chipTokens.scaleHover, _emotion.chipTokens.scaleActive, _emotion.chipTokens.closeIconSize)
|
|
24
25
|
},
|
|
25
26
|
disabled: {
|
|
26
|
-
"true": /*#__PURE__*/(0, _emotion.css)(
|
|
27
|
+
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), _emotion.chipTokens.disabledOpacity)
|
|
27
28
|
},
|
|
28
29
|
focused: {
|
|
29
|
-
"true": /*#__PURE__*/(0, _emotion.css)(
|
|
30
|
+
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), _emotion.chipTokens.focusColor)
|
|
30
31
|
},
|
|
31
32
|
pilled: {
|
|
32
|
-
"true": /*#__PURE__*/(0, _emotion.css)(
|
|
33
|
+
"true": /*#__PURE__*/(0, _emotion.css)(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
};
|
|
@@ -6,7 +6,7 @@ import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
|
|
|
6
6
|
import { Chip } from '.';
|
|
7
7
|
|
|
8
8
|
const views = ['default', 'secondary', 'accent'];
|
|
9
|
-
const sizes = ['s'];
|
|
9
|
+
const sizes = ['s', 'xs'];
|
|
10
10
|
|
|
11
11
|
const onClear = action('onClear');
|
|
12
12
|
|
|
@@ -27,7 +27,7 @@ const meta: Meta<typeof Chip> = {
|
|
|
27
27
|
type: 'select',
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
|
-
...disableProps(['readOnly', 'onClear', 'contentLeft', 'contentRight', 'contentClearButton', 'text'
|
|
30
|
+
...disableProps(['readOnly', 'onClear', 'contentLeft', 'contentRight', 'contentClearButton', 'text']),
|
|
31
31
|
},
|
|
32
32
|
};
|
|
33
33
|
|
|
@@ -64,8 +64,9 @@ export const WithIcon: Story = {
|
|
|
64
64
|
render: (args) => {
|
|
65
65
|
const iconSizeMapper = {
|
|
66
66
|
s: '1.5rem',
|
|
67
|
+
xs: '1rem',
|
|
67
68
|
};
|
|
68
|
-
const iconSize = args.size || '
|
|
69
|
+
const iconSize = args.size || 's';
|
|
69
70
|
|
|
70
71
|
return (
|
|
71
72
|
<Chip
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { css, chipTokens } from '@salutejs/plasma-new-hope/emotion';
|
|
4
4
|
export var config = {
|
|
@@ -14,16 +14,17 @@ export var config = {
|
|
|
14
14
|
accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
|
-
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
|
+
xs: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
19
|
},
|
|
19
20
|
disabled: {
|
|
20
|
-
"true": /*#__PURE__*/css(
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), chipTokens.disabledOpacity)
|
|
21
22
|
},
|
|
22
23
|
focused: {
|
|
23
|
-
"true": /*#__PURE__*/css(
|
|
24
|
+
"true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), chipTokens.focusColor)
|
|
24
25
|
},
|
|
25
26
|
pilled: {
|
|
26
|
-
"true": /*#__PURE__*/css(
|
|
27
|
+
"true": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
30
|
};
|
|
@@ -6,7 +6,7 @@ import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils';
|
|
|
6
6
|
import { Chip } from '.';
|
|
7
7
|
|
|
8
8
|
const views = ['default', 'secondary', 'accent'];
|
|
9
|
-
const sizes = ['s'];
|
|
9
|
+
const sizes = ['s', 'xs'];
|
|
10
10
|
|
|
11
11
|
const onClear = action('onClear');
|
|
12
12
|
|
|
@@ -27,7 +27,7 @@ const meta: Meta<typeof Chip> = {
|
|
|
27
27
|
type: 'select',
|
|
28
28
|
},
|
|
29
29
|
},
|
|
30
|
-
...disableProps(['readOnly', 'onClear', 'contentLeft', 'contentRight', 'contentClearButton', 'text'
|
|
30
|
+
...disableProps(['readOnly', 'onClear', 'contentLeft', 'contentRight', 'contentClearButton', 'text']),
|
|
31
31
|
},
|
|
32
32
|
};
|
|
33
33
|
|
|
@@ -64,8 +64,9 @@ export const WithIcon: Story = {
|
|
|
64
64
|
render: (args) => {
|
|
65
65
|
const iconSizeMapper = {
|
|
66
66
|
s: '1.5rem',
|
|
67
|
+
xs: '1rem',
|
|
67
68
|
};
|
|
68
|
-
const iconSize = args.size || '
|
|
69
|
+
const iconSize = args.size || 's';
|
|
69
70
|
|
|
70
71
|
return (
|
|
71
72
|
<Chip
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
2
2
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
3
|
import { css, chipTokens } from '@salutejs/plasma-new-hope/styled-components';
|
|
4
4
|
export var config = {
|
|
@@ -14,16 +14,17 @@ export var config = {
|
|
|
14
14
|
accent: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n ", ": var(--surface-accent);\n ", ": var(--on-dark-text-primary);\n "])), chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
|
|
15
15
|
},
|
|
16
16
|
size: {
|
|
17
|
-
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
|
+
s: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.5rem;\n ", ": 1rem;\n ", ": auto;\n ", ": 2.5rem;\n ", ": 0 1rem;\n\n ", ": var(--plasma-typo-body-m-font-family);\n ", ": var(--plasma-typo-body-m-font-size);\n ", ": var(--plasma-typo-body-m-font-style);\n ", ": var(--plasma-typo-body-m-font-weight);\n ", ": var(--plasma-typo-body-m-letter-spacing);\n ", ": var(--plasma-typo-body-m-line-height);\n\n ", ": -0.25rem;\n ", ": 0.25rem;\n ", ": 0.5rem;\n ", ": -0.5rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1.5rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
|
+
xs: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.38rem;\n ", ": 0.75rem;\n ", ": auto;\n ", ": 1.5rem;\n ", ": 0.125rem 0.5rem;\n\n ", ": var(--plasma-typo-body-s-font-family);\n ", ": var(--plasma-typo-body-s-font-size);\n ", ": var(--plasma-typo-body-s-font-style);\n ", ": var(--plasma-typo-body-s-font-weight);\n ", ": var(--plasma-typo-body-s-letter-spacing);\n ", ": var(--plasma-typo-body-s-line-height);\n\n ", ": 0;\n ", ": 0.25rem;\n ", ": 0.25rem;\n ", ": -0.25rem;\n\n ", ": 1.02;\n ", ": 0.98;\n\n ", ": 1rem;\n "])), chipTokens.borderRadius, chipTokens.pilledBorderRadius, chipTokens.width, chipTokens.height, chipTokens.padding, 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
19
|
},
|
|
19
20
|
disabled: {
|
|
20
|
-
"true": /*#__PURE__*/css(
|
|
21
|
+
"true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": 0.4;\n "])), chipTokens.disabledOpacity)
|
|
21
22
|
},
|
|
22
23
|
focused: {
|
|
23
|
-
"true": /*#__PURE__*/css(
|
|
24
|
+
"true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n ", ": var(--text-accent);\n "])), chipTokens.focusColor)
|
|
24
25
|
},
|
|
25
26
|
pilled: {
|
|
26
|
-
"true": /*#__PURE__*/css(
|
|
27
|
+
"true": /*#__PURE__*/css(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteral([""])))
|
|
27
28
|
}
|
|
28
29
|
}
|
|
29
30
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salutejs/sdds-cs",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.236.0-canary.1713.12904792306.0",
|
|
4
4
|
"description": "Salute Design System / React UI kit for SDDS CS web applications",
|
|
5
5
|
"author": "Salute Frontend Team <salute.developers@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
"directory": "packages/sdds-cs"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@salutejs/plasma-new-hope": "0.246.
|
|
33
|
+
"@salutejs/plasma-new-hope": "0.246.2-dev.0",
|
|
34
34
|
"@salutejs/sdds-themes": "0.31.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependencies": {
|
|
@@ -123,5 +123,5 @@
|
|
|
123
123
|
"Anton Vinogradov"
|
|
124
124
|
],
|
|
125
125
|
"sideEffects": false,
|
|
126
|
-
"gitHead": "
|
|
126
|
+
"gitHead": "0d5d70579cbf4b5852c29352eeefa85e6d7bbfcd"
|
|
127
127
|
}
|