@salutejs/plasma-new-hope 0.178.2-canary.1518.11589596320.0 → 0.178.2-canary.1520.11590201801.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -2
- package/cjs/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/cjs/components/Combobox/ComboboxNew/FloatingPopover.js +1 -2
- package/cjs/components/Combobox/ComboboxNew/FloatingPopover.js.map +1 -1
- package/cjs/components/Counter/Counter.css +1 -1
- package/cjs/components/Counter/Counter.js +13 -3
- package/cjs/components/Counter/Counter.js.map +1 -1
- package/cjs/components/Counter/Counter.tokens.js +4 -0
- package/cjs/components/Counter/Counter.tokens.js.map +1 -1
- package/cjs/components/Counter/variations/_size/base.js +1 -1
- package/cjs/components/Counter/variations/_size/base.js.map +1 -1
- package/cjs/components/Counter/variations/_size/{base_1z0ohiy.css → base_4mz17d.css} +1 -1
- package/cjs/components/TextArea/TextArea.js +1 -1
- package/cjs/components/TextArea/TextArea.js.map +1 -1
- package/cjs/components/TextArea/hooks/useAutoResize.js +3 -3
- package/cjs/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/cjs/index.css +1 -1
- package/emotion/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -2
- package/emotion/cjs/components/Combobox/ComboboxNew/FloatingPopover.js +1 -2
- package/emotion/cjs/components/Counter/Counter.js +13 -3
- package/emotion/cjs/components/Counter/Counter.template-doc.mdx +2 -2
- package/emotion/cjs/components/Counter/Counter.tokens.js +4 -1
- package/emotion/cjs/components/Counter/variations/_size/base.js +1 -1
- package/emotion/cjs/components/TextArea/TextArea.js +2 -2
- package/emotion/cjs/components/TextArea/hooks/useAutoResize.js +3 -3
- package/emotion/cjs/examples/plasma_b2c/components/Counter/Counter.config.js +12 -9
- package/emotion/cjs/examples/plasma_b2c/components/Counter/Counter.stories.tsx +7 -5
- package/emotion/cjs/examples/plasma_web/components/Counter/Counter.config.js +12 -9
- package/emotion/cjs/examples/plasma_web/components/Counter/Counter.stories.tsx +7 -5
- package/emotion/es/components/Combobox/ComboboxNew/Combobox.js +1 -2
- package/emotion/es/components/Combobox/ComboboxNew/FloatingPopover.js +1 -2
- package/emotion/es/components/Counter/Counter.js +13 -3
- package/emotion/es/components/Counter/Counter.template-doc.mdx +2 -2
- package/emotion/es/components/Counter/Counter.tokens.js +3 -0
- package/emotion/es/components/Counter/variations/_size/base.js +2 -2
- package/emotion/es/components/TextArea/TextArea.js +2 -2
- package/emotion/es/components/TextArea/hooks/useAutoResize.js +3 -3
- package/emotion/es/examples/plasma_b2c/components/Counter/Counter.config.js +12 -9
- package/emotion/es/examples/plasma_b2c/components/Counter/Counter.stories.tsx +7 -5
- package/emotion/es/examples/plasma_web/components/Counter/Counter.config.js +12 -9
- package/emotion/es/examples/plasma_web/components/Counter/Counter.stories.tsx +7 -5
- package/es/components/Combobox/ComboboxNew/Combobox.js +1 -2
- package/es/components/Combobox/ComboboxNew/Combobox.js.map +1 -1
- package/es/components/Combobox/ComboboxNew/FloatingPopover.js +1 -2
- package/es/components/Combobox/ComboboxNew/FloatingPopover.js.map +1 -1
- package/es/components/Counter/Counter.css +1 -1
- package/es/components/Counter/Counter.js +13 -3
- package/es/components/Counter/Counter.js.map +1 -1
- package/es/components/Counter/Counter.tokens.js +4 -1
- package/es/components/Counter/Counter.tokens.js.map +1 -1
- package/es/components/Counter/variations/_size/base.js +1 -1
- package/es/components/Counter/variations/_size/base.js.map +1 -1
- package/es/components/Counter/variations/_size/{base_1z0ohiy.css → base_4mz17d.css} +1 -1
- package/es/components/TextArea/TextArea.js +1 -1
- package/es/components/TextArea/TextArea.js.map +1 -1
- package/es/components/TextArea/hooks/useAutoResize.js +3 -3
- package/es/components/TextArea/hooks/useAutoResize.js.map +1 -1
- package/es/index.css +1 -1
- package/package.json +2 -2
- package/styled-components/cjs/components/Combobox/ComboboxNew/Combobox.js +1 -2
- package/styled-components/cjs/components/Combobox/ComboboxNew/FloatingPopover.js +1 -2
- package/styled-components/cjs/components/Counter/Counter.js +13 -3
- package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Counter/Counter.tokens.js +4 -1
- package/styled-components/cjs/components/Counter/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/TextArea/TextArea.js +1 -1
- package/styled-components/cjs/components/TextArea/hooks/useAutoResize.js +3 -3
- package/styled-components/cjs/examples/plasma_b2c/components/Counter/Counter.config.js +5 -2
- package/styled-components/cjs/examples/plasma_b2c/components/Counter/Counter.stories.tsx +7 -5
- package/styled-components/cjs/examples/plasma_web/components/Counter/Counter.config.js +5 -2
- package/styled-components/cjs/examples/plasma_web/components/Counter/Counter.stories.tsx +7 -5
- package/styled-components/es/components/Combobox/ComboboxNew/Combobox.js +1 -2
- package/styled-components/es/components/Combobox/ComboboxNew/FloatingPopover.js +1 -2
- package/styled-components/es/components/Counter/Counter.js +13 -3
- package/styled-components/es/components/Counter/Counter.template-doc.mdx +2 -2
- package/styled-components/es/components/Counter/Counter.tokens.js +3 -0
- package/styled-components/es/components/Counter/variations/_size/base.js +2 -2
- package/styled-components/es/components/TextArea/TextArea.js +1 -1
- package/styled-components/es/components/TextArea/hooks/useAutoResize.js +3 -3
- package/styled-components/es/examples/plasma_b2c/components/Counter/Counter.config.js +5 -2
- package/styled-components/es/examples/plasma_b2c/components/Counter/Counter.stories.tsx +7 -5
- package/styled-components/es/examples/plasma_web/components/Counter/Counter.config.js +5 -2
- package/styled-components/es/examples/plasma_web/components/Counter/Counter.stories.tsx +7 -5
- package/types/components/Combobox/ComboboxNew/Combobox.d.ts.map +1 -1
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts +1 -2
- package/types/components/Combobox/ComboboxNew/Combobox.types.d.ts.map +1 -1
- package/types/components/Counter/Counter.d.ts.map +1 -1
- package/types/components/Counter/Counter.tokens.d.ts +3 -0
- package/types/components/Counter/Counter.tokens.d.ts.map +1 -1
- package/types/components/Counter/Counter.types.d.ts +2 -2
- package/types/components/Counter/variations/_size/base.d.ts.map +1 -1
- package/types/components/TextArea/hooks/useAutoResize.d.ts +1 -1
- package/types/components/TextArea/hooks/useAutoResize.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Counter/Counter.config.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Counter/Counter.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Counter/Counter.d.ts +3 -0
- package/types/examples/plasma_b2c/components/Counter/Counter.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Counter/Counter.config.d.ts +3 -0
- package/types/examples/plasma_web/components/Counter/Counter.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Counter/Counter.d.ts +3 -0
- package/types/examples/plasma_web/components/Counter/Counter.d.ts.map +1 -1
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"useAutoResize.js","sources":["../../../../src/components/TextArea/hooks/useAutoResize.ts"],"sourcesContent":["import { useEffect, useRef, MutableRefObject } from 'react';\n\nexport const ROOT_FONT_SIZE = 16;\n\nexport const useAutoResize = <T extends HTMLTextAreaElement>(\n active: boolean,\n ref: MutableRefObject<T | null>,\n value?: string | ReadonlyArray<string> | number,\n minAuto?: number,\n maxAuto?: number,\n) => {\n const previousHeight = useRef<number | undefined>();\n\n useEffect(() => {\n if (active && ref && ref.current) {\n // проверка на пользовательский resize (вручную)\n const height = ref.current.clientHeight / ROOT_FONT_SIZE;\n if (previousHeight.current !== undefined
|
1
|
+
{"version":3,"file":"useAutoResize.js","sources":["../../../../src/components/TextArea/hooks/useAutoResize.ts"],"sourcesContent":["import { useEffect, useRef, MutableRefObject } from 'react';\n\nexport const ROOT_FONT_SIZE = 16;\n\nexport const useAutoResize = <T extends HTMLTextAreaElement>(\n active: boolean,\n ref: MutableRefObject<T | null>,\n value?: string | ReadonlyArray<string> | number,\n minAuto?: number,\n maxAuto?: number,\n resize?: string,\n) => {\n const previousHeight = useRef<number | undefined>();\n\n useEffect(() => {\n if (active && ref && ref.current) {\n // проверка на пользовательский resize (вручную)\n const height = ref.current.clientHeight / ROOT_FONT_SIZE;\n if (\n resize &&\n resize !== 'none' &&\n previousHeight.current !== undefined &&\n previousHeight.current !== height\n ) {\n return;\n }\n\n const style = getComputedStyle(ref.current);\n const lineHeight = parseInt(style.lineHeight, 10);\n const lineHeightInRem = lineHeight / ROOT_FONT_SIZE;\n\n const minAutoHeight = minAuto ? minAuto * lineHeightInRem : 0;\n ref.current.style.height = `${minAutoHeight}rem`;\n\n const lines = Math.floor(ref.current.scrollHeight / lineHeight);\n const newScrollHeight = lines * lineHeightInRem;\n\n const maxAutoHeight = maxAuto ? maxAuto * lineHeightInRem : newScrollHeight;\n\n const newHeight = Math.min(newScrollHeight, maxAutoHeight);\n\n ref.current.style.height = `${newHeight}rem`;\n previousHeight.current = newHeight;\n }\n }, [ref, resize, active, value, minAuto, maxAuto]);\n};\n"],"names":["ROOT_FONT_SIZE","useAutoResize","active","ref","value","minAuto","maxAuto","resize","previousHeight","useRef","useEffect","current","height","clientHeight","undefined","style","getComputedStyle","lineHeight","parseInt","lineHeightInRem","minAutoHeight","concat","lines","Math","floor","scrollHeight","newScrollHeight","maxAutoHeight","newHeight","min"],"mappings":";;AAEO,IAAMA,cAAc,GAAG,GAAE;IAEnBC,aAAa,GAAG,SAAhBA,aAAaA,CACtBC,MAAe,EACfC,GAA+B,EAC/BC,KAA+C,EAC/CC,OAAgB,EAChBC,OAAgB,EAChBC,MAAe,EACd;AACD,EAAA,IAAMC,cAAc,GAAGC,MAAM,EAAsB,CAAA;AAEnDC,EAAAA,SAAS,CAAC,YAAM;AACZ,IAAA,IAAIR,MAAM,IAAIC,GAAG,IAAIA,GAAG,CAACQ,OAAO,EAAE;AAC9B;MACA,IAAMC,MAAM,GAAGT,GAAG,CAACQ,OAAO,CAACE,YAAY,GAAGb,cAAc,CAAA;AACxD,MAAA,IACIO,MAAM,IACNA,MAAM,KAAK,MAAM,IACjBC,cAAc,CAACG,OAAO,KAAKG,SAAS,IACpCN,cAAc,CAACG,OAAO,KAAKC,MAAM,EACnC;AACE,QAAA,OAAA;AACJ,OAAA;AAEA,MAAA,IAAMG,KAAK,GAAGC,gBAAgB,CAACb,GAAG,CAACQ,OAAO,CAAC,CAAA;MAC3C,IAAMM,UAAU,GAAGC,QAAQ,CAACH,KAAK,CAACE,UAAU,EAAE,EAAE,CAAC,CAAA;AACjD,MAAA,IAAME,eAAe,GAAGF,UAAU,GAAGjB,cAAc,CAAA;MAEnD,IAAMoB,aAAa,GAAGf,OAAO,GAAGA,OAAO,GAAGc,eAAe,GAAG,CAAC,CAAA;MAC7DhB,GAAG,CAACQ,OAAO,CAACI,KAAK,CAACH,MAAM,GAAAS,EAAAA,CAAAA,MAAA,CAAMD,aAAa,EAAK,KAAA,CAAA,CAAA;AAEhD,MAAA,IAAME,KAAK,GAAGC,IAAI,CAACC,KAAK,CAACrB,GAAG,CAACQ,OAAO,CAACc,YAAY,GAAGR,UAAU,CAAC,CAAA;AAC/D,MAAA,IAAMS,eAAe,GAAGJ,KAAK,GAAGH,eAAe,CAAA;MAE/C,IAAMQ,aAAa,GAAGrB,OAAO,GAAGA,OAAO,GAAGa,eAAe,GAAGO,eAAe,CAAA;MAE3E,IAAME,SAAS,GAAGL,IAAI,CAACM,GAAG,CAACH,eAAe,EAAEC,aAAa,CAAC,CAAA;MAE1DxB,GAAG,CAACQ,OAAO,CAACI,KAAK,CAACH,MAAM,GAAAS,EAAAA,CAAAA,MAAA,CAAMO,SAAS,EAAK,KAAA,CAAA,CAAA;MAC5CpB,cAAc,CAACG,OAAO,GAAGiB,SAAS,CAAA;AACtC,KAAA;AACJ,GAAC,EAAE,CAACzB,GAAG,EAAEI,MAAM,EAAEL,MAAM,EAAEE,KAAK,EAAEC,OAAO,EAAEC,OAAO,CAAC,CAAC,CAAA;AACtD;;;;"}
|
package/es/index.css
CHANGED
@@ -475,7 +475,7 @@
|
|
475
475
|
|
476
476
|
.base_1vjakah_b15waymg__f123ad8a{color:var(--plasma-counter-color);background-color:var(--plasma-counter-background);}
|
477
477
|
|
478
|
-
.
|
478
|
+
.base_4mz17d_b1t6e429__b5e2cba4{font-family:var(--plasma-counter-font-family);font-size:var(--plasma-counter-font-size);font-style:var(--plasma-counter-font-style);font-weight:var(--plasma-counter-font-weight);-webkit-letter-spacing:var(--plasma-counter-letter-spacing);-moz-letter-spacing:var(--plasma-counter-letter-spacing);-ms-letter-spacing:var(--plasma-counter-letter-spacing);letter-spacing:var(--plasma-counter-letter-spacing);line-height:var(--plasma-counter-lineheight);border-radius:var(--plasma-counter-border-radius);height:var(--plasma-counter-height);padding-top:var(--plasma-counter-padding-top);padding-right:var(--plasma-counter-padding-right);padding-bottom:var(--plasma-counter-padding-bottom);padding-left:var(--plasma-counter-padding-left);}.base_4mz17d_b1t6e429__b5e2cba4.base_4mz17d__PlasmaCounterRound__b5e2cba4{width:var(--plasma-counter-height);}
|
479
479
|
|
480
480
|
.Counter_styles_1uue90v_b1dqw7l5__00d0b847{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:-webkit-max-content;width:-moz-max-content;width:max-content;}
|
481
481
|
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.178.2-canary.
|
3
|
+
"version": "0.178.2-canary.1520.11590201801.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -128,5 +128,5 @@
|
|
128
128
|
"sideEffects": [
|
129
129
|
"*.css"
|
130
130
|
],
|
131
|
-
"gitHead": "
|
131
|
+
"gitHead": "cd87c13ad92d5f9fe45beee418669e8a1c058e07"
|
132
132
|
}
|
@@ -336,7 +336,7 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
|
|
336
336
|
}
|
337
337
|
}
|
338
338
|
setChecked(checkedCopy);
|
339
|
-
setTextValue(((_valueToItemMap$get4 = valueToItemMap.get(
|
339
|
+
setTextValue(((_valueToItemMap$get4 = valueToItemMap.get(outerValue)) === null || _valueToItemMap$get4 === void 0 ? void 0 : _valueToItemMap$get4.label) || '');
|
340
340
|
|
341
341
|
// В deps мы кладем именно outerValue и internalValue, а не просто value.
|
342
342
|
// Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
|
@@ -369,7 +369,6 @@ var comboboxRoot = exports.comboboxRoot = function comboboxRoot(Root) {
|
|
369
369
|
},
|
370
370
|
placement: placement,
|
371
371
|
portal: portal,
|
372
|
-
listWidth: listWidth,
|
373
372
|
target: function target(referenceRef) {
|
374
373
|
return /*#__PURE__*/_react["default"].createElement(_ui.StyledTextField, _extends({
|
375
374
|
ref: inputForkRef,
|
@@ -22,7 +22,6 @@ var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forward
|
|
22
22
|
onToggle = _ref.onToggle,
|
23
23
|
placement = _ref.placement,
|
24
24
|
portal = _ref.portal,
|
25
|
-
listWidth = _ref.listWidth,
|
26
25
|
_ref$offset = _ref.offset,
|
27
26
|
offset = _ref$offset === void 0 ? 0 : _ref$offset;
|
28
27
|
var _useFloating = (0, _react.useFloating)({
|
@@ -35,7 +34,7 @@ var FloatingPopover = exports.FloatingPopover = /*#__PURE__*/(0, _react2.forward
|
|
35
34
|
var rects = _ref2.rects,
|
36
35
|
elements = _ref2.elements;
|
37
36
|
Object.assign(elements.floating.style, {
|
38
|
-
width:
|
37
|
+
width: "".concat(rects.reference.width, "px")
|
39
38
|
});
|
40
39
|
}
|
41
40
|
})]
|
@@ -6,28 +6,38 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
});
|
7
7
|
exports.counterRoot = exports.counterConfig = void 0;
|
8
8
|
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
|
+
var _utils = /*#__PURE__*/require("../../utils");
|
9
10
|
var _base = /*#__PURE__*/require("./variations/_view/base");
|
10
11
|
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
11
12
|
var _Counter = /*#__PURE__*/require("./Counter.styles");
|
12
|
-
var
|
13
|
+
var _Counter2 = /*#__PURE__*/require("./Counter.tokens");
|
14
|
+
var _excluded = ["count", "maxCount", "size", "view", "className"];
|
13
15
|
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); }
|
14
16
|
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; }
|
15
17
|
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); }
|
16
18
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
17
19
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
20
|
+
var MIN_COUNT = 1;
|
18
21
|
var counterRoot = exports.counterRoot = function counterRoot(Root) {
|
19
22
|
return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
20
23
|
var count = props.count,
|
21
24
|
maxCount = props.maxCount,
|
22
25
|
size = props.size,
|
23
26
|
view = props.view,
|
27
|
+
className = props.className,
|
24
28
|
rest = _objectWithoutProperties(props, _excluded);
|
25
|
-
var
|
29
|
+
var currentCount = count < MIN_COUNT ? MIN_COUNT : count;
|
30
|
+
var currentMaxCount = maxCount && maxCount < MIN_COUNT ? MIN_COUNT : maxCount;
|
31
|
+
var isCurrentCountOneDigit = currentCount >= 0 && currentCount < 10;
|
32
|
+
var isCurrentMaxCountExceeded = currentMaxCount && currentCount > currentMaxCount;
|
33
|
+
var content = isCurrentMaxCountExceeded ? "".concat(currentMaxCount, "+") : currentCount;
|
34
|
+
var roundClass = !isCurrentMaxCountExceeded && isCurrentCountOneDigit ? _Counter2.classes.round : undefined;
|
26
35
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
27
36
|
ref: ref,
|
28
37
|
view: view,
|
29
38
|
size: size,
|
30
|
-
count: count
|
39
|
+
count: count,
|
40
|
+
className: (0, _utils.cx)(roundClass, className)
|
31
41
|
}, rest), content);
|
32
42
|
});
|
33
43
|
};
|
@@ -12,7 +12,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
12
12
|
## Примеры
|
13
13
|
|
14
14
|
### Максимальное значение числового badge
|
15
|
-
Задается с помощью свойства `maxCount`.
|
15
|
+
Задается с помощью свойства `maxCount`. Как и `count`, не может быть меньше 1.
|
16
16
|
|
17
17
|
```tsx live
|
18
18
|
import React from 'react';
|
@@ -29,7 +29,7 @@ export function App() {
|
|
29
29
|
```
|
30
30
|
|
31
31
|
### Размер числового badge
|
32
|
-
Размер задается с помощью свойства `size`. Возможные значения свойства: `
|
32
|
+
Размер задается с помощью свойства `size`. Возможные значения свойства: `xxs`, `xs`, `s`, `m`, `l`.
|
33
33
|
|
34
34
|
```tsx live
|
35
35
|
import React from 'react';
|
@@ -3,7 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
exports.tokens = void 0;
|
6
|
+
exports.tokens = exports.classes = void 0;
|
7
|
+
var classes = exports.classes = {
|
8
|
+
round: '--plasma-counter-round'
|
9
|
+
};
|
7
10
|
var tokens = exports.tokens = {
|
8
11
|
background: '--plasma-counter-background',
|
9
12
|
color: '--plasma-counter-color',
|
@@ -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 _Counter = /*#__PURE__*/require("../../Counter.tokens");
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");border-radius:var(", ");height:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");"], _Counter.tokens.fontFamily, _Counter.tokens.fontSize, _Counter.tokens.fontStyle, _Counter.tokens.fontWeight, _Counter.tokens.letterSpacing, _Counter.tokens.lineHeight, _Counter.tokens.borderRadius, _Counter.tokens.height, _Counter.tokens.paddingTop, _Counter.tokens.paddingRight, _Counter.tokens.paddingBottom, _Counter.tokens.paddingLeft);
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");border-radius:var(", ");height:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");&.", "{width:var(", ");}"], _Counter.tokens.fontFamily, _Counter.tokens.fontSize, _Counter.tokens.fontStyle, _Counter.tokens.fontWeight, _Counter.tokens.letterSpacing, _Counter.tokens.lineHeight, _Counter.tokens.borderRadius, _Counter.tokens.height, _Counter.tokens.paddingTop, _Counter.tokens.paddingRight, _Counter.tokens.paddingBottom, _Counter.tokens.paddingLeft, _Counter.classes.round, _Counter.tokens.height);
|
@@ -199,7 +199,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
|
|
199
199
|
setHelperWidth("".concat(elementWidth / _hooks2.ROOT_FONT_SIZE, "rem"));
|
200
200
|
}
|
201
201
|
});
|
202
|
-
(0, _hooks2.useAutoResize)(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
|
202
|
+
(0, _hooks2.useAutoResize)(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto, resize);
|
203
203
|
var onFocusHandler = (0, _react.useCallback)(function () {
|
204
204
|
setFocused(true);
|
205
205
|
}, []);
|
@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.useAutoResize = exports.ROOT_FONT_SIZE = void 0;
|
7
7
|
var _react = /*#__PURE__*/require("react");
|
8
8
|
var ROOT_FONT_SIZE = exports.ROOT_FONT_SIZE = 16;
|
9
|
-
var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
|
9
|
+
var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto, resize) {
|
10
10
|
var previousHeight = (0, _react.useRef)();
|
11
11
|
(0, _react.useEffect)(function () {
|
12
12
|
if (active && ref && ref.current) {
|
13
13
|
// проверка на пользовательский resize (вручную)
|
14
14
|
var height = ref.current.clientHeight / ROOT_FONT_SIZE;
|
15
|
-
if (previousHeight.current !== undefined && previousHeight.current !== height) {
|
15
|
+
if (resize && resize !== 'none' && previousHeight.current !== undefined && previousHeight.current !== height) {
|
16
16
|
return;
|
17
17
|
}
|
18
18
|
var style = getComputedStyle(ref.current);
|
@@ -27,5 +27,5 @@ var useAutoResize = exports.useAutoResize = function useAutoResize(active, ref,
|
|
27
27
|
ref.current.style.height = "".concat(newHeight, "rem");
|
28
28
|
previousHeight.current = newHeight;
|
29
29
|
}
|
30
|
-
}, [ref, active, value, minAuto, maxAuto]);
|
30
|
+
}, [ref, resize, active, value, minAuto, maxAuto]);
|
31
31
|
};
|
@@ -22,8 +22,11 @@ var config = exports.config = {
|
|
22
22
|
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], _Counter.counterTokens.color, _Counter.counterTokens.background)
|
23
23
|
},
|
24
24
|
size: {
|
25
|
-
|
26
|
-
|
25
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.75rem;", ":0.625rem;", ":0.625rem;", ":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);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
|
26
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.5rem;", ":0.5rem;", ":0.5rem;", ":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);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
|
27
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
|
28
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
|
29
|
+
xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.75rem;", ":0.125rem;", ":0.125rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight)
|
27
30
|
}
|
28
31
|
}
|
29
32
|
};
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import React from 'react';
|
2
1
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
3
|
|
@@ -6,19 +5,22 @@ import { WithTheme } from '../../../_helpers';
|
|
6
5
|
|
7
6
|
import { Counter } from './Counter';
|
8
7
|
|
8
|
+
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
9
|
+
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
10
|
+
|
9
11
|
const meta: Meta<typeof Counter> = {
|
10
12
|
title: 'plasma_b2c/Counter',
|
11
13
|
component: Counter,
|
12
14
|
decorators: [WithTheme],
|
13
15
|
argTypes: {
|
14
16
|
size: {
|
15
|
-
options:
|
17
|
+
options: sizes,
|
16
18
|
control: {
|
17
19
|
type: 'select',
|
18
20
|
},
|
19
21
|
},
|
20
22
|
view: {
|
21
|
-
options:
|
23
|
+
options: views,
|
22
24
|
control: {
|
23
25
|
type: 'select',
|
24
26
|
},
|
@@ -33,8 +35,8 @@ type Story = StoryObj<typeof Counter>;
|
|
33
35
|
|
34
36
|
export const Default: Story = {
|
35
37
|
args: {
|
36
|
-
count:
|
37
|
-
maxCount:
|
38
|
+
count: 123,
|
39
|
+
maxCount: 200,
|
38
40
|
view: 'default',
|
39
41
|
size: 'xs',
|
40
42
|
},
|
@@ -22,8 +22,11 @@ var config = exports.config = {
|
|
22
22
|
light: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], _Counter.counterTokens.color, _Counter.counterTokens.background)
|
23
23
|
},
|
24
24
|
size: {
|
25
|
-
|
26
|
-
|
25
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.75rem;", ":0.625rem;", ":0.625rem;", ":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);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
|
26
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.5rem;", ":0.5rem;", ":0.5rem;", ":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);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
|
27
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
|
28
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight),
|
29
|
+
xxs: /*#__PURE__*/(0, _styledComponents.css)(["", ":1rem;", ":0.75rem;", ":0.125rem;", ":0.125rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], _Counter.counterTokens.borderRadius, _Counter.counterTokens.height, _Counter.counterTokens.paddingRight, _Counter.counterTokens.paddingLeft, _Counter.counterTokens.fontFamily, _Counter.counterTokens.fontSize, _Counter.counterTokens.fontStyle, _Counter.counterTokens.fontWeight, _Counter.counterTokens.letterSpacing, _Counter.counterTokens.lineHeight)
|
27
30
|
}
|
28
31
|
}
|
29
32
|
};
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import React from 'react';
|
2
1
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
3
|
|
@@ -6,19 +5,22 @@ import { WithTheme } from '../../../_helpers';
|
|
6
5
|
|
7
6
|
import { Counter } from './Counter';
|
8
7
|
|
8
|
+
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
9
|
+
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
10
|
+
|
9
11
|
const meta: Meta<typeof Counter> = {
|
10
12
|
title: 'plasma_web/Counter',
|
11
13
|
component: Counter,
|
12
14
|
decorators: [WithTheme],
|
13
15
|
argTypes: {
|
14
16
|
size: {
|
15
|
-
options:
|
17
|
+
options: sizes,
|
16
18
|
control: {
|
17
19
|
type: 'select',
|
18
20
|
},
|
19
21
|
},
|
20
22
|
view: {
|
21
|
-
options:
|
23
|
+
options: views,
|
22
24
|
control: {
|
23
25
|
type: 'select',
|
24
26
|
},
|
@@ -33,8 +35,8 @@ type Story = StoryObj<typeof Counter>;
|
|
33
35
|
|
34
36
|
export const Default: Story = {
|
35
37
|
args: {
|
36
|
-
count:
|
37
|
-
maxCount:
|
38
|
+
count: 123,
|
39
|
+
maxCount: 200,
|
38
40
|
view: 'default',
|
39
41
|
size: 'xs',
|
40
42
|
},
|
@@ -327,7 +327,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
327
327
|
}
|
328
328
|
}
|
329
329
|
setChecked(checkedCopy);
|
330
|
-
setTextValue(((_valueToItemMap$get4 = valueToItemMap.get(
|
330
|
+
setTextValue(((_valueToItemMap$get4 = valueToItemMap.get(outerValue)) === null || _valueToItemMap$get4 === void 0 ? void 0 : _valueToItemMap$get4.label) || '');
|
331
331
|
|
332
332
|
// В deps мы кладем именно outerValue и internalValue, а не просто value.
|
333
333
|
// Т.к. вначале нужно отфильтровать и провалидировать outerValue и результат положить в переменную.
|
@@ -360,7 +360,6 @@ export var comboboxRoot = function comboboxRoot(Root) {
|
|
360
360
|
},
|
361
361
|
placement: placement,
|
362
362
|
portal: portal,
|
363
|
-
listWidth: listWidth,
|
364
363
|
target: function target(referenceRef) {
|
365
364
|
return /*#__PURE__*/React.createElement(StyledTextField, _extends({
|
366
365
|
ref: inputForkRef,
|
@@ -14,7 +14,6 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
14
14
|
onToggle = _ref.onToggle,
|
15
15
|
placement = _ref.placement,
|
16
16
|
portal = _ref.portal,
|
17
|
-
listWidth = _ref.listWidth,
|
18
17
|
_ref$offset = _ref.offset,
|
19
18
|
offset = _ref$offset === void 0 ? 0 : _ref$offset;
|
20
19
|
var _useFloating = useFloating({
|
@@ -27,7 +26,7 @@ var FloatingPopover = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
27
26
|
var rects = _ref2.rects,
|
28
27
|
elements = _ref2.elements;
|
29
28
|
Object.assign(elements.floating.style, {
|
30
|
-
width:
|
29
|
+
width: "".concat(rects.reference.width, "px")
|
31
30
|
});
|
32
31
|
}
|
33
32
|
})]
|
@@ -1,24 +1,34 @@
|
|
1
|
-
var _excluded = ["count", "maxCount", "size", "view"];
|
1
|
+
var _excluded = ["count", "maxCount", "size", "view", "className"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
5
5
|
import React, { forwardRef } from 'react';
|
6
|
+
import { cx } from '../../utils';
|
6
7
|
import { base as viewCSS } from './variations/_view/base';
|
7
8
|
import { base as sizeCSS } from './variations/_size/base';
|
8
9
|
import { base } from './Counter.styles';
|
10
|
+
import { classes } from './Counter.tokens';
|
11
|
+
var MIN_COUNT = 1;
|
9
12
|
export var counterRoot = function counterRoot(Root) {
|
10
13
|
return /*#__PURE__*/forwardRef(function (props, ref) {
|
11
14
|
var count = props.count,
|
12
15
|
maxCount = props.maxCount,
|
13
16
|
size = props.size,
|
14
17
|
view = props.view,
|
18
|
+
className = props.className,
|
15
19
|
rest = _objectWithoutProperties(props, _excluded);
|
16
|
-
var
|
20
|
+
var currentCount = count < MIN_COUNT ? MIN_COUNT : count;
|
21
|
+
var currentMaxCount = maxCount && maxCount < MIN_COUNT ? MIN_COUNT : maxCount;
|
22
|
+
var isCurrentCountOneDigit = currentCount >= 0 && currentCount < 10;
|
23
|
+
var isCurrentMaxCountExceeded = currentMaxCount && currentCount > currentMaxCount;
|
24
|
+
var content = isCurrentMaxCountExceeded ? "".concat(currentMaxCount, "+") : currentCount;
|
25
|
+
var roundClass = !isCurrentMaxCountExceeded && isCurrentCountOneDigit ? classes.round : undefined;
|
17
26
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
18
27
|
ref: ref,
|
19
28
|
view: view,
|
20
29
|
size: size,
|
21
|
-
count: count
|
30
|
+
count: count,
|
31
|
+
className: cx(roundClass, className)
|
22
32
|
}, rest), content);
|
23
33
|
});
|
24
34
|
};
|
@@ -12,7 +12,7 @@ import { PropsTable, Description } from '@site/src/components';
|
|
12
12
|
## Примеры
|
13
13
|
|
14
14
|
### Максимальное значение числового badge
|
15
|
-
Задается с помощью свойства `maxCount`.
|
15
|
+
Задается с помощью свойства `maxCount`. Как и `count`, не может быть меньше 1.
|
16
16
|
|
17
17
|
```tsx live
|
18
18
|
import React from 'react';
|
@@ -29,7 +29,7 @@ export function App() {
|
|
29
29
|
```
|
30
30
|
|
31
31
|
### Размер числового badge
|
32
|
-
Размер задается с помощью свойства `size`. Возможные значения свойства: `
|
32
|
+
Размер задается с помощью свойства `size`. Возможные значения свойства: `xxs`, `xs`, `s`, `m`, `l`.
|
33
33
|
|
34
34
|
```tsx live
|
35
35
|
import React from 'react';
|
@@ -1,3 +1,3 @@
|
|
1
1
|
import { css } from 'styled-components';
|
2
|
-
import { tokens } from '../../Counter.tokens';
|
3
|
-
export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");border-radius:var(", ");height:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.borderRadius, tokens.height, tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft);
|
2
|
+
import { classes, tokens } from '../../Counter.tokens';
|
3
|
+
export var base = /*#__PURE__*/css(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");border-radius:var(", ");height:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");&.", "{width:var(", ");}"], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight, tokens.borderRadius, tokens.height, tokens.paddingTop, tokens.paddingRight, tokens.paddingBottom, tokens.paddingLeft, classes.round, tokens.height);
|
@@ -191,7 +191,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
|
|
191
191
|
setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
|
192
192
|
}
|
193
193
|
});
|
194
|
-
useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
|
194
|
+
useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto, resize);
|
195
195
|
var onFocusHandler = useCallback(function () {
|
196
196
|
setFocused(true);
|
197
197
|
}, []);
|
@@ -1,12 +1,12 @@
|
|
1
1
|
import { useEffect, useRef } from 'react';
|
2
2
|
export var ROOT_FONT_SIZE = 16;
|
3
|
-
export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto) {
|
3
|
+
export var useAutoResize = function useAutoResize(active, ref, value, minAuto, maxAuto, resize) {
|
4
4
|
var previousHeight = useRef();
|
5
5
|
useEffect(function () {
|
6
6
|
if (active && ref && ref.current) {
|
7
7
|
// проверка на пользовательский resize (вручную)
|
8
8
|
var height = ref.current.clientHeight / ROOT_FONT_SIZE;
|
9
|
-
if (previousHeight.current !== undefined && previousHeight.current !== height) {
|
9
|
+
if (resize && resize !== 'none' && previousHeight.current !== undefined && previousHeight.current !== height) {
|
10
10
|
return;
|
11
11
|
}
|
12
12
|
var style = getComputedStyle(ref.current);
|
@@ -21,5 +21,5 @@ export var useAutoResize = function useAutoResize(active, ref, value, minAuto, m
|
|
21
21
|
ref.current.style.height = "".concat(newHeight, "rem");
|
22
22
|
previousHeight.current = newHeight;
|
23
23
|
}
|
24
|
-
}, [ref, active, value, minAuto, maxAuto]);
|
24
|
+
}, [ref, resize, active, value, minAuto, maxAuto]);
|
25
25
|
};
|
@@ -16,8 +16,11 @@ export var config = {
|
|
16
16
|
light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], counterTokens.color, counterTokens.background)
|
17
17
|
},
|
18
18
|
size: {
|
19
|
-
|
20
|
-
|
19
|
+
l: /*#__PURE__*/css(["", ":1rem;", ":1.75rem;", ":0.625rem;", ":0.625rem;", ":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);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
|
20
|
+
m: /*#__PURE__*/css(["", ":1rem;", ":1.5rem;", ":0.5rem;", ":0.5rem;", ":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);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
|
21
|
+
s: /*#__PURE__*/css(["", ":1rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
|
22
|
+
xs: /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
|
23
|
+
xxs: /*#__PURE__*/css(["", ":1rem;", ":0.75rem;", ":0.125rem;", ":0.125rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight)
|
21
24
|
}
|
22
25
|
}
|
23
26
|
};
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import React from 'react';
|
2
1
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
3
|
|
@@ -6,19 +5,22 @@ import { WithTheme } from '../../../_helpers';
|
|
6
5
|
|
7
6
|
import { Counter } from './Counter';
|
8
7
|
|
8
|
+
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
9
|
+
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
10
|
+
|
9
11
|
const meta: Meta<typeof Counter> = {
|
10
12
|
title: 'plasma_b2c/Counter',
|
11
13
|
component: Counter,
|
12
14
|
decorators: [WithTheme],
|
13
15
|
argTypes: {
|
14
16
|
size: {
|
15
|
-
options:
|
17
|
+
options: sizes,
|
16
18
|
control: {
|
17
19
|
type: 'select',
|
18
20
|
},
|
19
21
|
},
|
20
22
|
view: {
|
21
|
-
options:
|
23
|
+
options: views,
|
22
24
|
control: {
|
23
25
|
type: 'select',
|
24
26
|
},
|
@@ -33,8 +35,8 @@ type Story = StoryObj<typeof Counter>;
|
|
33
35
|
|
34
36
|
export const Default: Story = {
|
35
37
|
args: {
|
36
|
-
count:
|
37
|
-
maxCount:
|
38
|
+
count: 123,
|
39
|
+
maxCount: 200,
|
38
40
|
view: 'default',
|
39
41
|
size: 'xs',
|
40
42
|
},
|
@@ -16,8 +16,11 @@ export var config = {
|
|
16
16
|
light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], counterTokens.color, counterTokens.background)
|
17
17
|
},
|
18
18
|
size: {
|
19
|
-
|
20
|
-
|
19
|
+
l: /*#__PURE__*/css(["", ":1rem;", ":1.75rem;", ":0.625rem;", ":0.625rem;", ":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);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
|
20
|
+
m: /*#__PURE__*/css(["", ":1rem;", ":1.5rem;", ":0.5rem;", ":0.5rem;", ":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);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
|
21
|
+
s: /*#__PURE__*/css(["", ":1rem;", ":1.25rem;", ":0.375rem;", ":0.375rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
|
22
|
+
xs: /*#__PURE__*/css(["", ":1rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
|
23
|
+
xxs: /*#__PURE__*/css(["", ":1rem;", ":0.75rem;", ":0.125rem;", ":0.125rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight)
|
21
24
|
}
|
22
25
|
}
|
23
26
|
};
|
@@ -1,4 +1,3 @@
|
|
1
|
-
import React from 'react';
|
2
1
|
import { disableProps } from '@salutejs/plasma-sb-utils';
|
3
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
3
|
|
@@ -6,19 +5,22 @@ import { WithTheme } from '../../../_helpers';
|
|
6
5
|
|
7
6
|
import { Counter } from './Counter';
|
8
7
|
|
8
|
+
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
9
|
+
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
10
|
+
|
9
11
|
const meta: Meta<typeof Counter> = {
|
10
12
|
title: 'plasma_web/Counter',
|
11
13
|
component: Counter,
|
12
14
|
decorators: [WithTheme],
|
13
15
|
argTypes: {
|
14
16
|
size: {
|
15
|
-
options:
|
17
|
+
options: sizes,
|
16
18
|
control: {
|
17
19
|
type: 'select',
|
18
20
|
},
|
19
21
|
},
|
20
22
|
view: {
|
21
|
-
options:
|
23
|
+
options: views,
|
22
24
|
control: {
|
23
25
|
type: 'select',
|
24
26
|
},
|
@@ -33,8 +35,8 @@ type Story = StoryObj<typeof Counter>;
|
|
33
35
|
|
34
36
|
export const Default: Story = {
|
35
37
|
args: {
|
36
|
-
count:
|
37
|
-
maxCount:
|
38
|
+
count: 123,
|
39
|
+
maxCount: 200,
|
38
40
|
view: 'default',
|
39
41
|
size: 'xs',
|
40
42
|
},
|