@alfalab/core-components-button - npm Package Compare versions

Comparing version 11.0.0 to 11.1.0

components/base-button/Component.js

@@ -19,9 +19,9 @@ 'use strict';
 
-var defaultColors = {"accent":"button__accent_1x4q8","loader":"button__loader_1x4q8","primary":"button__primary_1x4q8","secondary":"button__secondary_1x4q8","outlined":"button__outlined_1x4q8","tertiary":"button__tertiary_1x4q8","filled":"button__filled_1x4q8","transparent":"button__transparent_1x4q8","link":"button__link_1x4q8","ghost":"button__ghost_1x4q8","component":"button__component_1x4q8","loading":"button__loading_1x4q8"};
+var defaultColors = {"accent":"button__accent_1eh12","loader":"button__loader_1eh12","primary":"button__primary_1eh12","secondary":"button__secondary_1eh12","outlined":"button__outlined_1eh12","tertiary":"button__tertiary_1eh12","filled":"button__filled_1eh12","transparent":"button__transparent_1eh12","link":"button__link_1eh12","ghost":"button__ghost_1eh12","component":"button__component_1eh12","loading":"button__loading_1eh12"};
 require('./default.css')
 
-var commonStyles = {"component":"button__component_1yvw2","secondary":"button__secondary_1yvw2","accent":"button__accent_1yvw2","primary":"button__primary_1yvw2","focused":"button__focused_1yvw2","loading":"button__loading_1yvw2","text":"button__text_1yvw2","addons":"button__addons_1yvw2","stretchText":"button__stretchText_1yvw2","loader":"button__loader_1yvw2","xxs":"button__xxs_1yvw2","iconOnly":"button__iconOnly_1yvw2","xs":"button__xs_1yvw2","s":"button__s_1yvw2","m":"button__m_1yvw2","l":"button__l_1yvw2","xl":"button__xl_1yvw2","withRightAddons":"button__withRightAddons_1yvw2","ghost":"button__ghost_1yvw2","withLeftAddons":"button__withLeftAddons_1yvw2","link":"button__link_1yvw2","block":"button__block_1yvw2","nowrap":"button__nowrap_1yvw2"};
+var commonStyles = {"component":"button__component_o1m6e","hug":"button__hug_o1m6e","fill":"button__fill_o1m6e","hint":"button__hint_o1m6e","secondary":"button__secondary_o1m6e","accent":"button__accent_o1m6e","primary":"button__primary_o1m6e","focused":"button__focused_o1m6e","loading":"button__loading_o1m6e","text":"button__text_o1m6e","addons":"button__addons_o1m6e","stretchText":"button__stretchText_o1m6e","loader":"button__loader_o1m6e","xxs":"button__xxs_o1m6e","iconOnly":"button__iconOnly_o1m6e","xs":"button__xs_o1m6e","s":"button__s_o1m6e","m":"button__m_o1m6e","l":"button__l_o1m6e","xl":"button__xl_o1m6e","withRightAddons":"button__withRightAddons_o1m6e","ghost":"button__ghost_o1m6e","withLeftAddons":"button__withLeftAddons_o1m6e","link":"button__link_o1m6e","block":"button__block_o1m6e","nowrap":"button__nowrap_o1m6e","rounded":"button__rounded_o1m6e"};
 require('./index.css')
 
-var invertedColors = {"accent":"button__accent_gi4pl","loader":"button__loader_gi4pl","primary":"button__primary_gi4pl","secondary":"button__secondary_gi4pl","outlined":"button__outlined_gi4pl","tertiary":"button__tertiary_gi4pl","filled":"button__filled_gi4pl","transparent":"button__transparent_gi4pl","link":"button__link_gi4pl","ghost":"button__ghost_gi4pl","component":"button__component_gi4pl","loading":"button__loading_gi4pl"};
+var invertedColors = {"accent":"button__accent_1wvjm","loader":"button__loader_1wvjm","primary":"button__primary_1wvjm","secondary":"button__secondary_1wvjm","outlined":"button__outlined_1wvjm","tertiary":"button__tertiary_1wvjm","filled":"button__filled_1wvjm","transparent":"button__transparent_1wvjm","link":"button__link_1wvjm","ghost":"button__ghost_1wvjm","component":"button__component_1wvjm","loading":"button__loading_1wvjm"};
 require('./inverted.css')
@@ -56,3 +56,3 @@
     var _b, _c, _d;
