@salutejs/plasma-new-hope 0.325.0-canary.1954.15294244136.0 → 0.325.0-canary.1954.15297919353.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/components/List/List.css +4 -0
- package/cjs/components/List/List.js +4 -9
- package/cjs/components/List/List.js.map +1 -1
- package/cjs/components/List/List.tokens.js +5 -2
- package/cjs/components/List/List.tokens.js.map +1 -1
- package/cjs/components/List/ui/ListItem.css +2 -2
- package/cjs/components/List/ui/ListItem.js +2 -1
- package/cjs/components/List/ui/ListItem.js.map +1 -1
- package/cjs/components/List/ui/ListItem.styles.js +1 -1
- package/cjs/components/List/ui/ListItem.styles.js.map +1 -1
- package/cjs/components/List/ui/ListItem.styles_106alid.css +2 -0
- package/cjs/components/List/variations/_disabled/base.js +1 -1
- package/cjs/components/List/variations/_disabled/base.js.map +1 -1
- package/cjs/components/List/variations/_disabled/base_1p96e1z.css +1 -0
- package/cjs/components/List/variations/_view/base.js +1 -1
- package/cjs/components/List/variations/_view/base.js.map +1 -1
- package/cjs/components/List/variations/_view/base_1fsqflm.css +1 -0
- package/cjs/components/Notification/Notification.css +12 -12
- package/cjs/components/Notification/Notification.js +5 -1
- package/cjs/components/Notification/Notification.js.map +1 -1
- package/cjs/components/Notification/Notification.styles.js +63 -48
- package/cjs/components/Notification/Notification.styles.js.map +1 -1
- package/cjs/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
- package/cjs/components/Notification/Notification.types.js.map +1 -1
- package/cjs/components/Notification/NotificationsProvider.css +11 -11
- package/cjs/components/Notification/variations/_layout/base.js +1 -1
- package/cjs/components/Notification/variations/_layout/base.js.map +1 -1
- package/cjs/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
- package/cjs/components/NumberFormat/NumberFormat.js +2 -7
- package/cjs/components/NumberFormat/NumberFormat.js.map +1 -1
- package/cjs/index.css +18 -14
- package/emotion/cjs/components/List/List.js +8 -13
- package/emotion/cjs/components/List/List.template-doc.mdx +42 -0
- package/emotion/cjs/components/List/List.tokens.js +5 -2
- package/emotion/cjs/components/List/ui/ListItem.js +2 -1
- package/emotion/cjs/components/List/ui/ListItem.styles.js +2 -2
- package/emotion/cjs/components/List/variations/_disabled/base.js +3 -1
- package/emotion/cjs/components/List/variations/_view/base.js +3 -1
- package/emotion/cjs/components/Notification/Notification.js +5 -1
- package/emotion/cjs/components/Notification/Notification.styles.js +43 -36
- package/emotion/cjs/components/Notification/Notification.template-doc.mdx +44 -0
- package/emotion/cjs/components/Notification/variations/_layout/base.js +1 -1
- package/emotion/cjs/components/NumberFormat/NumberFormat.js +2 -7
- package/emotion/cjs/components/TextField/TextField.template-doc.mdx +16 -1
- package/emotion/cjs/examples/fixtures/Notification.js +1 -1
- package/emotion/cjs/examples/plasma_b2c/components/List/List.config.js +8 -13
- package/emotion/cjs/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
- package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
- package/emotion/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
- package/emotion/cjs/examples/plasma_web/components/List/List.config.js +8 -13
- package/emotion/cjs/examples/plasma_web/components/List/List.stories.tsx +1 -0
- package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.config.js +23 -22
- package/emotion/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
- package/emotion/es/components/List/List.js +2 -7
- package/emotion/es/components/List/List.template-doc.mdx +42 -0
- package/emotion/es/components/List/List.tokens.js +5 -2
- package/emotion/es/components/List/ui/ListItem.js +2 -1
- package/emotion/es/components/List/ui/ListItem.styles.js +3 -3
- package/emotion/es/components/List/variations/_disabled/base.js +3 -1
- package/emotion/es/components/List/variations/_view/base.js +3 -1
- package/emotion/es/components/Notification/Notification.js +5 -1
- package/emotion/es/components/Notification/Notification.styles.js +43 -36
- package/emotion/es/components/Notification/Notification.template-doc.mdx +44 -0
- package/emotion/es/components/Notification/variations/_layout/base.js +1 -1
- package/emotion/es/components/NumberFormat/NumberFormat.js +2 -7
- package/emotion/es/components/TextField/TextField.template-doc.mdx +16 -1
- package/emotion/es/examples/fixtures/Notification.js +1 -1
- package/emotion/es/examples/plasma_b2c/components/List/List.config.js +8 -13
- package/emotion/es/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
- package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.config.js +23 -22
- package/emotion/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
- package/emotion/es/examples/plasma_web/components/List/List.config.js +8 -13
- package/emotion/es/examples/plasma_web/components/List/List.stories.tsx +1 -0
- package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
- package/emotion/es/examples/plasma_web/components/TextField/TextField.config.js +23 -22
- package/emotion/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
- package/es/components/List/List.css +4 -0
- package/es/components/List/List.js +4 -9
- package/es/components/List/List.js.map +1 -1
- package/es/components/List/List.tokens.js +5 -2
- package/es/components/List/List.tokens.js.map +1 -1
- package/es/components/List/ui/ListItem.css +2 -2
- package/es/components/List/ui/ListItem.js +2 -1
- package/es/components/List/ui/ListItem.js.map +1 -1
- package/es/components/List/ui/ListItem.styles.js +1 -1
- package/es/components/List/ui/ListItem.styles.js.map +1 -1
- package/es/components/List/ui/ListItem.styles_106alid.css +2 -0
- package/es/components/List/variations/_disabled/base.js +1 -1
- package/es/components/List/variations/_disabled/base.js.map +1 -1
- package/es/components/List/variations/_disabled/base_1p96e1z.css +1 -0
- package/es/components/List/variations/_view/base.js +1 -1
- package/es/components/List/variations/_view/base.js.map +1 -1
- package/es/components/List/variations/_view/base_1fsqflm.css +1 -0
- package/es/components/Notification/Notification.css +12 -12
- package/es/components/Notification/Notification.js +5 -1
- package/es/components/Notification/Notification.js.map +1 -1
- package/es/components/Notification/Notification.styles.js +63 -48
- package/es/components/Notification/Notification.styles.js.map +1 -1
- package/es/components/Notification/{Notification.styles_1yt699o.css → Notification.styles_1uyb7ob.css} +1 -1
- package/es/components/Notification/Notification.types.js.map +1 -1
- package/es/components/Notification/NotificationsProvider.css +11 -11
- package/es/components/Notification/variations/_layout/base.js +1 -1
- package/es/components/Notification/variations/_layout/base.js.map +1 -1
- package/es/components/Notification/variations/_layout/base_1g9g70c.css +1 -0
- package/es/components/NumberFormat/NumberFormat.js +2 -7
- package/es/components/NumberFormat/NumberFormat.js.map +1 -1
- package/es/index.css +18 -14
- package/package.json +2 -2
- package/styled-components/cjs/components/List/List.js +8 -13
- package/styled-components/cjs/components/List/List.template-doc.mdx +42 -0
- package/styled-components/cjs/components/List/List.tokens.js +5 -2
- package/styled-components/cjs/components/List/ui/ListItem.js +2 -1
- package/styled-components/cjs/components/List/ui/ListItem.styles.js +1 -1
- package/styled-components/cjs/components/List/variations/_disabled/base.js +3 -1
- package/styled-components/cjs/components/List/variations/_view/base.js +3 -1
- package/styled-components/cjs/components/Notification/Notification.js +5 -1
- package/styled-components/cjs/components/Notification/Notification.styles.js +33 -26
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +44 -0
- package/styled-components/cjs/components/Notification/variations/_layout/base.js +1 -1
- package/styled-components/cjs/components/NumberFormat/NumberFormat.js +2 -7
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +16 -1
- package/styled-components/cjs/examples/fixtures/Notification.js +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/List/List.config.js +8 -13
- package/styled-components/cjs/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
- package/styled-components/cjs/examples/plasma_web/components/List/List.config.js +8 -13
- package/styled-components/cjs/examples/plasma_web/components/List/List.stories.tsx +1 -0
- package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.config.js +7 -6
- package/styled-components/cjs/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
- package/styled-components/es/components/List/List.js +2 -7
- package/styled-components/es/components/List/List.template-doc.mdx +42 -0
- package/styled-components/es/components/List/List.tokens.js +5 -2
- package/styled-components/es/components/List/ui/ListItem.js +2 -1
- package/styled-components/es/components/List/ui/ListItem.styles.js +2 -2
- package/styled-components/es/components/List/variations/_disabled/base.js +3 -1
- package/styled-components/es/components/List/variations/_view/base.js +3 -1
- package/styled-components/es/components/Notification/Notification.js +5 -1
- package/styled-components/es/components/Notification/Notification.styles.js +33 -26
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +44 -0
- package/styled-components/es/components/Notification/variations/_layout/base.js +1 -1
- package/styled-components/es/components/NumberFormat/NumberFormat.js +2 -7
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +16 -1
- package/styled-components/es/examples/fixtures/Notification.js +1 -1
- package/styled-components/es/examples/plasma_b2c/components/List/List.config.js +8 -13
- package/styled-components/es/examples/plasma_b2c/components/List/List.stories.tsx +1 -0
- package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +5 -1
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +2 -1
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +9 -4
- package/styled-components/es/examples/plasma_web/components/List/List.config.js +8 -13
- package/styled-components/es/examples/plasma_web/components/List/List.stories.tsx +1 -0
- package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +5 -1
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.config.js +7 -6
- package/styled-components/es/examples/plasma_web/components/TextField/TextField.stories.tsx +10 -5
- package/types/components/List/List.d.ts +2 -9
- package/types/components/List/List.d.ts.map +1 -1
- package/types/components/List/List.tokens.d.ts +4 -1
- package/types/components/List/List.tokens.d.ts.map +1 -1
- package/types/components/List/List.types.d.ts +2 -4
- package/types/components/List/List.types.d.ts.map +1 -1
- package/types/components/List/ui/ListItem.d.ts.map +1 -1
- package/types/components/List/ui/ListItem.styles.d.ts +1 -3
- package/types/components/List/ui/ListItem.styles.d.ts.map +1 -1
- package/types/components/List/ui/ListItem.types.d.ts +0 -1
- package/types/components/List/ui/ListItem.types.d.ts.map +1 -1
- package/types/components/List/variations/_disabled/base.d.ts.map +1 -1
- package/types/components/List/variations/_view/base.d.ts.map +1 -1
- package/types/components/Notification/Notification.d.ts.map +1 -1
- package/types/components/Notification/Notification.styles.d.ts +3 -1
- package/types/components/Notification/Notification.styles.d.ts.map +1 -1
- package/types/components/Notification/Notification.types.d.ts +9 -0
- package/types/components/Notification/Notification.types.d.ts.map +1 -1
- package/types/components/NumberFormat/NumberFormat.d.ts.map +1 -1
- package/cjs/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
- package/cjs/components/List/variations/_disabled/base_x642ct.css +0 -1
- package/cjs/components/List/variations/_variant/base.js +0 -9
- package/cjs/components/List/variations/_variant/base.js.map +0 -1
- package/cjs/components/List/variations/_variant/base_x642ct.css +0 -1
- package/cjs/components/List/variations/_view/base_x642ct.css +0 -1
- package/cjs/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
- package/emotion/cjs/components/List/variations/_variant/base.js +0 -8
- package/emotion/cjs/components/List/variations/_variant/tokens.json +0 -1
- package/emotion/es/components/List/variations/_variant/base.js +0 -2
- package/emotion/es/components/List/variations/_variant/tokens.json +0 -1
- package/es/components/List/ui/ListItem.styles_1eo5k14.css +0 -2
- package/es/components/List/variations/_disabled/base_x642ct.css +0 -1
- package/es/components/List/variations/_variant/base.js +0 -5
- package/es/components/List/variations/_variant/base.js.map +0 -1
- package/es/components/List/variations/_variant/base_x642ct.css +0 -1
- package/es/components/List/variations/_view/base_x642ct.css +0 -1
- package/es/components/Notification/variations/_layout/base_qkc3i4.css +0 -1
- package/styled-components/cjs/components/List/variations/_variant/base.js +0 -8
- package/styled-components/cjs/components/List/variations/_variant/tokens.json +0 -1
- package/styled-components/es/components/List/variations/_variant/base.js +0 -2
- package/styled-components/es/components/List/variations/_variant/tokens.json +0 -1
- package/types/components/List/variations/_variant/base.d.ts +0 -2
- package/types/components/List/variations/_variant/base.d.ts.map +0 -1
@@ -9,10 +9,9 @@ var _react = /*#__PURE__*/_interopRequireWildcard(/*#__PURE__*/require("react"))
|
|
9
9
|
var _classnames = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("classnames"));
|
10
10
|
var _List = /*#__PURE__*/require("./List.styles");
|
11
11
|
var _List2 = /*#__PURE__*/require("./List.tokens");
|
12
|
-
var _base = /*#__PURE__*/require("./variations/
|
13
|
-
var _base2 = /*#__PURE__*/require("./variations/
|
14
|
-
var _base3 = /*#__PURE__*/require("./variations/
|
15
|
-
var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
|
12
|
+
var _base = /*#__PURE__*/require("./variations/_view/base");
|
13
|
+
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
14
|
+
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
16
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
17
16
|
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); }
|
18
17
|
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 && {}.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; }
|
@@ -20,17 +19,16 @@ var listRoot = exports.listRoot = function listRoot(Root) {
|
|
20
19
|
return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, outerRootRef) {
|
21
20
|
var size = _ref.size,
|
22
21
|
view = _ref.view,
|
23
|
-
variant = _ref.variant,
|
24
22
|
disabled = _ref.disabled,
|
23
|
+
variant = _ref.variant,
|
25
24
|
className = _ref.className,
|
26
25
|
children = _ref.children;
|
27
26
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
28
27
|
ref: outerRootRef,
|
29
28
|
size: size,
|
30
29
|
view: view,
|
31
|
-
variant: variant,
|
32
30
|
disabled: disabled,
|
33
|
-
className: (0, _classnames["default"])(_List2.classes.listRoot, className)
|
31
|
+
className: (0, _classnames["default"])(_List2.classes.listRoot, className, variant === 'tight' ? _List2.classes.tightListItem : '', disabled ? _List2.classes.disabledList : '')
|
34
32
|
}, children);
|
35
33
|
});
|
36
34
|
};
|
@@ -41,16 +39,13 @@ var listConfig = exports.listConfig = {
|
|
41
39
|
base: _List.base,
|
42
40
|
variations: {
|
43
41
|
view: {
|
44
|
-
css:
|
42
|
+
css: _base.base
|
45
43
|
},
|
46
44
|
size: {
|
47
|
-
css:
|
48
|
-
},
|
49
|
-
variant: {
|
50
|
-
css: _base.base
|
45
|
+
css: _base2.base
|
51
46
|
},
|
52
47
|
disabled: {
|
53
|
-
css:
|
48
|
+
css: _base3.base
|
54
49
|
}
|
55
50
|
},
|
56
51
|
defaults: {
|
@@ -0,0 +1,42 @@
|
|
1
|
+
---
|
2
|
+
id: list
|
3
|
+
title: List
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable } from '@site/src/components';
|
7
|
+
|
8
|
+
# List
|
9
|
+
Компонент ячейки.
|
10
|
+
|
11
|
+
<PropsTable name="List" />
|
12
|
+
|
13
|
+
Компонент представляет собой спсиок состоящий из `ListItem`.
|
14
|
+
|
15
|
+
ListItem представляет собой простой компонент с текстом и иконкой
|
16
|
+
|
17
|
+
### Типы ListItem
|
18
|
+
<PropsTable name="ListItem" />
|
19
|
+
|
20
|
+
## Примеры
|
21
|
+
|
22
|
+
### Базовое использование
|
23
|
+
```tsx live
|
24
|
+
import React from 'react';
|
25
|
+
import { List, ListItem } from '@salutejs/{{ package }}';
|
26
|
+
import { IconChevronRight } from '@salutejs/plasma-icons';
|
27
|
+
|
28
|
+
export function App() {
|
29
|
+
return (
|
30
|
+
<div>
|
31
|
+
<List view="default" size="s" variant="normal">
|
32
|
+
<ListItem contentRight={<IconChevronRight color="inherit" size="xs" />}>Test Item 1</ListItem>
|
33
|
+
<ListItem contentRight={<IconChevronRight color="inherit" size="xs" />}>Test Item 2</ListItem>
|
34
|
+
<ListItem contentRight={<IconChevronRight color="inherit" size="xs" />} disabled>
|
35
|
+
Test Item 3
|
36
|
+
</ListItem>
|
37
|
+
<ListItem contentRight={<IconChevronRight color="inherit" size="xs" />}>Test Item 4</ListItem>
|
38
|
+
</List>
|
39
|
+
</div>
|
40
|
+
);
|
41
|
+
}
|
42
|
+
```
|
@@ -8,7 +8,10 @@ var classes = exports.classes = {
|
|
8
8
|
listRoot: 'list-root',
|
9
9
|
listItem: 'list-item',
|
10
10
|
filledStretching: 'list-stretching-filled',
|
11
|
-
fixedStretching: 'list-stretching-fixed'
|
11
|
+
fixedStretching: 'list-stretching-fixed',
|
12
|
+
tightListItem: 'list-item-tight',
|
13
|
+
disabledList: 'list-item-disabled',
|
14
|
+
disabledListItem: 'list-item-disabled-item'
|
12
15
|
};
|
13
16
|
var tokens = exports.tokens = {
|
14
17
|
listGap: '--plasma-list-gap',
|
@@ -26,7 +29,7 @@ var tokens = exports.tokens = {
|
|
26
29
|
listItemIconLeftColor: '--plasma-list-item-color-icon-left',
|
27
30
|
listItemIconRightColor: '--plasma-list-item-color-icon-right',
|
28
31
|
listItemGap: '--plasma-list-item-gap',
|
29
|
-
|
32
|
+
listItemTightDifference: '--plasma-list-item-tight-difference',
|
30
33
|
listItemColor: '--plasma-list-item-color',
|
31
34
|
listItemColorHover: '--plasma-list-item-color-hover',
|
32
35
|
listItemFontFamily: '--plasma-list-item-font-family',
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.ListItem = void 0;
|
7
7
|
var _react = /*#__PURE__*/_interopRequireDefault(/*#__PURE__*/require("react"));
|
8
|
+
var _List = /*#__PURE__*/require("../List.tokens");
|
8
9
|
var _ListItem = /*#__PURE__*/require("./ListItem.styles");
|
9
10
|
var _excluded = ["children", "contentRight", "disabled"];
|
10
11
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
|
@@ -17,7 +18,7 @@ var ListItem = exports.ListItem = function ListItem(_ref) {
|
|
17
18
|
disabled = _ref.disabled,
|
18
19
|
rest = _objectWithoutProperties(_ref, _excluded);
|
19
20
|
return /*#__PURE__*/_react["default"].createElement(_ListItem.StyledListItem, _extends({
|
20
|
-
disabled:
|
21
|
+
className: disabled ? _List.classes.disabledListItem : ''
|
21
22
|
}, rest), /*#__PURE__*/_react["default"].createElement(_ListItem.CellItem, {
|
22
23
|
contentRight: contentRight
|
23
24
|
}, children));
|
@@ -16,4 +16,4 @@ var CellItem = exports.CellItem = /*#__PURE__*/(0, _styledComponents["default"])
|
|
16
16
|
})(["", ":100%;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":0rem;", ":var(", ");", ":var(", ");", ":transparent;"], _Cell.cellTokens.cellWidth, _Cell.cellTokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Cell.cellTokens.cellGap, _List.tokens.listItemGap, _Cell.cellTokens.cellColor, _List.tokens.listItemColor, _Cell.cellTokens.cellBackgroundColor);
|
17
17
|
var StyledListItem = exports.StyledListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
|
18
18
|
componentId: "plasma-new-hope__sc-1roh0z4-1"
|
19
|
-
})(["padding:
|
19
|
+
})(["padding:var(", ") var(", ") var(", ") var(", ");border-radius:var(", ");background:var(", ");border:var(", ") solid var(", ");box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;color:var(", ");font-size:var(", ");font-weight:var(", ");font-family:var(", ");font-style:var(", ");line-height:var(", ");letter-spacing:var(", ");&:hover{background:var(", ");border-color:var(", ");color:var(", ");}&.", "{cursor:not-allowed;opacity:var(", ");}"], _List.tokens.listItemPaddingTop, _List.tokens.listItemPaddingRight, _List.tokens.listItemPaddingBottom, _List.tokens.listItemPaddingLeft, _List.tokens.listItemBorderRadius, _List.tokens.listItemBackground, _List.tokens.listItemBorderWidth, _List.tokens.listItemBorderColor, _List.tokens.listItemColor, _List.tokens.listItemFontSize, _List.tokens.listItemFontWeight, _List.tokens.listItemFontFamily, _List.tokens.listItemFontStyle, _List.tokens.listItemLineHeight, _List.tokens.listItemLetterSpacing, _List.tokens.listItemBackgroundHover, _List.tokens.listItemBorderColorHover, _List.tokens.listItemColorHover, _List.classes.disabledListItem, _List.tokens.listDisabledOpacity);
|
@@ -5,4 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var
|
8
|
+
var _List = /*#__PURE__*/require("../../List.tokens");
|
9
|
+
var _ListItem = /*#__PURE__*/require("../../ui/ListItem.styles");
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{cursor:not-allowed;opacity:var(", ");}}"], _List.classes.disabledList, _ListItem.StyledListItem, _List.tokens.listDisabledOpacity);
|
@@ -5,4 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
-
var
|
8
|
+
var _List = /*#__PURE__*/require("../../List.tokens");
|
9
|
+
var _ListItem = /*#__PURE__*/require("../../ui/ListItem.styles");
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{", "{padding:calc(var(", ") - var(", ")) var(", ") calc(var(", ") - var(", ")) var(", ");}}"], _List.classes.tightListItem, _ListItem.StyledListItem, _List.tokens.listItemPaddingTop, _List.tokens.listItemTightDifference, _List.tokens.listItemPaddingRight, _List.tokens.listItemPaddingBottom, _List.tokens.listItemTightDifference, _List.tokens.listItemPaddingLeft);
|
@@ -17,7 +17,7 @@ var _base4 = /*#__PURE__*/require("./variations/_closeIconType/base");
|
|
17
17
|
var _Notification2 = /*#__PURE__*/require("./Notification.types");
|
18
18
|
var _Notification3 = /*#__PURE__*/require("./Notification.styles");
|
19
19
|
var _utils2 = /*#__PURE__*/require("./utils");
|
20
|
-
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "titleColor", "backgroundColor", "onCloseButtonClick"];
|
20
|
+
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "textColor", "titleColor", "backgroundColor", "width", "maxWidth", "onCloseButtonClick"];
|
21
21
|
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); }
|
22
22
|
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 && {}.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; }
|
23
23
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
@@ -45,6 +45,8 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
|
|
45
45
|
textColor = props.textColor,
|
46
46
|
titleColor = props.titleColor,
|
47
47
|
backgroundColor = props.backgroundColor,
|
48
|
+
width = props.width,
|
49
|
+
maxWidth = props.maxWidth,
|
48
50
|
onCloseButtonClick = props.onCloseButtonClick,
|
49
51
|
rest = _objectWithoutProperties(props, _excluded);
|
50
52
|
var ariaLive = 'polite';
|
@@ -72,6 +74,8 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
|
|
72
74
|
"aria-atomic": ariaAtomic
|
73
75
|
}, rest), /*#__PURE__*/_react["default"].createElement(_Notification3.Wrapper, {
|
74
76
|
backgroundColor: backgroundColor,
|
77
|
+
width: width,
|
78
|
+
maxWidth: maxWidth,
|
75
79
|
className: (0, _utils.cx)(_Notification.classes.wrapper, (0, _utils2.getLayoutClass)(layout), oneLineClass, withoutCloseIconClass)
|
76
80
|
}, /*#__PURE__*/_react["default"].createElement(_Notification3.ContentBox, {
|
77
81
|
iconPlacement: IconPlacementInternal,
|
@@ -23,57 +23,64 @@ var CloseIconWrapper = exports.CloseIconWrapper = /*#__PURE__*/(0, _styledCompon
|
|
23
23
|
})(["position:absolute;width:var(", ");height:var(", ");align-self:var(", ");color:var(", ");:hover{color:var(", ");}&.", "{position:relative;}"], _Notification.tokens.closeIconButtonSize, _Notification.tokens.closeIconButtonSize, _Notification.tokens.horisontalIconCloseAlignSelf, _Notification.tokens.closeIconColor, _Notification.tokens.closeIconColorOnHover, _Notification.classes.horizontal);
|
24
24
|
var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
25
25
|
componentId: "plasma-new-hope__sc-1iufy9r-1"
|
26
|
-
})(["position:relative;
|
27
|
-
var
|
26
|
+
})(["position:relative;width:", ";max-width:", ";border-radius:var(", ");border:var(", ") solid var(", ");background:", ";box-sizing:border-box;&.", "{display:flex;align-items:center;gap:var(", ");}"], function (_ref) {
|
27
|
+
var _ref$width = _ref.width,
|
28
|
+
width = _ref$width === void 0 ? "var(".concat(_Notification.tokens.width, ")") : _ref$width;
|
29
|
+
return width;
|
30
|
+
}, function (_ref2) {
|
31
|
+
var maxWidth = _ref2.maxWidth;
|
32
|
+
return maxWidth || 'unset';
|
33
|
+
}, _Notification.tokens.borderRadius, _Notification.tokens.borderWidth, _Notification.tokens.borderColor, function (_ref3) {
|
34
|
+
var backgroundColor = _ref3.backgroundColor;
|
28
35
|
return backgroundColor || "var(".concat(_Notification.tokens.background, ")");
|
29
|
-
}, _Notification.
|
36
|
+
}, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutGap);
|
30
37
|
var ButtonsWrapper = exports.ButtonsWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
31
38
|
componentId: "plasma-new-hope__sc-1iufy9r-2"
|
32
|
-
})(["margin-top:var(", ");margin-left:", ";align-self:var(", ");&.", "{margin-top:unset;margin-left:unset;}"], _Notification.tokens.buttonsMarginTop, function (
|
33
|
-
var iconPlacement =
|
39
|
+
})(["margin-top:var(", ");margin-left:", ";align-self:var(", ");&.", "{margin-top:unset;margin-left:unset;}"], _Notification.tokens.buttonsMarginTop, function (_ref4) {
|
40
|
+
var iconPlacement = _ref4.iconPlacement;
|
34
41
|
return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.buttonsMarginLeft, ")") : 'unset';
|
35
42
|
}, _Notification.tokens.horisontalActionsAlignSelf, _Notification.classes.horizontal);
|
36
43
|
var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
37
44
|
componentId: "plasma-new-hope__sc-1iufy9r-3"
|
38
|
-
})(["width:var(", ");height:var(", ");align-self:var(", ");color:", ";margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (
|
39
|
-
var iconColor =
|
45
|
+
})(["width:var(", ");height:var(", ");align-self:var(", ");color:", ";margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (_ref5) {
|
46
|
+
var iconColor = _ref5.iconColor;
|
40
47
|
return iconColor || "var(".concat(_Notification.tokens.contentLeftIconColor, ")");
|
41
|
-
}, function (
|
42
|
-
var iconPlacement =
|
48
|
+
}, function (_ref6) {
|
49
|
+
var iconPlacement = _ref6.iconPlacement;
|
43
50
|
return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.contentLeftIconMargin, ")") : 'unset';
|
44
|
-
}, function (
|
45
|
-
var iconPlacement =
|
51
|
+
}, function (_ref7) {
|
52
|
+
var iconPlacement = _ref7.iconPlacement;
|
46
53
|
return iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.contentTopIconMargin, ")") : 'unset';
|
47
54
|
}, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutLeftIconMargin);
|
48
55
|
var ContentBox = exports.ContentBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
49
56
|
componentId: "plasma-new-hope__sc-1iufy9r-4"
|
50
|
-
})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (
|
51
|
-
var iconPlacement =
|
57
|
+
})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (_ref8) {
|
58
|
+
var iconPlacement = _ref8.iconPlacement;
|
52
59
|
return iconPlacement === _Notification2.placements.left ? 'flex' : 'block';
|
53
|
-
}, function (
|
54
|
-
var iconPlacement =
|
60
|
+
}, function (_ref9) {
|
61
|
+
var iconPlacement = _ref9.iconPlacement;
|
55
62
|
return iconPlacement ? "var(".concat(_Notification.tokens.contentPaddingTop, ")") : "var(".concat(_Notification.tokens.contentPaddingTopWithoutIcon, ")");
|
56
63
|
}, _Notification.classes.horizontal);
|
57
64
|
var TextBox = exports.TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
58
65
|
componentId: "plasma-new-hope__sc-1iufy9r-5"
|
59
|
-
})(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (
|
60
|
-
var iconPlacement =
|
66
|
+
})(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (_ref10) {
|
67
|
+
var iconPlacement = _ref10.iconPlacement;
|
61
68
|
return !iconPlacement || iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingTopWithTopIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingTop, ")");
|
62
|
-
}, function (
|
63
|
-
var showCloseIcon =
|
64
|
-
iconPlacement =
|
69
|
+
}, function (_ref11) {
|
70
|
+
var showCloseIcon = _ref11.showCloseIcon,
|
71
|
+
iconPlacement = _ref11.iconPlacement;
|
65
72
|
return showCloseIcon && iconPlacement !== _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingRightWithCloseIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingRight, ")");
|
66
73
|
}, _Notification.tokens.textboxGap, _Notification.classes.horizontal);
|
67
74
|
var StyledTitle = exports.StyledTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
68
75
|
componentId: "plasma-new-hope__sc-1iufy9r-6"
|
69
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (
|
70
|
-
var textColor =
|
76
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref12) {
|
77
|
+
var textColor = _ref12.textColor;
|
71
78
|
return textColor || "var(".concat(_Notification.tokens.titleColor, ")");
|
72
79
|
});
|
73
80
|
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
74
81
|
componentId: "plasma-new-hope__sc-1iufy9r-7"
|
75
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (
|
76
|
-
var textColor =
|
82
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:", ";"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), function (_ref13) {
|
83
|
+
var textColor = _ref13.textColor;
|
77
84
|
return textColor || "var(".concat(_Notification.tokens.contentColor, ")");
|
78
85
|
});
|
79
86
|
var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
@@ -81,7 +88,7 @@ var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponen
|
|
81
88
|
})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}&.", "{animation:0.4s showTopToCenterAnimation ease-out;}&.", "{animation:0.4s showBottomToCenterAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showTopToCenterAnimation{0%{transform:translateY(-100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showBottomToCenterAnimation{0%{transform:translateY(100%);opacity:0;}100%{transform:translateY(0);opacity:1;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], _Notification.classes.notificationItemOpened, _Notification.classes.notificationLeftToRightAnimation, _Notification.classes.notificationTopToCenterAnimation, _Notification.classes.notificationBottomToCenterAnimation, _Notification.classes.notificationItemHidden, _Notification.classes.notificationLeftToRightAnimation);
|
82
89
|
var StyledRoot = exports.StyledRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
83
90
|
componentId: "plasma-new-hope__sc-1iufy9r-9"
|
84
|
-
})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (
|
85
|
-
var placement =
|
91
|
+
})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref14) {
|
92
|
+
var placement = _ref14.placement;
|
86
93
|
return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
|
87
94
|
});
|
@@ -133,3 +133,47 @@ export function App() {
|
|
133
133
|
);
|
134
134
|
}
|
135
135
|
```
|
136
|
+
|
137
|
+
## Управление шириной уведомления
|
138
|
+
|
139
|
+
Для управления шириной компонента доступны следующие свойства:
|
140
|
+
|
141
|
+
- `width` — устанавливает ширину компонента.
|
142
|
+
- `maxWidth` — устанавливает максимальную ширину компонента.
|
143
|
+
|
144
|
+
Оба свойства принимает любые действительные CSS значения для [width](https://developer.mozilla.org/en-US/docs/Web/CSS/width#syntax) и [maxWidth](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width#syntax)
|
145
|
+
|
146
|
+
```jsx live
|
147
|
+
import React, { useCallback } from 'react';
|
148
|
+
import { IconBell } from '@salutejs/plasma-icons';
|
149
|
+
import { Button, ButtonGroup, addNotification, closeNotification, NotificationsProvider } from '@salutejs/{{ package }}';
|
150
|
+
|
151
|
+
export function App() {
|
152
|
+
const handleShow = useCallback(() => {
|
153
|
+
addNotification({
|
154
|
+
id: 'incoming-call',
|
155
|
+
title: 'Входящий вызов',
|
156
|
+
icon: <IconBell color="inherit" size="xs" />,
|
157
|
+
children: 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.',
|
158
|
+
view: 'positive',
|
159
|
+
textColor: 'black',
|
160
|
+
titleColor: 'blue',
|
161
|
+
width: 'fit-content',
|
162
|
+
maxWidth: '30rem'
|
163
|
+
}, 3000);
|
164
|
+
}, []);
|
165
|
+
|
166
|
+
const handleHide = useCallback(() => {
|
167
|
+
closeNotification('incoming-call');
|
168
|
+
}, []);
|
169
|
+
|
170
|
+
return (
|
171
|
+
<NotificationsProvider>
|
172
|
+
<ButtonGroup>
|
173
|
+
<Button text="Показать оповещение" onClick={handleShow} />
|
174
|
+
<Button text="Скрыть оповещение" onClick={handleHide} />
|
175
|
+
</ButtonGroup>
|
176
|
+
</NotificationsProvider>
|
177
|
+
);
|
178
|
+
}
|
179
|
+
```
|
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Notification = /*#__PURE__*/require("../../Notification.tokens");
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([".", "{padding:var(", ");}.", ".", "{padding:var(", ");&.", "{padding-right:var(", ");}}.", ".", ".", "{padding:var(", ");}"], _Notification.classes.wrapper, _Notification.tokens.padding, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutPadding, _Notification.classes.withoutCloseIcon, _Notification.tokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.classes.wrapper, _Notification.classes.horizontal, _Notification.classes.oneLine, _Notification.tokens.paddingOneLineTextbox);
|
@@ -29,18 +29,13 @@ var composeNumberFormat = exports.composeNumberFormat = function composeNumberFo
|
|
29
29
|
onChange(changeEvent, values);
|
30
30
|
}
|
31
31
|
};
|
32
|
-
var InputComponentWithoutEllipsis = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
33
|
-
return /*#__PURE__*/_react["default"].createElement(InputComponent, _extends({
|
34
|
-
ref: ref,
|
35
|
-
_textEllipsisDisable: true
|
36
|
-
}, props));
|
37
|
-
});
|
38
32
|
return /*#__PURE__*/_react["default"].createElement(_reactNumberFormat.NumericFormat, _extends({
|
39
33
|
thousandSeparator: thousandSeparator,
|
40
34
|
decimalScale: decimalScale,
|
41
35
|
decimalSeparator: decimalSeparator,
|
42
|
-
customInput:
|
36
|
+
customInput: InputComponent,
|
43
37
|
getInputRef: outerRef,
|
38
|
+
_textEllipsisDisable: true,
|
44
39
|
onValueChange: handleChangeValue
|
45
40
|
}, rest));
|
46
41
|
});
|
@@ -37,7 +37,7 @@ export function App() {
|
|
37
37
|
```
|
38
38
|
|
39
39
|
### Размер поля
|
40
|
-
Размер поля задаётся с помощью свойства `size
|
40
|
+
Размер поля задаётся с помощью свойства `size`:
|
41
41
|
|
42
42
|
```tsx live
|
43
43
|
import React from 'react';
|
@@ -46,6 +46,11 @@ import { TextField } from '@salutejs/{{ package }}';
|
|
46
46
|
export function App() {
|
47
47
|
return (
|
48
48
|
<div>
|
49
|
+
<TextField
|
50
|
+
placeholder="Размер"
|
51
|
+
size="xl"
|
52
|
+
defaultValue="XL64"
|
53
|
+
/>
|
49
54
|
<TextField
|
50
55
|
placeholder="Размер"
|
51
56
|
size="l"
|
@@ -56,6 +61,16 @@ export function App() {
|
|
56
61
|
size="s"
|
57
62
|
defaultValue="S40"
|
58
63
|
/>
|
64
|
+
<TextField
|
65
|
+
placeholder="Размер"
|
66
|
+
size="s"
|
67
|
+
defaultValue="S32"
|
68
|
+
/>
|
69
|
+
<TextField
|
70
|
+
placeholder="Размер"
|
71
|
+
size="xs"
|
72
|
+
defaultValue="XS24"
|
73
|
+
/>
|
59
74
|
</div>
|
60
75
|
);
|
61
76
|
}
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
});
|
6
6
|
exports.titles = exports.texts = exports.size = exports.notificationsPlacements = exports.longText = exports.iconPlacement = exports.IconPlacements = void 0;
|
7
7
|
var titles = exports.titles = ['Выполнено', 'Внимание', 'Ошибка'];
|
8
|
-
var texts = exports.texts = ['
|
8
|
+
var texts = exports.texts = ['Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.', 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.', 'Задача организации, в особенности же сплочённость команды профессионалов требует определения и уточнения глубокомысленных рассуждений.'];
|
9
9
|
var size = exports.size = ['xs', 'xxs'];
|
10
10
|
var iconPlacement = exports.iconPlacement = ['top', 'left'];
|
11
11
|
var notificationsPlacements = exports.notificationsPlacements = ['center', 'top', 'bottom', 'right', 'left', 'top-right', 'top-left', 'bottom-right', 'bottom-left'];
|
@@ -9,26 +9,21 @@ var _List = /*#__PURE__*/require("../../../../components/List");
|
|
9
9
|
var config = exports.config = {
|
10
10
|
defaults: {
|
11
11
|
view: 'default',
|
12
|
-
size: 's'
|
13
|
-
variant: 'normal'
|
12
|
+
size: 's'
|
14
13
|
},
|
15
14
|
variations: {
|
16
15
|
view: {
|
17
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;"], _List.listTokens.listItemColor, _List.listTokens.listItemColorHover, _List.listTokens.listItemBackground, _List.listTokens.listItemBackgroundHover, _List.listTokens.listItemBorderColor, _List.listTokens.listItemBorderColorHover)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary);", ":transparent;", ":var(--surface-transparent-secondary);", ":transparent;", ":transparent;", ":0.4;"], _List.listTokens.listItemColor, _List.listTokens.listItemColorHover, _List.listTokens.listItemBackground, _List.listTokens.listItemBackgroundHover, _List.listTokens.listItemBorderColor, _List.listTokens.listItemBorderColorHover, _List.listTokens.listDisabledOpacity)
|
18
17
|
},
|
19
18
|
size: {
|
20
|
-
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
21
|
-
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
22
|
-
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
23
|
-
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
24
|
-
xl: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight)
|
25
|
-
},
|
26
|
-
variant: {
|
27
|
-
normal: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;", ":0rem;"], _List.listTokens.listDisabledOpacity, _List.listTokens.listItemVariantDifference),
|
28
|
-
tight: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.25rem;", ":0.4;"], _List.listTokens.listItemVariantDifference, _List.listTokens.listDisabledOpacity)
|
19
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0.5rem;", ":0rem;", ":0.375rem;", ":0.25rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemTightDifference, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
20
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.689rem;", ":0.75rem;", ":0.75rem;", ":0.689rem;", ":0.625rem;", ":0rem;", ":0.375rem;", ":0.25rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemTightDifference, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
21
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.875rem;", ":0.875rem;", ":0.75rem;", ":0.75rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemTightDifference, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
22
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":1rem;", ":1rem;", ":0.875rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemTightDifference, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight),
|
23
|
+
xl: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.3125rem;", ":1.125rem;", ":1.125rem;", ":1.3125rem;", ":1rem;", ":0rem;", ":0.5rem;", ":0.25rem;", ":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);"], _List.listTokens.listItemPaddingTop, _List.listTokens.listItemPaddingLeft, _List.listTokens.listItemPaddingRight, _List.listTokens.listItemPaddingBottom, _List.listTokens.listItemBorderRadius, _List.listTokens.listItemBorderWidth, _List.listTokens.listItemGap, _List.listTokens.listItemTightDifference, _List.listTokens.listItemFontFamily, _List.listTokens.listItemFontSize, _List.listTokens.listItemFontStyle, _List.listTokens.listItemFontWeight, _List.listTokens.listItemLetterSpacing, _List.listTokens.listItemLineHeight)
|
29
24
|
},
|
30
25
|
disabled: {
|
31
|
-
"true": /*#__PURE__*/(0, _styledComponents.css)([""
|
26
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)([""])
|
32
27
|
}
|
33
28
|
}
|
34
29
|
};
|
package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx
CHANGED
@@ -167,12 +167,14 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
|
|
167
167
|
placement?: NotificationPlacement;
|
168
168
|
};
|
169
169
|
|
170
|
-
const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
|
170
|
+
const StoryLiveDemo = ({ timeout, placement, width, maxWidth, ...rest }: StoryLiveDemoProps) => {
|
171
171
|
const count = useRef(0);
|
172
172
|
const handleClick = useCallback(() => {
|
173
173
|
addNotification(
|
174
174
|
{
|
175
175
|
icon: <IconDisclosureRight color="inherit" />,
|
176
|
+
width,
|
177
|
+
maxWidth,
|
176
178
|
...rest,
|
177
179
|
...getNotificationProps(count.current),
|
178
180
|
},
|
@@ -210,6 +212,8 @@ export const LiveDemo: StoryObj<StoryLiveDemoProps> = {
|
|
210
212
|
role: 'alert',
|
211
213
|
layout: 'vertical',
|
212
214
|
placement: 'bottom-right',
|
215
|
+
width: '',
|
216
|
+
maxWidth: '',
|
213
217
|
},
|
214
218
|
render: (args) => <StoryLiveDemo {...args} />,
|
215
219
|
};
|