fix(Button): loading is disabled (#7830)

- Fixes #7663
VKCOM · Oct 28, 2024 · 80116e3 · 80116e3
1 parent 6fda214
commit 80116e3
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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}
     >