-    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _f = _a.size, size = _f === void 0 ? 'm' : _f, _g = _a.block, block = _g === void 0 ? false : _g, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.nowrap, nowrap = _j === void 0 ? false : _j, _k = _a.colors, colors = _k === void 0 ? 'default' : _k, _l = _a.Component, Component = _l === void 0 ? href ? 'a' : 'button' : _l, onClick = _a.onClick, _m = _a.styles, styles = _m === void 0 ? {} : _m, _o = _a.colorStylesMap, colorStylesMap = _o === void 0 ? { default: {}, inverted: {} } : _o, restProps = tslib.__rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
+    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = tslib.__rest(_a, ["children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
@@ -63,8 +63,9 @@ logWarning(view);
     var focused = hooks.useFocus(buttonRef, 'keyboard')[0];
-    var _p = React.useState(true), loaderTimePassed = _p[0], setLoaderTimePassed = _p[1];
+    var _r = React.useState(true), loaderTimePassed = _r[0], setLoaderTimePassed = _r[1];
     var timerId = React.useRef(0);
     var showLoader = loading || !loaderTimePassed;
+    var showHint = hint && ['m', 'l', 'xl'].includes(size);
     var iconOnly = !children;
     var componentProps = {
-        className: cn__default.default(commonStyles.component, commonStyles[view], commonStyles[size], styles[size], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+        className: cn__default.default(commonStyles.component, commonStyles[view], commonStyles[size], commonStyles[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
             _b[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
@@ -78,6 +79,7 @@ _b[commonStyles.focused] = focused,
             _b[colorStyles[colors].loading] = showLoader,
+            _b[colorStylesMap[colors].loading] = showLoader,
             _b), className),
         'data-test-id': dataTestId || null,
     };
-    var _q = restProps, disabled = _q.disabled, _r = _q.type, type = _r === void 0 ? 'button' : _r, restButtonProps = tslib.__rest(_q, ["disabled", "type"]);
+    var _s = restProps, disabled = _s.disabled, _t = _s.type, type = _t === void 0 ? 'button' : _t, restButtonProps = tslib.__rest(_s, ["disabled", "type"]);
     var buttonChildren = (React__default.default.createElement(React__default.default.Fragment, null,
@@ -87,5 +89,7 @@ leftAddons && React__default.default.createElement("span", { className: commonStyles.addons }, leftAddons),
                 _c[commonStyles.nowrap] = nowrap,
-                _c[commonStyles.stretchText] = !(leftAddons || rightAddons),
-                _c)) }, children)),
-        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(commonStyles.loader, colorStyles[colors].loader, spinnerClassName) })),
+                _c[commonStyles.stretchText] = !(leftAddons || rightAddons) || textResizing === 'fill',
+                _c)) },
+            children,
+            showHint && React__default.default.createElement("span", { className: commonStyles.hint }, hint))),
+        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(commonStyles.loader, colorStyles[colors].loader, colorStylesMap[colors].loader, spinnerClassName) })),
         rightAddons && React__default.default.createElement("span", { className: commonStyles.addons }, rightAddons)));
@@ -92,0 +96,0 @@ React.useEffect(function () {

cssm/components/base-button/Component.js

@@ -52,3 +52,3 @@ 'use strict';
     var _b, _c, _d;
-    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _f = _a.size, size = _f === void 0 ? 'm' : _f, _g = _a.block, block = _g === void 0 ? false : _g, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.nowrap, nowrap = _j === void 0 ? false : _j, _k = _a.colors, colors = _k === void 0 ? 'default' : _k, _l = _a.Component, Component = _l === void 0 ? href ? 'a' : 'button' : _l, onClick = _a.onClick, _m = _a.styles, styles = _m === void 0 ? {} : _m, _o = _a.colorStylesMap, colorStylesMap = _o === void 0 ? { default: {}, inverted: {} } : _o, restProps = tslib.__rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
+    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = tslib.__rest(_a, ["children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
@@ -59,8 +59,9 @@ logWarning(view);
     var focused = hooks.useFocus(buttonRef, 'keyboard')[0];
-    var _p = React.useState(true), loaderTimePassed = _p[0], setLoaderTimePassed = _p[1];
+    var _r = React.useState(true), loaderTimePassed = _r[0], setLoaderTimePassed = _r[1];
     var timerId = React.useRef(0);
     var showLoader = loading || !loaderTimePassed;
+    var showHint = hint && ['m', 'l', 'xl'].includes(size);
     var iconOnly = !children;
     var componentProps = {
-        className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[view], commonStyles__default.default[size], styles[size], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+        className: cn__default.default(commonStyles__default.default.component, commonStyles__default.default[view], commonStyles__default.default[size], commonStyles__default.default[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles__default.default[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
             _b[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
@@ -74,6 +75,7 @@ _b[commonStyles__default.default.focused] = focused,
             _b[colorStyles[colors].loading] = showLoader,
+            _b[colorStylesMap[colors].loading] = showLoader,
             _b), className),
         'data-test-id': dataTestId || null,
     };
-    var _q = restProps, disabled = _q.disabled, _r = _q.type, type = _r === void 0 ? 'button' : _r, restButtonProps = tslib.__rest(_q, ["disabled", "type"]);
+    var _s = restProps, disabled = _s.disabled, _t = _s.type, type = _t === void 0 ? 'button' : _t, restButtonProps = tslib.__rest(_s, ["disabled", "type"]);
     var buttonChildren = (React__default.default.createElement(React__default.default.Fragment, null,
@@ -83,5 +85,7 @@ leftAddons && React__default.default.createElement("span", { className: commonStyles__default.default.addons }, leftAddons),
                 _c[commonStyles__default.default.nowrap] = nowrap,
-                _c[commonStyles__default.default.stretchText] = !(leftAddons || rightAddons),
-                _c)) }, children)),
-        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(commonStyles__default.default.loader, colorStyles[colors].loader, spinnerClassName) })),
+                _c[commonStyles__default.default.stretchText] = !(leftAddons || rightAddons) || textResizing === 'fill',
+                _c)) },
+            children,
+            showHint && React__default.default.createElement("span", { className: commonStyles__default.default.hint }, hint))),
+        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: coreComponentsShared.getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(commonStyles__default.default.loader, colorStyles[colors].loader, colorStylesMap[colors].loader, spinnerClassName) })),
         rightAddons && React__default.default.createElement("span", { className: commonStyles__default.default.addons }, rightAddons)));
