@alfalab/core-components 41.9.0 → 41.11.0

package/bottom-sheet/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 1nlbo */
+/* hash: 18ok9 */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -45,20 +45,20 @@
 } :root {
     --bottom-sheet-in-transition: transform 0.5s cubic-bezier(0.09, 0.91, 0.18, 0.99);
     --bottom-sheet-out-transition: transform 0.3s ease;
-} .bottom-sheet__modal_58pi8 {
+} .bottom-sheet__modal_1pkvi {
     background-color: transparent;
     position: fixed;
     bottom: 0;
     width: 100%;
     max-width: 600px;
     pointer-events: none;
-} .bottom-sheet__wrapper_58pi8 {
+} .bottom-sheet__wrapper_1pkvi {
     transform: translateY(100%);
     overflow: hidden;
     pointer-events: none;
     border-top-right-radius: var(--border-radius-xl);
     border-top-left-radius: var(--border-radius-xl);
-} .bottom-sheet__component_58pi8 {
+} .bottom-sheet__component_1pkvi {
     overflow: hidden;
     position: relative;
     display: flex;
@@ -66,16 +66,16 @@
     border-radius: inherit;
     background-color: var(--color-light-bg-primary);
     pointer-events: all;
-} .bottom-sheet__withTransition_58pi8 {
+} .bottom-sheet__withTransition_1pkvi {
     transition: var(--bottom-sheet-out-transition);
-} .bottom-sheet__scrollableContainer_58pi8 {
+} .bottom-sheet__scrollableContainer_1pkvi {
     overflow: auto;
     display: flex;
     flex-direction: column;
     position: relative;
     height: 100%;
     background-color: inherit;
-} .bottom-sheet__marker_58pi8 {
+} .bottom-sheet__marker_1pkvi {
     position: fixed;
     top: var(--gap-2xs);
     left: 50%;
@@ -85,7 +85,7 @@
     transform: translateX(-50%);
     background-color: var(--color-light-graphic-quaternary);
     z-index: 1000;
-} .bottom-sheet__content_58pi8 {
+} .bottom-sheet__content_1pkvi {
     position: relative;
     z-index: 0;
     display: flex;
@@ -94,73 +94,73 @@
     padding: 0 var(--gap-m);
     color: var(--color-light-text-primary);
     background-color: inherit;
-} .bottom-sheet__noHeader_58pi8 {
+} .bottom-sheet__noHeader_1pkvi {
     padding-top: var(--gap-m);
-} .bottom-sheet__noFooter_58pi8 {
+} .bottom-sheet__noFooter_1pkvi {
     padding-bottom: var(--gap-m);
-} .bottom-sheet__scrollLocked_58pi8 {
+} .bottom-sheet__scrollLocked_1pkvi {
     overflow: hidden;
-} .bottom-sheet__hiddenScrollbar_58pi8 {
+} .bottom-sheet__hiddenScrollbar_1pkvi {
     scrollbar-width: none
-} .bottom-sheet__hiddenScrollbar_58pi8::-webkit-scrollbar {
+} .bottom-sheet__hiddenScrollbar_1pkvi::-webkit-scrollbar {
         width: 0;
         height: 0;
-    } .bottom-sheet__disabledPointerEvents_58pi8 {
+    } .bottom-sheet__disabledPointerEvents_1pkvi {
     pointer-events: none;
-} .bottom-sheet__appear_58pi8 .bottom-sheet__wrapper_58pi8, .bottom-sheet__enter_58pi8 .bottom-sheet__wrapper_58pi8 {
+} .bottom-sheet__appear_1pkvi .bottom-sheet__wrapper_1pkvi, .bottom-sheet__enter_1pkvi .bottom-sheet__wrapper_1pkvi {
         transition: none;
-    } .bottom-sheet__appearActive_58pi8 .bottom-sheet__wrapper_58pi8, .bottom-sheet__enterActive_58pi8 .bottom-sheet__wrapper_58pi8 {
+    } .bottom-sheet__appearActive_1pkvi .bottom-sheet__wrapper_1pkvi, .bottom-sheet__enterActive_1pkvi .bottom-sheet__wrapper_1pkvi {
         transition: var(--bottom-sheet-in-transition);
         transform: translateY(0);
-    } .bottom-sheet__enterDone_58pi8 .bottom-sheet__wrapper_58pi8, .bottom-sheet__appearDone_58pi8 .bottom-sheet__wrapper_58pi8 {
+    } .bottom-sheet__enterDone_1pkvi .bottom-sheet__wrapper_1pkvi, .bottom-sheet__appearDone_1pkvi .bottom-sheet__wrapper_1pkvi {
         transform: translateY(0);
-    } .bottom-sheet__exit_58pi8 .bottom-sheet__wrapper_58pi8 {
+    } .bottom-sheet__exit_1pkvi .bottom-sheet__wrapper_1pkvi {
         transform: translateY(0);
-    } .bottom-sheet__exitActive_58pi8 .bottom-sheet__wrapper_58pi8 {
+    } .bottom-sheet__exitActive_1pkvi .bottom-sheet__wrapper_1pkvi {
         transition: var(--bottom-sheet-out-transition);
         transform: translateY(100%);
-    } .bottom-sheet__background-accent_58pi8 {
+    } .bottom-sheet__background-accent_1pkvi {
             background-color: var(--color-light-bg-accent);
-        } .bottom-sheet__background-info_58pi8 {
+        } .bottom-sheet__background-info_1pkvi {
             background-color: var(--color-light-bg-info);
-        } .bottom-sheet__background-attention-muted_58pi8 {
+        } .bottom-sheet__background-attention-muted_1pkvi {
             background-color: var(--color-light-bg-attention-muted);
-        } .bottom-sheet__background-positive-muted_58pi8 {
+        } .bottom-sheet__background-positive-muted_1pkvi {
             background-color: var(--color-light-bg-positive-muted);
-        } .bottom-sheet__background-negative-muted_58pi8 {
+        } .bottom-sheet__background-negative-muted_1pkvi {
             background-color: var(--color-light-bg-negative-muted);
-        } .bottom-sheet__background-primary_58pi8 {
+        } .bottom-sheet__background-primary_1pkvi {
             background-color: var(--color-light-bg-primary);
-        } .bottom-sheet__background-primary-inverted_58pi8 {
+        } .bottom-sheet__background-primary-inverted_1pkvi {
             background-color: var(--color-light-bg-primary-inverted);
-        } .bottom-sheet__background-secondary_58pi8 {
+        } .bottom-sheet__background-secondary_1pkvi {
             background-color: var(--color-light-bg-secondary);
-        } .bottom-sheet__background-secondary-inverted_58pi8 {
+        } .bottom-sheet__background-secondary-inverted_1pkvi {
             background-color: var(--color-light-bg-secondary-inverted);
-        } .bottom-sheet__background-tertiary_58pi8 {
+        } .bottom-sheet__background-tertiary_1pkvi {
             background-color: var(--color-light-bg-tertiary);
-        } .bottom-sheet__background-tertiary-inverted_58pi8 {
+        } .bottom-sheet__background-tertiary-inverted_1pkvi {
             background-color: var(--color-light-bg-tertiary-inverted);
-        } .bottom-sheet__background-quaternary_58pi8 {
+        } .bottom-sheet__background-quaternary_1pkvi {
             background-color: var(--color-light-bg-quaternary);
-        } .bottom-sheet__background-quaternary-inverted_58pi8 {
+        } .bottom-sheet__background-quaternary-inverted_1pkvi {
             background-color: var(--color-light-bg-quaternary-inverted);
-        } .bottom-sheet__background-specialbg-component_58pi8 {
+        } .bottom-sheet__background-specialbg-component_1pkvi {
             background-color: var(--color-light-specialbg-component);
-        } .bottom-sheet__background-specialbg-component-inverted_58pi8 {
+        } .bottom-sheet__background-specialbg-component-inverted_1pkvi {
             background-color: var(--color-light-specialbg-component-inverted);
-        } .bottom-sheet__background-specialbg-primary-grouped_58pi8 {
+        } .bottom-sheet__background-specialbg-primary-grouped_1pkvi {
             background-color: var(--color-light-specialbg-primary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-grouped_58pi8 {
+        } .bottom-sheet__background-specialbg-secondary-grouped_1pkvi {
             background-color: var(--color-light-specialbg-secondary-grouped);
-        } .bottom-sheet__background-specialbg-tertiary-grouped_58pi8 {
+        } .bottom-sheet__background-specialbg-tertiary-grouped_1pkvi {
             background-color: var(--color-light-specialbg-tertiary-grouped);
-        } .bottom-sheet__background-specialbg-secondary-transparent_58pi8 {
+        } .bottom-sheet__background-specialbg-secondary-transparent_1pkvi {
             background-color: var(--color-light-specialbg-secondary-transparent);
-        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_58pi8 {
+        } .bottom-sheet__background-specialbg-secondary-transparent-inverted_1pkvi {
             background-color: var(--color-light-specialbg-secondary-transparent-inverted);
-        } .bottom-sheet__background-specialbg-tertiary-transparent_58pi8 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent_1pkvi {
             background-color: var(--color-light-specialbg-tertiary-transparent);
-        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_58pi8 {
+        } .bottom-sheet__background-specialbg-tertiary-transparent-inverted_1pkvi {
             background-color: var(--color-light-specialbg-tertiary-transparent-inverted);
         }

package/button/Component.d.ts

@@ -26,6 +26,10 @@ type ComponentProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
     /**
      * Выводит ссылку в виде кнопки
      */

package/button/Component.js

@@ -13,13 +13,18 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"component":"button__component_pv59f","focused":"button__focused_pv59f","loading":"button__loading_pv59f","text":"button__text_pv59f","addons":"button__addons_pv59f","stretchText":"button__stretchText_pv59f","loader":"button__loader_pv59f","xxs":"button__xxs_pv59f","iconOnly":"button__iconOnly_pv59f","xs":"button__xs_pv59f","s":"button__s_pv59f","m":"button__m_pv59f","l":"button__l_pv59f","xl":"button__xl_pv59f","withRightAddons":"button__withRightAddons_pv59f","ghost":"button__ghost_pv59f","withLeftAddons":"button__withLeftAddons_pv59f","link":"button__link_pv59f","block":"button__block_pv59f","nowrap":"button__nowrap_pv59f"};
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
+var styles = {"component":"button__component_11tf5","focused":"button__focused_11tf5","loading":"button__loading_11tf5","text":"button__text_11tf5","addons":"button__addons_11tf5","stretchText":"button__stretchText_11tf5","loader":"button__loader_11tf5","xxs":"button__xxs_11tf5","iconOnly":"button__iconOnly_11tf5","xs":"button__xs_11tf5","s":"button__s_11tf5","m":"button__m_11tf5","l":"button__l_11tf5","xl":"button__xl_11tf5","withRightAddons":"button__withRightAddons_11tf5","ghost":"button__ghost_11tf5","withLeftAddons":"button__withLeftAddons_11tf5","link":"button__link_11tf5","block":"button__block_11tf5","nowrap":"button__nowrap_11tf5"};
 require('./index.css');
 
-var defaultColors = {"accent":"button__accent_18r4x","loader":"button__loader_18r4x","primary":"button__primary_18r4x","secondary":"button__secondary_18r4x","outlined":"button__outlined_18r4x","tertiary":"button__tertiary_18r4x","filled":"button__filled_18r4x","transparent":"button__transparent_18r4x","link":"button__link_18r4x","ghost":"button__ghost_18r4x","component":"button__component_18r4x","loading":"button__loading_18r4x"};
+var defaultColors = {"accent":"button__accent_1fcrb","loader":"button__loader_1fcrb","primary":"button__primary_1fcrb","secondary":"button__secondary_1fcrb","outlined":"button__outlined_1fcrb","tertiary":"button__tertiary_1fcrb","filled":"button__filled_1fcrb","transparent":"button__transparent_1fcrb","link":"button__link_1fcrb","ghost":"button__ghost_1fcrb","component":"button__component_1fcrb","loading":"button__loading_1fcrb"};
 require('./default.css');
 
-var invertedColors = {"accent":"button__accent_6p93p","loader":"button__loader_6p93p","primary":"button__primary_6p93p","secondary":"button__secondary_6p93p","outlined":"button__outlined_6p93p","tertiary":"button__tertiary_6p93p","filled":"button__filled_6p93p","transparent":"button__transparent_6p93p","link":"button__link_6p93p","ghost":"button__ghost_6p93p","component":"button__component_6p93p","loading":"button__loading_6p93p"};
+var invertedColors = {"accent":"button__accent_yt5j3","loader":"button__loader_yt5j3","primary":"button__primary_yt5j3","secondary":"button__secondary_yt5j3","outlined":"button__outlined_yt5j3","tertiary":"button__tertiary_yt5j3","filled":"button__filled_yt5j3","transparent":"button__transparent_yt5j3","link":"button__link_yt5j3","ghost":"button__ghost_yt5j3","component":"button__component_yt5j3","loading":"button__loading_yt5j3"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -49,7 +54,7 @@ var logWarning = function (view) {
 };
 var Button = React__default.default.forwardRef(function (_a, ref) {
     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, 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, restProps = tslib.__rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick"]);
+    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, restProps = tslib.__rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
@@ -78,7 +83,7 @@ var Button = React__default.default.forwardRef(function (_a, ref) {
                 _c[styles.nowrap] = nowrap,
                 _c[styles.stretchText] = !(leftAddons || rightAddons),
                 _c)) }, children)),
-        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { visible: showLoader, className: cn__default.default(styles.loader, colorStyles[colors].loader) })),
+        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(styles.loader, colorStyles[colors].loader, spinnerClassName) })),
         rightAddons && React__default.default.createElement("span", { className: styles.addons }, rightAddons)));
     React.useEffect(function () {
         if (loading) {

package/button/cssm/Component.d.ts

@@ -26,6 +26,10 @@ type ComponentProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
     /**
      * Выводит ссылку в виде кнопки
      */

package/button/cssm/Component.js

@@ -19,6 +19,11 @@ var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 var defaultColors__default = /*#__PURE__*/_interopDefaultCompat(defaultColors);
 var invertedColors__default = /*#__PURE__*/_interopDefaultCompat(invertedColors);
 
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
 var colorStyles = {
     default: defaultColors__default.default,
     inverted: invertedColors__default.default,
@@ -46,7 +51,7 @@ var logWarning = function (view) {
 };
 var Button = React__default.default.forwardRef(function (_a, ref) {
     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, 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, restProps = tslib.__rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick"]);
+    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, restProps = tslib.__rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
@@ -75,7 +80,7 @@ var Button = React__default.default.forwardRef(function (_a, ref) {
                 _c[styles__default.default.nowrap] = nowrap,
                 _c[styles__default.default.stretchText] = !(leftAddons || rightAddons),
                 _c)) }, children)),
-        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { visible: showLoader, className: cn__default.default(styles__default.default.loader, colorStyles[colors].loader) })),
+        showLoader && (React__default.default.createElement(coreComponentsSpinner.Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn__default.default(styles__default.default.loader, colorStyles[colors].loader, spinnerClassName) })),
         rightAddons && React__default.default.createElement("span", { className: styles__default.default.addons }, rightAddons)));
     React.useEffect(function () {
         if (loading) {

package/button/default.css

@@ -1,4 +1,4 @@
-/* hash: iukmi */
+/* hash: nbxut */
 :root {
 } /* deprecated */ :root {
     --color-light-bg-accent: #ef3124;
@@ -112,165 +112,165 @@
     --button-spinner-static-color: var(--color-static-graphic-light);
     --button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
     --button-spinner-default-color: var(--color-light-graphic-primary);
-} .button__accent_18r4x {
+} .button__accent_1fcrb {
     color: var(--button-accent-color);
     background-color: var(--button-accent-base-bg-color);
     border: 1px solid transparent
-} .button__accent_18r4x:hover {
+} .button__accent_1fcrb:hover {
         background-color: var(--button-accent-hover-bg-color)
-    } @media (hover: none) { .button__accent_18r4x:hover {
+    } @media (hover: none) { .button__accent_1fcrb:hover {
             background-color: var(--button-accent-base-bg-color)
     }
-        } .button__accent_18r4x:active {
+        } .button__accent_1fcrb:active {
         background-color: var(--button-accent-active-bg-color);
-    } .button__accent_18r4x > .button__loader_18r4x {
+    } .button__accent_1fcrb > .button__loader_1fcrb {
         color: var(--button-spinner-static-color);
-    } .button__primary_18r4x {
+    } .button__primary_1fcrb {
     color: var(--button-primary-color);
     background-color: var(--button-primary-base-bg-color);
     border: 1px solid transparent
-} .button__primary_18r4x:hover {
+} .button__primary_1fcrb:hover {
         background-color: var(--button-primary-hover-bg-color)
-    } @media (hover: none) { .button__primary_18r4x:hover {
+    } @media (hover: none) { .button__primary_1fcrb:hover {
             background-color: var(--button-primary-base-bg-color)
     }
-        } .button__primary_18r4x:active {
+        } .button__primary_1fcrb:active {
         background-color: var(--button-primary-active-bg-color);
-    } .button__primary_18r4x > .button__loader_18r4x {
+    } .button__primary_1fcrb > .button__loader_1fcrb {
         color: var(--button-spinner-primary-color);
-    } .button__secondary_18r4x {
+    } .button__secondary_1fcrb {
     color: var(--button-secondary-color);
     background-color: var(--button-secondary-base-bg-color);
     border: 1px solid var(--button-secondary-base-border-color)
-} .button__secondary_18r4x:hover {
+} .button__secondary_1fcrb:hover {
         background-color: var(--button-secondary-hover-bg-color)
-    } @media (hover: none) { .button__secondary_18r4x:hover {
+    } @media (hover: none) { .button__secondary_1fcrb:hover {
             background-color: var(--button-secondary-base-bg-color)
     }
-        } .button__secondary_18r4x:active {
+        } .button__secondary_1fcrb:active {
         background-color: var(--button-secondary-active-bg-color);
-    } .button__secondary_18r4x > .button__loader_18r4x {
+    } .button__secondary_1fcrb > .button__loader_1fcrb {
         color: var(--button-spinner-default-color);
-    } .button__outlined_18r4x {
+    } .button__outlined_1fcrb {
     color: var(--button-outlined-color);
     background-color: var(--button-outlined-base-bg-color);
     border: 1px solid var(--button-outlined-base-border-color)
-} .button__outlined_18r4x:hover {
+} .button__outlined_1fcrb:hover {
         background-color: var(--button-outlined-hover-bg-color)
-    } @media (hover: none) { .button__outlined_18r4x:hover {
+    } @media (hover: none) { .button__outlined_1fcrb:hover {
             background-color: var(--button-outlined-base-bg-color)
     }
-        } .button__outlined_18r4x:active {
+        } .button__outlined_1fcrb:active {
         background-color: var(--button-outlined-active-bg-color);
-    } .button__tertiary_18r4x {
+    } .button__tertiary_1fcrb {
     color: var(--button-tertiary-color);
     background-color: var(--button-tertiary-base-bg-color);
     border: 1px solid var(--button-tertiary-base-border-color)
-} .button__tertiary_18r4x:hover {
+} .button__tertiary_1fcrb:hover {
         background-color: var(--button-tertiary-hover-bg-color);
         border-color: var(--button-tertiary-hover-border-color)
-    } @media (hover: none) { .button__tertiary_18r4x:hover {
+    } @media (hover: none) { .button__tertiary_1fcrb:hover {
             background-color: var(--button-tertiary-base-bg-color);
             border-color: var(--button-tertiary-base-border-color)
     }
-        } .button__tertiary_18r4x:active {
+        } .button__tertiary_1fcrb:active {
         background-color: var(--button-tertiary-active-bg-color);
-    } .button__tertiary_18r4x > .button__loader_18r4x {
+    } .button__tertiary_1fcrb > .button__loader_1fcrb {
         color: var(--button-spinner-default-color);
-    } .button__filled_18r4x {
+    } .button__filled_1fcrb {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-quaternary)
-} .button__filled_18r4x:hover {
+} .button__filled_1fcrb:hover {
         background-color: var(--color-light-bg-quaternary-shade-7)
-    } @media (hover: none) { .button__filled_18r4x:hover {
+    } @media (hover: none) { .button__filled_1fcrb:hover {
             background-color: var(--color-light-bg-quaternary)
     }
-        } .button__filled_18r4x:active {
+        } .button__filled_1fcrb:active {
         background-color: var(--color-light-bg-quaternary-shade-15);
-    } .button__transparent_18r4x {
+    } .button__transparent_1fcrb {
     color: var(--color-light-text-primary);
     background-color: var(--color-light-bg-primary-inverted-alpha-10)
-} .button__transparent_18r4x:hover {
+} .button__transparent_1fcrb:hover {
         background-color: var(--color-light-bg-primary-inverted-alpha-20)
-    } @media (hover: none) { .button__transparent_18r4x:hover {
+    } @media (hover: none) { .button__transparent_1fcrb:hover {
             background-color: var(--color-light-bg-primary-inverted-alpha-10)
     }
-        } .button__transparent_18r4x:active {
+        } .button__transparent_1fcrb:active {
         background-color: var(--color-light-bg-primary-inverted-alpha-40);
-    } .button__link_18r4x {
+    } .button__link_1fcrb {
     color: var(--button-link-base-color);
     background-color: transparent;
     border: 1px solid transparent
-} .button__link_18r4x:hover {
+} .button__link_1fcrb:hover {
         background-color: var(--button-link-hover-bg-color)
-    } @media (hover: none) { .button__link_18r4x:hover {
+    } @media (hover: none) { .button__link_1fcrb:hover {
             background-color: transparent
     }
-        } .button__link_18r4x:active {
+        } .button__link_1fcrb:active {
         background-color: var(--button-link-active-bg-color);
-    } .button__link_18r4x > .button__loader_18r4x {
+    } .button__link_1fcrb > .button__loader_1fcrb {
         color: var(--button-spinner-default-color);
-    } .button__ghost_18r4x {
+    } .button__ghost_1fcrb {
     color: var(--button-ghost-base-color)
-} .button__ghost_18r4x:hover {
+} .button__ghost_1fcrb:hover {
         color: var(--button-ghost-hover-color)
-    } @media (hover: none) { .button__ghost_18r4x:hover {
+    } @media (hover: none) { .button__ghost_1fcrb:hover {
             color: var(--button-ghost-base-color)
     }
-        } .button__ghost_18r4x:active {
+        } .button__ghost_1fcrb:active {
         color: var(--button-ghost-active-color);
-    } .button__ghost_18r4x > .button__loader_18r4x {
+    } .button__ghost_1fcrb > .button__loader_1fcrb {
         color: var(--button-spinner-default-color);
-    } /* Disabled */ .button__component_18r4x[disabled].button__accent_18r4x {
+    } /* Disabled */ .button__component_1fcrb[disabled].button__accent_1fcrb {
         color: var(--button-accent-disabled-color);
         background-color: var(--button-accent-disabled-bg-color)
-    } .button__component_18r4x[disabled].button__accent_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__accent_1fcrb.button__loading_1fcrb {
             background-color: var(--button-accent-base-bg-color);
-        } .button__component_18r4x[disabled].button__primary_18r4x {
+        } .button__component_1fcrb[disabled].button__primary_1fcrb {
         color: var(--button-primary-disabled-color);
         background-color: var(--button-primary-disabled-bg-color)
-    } .button__component_18r4x[disabled].button__primary_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__primary_1fcrb.button__loading_1fcrb {
             background-color: var(--button-primary-base-bg-color);
-        } .button__component_18r4x[disabled].button__secondary_18r4x {
+        } .button__component_1fcrb[disabled].button__secondary_1fcrb {
         color: var(--button-secondary-disabled-color);
         background-color: var(--button-secondary-disabled-bg-color);
         border-color: var(--button-secondary-disabled-border-color)
-    } .button__component_18r4x[disabled].button__secondary_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__secondary_1fcrb.button__loading_1fcrb {
             color: var(--button-secondary-color);
             background-color: var(--button-secondary-base-bg-color);
             border-color: var(--button-secondary-base-border-color);
-        } .button__component_18r4x[disabled].button__outlined_18r4x {
+        } .button__component_1fcrb[disabled].button__outlined_1fcrb {
         color: var(--button-outlined-disabled-color);
         background-color: var(--button-outlined-disabled-bg-color);
         border-color: var(--button-outlined-disabled-border-color)
-    } .button__component_18r4x[disabled].button__outlined_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__outlined_1fcrb.button__loading_1fcrb {
             color: var(--button-outlined-color);
-        } .button__component_18r4x[disabled].button__tertiary_18r4x {
+        } .button__component_1fcrb[disabled].button__tertiary_1fcrb {
         color: var(--button-tertiary-disabled-color);
         background-color: var(--button-tertiary-disabled-bg-color);
         border-color: var(--button-tertiary-disabled-border-color)
-    } .button__component_18r4x[disabled].button__tertiary_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__tertiary_1fcrb.button__loading_1fcrb {
             color: var(--button-tertiary-color);
             border-color: var(--button-tertiary-base-border-color);
-        } .button__component_18r4x[disabled].button__filled_18r4x {
+        } .button__component_1fcrb[disabled].button__filled_1fcrb {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-quaternary-alpha-30)
-    } .button__component_18r4x[disabled].button__filled_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__filled_1fcrb.button__loading_1fcrb {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-quaternary);
-        } .button__component_18r4x[disabled].button__transparent_18r4x {
+        } .button__component_1fcrb[disabled].button__transparent_1fcrb {
         color: var(--color-light-text-primary-alpha-30);
         background-color: var(--color-light-bg-primary-inverted-alpha-3)
-    } .button__component_18r4x[disabled].button__transparent_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__transparent_1fcrb.button__loading_1fcrb {
             color: var(--color-light-text-primary);
             background-color: var(--color-light-bg-primary-inverted-alpha-10);
-        } .button__component_18r4x[disabled].button__link_18r4x {
+        } .button__component_1fcrb[disabled].button__link_1fcrb {
         color: var(--button-link-disabled-color);
         background-color: transparent
-    } .button__component_18r4x[disabled].button__link_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__link_1fcrb.button__loading_1fcrb {
             color: var(--button-link-base-color);
-        } .button__component_18r4x[disabled].button__ghost_18r4x {
+        } .button__component_1fcrb[disabled].button__ghost_1fcrb {
         color: var(--button-ghost-disabled-color)
-    } .button__component_18r4x[disabled].button__ghost_18r4x.button__loading_18r4x {
+    } .button__component_1fcrb[disabled].button__ghost_1fcrb.button__loading_1fcrb {
             color: var(--button-ghost-base-color);
         }

package/button/esm/Component.d.ts

@@ -26,6 +26,10 @@ type ComponentProps = {
      * Дополнительный класс
      */
     className?: string;
+    /**
+     * Дополнительный класс для спиннера
+     */
+    spinnerClassName?: string;
     /**
      * Выводит ссылку в виде кнопки
      */

package/button/esm/Component.js

@@ -5,13 +5,18 @@ import cn from 'classnames';
 import { Spinner } from '../../spinner/esm';
 import { useFocus } from '@alfalab/hooks';
 
-var styles = {"component":"button__component_pv59f","focused":"button__focused_pv59f","loading":"button__loading_pv59f","text":"button__text_pv59f","addons":"button__addons_pv59f","stretchText":"button__stretchText_pv59f","loader":"button__loader_pv59f","xxs":"button__xxs_pv59f","iconOnly":"button__iconOnly_pv59f","xs":"button__xs_pv59f","s":"button__s_pv59f","m":"button__m_pv59f","l":"button__l_pv59f","xl":"button__xl_pv59f","withRightAddons":"button__withRightAddons_pv59f","ghost":"button__ghost_pv59f","withLeftAddons":"button__withLeftAddons_pv59f","link":"button__link_pv59f","block":"button__block_pv59f","nowrap":"button__nowrap_pv59f"};
+var getDataTestId = function (dataTestId, element) {
+    var elementPart = element ? "-".concat(element.toLowerCase()) : '';
+    return dataTestId ? "".concat(dataTestId).concat(elementPart) : undefined;
+};
+
+var styles = {"component":"button__component_11tf5","focused":"button__focused_11tf5","loading":"button__loading_11tf5","text":"button__text_11tf5","addons":"button__addons_11tf5","stretchText":"button__stretchText_11tf5","loader":"button__loader_11tf5","xxs":"button__xxs_11tf5","iconOnly":"button__iconOnly_11tf5","xs":"button__xs_11tf5","s":"button__s_11tf5","m":"button__m_11tf5","l":"button__l_11tf5","xl":"button__xl_11tf5","withRightAddons":"button__withRightAddons_11tf5","ghost":"button__ghost_11tf5","withLeftAddons":"button__withLeftAddons_11tf5","link":"button__link_11tf5","block":"button__block_11tf5","nowrap":"button__nowrap_11tf5"};
 require('./index.css');
 
-var defaultColors = {"accent":"button__accent_18r4x","loader":"button__loader_18r4x","primary":"button__primary_18r4x","secondary":"button__secondary_18r4x","outlined":"button__outlined_18r4x","tertiary":"button__tertiary_18r4x","filled":"button__filled_18r4x","transparent":"button__transparent_18r4x","link":"button__link_18r4x","ghost":"button__ghost_18r4x","component":"button__component_18r4x","loading":"button__loading_18r4x"};
+var defaultColors = {"accent":"button__accent_1fcrb","loader":"button__loader_1fcrb","primary":"button__primary_1fcrb","secondary":"button__secondary_1fcrb","outlined":"button__outlined_1fcrb","tertiary":"button__tertiary_1fcrb","filled":"button__filled_1fcrb","transparent":"button__transparent_1fcrb","link":"button__link_1fcrb","ghost":"button__ghost_1fcrb","component":"button__component_1fcrb","loading":"button__loading_1fcrb"};
 require('./default.css');
 
-var invertedColors = {"accent":"button__accent_6p93p","loader":"button__loader_6p93p","primary":"button__primary_6p93p","secondary":"button__secondary_6p93p","outlined":"button__outlined_6p93p","tertiary":"button__tertiary_6p93p","filled":"button__filled_6p93p","transparent":"button__transparent_6p93p","link":"button__link_6p93p","ghost":"button__ghost_6p93p","component":"button__component_6p93p","loading":"button__loading_6p93p"};
+var invertedColors = {"accent":"button__accent_yt5j3","loader":"button__loader_yt5j3","primary":"button__primary_yt5j3","secondary":"button__secondary_yt5j3","outlined":"button__outlined_yt5j3","tertiary":"button__tertiary_yt5j3","filled":"button__filled_yt5j3","transparent":"button__transparent_yt5j3","link":"button__link_yt5j3","ghost":"button__ghost_yt5j3","component":"button__component_yt5j3","loading":"button__loading_yt5j3"};
 require('./inverted.css');
 
 var colorStyles = {
@@ -41,7 +46,7 @@ var logWarning = function (view) {
 };
 var Button = React.forwardRef(function (_a, ref) {
     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, 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, restProps = __rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick"]);
+    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, restProps = __rest(_a, ["children", "view", "leftAddons", "rightAddons", "size", "block", "className", "spinnerClassName", "dataTestId", "href", "loading", "nowrap", "colors", "Component", "onClick"]);
     if (['outlined', 'filled', 'transparent'].includes(view)) {
         logWarning(view);
     }
@@ -70,7 +75,7 @@ var Button = React.forwardRef(function (_a, ref) {
                 _c[styles.nowrap] = nowrap,
                 _c[styles.stretchText] = !(leftAddons || rightAddons),
                 _c)) }, children)),
-        showLoader && (React.createElement(Spinner, { visible: showLoader, className: cn(styles.loader, colorStyles[colors].loader) })),
+        showLoader && (React.createElement(Spinner, { dataTestId: getDataTestId(dataTestId, 'loader'), visible: true, className: cn(styles.loader, colorStyles[colors].loader, spinnerClassName) })),
         rightAddons && React.createElement("span", { className: styles.addons }, rightAddons)));
     useEffect(function () {
         if (loading) {