From d177276ca99857110eac987f6b7de5de412d3617 Mon Sep 17 00:00:00 2001
From: Daniil Suvorov <severecloud@gmail.com>
Date: Thu, 24 Oct 2024 15:10:20 +0300
Subject: [PATCH] fix(Button): loading is disabled - Fixes #7663

---
 .../vkui/src/components/Button/Button.module.css  | 15 ++++++++-------
 packages/vkui/src/components/Button/Button.tsx    |  3 +++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/vkui/src/components/Button/Button.module.css b/packages/vkui/src/components/Button/Button.module.css
index 23c0f0fbc6..0707766cd3 100644
--- a/packages/vkui/src/components/Button/Button.module.css
+++ b/packages/vkui/src/components/Button/Button.module.css
@@ -18,8 +18,9 @@
   border-radius: var(--vkui--size_border_radius_rounded--regular);
 }
 
-.loading {
-  cursor: progress;
+.loading:not(.disabled) {
+  /* stylelint-disable-next-line declaration-no-important -- перебиваем disabled из Clickable */
+  cursor: progress !important;
 }
 
 .singleIcon {
@@ -67,14 +68,14 @@
   text-align: end;
 }
 
-.host[disabled] {
+.disabled {
   opacity: var(--vkui--opacity_disable);
 }
 
-.modePrimary[disabled]:not(.appearanceOverlay):not(.appearanceNegative):not(.appearancePositive),
-.modeSecondary[disabled]:not(.appearanceOverlay),
-.modeTertiary[disabled]:not(.appearanceOverlay),
-.modeOutline[disabled]:not(.appearanceOverlay) {
+.modePrimary.disabled:not(.appearanceOverlay):not(.appearanceNegative):not(.appearancePositive),
+.modeSecondary.disabled:not(.appearanceOverlay),
+.modeTertiary.disabled:not(.appearanceOverlay),
+.modeOutline.disabled:not(.appearanceOverlay) {
   opacity: 0.64;
 }
 
diff --git a/packages/vkui/src/components/Button/Button.tsx b/packages/vkui/src/components/Button/Button.tsx
index c9e04ddfb2..eaff417080 100644
--- a/packages/vkui/src/components/Button/Button.tsx
+++ b/packages/vkui/src/components/Button/Button.tsx
@@ -77,6 +77,7 @@ export const Button = ({
   className,
   disableSpinnerAnimation,
   rounded,
+  disabled,
   ...restProps
 }: ButtonProps): React.ReactNode => {
   const hasIcons = Boolean(before || after);
@@ -90,6 +91,7 @@ export const Button = ({
       activeMode={styles.active}
       Component={restProps.href ? 'a' : 'button'}
       focusVisibleMode="outside"
+      disabled={loading || disabled}
       {...restProps}
       onClick={loading ? undefined : onClick}
       className={classNames(
@@ -106,6 +108,7 @@ export const Button = ({
         hasIconOnly && !stretched && styles.singleIcon,
         loading && styles.loading,
         rounded && styles.rounded,
+        disabled && styles.disabled,
       )}
       getRootRef={getRootRef}
     >