@@ -88,0 +92,0 @@ React.useEffect(function () {

cssm/typings.d.ts

@@ -17,2 +17,16 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
     /**
+     * Форма кнопки
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Ширина текстового контента
+     * @default hug
+     */
+    textResizing?: 'fill' | 'hug';
+    /**
+     *  Подпись под лейблом (видна только в размерах >= m)
+     */
+    hint?: ReactNode;
+    /**
      * Слот слева
@@ -19,0 +33,0 @@ */

desktop/Component.desktop.js

@@ -18,9 +18,9 @@ 'use strict';
 
-var defaultColors = {"secondary":"button__secondary_58yq3","ghost":"button__ghost_58yq3","component":"button__component_58yq3","primary":"button__primary_58yq3","tertiary":"button__tertiary_58yq3","link":"button__link_58yq3"};
+var defaultColors = {"primary":"button__primary_j0tqe","loader":"button__loader_j0tqe","secondary":"button__secondary_j0tqe","ghost":"button__ghost_j0tqe","component":"button__component_j0tqe","loading":"button__loading_j0tqe","tertiary":"button__tertiary_j0tqe","link":"button__link_j0tqe"};
 require('./default.desktop.css')
 
-var styles = {"xxs":"button__xxs_1orpt","xs":"button__xs_1orpt","s":"button__s_1orpt","m":"button__m_1orpt","l":"button__l_1orpt","xl":"button__xl_1orpt"};
+var styles = {"xxs":"button__xxs_17blc","xs":"button__xs_17blc","s":"button__s_17blc","m":"button__m_17blc","l":"button__l_17blc","xl":"button__xl_17blc"};
 require('./desktop.css')
 
-var invertedColors = {"secondary":"button__secondary_132ou","ghost":"button__ghost_132ou","component":"button__component_132ou","primary":"button__primary_132ou","tertiary":"button__tertiary_132ou","link":"button__link_132ou"};
+var invertedColors = {"primary":"button__primary_1ezoa","loader":"button__loader_1ezoa","secondary":"button__secondary_1ezoa","ghost":"button__ghost_1ezoa","component":"button__component_1ezoa","loading":"button__loading_1ezoa","tertiary":"button__tertiary_1ezoa","link":"button__link_1ezoa"};
 require('./inverted.desktop.css')
@@ -27,0 +27,0 @@

esm/components/base-button/Component.js

@@ -9,9 +9,9 @@ import { __rest, __assign } from 'tslib';
 
-var defaultColors = {"accent":"button__accent_1x4q8","loader":"button__loader_1x4q8","primary":"button__primary_1x4q8","secondary":"button__secondary_1x4q8","outlined":"button__outlined_1x4q8","tertiary":"button__tertiary_1x4q8","filled":"button__filled_1x4q8","transparent":"button__transparent_1x4q8","link":"button__link_1x4q8","ghost":"button__ghost_1x4q8","component":"button__component_1x4q8","loading":"button__loading_1x4q8"};
+var defaultColors = {"accent":"button__accent_1eh12","loader":"button__loader_1eh12","primary":"button__primary_1eh12","secondary":"button__secondary_1eh12","outlined":"button__outlined_1eh12","tertiary":"button__tertiary_1eh12","filled":"button__filled_1eh12","transparent":"button__transparent_1eh12","link":"button__link_1eh12","ghost":"button__ghost_1eh12","component":"button__component_1eh12","loading":"button__loading_1eh12"};
 require('./default.css')
 
-var commonStyles = {"component":"button__component_1yvw2","secondary":"button__secondary_1yvw2","accent":"button__accent_1yvw2","primary":"button__primary_1yvw2","focused":"button__focused_1yvw2","loading":"button__loading_1yvw2","text":"button__text_1yvw2","addons":"button__addons_1yvw2","stretchText":"button__stretchText_1yvw2","loader":"button__loader_1yvw2","xxs":"button__xxs_1yvw2","iconOnly":"button__iconOnly_1yvw2","xs":"button__xs_1yvw2","s":"button__s_1yvw2","m":"button__m_1yvw2","l":"button__l_1yvw2","xl":"button__xl_1yvw2","withRightAddons":"button__withRightAddons_1yvw2","ghost":"button__ghost_1yvw2","withLeftAddons":"button__withLeftAddons_1yvw2","link":"button__link_1yvw2","block":"button__block_1yvw2","nowrap":"button__nowrap_1yvw2"};
+var commonStyles = {"component":"button__component_o1m6e","hug":"button__hug_o1m6e","fill":"button__fill_o1m6e","hint":"button__hint_o1m6e","secondary":"button__secondary_o1m6e","accent":"button__accent_o1m6e","primary":"button__primary_o1m6e","focused":"button__focused_o1m6e","loading":"button__loading_o1m6e","text":"button__text_o1m6e","addons":"button__addons_o1m6e","stretchText":"button__stretchText_o1m6e","loader":"button__loader_o1m6e","xxs":"button__xxs_o1m6e","iconOnly":"button__iconOnly_o1m6e","xs":"button__xs_o1m6e","s":"button__s_o1m6e","m":"button__m_o1m6e","l":"button__l_o1m6e","xl":"button__xl_o1m6e","withRightAddons":"button__withRightAddons_o1m6e","ghost":"button__ghost_o1m6e","withLeftAddons":"button__withLeftAddons_o1m6e","link":"button__link_o1m6e","block":"button__block_o1m6e","nowrap":"button__nowrap_o1m6e","rounded":"button__rounded_o1m6e"};
 require('./index.css')
 
-var invertedColors = {"accent":"button__accent_gi4pl","loader":"button__loader_gi4pl","primary":"button__primary_gi4pl","secondary":"button__secondary_gi4pl","outlined":"button__outlined_gi4pl","tertiary":"button__tertiary_gi4pl","filled":"button__filled_gi4pl","transparent":"button__transparent_gi4pl","link":"button__link_gi4pl","ghost":"button__ghost_gi4pl","component":"button__component_gi4pl","loading":"button__loading_gi4pl"};
+var invertedColors = {"accent":"button__accent_1wvjm","loader":"button__loader_1wvjm","primary":"button__primary_1wvjm","secondary":"button__secondary_1wvjm","outlined":"button__outlined_1wvjm","tertiary":"button__tertiary_1wvjm","filled":"button__filled_1wvjm","transparent":"button__transparent_1wvjm","link":"button__link_1wvjm","ghost":"button__ghost_1wvjm","component":"button__component_1wvjm","loading":"button__loading_1wvjm"};
 require('./inverted.css')
@@ -46,3 +46,3 @@
     var _b, _c, _d;
-    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _f = _a.size, size = _f === void 0 ? 'm' : _f, _g = _a.block, block = _g === void 0 ? false : _g, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _h = _a.loading, loading = _h === void 0 ? false : _h, _j = _a.nowrap, nowrap = _j === void 0 ? false : _j, _k = _a.colors, colors = _k === void 0 ? 'default' : _k, _l = _a.Component, Component = _l === void 0 ? href ? 'a' : 'button' : _l, onClick = _a.onClick, _m = _a.styles, styles = _m === void 0 ? {} : _m, _o = _a.colorStylesMap, colorStylesMap = _o === void 0 ? { default: {}, inverted: {} } : _o, restProps = __rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
+    var children = _a.children, _e = _a.view, view = _e === void 0 ? 'secondary' : _e, _f = _a.shape, shape = _f === void 0 ? 'rectangular' : _f, _g = _a.textResizing, textResizing = _g === void 0 ? 'hug' : _g, hint = _a.hint, leftAddons = _a.leftAddons, rightAddons = _a.rightAddons, _h = _a.size, size = _h === void 0 ? 'm' : _h, _j = _a.block, block = _j === void 0 ? false : _j, className = _a.className, spinnerClassName = _a.spinnerClassName, dataTestId = _a.dataTestId, href = _a.href, _k = _a.loading, loading = _k === void 0 ? false : _k, _l = _a.nowrap, nowrap = _l === void 0 ? false : _l, _m = _a.colors, colors = _m === void 0 ? 'default' : _m, _o = _a.Component, Component = _o === void 0 ? href ? 'a' : 'button' : _o, onClick = _a.onClick, _p = _a.styles, styles = _p === void 0 ? {} : _p, _q = _a.colorStylesMap, colorStylesMap = _q === void 0 ? { default: {}, inverted: {} } : _q, restProps = __rest(_a, ["children", "view", "shape", "textResizing", "hint", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick", "styles", "colorStylesMap"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
@@ -53,8 +53,9 @@ logWarning(view);
     var focused = useFocus(buttonRef, 'keyboard')[0];
-    var _p = useState(true), loaderTimePassed = _p[0], setLoaderTimePassed = _p[1];
+    var _r = useState(true), loaderTimePassed = _r[0], setLoaderTimePassed = _r[1];
     var timerId = useRef(0);
     var showLoader = loading || !loaderTimePassed;
+    var showHint = hint && ['m', 'l', 'xl'].includes(size);
     var iconOnly = !children;
     var componentProps = {
-        className: cn(commonStyles.component, commonStyles[view], commonStyles[size], styles[size], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
+        className: cn(commonStyles.component, commonStyles[view], commonStyles[size], commonStyles[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, (_b = {},
             _b[colorStylesMap[colors][view]] = Boolean(colorStylesMap[colors][view]),
@@ -68,6 +69,7 @@ _b[commonStyles.focused] = focused,
             _b[colorStyles[colors].loading] = showLoader,
+            _b[colorStylesMap[colors].loading] = showLoader,
             _b), className),
         'data-test-id': dataTestId || null,
     };
-    var _q = restProps, disabled = _q.disabled, _r = _q.type, type = _r === void 0 ? 'button' : _r, restButtonProps = __rest(_q, ["disabled", "type"]);
+    var _s = restProps, disabled = _s.disabled, _t = _s.type, type = _t === void 0 ? 'button' : _t, restButtonProps = __rest(_s, ["disabled", "type"]);
     var buttonChildren = (React.createElement(React.Fragment, null,
@@ -77,5 +79,7 @@ leftAddons && React.createElement("span", { className: commonStyles.addons }, leftAddons),
                 _c[commonStyles.nowrap] = nowrap,
-                _c[commonStyles.stretchText] = !(leftAddons || rightAddons),
-                _c)) }, children)),
-        showLoader && (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(commonStyles.loader, colorStyles[colors].loader, spinnerClassName) })),
+                _c[commonStyles.stretchText] = !(leftAddons || rightAddons) || textResizing === 'fill',
+                _c)) },
+            children,
+            showHint && React.createElement("span", { className: commonStyles.hint }, hint))),
+        showLoader && (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(commonStyles.loader, colorStyles[colors].loader, colorStylesMap[colors].loader, spinnerClassName) })),
         rightAddons && React.createElement("span", { className: commonStyles.addons }, rightAddons)));
