@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.css +9 -6
- package/cjs/components/Button/Button.js +16 -2
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +31 -10
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Button/Button.styles_nedem1.css +8 -0
- package/cjs/components/Button/Button.tokens.js +5 -0
- package/cjs/components/Button/Button.tokens.js.map +1 -1
- package/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
- package/{es/components/Button/variations/_stretching/base_1lx0ute.css → cjs/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
- package/cjs/components/Drawer/Drawer.css +9 -6
- package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
- package/cjs/components/IconButton/IconButton.css +10 -7
- package/cjs/components/IconButton/IconButton.styles.js +1 -1
- package/{es/components/IconButton/IconButton.styles_1hknr37.css → cjs/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
- package/cjs/components/Notification/Notification.css +9 -6
- package/cjs/components/Notification/NotificationsProvider.css +9 -6
- package/cjs/components/Pagination/Pagination.css +9 -6
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
- package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
- package/cjs/components/Select/Select.css +9 -6
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
- package/cjs/components/Toast/Toast.css +9 -6
- package/cjs/components/Toast/ToastController.css +9 -6
- package/cjs/index.css +12 -9
- package/es/components/Button/Button.css +9 -6
- package/es/components/Button/Button.js +17 -3
- package/es/components/Button/Button.js.map +1 -1
- package/es/components/Button/Button.styles.js +29 -11
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Button/Button.styles_nedem1.css +8 -0
- package/es/components/Button/Button.tokens.js +5 -0
- package/es/components/Button/Button.tokens.js.map +1 -1
- package/es/components/Button/variations/_stretching/base.js +1 -1
- package/es/components/Button/variations/_stretching/base.js.map +1 -1
- package/{cjs/components/Button/variations/_stretching/base_1lx0ute.css → es/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
- package/es/components/Drawer/Drawer.css +9 -6
- package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
- package/es/components/IconButton/IconButton.css +10 -7
- package/es/components/IconButton/IconButton.styles.js +1 -1
- package/{cjs/components/IconButton/IconButton.styles_1hknr37.css → es/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
- package/es/components/Notification/Notification.css +9 -6
- package/es/components/Notification/NotificationsProvider.css +9 -6
- package/es/components/Pagination/Pagination.css +9 -6
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
- package/es/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
- package/es/components/Select/Select.css +9 -6
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
- package/es/components/Toast/Toast.css +9 -6
- package/es/components/Toast/ToastController.css +9 -6
- package/es/index.css +12 -9
- package/package.json +2 -2
- package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +1 -3
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/cjs/components/Button/Button.js +16 -2
- package/styled-components/cjs/components/Button/Button.styles.js +20 -12
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +51 -8
- package/styled-components/cjs/components/Button/Button.tokens.js +5 -0
- package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +261 -262
- package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +33 -85
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +2 -1
- package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +74 -70
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +1 -2
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
- package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +1 -3
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
- package/styled-components/es/components/Button/Button.js +17 -3
- package/styled-components/es/components/Button/Button.styles.js +19 -11
- package/styled-components/es/components/Button/Button.template-doc.mdx +51 -8
- package/styled-components/es/components/Button/Button.tokens.js +5 -0
- package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +261 -262
- package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/es/components/Modal/Modal.template-doc.mdx +33 -85
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +2 -1
- package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/es/components/Popup/Popup.template-doc.mdx +74 -70
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +1 -2
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
- package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
- package/types/components/Button/Button.d.ts.map +1 -1
- package/types/components/Button/Button.styles.d.ts +5 -1
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Button/Button.tokens.d.ts +5 -0
- package/types/components/Button/Button.tokens.d.ts.map +1 -1
- package/types/components/Button/Button.types.d.ts +10 -0
- package/types/components/Button/Button.types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
- package/cjs/components/Button/Button.styles_uqvh6u.css +0 -5
- package/es/components/Button/Button.styles_uqvh6u.css +0 -5
- package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +0 -68
- package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +0 -57
- package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +0 -156
- package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +0 -130
- package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +0 -33
- package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +0 -120
- package/styled-components/es/components/Cell/Cell.template-doc.mdx +0 -68
- package/styled-components/es/components/Divider/Divider.template-docs.mdx +0 -57
- package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +0 -156
- package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +0 -130
- package/styled-components/es/components/Progress/Progress.template-doc.mdx +0 -33
- package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +0 -120
@@ -32,9 +32,7 @@ export function App() {
|
|
32
32
|
```
|
33
33
|
|
34
34
|
### Инициалы вместо фотографии
|
35
|
-
Инициалы можно задать с помощью свойства `name`.
|
36
|
-
Желательный формат строки - "Имя Фамилия".
|
37
|
-
Также не должно быть свойства url.
|
35
|
+
Инициалы можно задать с помощью свойства `name`. Желательный формат строки - "Имя Фамилия". Также не должно быть свойства url.
|
38
36
|
|
39
37
|
```tsx live
|
40
38
|
import React from 'react';
|
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
11
11
|
|
12
12
|
## Примеры
|
13
13
|
|
14
|
-
### Размер
|
14
|
+
### Размер бейджа
|
15
15
|
Размер задается с помощью свойства `size`.
|
16
16
|
|
17
17
|
Возможные значения свойства: `"l"`, `"m"`, `"s"`.
|
@@ -31,7 +31,7 @@ export function App() {
|
|
31
31
|
}
|
32
32
|
```
|
33
33
|
|
34
|
-
### Скругленность
|
34
|
+
### Скругленность бейджа
|
35
35
|
Скругленность задается с помощью свойства `pilled`:
|
36
36
|
|
37
37
|
```tsx live
|
@@ -49,16 +49,16 @@ export function App() {
|
|
49
49
|
}
|
50
50
|
```
|
51
51
|
|
52
|
-
### Вид
|
53
|
-
Вид
|
52
|
+
### Вид бейджа
|
53
|
+
Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`:
|
54
54
|
|
55
|
-
+ `"primary"` – основной
|
55
|
+
+ `"primary"` – основной бейдж;
|
56
56
|
+ `"accent"` – бейдж акцентного цвета;
|
57
57
|
+ `"positive"` – успешное завершение;
|
58
58
|
+ `"warning"` – предупреждение;
|
59
59
|
+ `"negative"` – ошибка;
|
60
|
-
+ `"dark"` – темный
|
61
|
-
+ `"light"` – светлый
|
60
|
+
+ `"dark"` – темный бэйдж;
|
61
|
+
+ `"light"` – светлый бэйдж.
|
62
62
|
|
63
63
|
```tsx live
|
64
64
|
import React from 'react';
|
@@ -79,7 +79,7 @@ export function App() {
|
|
79
79
|
}
|
80
80
|
```
|
81
81
|
|
82
|
-
|
82
|
+
так же на вид бейджа влияет свойство `transparent`:
|
83
83
|
|
84
84
|
```tsx live
|
85
85
|
import React from 'react';
|
@@ -101,7 +101,7 @@ export function App() {
|
|
101
101
|
```
|
102
102
|
|
103
103
|
### Иконка слева / справа
|
104
|
-
В левой и/или правой части
|
104
|
+
В левой и/или правой части бейджа можно отобразить иконку:
|
105
105
|
|
106
106
|
```tsx live
|
107
107
|
import React from 'react';
|
@@ -1,6 +1,6 @@
|
|
1
1
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
2
2
|
var _StyledSpinner;
|
3
|
-
var _excluded = ["children", "view", "size", "text", "contentLeft", "contentRight", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
|
3
|
+
var _excluded = ["children", "view", "size", "text", "value", "contentLeft", "contentRight", "contentPlacing", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
|
4
4
|
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); }
|
5
5
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
6
6
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
@@ -18,7 +18,7 @@ import { base as disabledCSS } from './variations/_disabled/base';
|
|
18
18
|
import { base as focusedCSS } from './variations/_focused/base';
|
19
19
|
import { base as stretchingCSS } from './variations/_stretching/base';
|
20
20
|
import { base as blurredCSS } from './variations/_blurred/base';
|
21
|
-
import { base, ButtonText, Loader, LoadWrap, StyledSpinner } from './Button.styles';
|
21
|
+
import { base, ButtonText, ButtonValue, Loader, LoadWrap, StyledContentLeft, StyledContentRight, StyledSpinner } from './Button.styles';
|
22
22
|
import { classes, tokens } from './Button.tokens';
|
23
23
|
export var buttonRoot = function buttonRoot(Root) {
|
24
24
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
@@ -26,8 +26,11 @@ export var buttonRoot = function buttonRoot(Root) {
|
|
26
26
|
view = props.view,
|
27
27
|
size = props.size,
|
28
28
|
text = props.text,
|
29
|
+
value = props.value,
|
29
30
|
contentLeft = props.contentLeft,
|
30
31
|
contentRight = props.contentRight,
|
32
|
+
_props$contentPlacing = props.contentPlacing,
|
33
|
+
contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
|
31
34
|
isLoading = props.isLoading,
|
32
35
|
loader = props.loader,
|
33
36
|
stretch = props.stretch,
|
@@ -44,23 +47,34 @@ export var buttonRoot = function buttonRoot(Root) {
|
|
44
47
|
rest = _objectWithoutProperties(props, _excluded);
|
45
48
|
var txt = typeof children === 'string' ? children : text;
|
46
49
|
var stretchingClass = stretch ? classes.filledStretching : classes["".concat(stretching, "Stretching")];
|
50
|
+
var contentRelaxedClass = contentPlacing === 'relaxed' ? classes.contentRelaxed : undefined;
|
47
51
|
var squareClass = square ? classes.buttonSquare : undefined;
|
48
52
|
var buttonBorderRadius = pin ? convertRoundnessMatrix(pin, "var(".concat(tokens.buttonRadius, ")"), "var(".concat(tokens.buttonHeight, ")")) : "var(".concat(tokens.buttonRadius, ", calc(var(").concat(tokens.buttonHeight, ") / 4))");
|
53
|
+
var contentPlacingMapper = {
|
54
|
+
"default": 'center',
|
55
|
+
relaxed: 'space-between'
|
56
|
+
};
|
57
|
+
var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
|
49
58
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
50
59
|
type: "button",
|
51
60
|
ref: ref,
|
52
61
|
view: view,
|
53
62
|
size: size,
|
63
|
+
value: value,
|
54
64
|
disabled: disabled,
|
55
65
|
focused: focused || outlined,
|
66
|
+
contentPlacing: contentPlacing,
|
56
67
|
className: cx(squareClass, stretchingClass, classes.buttonItem, className),
|
57
68
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
58
69
|
'--plasma_computed-btn-br': buttonBorderRadius,
|
59
70
|
'--plasma_private-blur': blur
|
60
71
|
})
|
61
72
|
}, rest), /*#__PURE__*/React.createElement(LoadWrap, {
|
73
|
+
contentPlacing: contentPlacementValue,
|
62
74
|
isLoading: isLoading
|
63
|
-
}, contentLeft
|
75
|
+
}, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/React.createElement(ButtonText, {
|
76
|
+
className: contentRelaxedClass
|
77
|
+
}, txt) : children, value && /*#__PURE__*/React.createElement(ButtonValue, null, value), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/React.createElement(Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/React.createElement(StyledSpinner, null))));
|
64
78
|
});
|
65
79
|
};
|
66
80
|
export var buttonConfig = {
|
@@ -10,28 +10,36 @@ import { classes, tokens } from './Button.tokens';
|
|
10
10
|
// issue #823
|
11
11
|
var mergedConfig = /*#__PURE__*/mergeConfig(spinnerConfig);
|
12
12
|
var Spinner = /*#__PURE__*/component(mergedConfig);
|
13
|
-
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
|
14
|
-
|
15
|
-
// TODO: PLASMA-2164
|
16
|
-
// WHY do we need applyEllipsis ??
|
17
|
-
// Если внутри кнопки тескт и на нее решили повесить square пропс
|
18
13
|
export var ButtonText = /*#__PURE__*/styled.span.withConfig({
|
19
14
|
componentId: "plasma-new-hope__sc-9d9bqj-0"
|
20
|
-
})([":
|
15
|
+
})(["min-width:4ch;flex-shrink:2;", " &.", "{text-align:start;flex-grow:2;}"], /*#__PURE__*/applyEllipsis(), /*#__PURE__*/String(classes.contentRelaxed));
|
16
|
+
export var ButtonValue = /*#__PURE__*/styled.span.withConfig({
|
17
|
+
componentId: "plasma-new-hope__sc-9d9bqj-1"
|
18
|
+
})(["color:var(", ");margin:var(", ");min-width:4ch;", ""], tokens.buttonValueColor, tokens.buttonValueMargin, /*#__PURE__*/applyEllipsis());
|
21
19
|
|
22
20
|
// TODO: #720
|
23
21
|
export var LoadWrap = /*#__PURE__*/styled.div.withConfig({
|
24
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
25
|
-
})(["opacity:", ";display:flex;
|
22
|
+
componentId: "plasma-new-hope__sc-9d9bqj-2"
|
23
|
+
})(["opacity:", ";display:flex;align-items:inherit;justify-content:", ";height:100%;width:100%;"], function (_ref) {
|
26
24
|
var isLoading = _ref.isLoading;
|
27
25
|
return isLoading ? '0' : '1';
|
26
|
+
}, function (_ref2) {
|
27
|
+
var contentPlacing = _ref2.contentPlacing;
|
28
|
+
return contentPlacing;
|
28
29
|
});
|
29
30
|
export var Loader = /*#__PURE__*/styled.div.withConfig({
|
30
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
31
|
+
componentId: "plasma-new-hope__sc-9d9bqj-3"
|
31
32
|
})(["position:absolute;"]);
|
32
33
|
export var StyledSpinner = /*#__PURE__*/styled(Spinner).withConfig({
|
33
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
34
|
+
componentId: "plasma-new-hope__sc-9d9bqj-4"
|
34
35
|
})(["", ":var(", ");", ":var(", ");"], spinnerTokens.size, tokens.buttonSpinnerSize, spinnerTokens.color, tokens.buttonSpinnerColor);
|
36
|
+
export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
|
37
|
+
componentId: "plasma-new-hope__sc-9d9bqj-5"
|
38
|
+
})(["margin:var(", ");"], tokens.buttonLeftContentMargin);
|
39
|
+
export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
|
40
|
+
componentId: "plasma-new-hope__sc-9d9bqj-6"
|
41
|
+
})(["margin:var(", ");"], tokens.buttonRightContentMargin);
|
42
|
+
export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(classes.buttonSquare), tokens.buttonHeight);
|
35
43
|
|
36
44
|
// INFO: Для возможности переиспользования стилей в других компонентах
|
37
45
|
export var baseContent = /*#__PURE__*/"\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.".concat(String(classes.buttonSquare), " {\n width: var(").concat(tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(tokens.buttonColorHover, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorHover, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(tokens.buttonColorActive, ", var(").concat(tokens.buttonColor, "));\n background-color: var(").concat(tokens.buttonBackgroundColorActive, ", var(").concat(tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(tokens.buttonHeight, ");\n width: var(").concat(tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(tokens.buttonPadding, ", calc(var(").concat(tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(tokens.buttonFontFamily, ");\n font-size: var(").concat(tokens.buttonFontSize, ");\n font-style: var(").concat(tokens.buttonFontStyle, ");\n font-weight: var(").concat(tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(tokens.buttonLetterSpacing, ");\n line-height: var(").concat(tokens.buttonLineHeight, ");\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ").concat(addFocus({
|
@@ -39,4 +47,4 @@ export var baseContent = /*#__PURE__*/"\n position: relative;\n display: i
|
|
39
47
|
outlineSize: 'var(--plasma_private-btn-outline-size)',
|
40
48
|
outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
|
41
49
|
outlineColor: "var(".concat(tokens.buttonFocusColor, ")")
|
42
|
-
}), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width:
|
50
|
+
}), "\n\n &[disabled] {\n opacity: var(").concat(tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(tokens.buttonColor, ");\n background-color: var(").concat(tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(classes.fixedStretching, " {\n width: var(").concat(tokens.buttonWidth, ");\n }\n &.").concat(classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(classes.autoStretching, " {\n width: fit-content;\n }\n");
|
@@ -21,7 +21,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
21
21
|
|
22
22
|
```tsx live
|
23
23
|
import React from 'react';
|
24
|
-
import { Button } from '@salutejs/{{
|
24
|
+
import { Button } from '@salutejs/{{package}}';
|
25
25
|
import { IconDownload } from '@salutejs/plasma-icons';
|
26
26
|
|
27
27
|
export function App() {
|
@@ -55,7 +55,7 @@ export function App() {
|
|
55
55
|
|
56
56
|
```tsx live
|
57
57
|
import React from 'react';
|
58
|
-
import { Button } from '@salutejs/{{
|
58
|
+
import { Button } from '@salutejs/{{package}}';
|
59
59
|
|
60
60
|
export function App() {
|
61
61
|
return (
|
@@ -68,6 +68,48 @@ export function App() {
|
|
68
68
|
}
|
69
69
|
```
|
70
70
|
|
71
|
+
### Ширина кнопки
|
72
|
+
Ширина кнопки регулируется с помощью свойства `stretching`.
|
73
|
+
Возможные значения свойства `contentPlacing`:
|
74
|
+
+ `auto` – ширина подстраивается под контент;
|
75
|
+
+ `filled` – кнопка растягивается на всю доступную ширину;
|
76
|
+
+ `fixed` – кнопка фиксированной ширины.
|
77
|
+
|
78
|
+
```tsx live
|
79
|
+
import React from 'react';
|
80
|
+
import { Button } from '@salutejs/{{package}}';
|
81
|
+
|
82
|
+
export function App() {
|
83
|
+
return (
|
84
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
85
|
+
<Button text="Button" stretching="fixed" />
|
86
|
+
<Button text="Button" stretching="auto" />
|
87
|
+
<Button text="Button" stretching="filled" />
|
88
|
+
</div>
|
89
|
+
);
|
90
|
+
}
|
91
|
+
```
|
92
|
+
|
93
|
+
### Позиционирование контента внутри
|
94
|
+
Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
|
95
|
+
Возможные значения свойства `contentPlacing`:
|
96
|
+
+ `default` – контент центрируется;
|
97
|
+
+ `relaxed` – контент распологается по краям.
|
98
|
+
|
99
|
+
```tsx live
|
100
|
+
import React from 'react';
|
101
|
+
import { Button } from '@salutejs/{{package}}';
|
102
|
+
|
103
|
+
export function App() {
|
104
|
+
return (
|
105
|
+
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
106
|
+
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
|
107
|
+
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
|
108
|
+
</div>
|
109
|
+
);
|
110
|
+
}
|
111
|
+
```
|
112
|
+
|
71
113
|
### Вид кнопки
|
72
114
|
Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
|
73
115
|
+ `"primary"` – основная;
|
@@ -80,7 +122,7 @@ export function App() {
|
|
80
122
|
|
81
123
|
```tsx live
|
82
124
|
import React from 'react';
|
83
|
-
import { Button } from '@salutejs/{{
|
125
|
+
import { Button } from '@salutejs/{{package}}';
|
84
126
|
|
85
127
|
export function App() {
|
86
128
|
return (
|
@@ -106,7 +148,7 @@ export function App() {
|
|
106
148
|
|
107
149
|
```tsx live
|
108
150
|
import React from 'react';
|
109
|
-
import { Button } from '@salutejs/{{
|
151
|
+
import { Button } from '@salutejs/{{package}}';
|
110
152
|
|
111
153
|
export function App() {
|
112
154
|
return (
|
@@ -132,15 +174,15 @@ export function App() {
|
|
132
174
|
|
133
175
|
```tsx live
|
134
176
|
import React from 'react';
|
135
|
-
import { Button } from '@salutejs/{{
|
177
|
+
import { Button } from '@salutejs/{{package}}';
|
136
178
|
import { IconDownload } from '@salutejs/plasma-icons';
|
137
179
|
|
138
180
|
export function App() {
|
139
181
|
return (
|
140
182
|
<div>
|
141
|
-
<Button contentLeft={<IconDownload
|
183
|
+
<Button contentLeft={<IconDownload />} />
|
142
184
|
|
143
|
-
<Button contentLeft={<IconDownload
|
185
|
+
<Button contentLeft={<IconDownload />} pin="circle-circle" />
|
144
186
|
</div>
|
145
187
|
);
|
146
188
|
}
|
@@ -151,7 +193,8 @@ export function App() {
|
|
151
193
|
|
152
194
|
```tsx live
|
153
195
|
import React from 'react';
|
154
|
-
import { Button } from '@salutejs/{{
|
196
|
+
import { Button } from '@salutejs/{{package}}';
|
197
|
+
import { IconDownload } from '@salutejs/plasma-icons';
|
155
198
|
|
156
199
|
export function App() {
|
157
200
|
return (
|
@@ -3,11 +3,13 @@ export var classes = {
|
|
3
3
|
autoStretching: 'button-stretching-auto',
|
4
4
|
filledStretching: 'button-stretching-filled',
|
5
5
|
fixedStretching: 'button-stretching-fixed',
|
6
|
+
contentRelaxed: 'button-content-relaxed',
|
6
7
|
buttonSquare: 'button-square',
|
7
8
|
buttonItem: 'button-item'
|
8
9
|
};
|
9
10
|
export var tokens = {
|
10
11
|
buttonColor: '--plasma-button-color',
|
12
|
+
buttonValueColor: '--plasma-button-value-color',
|
11
13
|
buttonBackgroundColor: '--plasma-button-background-color',
|
12
14
|
buttonColorHover: '--plasma-button-color-hover',
|
13
15
|
buttonBackgroundColorHover: '--plasma-button-background-color-hover',
|
@@ -26,6 +28,9 @@ export var tokens = {
|
|
26
28
|
buttonFontWeight: '--plasma-button-font-weight',
|
27
29
|
buttonLetterSpacing: '--plasma-button-letter-spacing',
|
28
30
|
buttonLineHeight: '--plasma-button-line-height',
|
31
|
+
buttonLeftContentMargin: '--plasma-button-left-content-margin',
|
32
|
+
buttonRightContentMargin: '--plasma-button-right-content-margin',
|
33
|
+
buttonValueMargin: '--plasma-button-value-margin',
|
29
34
|
buttonDisabledOpacity: '--plasma-button-disabled-opacity',
|
30
35
|
buttonFocusColor: '--plasma-button-focus-color',
|
31
36
|
buttonSpinnerColor: '--plasma-button-spinner-color',
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
2
|
import { classes, tokens } from '../../Button.tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:
|
3
|
+
export var base = /*#__PURE__*/css(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], classes.fixedStretching, tokens.buttonWidth, classes.filledStretching, classes.autoStretching);
|
@@ -14,7 +14,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
14
14
|
|
15
15
|
```tsx live
|
16
16
|
import React from 'react';
|
17
|
-
import { Checkbox } from '@salutejs/{{
|
17
|
+
import { Checkbox } from '@salutejs/s{{package}}';
|
18
18
|
|
19
19
|
export function App() {
|
20
20
|
return (
|
@@ -31,7 +31,7 @@ export function App() {
|
|
31
31
|
|
32
32
|
```tsx live
|
33
33
|
import React from 'react';
|
34
|
-
import { Checkbox } from '@salutejs/{{
|
34
|
+
import { Checkbox } from '@salutejs/s{{package}}';
|
35
35
|
|
36
36
|
export function App() {
|
37
37
|
return (
|
@@ -72,7 +72,7 @@ export function App() {
|
|
72
72
|
Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
|
73
73
|
+ `"default"` – основная;
|
74
74
|
+ `"secondary"` – вторичная;
|
75
|
-
+ `"accent"` –
|
75
|
+
+ `"accent"` – акцентый.
|
76
76
|
|
77
77
|
```tsx live
|
78
78
|
import React from 'react';
|
@@ -22,24 +22,24 @@ import { PropsTable, Description } from '@site/src/components';
|
|
22
22
|
## Клавиатурная навигация
|
23
23
|
|
24
24
|
Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
|
25
|
-
- `Tab` - переход на
|
25
|
+
- `Tab` - переход на таргет (инпут)
|
26
26
|
- `Shift` + `tab` - выход с него (теряем фокус)
|
27
27
|
- `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
|
28
28
|
- `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
|
29
|
-
- `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на
|
30
|
-
- Если мы ходим по
|
31
|
-
- Если мы ходим по
|
32
|
-
- В
|
29
|
+
- `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
|
30
|
+
- Если мы ходим по селекту и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
|
31
|
+
- Если мы ходим по селекту и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на таргете
|
32
|
+
- В мультиселекте то же самое кроме закрытия выпадающего списка при выборе элемента
|
33
33
|
- Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
|
34
|
-
- Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на
|
35
|
-
- Когда находимся на
|
36
|
-
- Когда находимся на
|
34
|
+
- Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на таргет (инпут)
|
35
|
+
- Когда находимся на таргете (инпуте) и нажимаем `Backspace` - удаляется последний чип
|
36
|
+
- Когда находимся на таргете (инпуте) и нажимаем `стрелку влево` - переходим на последний чип
|
37
37
|
- Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
|
38
|
-
- Если удалили последний чип, то фокусируемся на
|
38
|
+
- Если удалили последний чип, то фокусируемся на таргете
|
39
39
|
- Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
|
40
40
|
- Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
|
41
|
-
- Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на
|
42
|
-
- Ввод значение в
|
41
|
+
- Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на таргет (инпут) и вводим значения
|
42
|
+
- Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
|
43
43
|
|
44
44
|
### Single
|
45
45
|
|
@@ -178,12 +178,12 @@ export function App() {
|
|
178
178
|
```
|
179
179
|
|
180
180
|
### Применение пользовательского фильтра
|
181
|
-
`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции
|
182
|
-
которая срабатывает на каждый элемент и если возвращает `true`, то элемент
|
181
|
+
`Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка `filterFunction`,
|
182
|
+
которая срабатывает на каждый элемент и если возвращает `true`, то элемент рендерится, иначе нет.
|
183
183
|
|
184
184
|
```tsx live
|
185
185
|
import React from 'react';
|
186
|
-
import { Combobox
|
186
|
+
import { Combobox } from '@salutejs/{{ package }}';
|
187
187
|
|
188
188
|
export function App() {
|
189
189
|
const [value, setValue] = React.useState(['item_0']);
|
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
11
11
|
|
12
12
|
## Примеры
|
13
13
|
|
14
|
-
### Максимальное значение числового
|
14
|
+
### Максимальное значение числового бейджа
|
15
15
|
Задается с помощью свойства `maxCount`.
|
16
16
|
|
17
17
|
```tsx live
|
@@ -28,7 +28,7 @@ export function App() {
|
|
28
28
|
}
|
29
29
|
```
|
30
30
|
|
31
|
-
### Размер числового
|
31
|
+
### Размер числового бейджа
|
32
32
|
Размер задается с помощью свойства `size`. Возможные значения свойства: `"xs"` или `"xxs"`.
|
33
33
|
|
34
34
|
```tsx live
|
@@ -45,7 +45,7 @@ export function App() {
|
|
45
45
|
}
|
46
46
|
```
|
47
47
|
|
48
|
-
### Вид числового
|
48
|
+
### Вид числового бейджа
|
49
49
|
Вид задается с помощью свойства `view`. Возможные значения свойства `view`:
|
50
50
|
|
51
51
|
+ `"primary"` – основной бейдж;
|
@@ -53,8 +53,8 @@ export function App() {
|
|
53
53
|
+ `"positive"` – успешное завершение;
|
54
54
|
+ `"warning"` – предупреждение;
|
55
55
|
+ `"negative"` – ошибка;
|
56
|
-
+ `"dark"` – темный
|
57
|
-
+ `"light"` – светлый
|
56
|
+
+ `"dark"` – темный бэйдж;
|
57
|
+
+ `"light"` – светлый бэйдж.
|
58
58
|
|
59
59
|
```tsx live
|
60
60
|
import React from 'react';
|
@@ -35,13 +35,13 @@ Drawer можно использовать как и на всем окне, т
|
|
35
35
|
а также определить отступы от точки с помощью `offset`.
|
36
36
|
|
37
37
|
У компонента Drawer есть 2 режима отображения:
|
38
|
-
|
39
|
-
|
38
|
+
модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус;
|
39
|
+
немодальный - нет подложки, скролл и фокус не заблокированы.
|
40
40
|
|
41
41
|
```tsx live
|
42
42
|
import React, { useRef } from 'react';
|
43
43
|
import { IconDone } from '@salutejs/plasma-icons';
|
44
|
-
import { surfaceSolidSecondary } from '@salutejs/{{
|
44
|
+
import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
|
45
45
|
|
46
46
|
import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@salutejs/{{ package }}';
|
47
47
|
|