@@ -82,0 +86,0 @@ useEffect(function () {

esm/desktop/Component.desktop.js

@@ -10,9 +10,9 @@ import { __assign } from 'tslib';
 
-var defaultColors = {"secondary":"button__secondary_58yq3","ghost":"button__ghost_58yq3","component":"button__component_58yq3","primary":"button__primary_58yq3","tertiary":"button__tertiary_58yq3","link":"button__link_58yq3"};
+var defaultColors = {"primary":"button__primary_j0tqe","loader":"button__loader_j0tqe","secondary":"button__secondary_j0tqe","ghost":"button__ghost_j0tqe","component":"button__component_j0tqe","loading":"button__loading_j0tqe","tertiary":"button__tertiary_j0tqe","link":"button__link_j0tqe"};
 require('./default.desktop.css')
 
-var styles = {"xxs":"button__xxs_1orpt","xs":"button__xs_1orpt","s":"button__s_1orpt","m":"button__m_1orpt","l":"button__l_1orpt","xl":"button__xl_1orpt"};
+var styles = {"xxs":"button__xxs_17blc","xs":"button__xs_17blc","s":"button__s_17blc","m":"button__m_17blc","l":"button__l_17blc","xl":"button__xl_17blc"};
 require('./desktop.css')
 
-var invertedColors = {"secondary":"button__secondary_132ou","ghost":"button__ghost_132ou","component":"button__component_132ou","primary":"button__primary_132ou","tertiary":"button__tertiary_132ou","link":"button__link_132ou"};
+var invertedColors = {"primary":"button__primary_1ezoa","loader":"button__loader_1ezoa","secondary":"button__secondary_1ezoa","ghost":"button__ghost_1ezoa","component":"button__component_1ezoa","loading":"button__loading_1ezoa","tertiary":"button__tertiary_1ezoa","link":"button__link_1ezoa"};
 require('./inverted.desktop.css')
@@ -19,0 +19,0 @@

esm/mobile/Component.mobile.js

@@ -10,9 +10,9 @@ import { __assign } from 'tslib';
 
-var defaultColors = {"secondary":"button__secondary_1jg8n","ghost":"button__ghost_1jg8n","component":"button__component_1jg8n","primary":"button__primary_1jg8n","tertiary":"button__tertiary_1jg8n","link":"button__link_1jg8n"};
+var defaultColors = {"primary":"button__primary_1vd83","loader":"button__loader_1vd83","secondary":"button__secondary_1vd83","ghost":"button__ghost_1vd83","component":"button__component_1vd83","loading":"button__loading_1vd83","tertiary":"button__tertiary_1vd83","link":"button__link_1vd83"};
 require('./default.mobile.css')
 
-var invertedColors = {"secondary":"button__secondary_byelr","ghost":"button__ghost_byelr","component":"button__component_byelr","primary":"button__primary_byelr","tertiary":"button__tertiary_byelr","link":"button__link_byelr"};
+var invertedColors = {"primary":"button__primary_pq9m2","loader":"button__loader_pq9m2","secondary":"button__secondary_pq9m2","ghost":"button__ghost_pq9m2","component":"button__component_pq9m2","loading":"button__loading_pq9m2","tertiary":"button__tertiary_pq9m2","link":"button__link_pq9m2"};
 require('./inverted.mobile.css')
 
-var styles = {"xxs":"button__xxs_guse0","xs":"button__xs_guse0","s":"button__s_guse0","m":"button__m_guse0","l":"button__l_guse0","xl":"button__xl_guse0"};
+var styles = {"xxs":"button__xxs_1hdea","xs":"button__xs_1hdea","s":"button__s_1hdea","m":"button__m_1hdea","l":"button__l_1hdea","xl":"button__xl_1hdea"};
 require('./mobile.css')
@@ -19,0 +19,0 @@

esm/typings.d.ts

@@ -17,2 +17,16 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
     /**
+     * Форма кнопки
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Ширина текстового контента
+     * @default hug
+     */
+    textResizing?: 'fill' | 'hug';
+    /**
+     *  Подпись под лейблом (видна только в размерах >= m)
+     */
+    hint?: ReactNode;
+    /**
      * Слот слева
@@ -19,0 +33,0 @@ */

mobile/Component.mobile.js

@@ -18,9 +18,9 @@ 'use strict';
 
-var defaultColors = {"secondary":"button__secondary_1jg8n","ghost":"button__ghost_1jg8n","component":"button__component_1jg8n","primary":"button__primary_1jg8n","tertiary":"button__tertiary_1jg8n","link":"button__link_1jg8n"};
+var defaultColors = {"primary":"button__primary_1vd83","loader":"button__loader_1vd83","secondary":"button__secondary_1vd83","ghost":"button__ghost_1vd83","component":"button__component_1vd83","loading":"button__loading_1vd83","tertiary":"button__tertiary_1vd83","link":"button__link_1vd83"};
 require('./default.mobile.css')
 
-var invertedColors = {"secondary":"button__secondary_byelr","ghost":"button__ghost_byelr","component":"button__component_byelr","primary":"button__primary_byelr","tertiary":"button__tertiary_byelr","link":"button__link_byelr"};
+var invertedColors = {"primary":"button__primary_pq9m2","loader":"button__loader_pq9m2","secondary":"button__secondary_pq9m2","ghost":"button__ghost_pq9m2","component":"button__component_pq9m2","loading":"button__loading_pq9m2","tertiary":"button__tertiary_pq9m2","link":"button__link_pq9m2"};
 require('./inverted.mobile.css')
 
-var styles = {"xxs":"button__xxs_guse0","xs":"button__xs_guse0","s":"button__s_guse0","m":"button__m_guse0","l":"button__l_guse0","xl":"button__xl_guse0"};
+var styles = {"xxs":"button__xxs_1hdea","xs":"button__xs_1hdea","s":"button__s_1hdea","m":"button__m_1hdea","l":"button__l_1hdea","xl":"button__xl_1hdea"};
 require('./mobile.css')
@@ -27,0 +27,0 @@

modern/components/base-button/Component.js

@@ -8,11 +8,12 @@ import React, { useRef, useState, useEffect } from 'react';
 
-const defaultColors = {"accent":"button__accent_1x4q8","loader":"button__loader_1x4q8","primary":"button__primary_1x4q8","secondary":"button__secondary_1x4q8","outlined":"button__outlined_1x4q8","tertiary":"button__tertiary_1x4q8","filled":"button__filled_1x4q8","transparent":"button__transparent_1x4q8","link":"button__link_1x4q8","ghost":"button__ghost_1x4q8","component":"button__component_1x4q8","loading":"button__loading_1x4q8"};
+const defaultColors = {"accent":"button__accent_1eh12","loader":"button__loader_1eh12","primary":"button__primary_1eh12","secondary":"button__secondary_1eh12","outlined":"button__outlined_1eh12","tertiary":"button__tertiary_1eh12","filled":"button__filled_1eh12","transparent":"button__transparent_1eh12","link":"button__link_1eh12","ghost":"button__ghost_1eh12","component":"button__component_1eh12","loading":"button__loading_1eh12"};
 require('./default.css')
 
-const commonStyles = {"component":"button__component_1yvw2","secondary":"button__secondary_1yvw2","accent":"button__accent_1yvw2","primary":"button__primary_1yvw2","focused":"button__focused_1yvw2","loading":"button__loading_1yvw2","text":"button__text_1yvw2","addons":"button__addons_1yvw2","stretchText":"button__stretchText_1yvw2","loader":"button__loader_1yvw2","xxs":"button__xxs_1yvw2","iconOnly":"button__iconOnly_1yvw2","xs":"button__xs_1yvw2","s":"button__s_1yvw2","m":"button__m_1yvw2","l":"button__l_1yvw2","xl":"button__xl_1yvw2","withRightAddons":"button__withRightAddons_1yvw2","ghost":"button__ghost_1yvw2","withLeftAddons":"button__withLeftAddons_1yvw2","link":"button__link_1yvw2","block":"button__block_1yvw2","nowrap":"button__nowrap_1yvw2"};
+const commonStyles = {"component":"button__component_o1m6e","hug":"button__hug_o1m6e","fill":"button__fill_o1m6e","hint":"button__hint_o1m6e","secondary":"button__secondary_o1m6e","accent":"button__accent_o1m6e","primary":"button__primary_o1m6e","focused":"button__focused_o1m6e","loading":"button__loading_o1m6e","text":"button__text_o1m6e","addons":"button__addons_o1m6e","stretchText":"button__stretchText_o1m6e","loader":"button__loader_o1m6e","xxs":"button__xxs_o1m6e","iconOnly":"button__iconOnly_o1m6e","xs":"button__xs_o1m6e","s":"button__s_o1m6e","m":"button__m_o1m6e","l":"button__l_o1m6e","xl":"button__xl_o1m6e","withRightAddons":"button__withRightAddons_o1m6e","ghost":"button__ghost_o1m6e","withLeftAddons":"button__withLeftAddons_o1m6e","link":"button__link_o1m6e","block":"button__block_o1m6e","nowrap":"button__nowrap_o1m6e","rounded":"button__rounded_o1m6e"};
 require('./index.css')
 
-const invertedColors = {"accent":"button__accent_gi4pl","loader":"button__loader_gi4pl","primary":"button__primary_gi4pl","secondary":"button__secondary_gi4pl","outlined":"button__outlined_gi4pl","tertiary":"button__tertiary_gi4pl","filled":"button__filled_gi4pl","transparent":"button__transparent_gi4pl","link":"button__link_gi4pl","ghost":"button__ghost_gi4pl","component":"button__component_gi4pl","loading":"button__loading_gi4pl"};
+const invertedColors = {"accent":"button__accent_1wvjm","loader":"button__loader_1wvjm","primary":"button__primary_1wvjm","secondary":"button__secondary_1wvjm","outlined":"button__outlined_1wvjm","tertiary":"button__tertiary_1wvjm","filled":"button__filled_1wvjm","transparent":"button__transparent_1wvjm","link":"button__link_1wvjm","ghost":"button__ghost_1wvjm","component":"button__component_1wvjm","loading":"button__loading_1wvjm"};
 require('./inverted.css')
 
+/* eslint-disable complexity */
 const colorStyles = {
@@ -43,3 +44,3 @@ default: defaultColors,
 };
-const BaseButton = React.forwardRef(({ children, view = 'secondary', leftAddons, rightAddons, size = 'm', block = false, className, spinnerClassName, dataTestId, href, loading = false, nowrap = false, colors = 'default', Component = href ? 'a' : 'button', onClick, styles = {}, colorStylesMap = { default: {}, inverted: {} }, ...restProps }, ref) => {
+const BaseButton = React.forwardRef(({ children, view = 'secondary', shape = 'rectangular', textResizing = 'hug', hint, leftAddons, rightAddons, size = 'm', block = false, className, spinnerClassName, dataTestId, href, loading = false, nowrap = false, colors = 'default', Component = href ? 'a' : 'button', onClick, styles = {}, colorStylesMap = { default: {}, inverted: {} }, ...restProps }, ref) => {
     if (['outlined', 'filled', 'transparent'].includes(view)) {
@@ -53,5 +54,6 @@ logWarning(view);
     const showLoader = loading || !loaderTimePassed;
+    const showHint = hint && ['m', 'l', 'xl'].includes(size);
     const iconOnly = !children;
     const componentProps = {
-        className: cn(commonStyles.component, commonStyles[view], commonStyles[size], styles[size], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, {
+        className: cn(commonStyles.component, commonStyles[view], commonStyles[size], commonStyles[textResizing], shape === 'rectangular' && styles[size], shape === 'rounded' && commonStyles[shape], colorStyles[colors].component, colorStyles[colors][view], colorStylesMap[colors].component, {
             [colorStylesMap[colors][view]]: Boolean(colorStylesMap[colors][view]),
@@ -65,2 +67,3 @@ [commonStyles.focused]: focused,
             [colorStyles[colors].loading]: showLoader,
+            [colorStylesMap[colors].loading]: showLoader,
         }, className),
@@ -74,5 +77,7 @@ 'data-test-id': dataTestId || null,
                 [commonStyles.nowrap]: nowrap,
-                [commonStyles.stretchText]: !(leftAddons || rightAddons),
-            }) }, children)),
-        showLoader && (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(commonStyles.loader, colorStyles[colors].loader, spinnerClassName) })),
+                [commonStyles.stretchText]: !(leftAddons || rightAddons) || textResizing === 'fill',
+            }) },
+            children,
+            showHint && React.createElement("span", { className: commonStyles.hint }, hint))),
+        showLoader && (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(commonStyles.loader, colorStyles[colors].loader, colorStylesMap[colors].loader, spinnerClassName) })),
         rightAddons && React.createElement("span", { className: commonStyles.addons }, rightAddons)));
@@ -79,0 +84,0 @@ useEffect(() => {

modern/desktop/Component.desktop.js

@@ -9,9 +9,9 @@ import React, { forwardRef } from 'react';
 
-const defaultColors = {"secondary":"button__secondary_58yq3","ghost":"button__ghost_58yq3","component":"button__component_58yq3","primary":"button__primary_58yq3","tertiary":"button__tertiary_58yq3","link":"button__link_58yq3"};
+const defaultColors = {"primary":"button__primary_j0tqe","loader":"button__loader_j0tqe","secondary":"button__secondary_j0tqe","ghost":"button__ghost_j0tqe","component":"button__component_j0tqe","loading":"button__loading_j0tqe","tertiary":"button__tertiary_j0tqe","link":"button__link_j0tqe"};
 require('./default.desktop.css')
 
-const styles = {"xxs":"button__xxs_1orpt","xs":"button__xs_1orpt","s":"button__s_1orpt","m":"button__m_1orpt","l":"button__l_1orpt","xl":"button__xl_1orpt"};
+const styles = {"xxs":"button__xxs_17blc","xs":"button__xs_17blc","s":"button__s_17blc","m":"button__m_17blc","l":"button__l_17blc","xl":"button__xl_17blc"};
 require('./desktop.css')
 
-const invertedColors = {"secondary":"button__secondary_132ou","ghost":"button__ghost_132ou","component":"button__component_132ou","primary":"button__primary_132ou","tertiary":"button__tertiary_132ou","link":"button__link_132ou"};
+const invertedColors = {"primary":"button__primary_1ezoa","loader":"button__loader_1ezoa","secondary":"button__secondary_1ezoa","ghost":"button__ghost_1ezoa","component":"button__component_1ezoa","loading":"button__loading_1ezoa","tertiary":"button__tertiary_1ezoa","link":"button__link_1ezoa"};
 require('./inverted.desktop.css')
@@ -18,0 +18,0 @@

modern/mobile/Component.mobile.js

@@ -9,9 +9,9 @@ import React, { forwardRef } from 'react';
 
-const defaultColors = {"secondary":"button__secondary_1jg8n","ghost":"button__ghost_1jg8n","component":"button__component_1jg8n","primary":"button__primary_1jg8n","tertiary":"button__tertiary_1jg8n","link":"button__link_1jg8n"};
+const defaultColors = {"primary":"button__primary_1vd83","loader":"button__loader_1vd83","secondary":"button__secondary_1vd83","ghost":"button__ghost_1vd83","component":"button__component_1vd83","loading":"button__loading_1vd83","tertiary":"button__tertiary_1vd83","link":"button__link_1vd83"};
 require('./default.mobile.css')
 
-const invertedColors = {"secondary":"button__secondary_byelr","ghost":"button__ghost_byelr","component":"button__component_byelr","primary":"button__primary_byelr","tertiary":"button__tertiary_byelr","link":"button__link_byelr"};
+const invertedColors = {"primary":"button__primary_pq9m2","loader":"button__loader_pq9m2","secondary":"button__secondary_pq9m2","ghost":"button__ghost_pq9m2","component":"button__component_pq9m2","loading":"button__loading_pq9m2","tertiary":"button__tertiary_pq9m2","link":"button__link_pq9m2"};
 require('./inverted.mobile.css')
 
-const styles = {"xxs":"button__xxs_guse0","xs":"button__xs_guse0","s":"button__s_guse0","m":"button__m_guse0","l":"button__l_guse0","xl":"button__xl_guse0"};
+const styles = {"xxs":"button__xxs_1hdea","xs":"button__xs_1hdea","s":"button__s_1hdea","m":"button__m_1hdea","l":"button__l_1hdea","xl":"button__xl_1hdea"};
 require('./mobile.css')
@@ -18,0 +18,0 @@

modern/typings.d.ts

@@ -17,2 +17,16 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
     /**
+     * Форма кнопки
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Ширина текстового контента
+     * @default hug
+     */
+    textResizing?: 'fill' | 'hug';
+    /**
+     *  Подпись под лейблом (видна только в размерах >= m)
+     */
+    hint?: ReactNode;
+    /**
      * Слот слева
@@ -19,0 +33,0 @@ */

package.json

 {
     "name": "@alfalab/core-components-button",
-    "version": "11.0.0",
+    "version": "11.1.0",
     "description": "",
@@ -20,3 +20,3 @@ "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
         "@alfalab/core-components-spinner": "^3.2.0",
-        "@alfalab/core-components-shared": "^0.8.0",
+        "@alfalab/core-components-shared": "^0.9.0",
         "@alfalab/hooks": "^1.13.0",
@@ -23,0 +23,0 @@ "classnames": "^2.3.1",

src/typings.ts

@@ -29,2 +29,19 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
     /**
+     * Форма кнопки
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+
+    /**
+     * Ширина текстового контента
+     * @default hug
+     */
+    textResizing?: 'fill' | 'hug';
+
+    /**
+     *  Подпись под лейблом (видна только в размерах >= m)
+     */
+    hint?: ReactNode;
+
+    /**
      * Слот слева
@@ -31,0 +48,0 @@ */

typings.d.ts

@@ -17,2 +17,16 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, ElementType, ReactNode } from 'react';
     /**
+     * Форма кнопки
+     * @default rectangular
+     */
+    shape?: 'rounded' | 'rectangular';
+    /**
+     * Ширина текстового контента
+     * @default hug
+     */
+    textResizing?: 'fill' | 'hug';
+    /**
+     *  Подпись под лейблом (видна только в размерах >= m)
+     */
+    hint?: ReactNode;
+    /**
      * Слот слева
@@ -19,0 +33,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

376721

increased by5.83%

Lines of code

8029

increased by6.05%

Dependency changes

• + Added@alfalab/core-components-shared@0.9.1(transitive)

• - Removed@alfalab/core-components-shared@0.8.0(transitive)

• Updated@alfalab/core-components-shared@^0.9.0