fix: Button disabled style with link or href case (#43091)

* fix: Button disabled style with link or href case

* chore: update

* fix: update link disable logic

* test: update snapshot

* chore: update

* chore: update code

Co-authored-by: wxh16144 <wxh16144@users.noreply.github.com>

* Update components/button/style/index.ts

Co-authored-by: Wuxh <wxh16144@qq.com>

---------

Co-authored-by: 洋 <hetongyang@bytedance.com>
Co-authored-by: wuxh <wxh1220@gmail.com>
Co-authored-by: wxh16144 <wxh16144@users.noreply.github.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: Wuxh <wxh16144@qq.com>

components/button/button.tsx

@@ -216,8 +216,6 @@ const InternalButton: React.ForwardRefRenderFunction<
 
   const linkButtonRestProps = omit(rest as ButtonProps & { navigate: any }, ['navigate']);
 
-  const hrefAndDisabled = linkButtonRestProps.href !== undefined && mergedDisabled;
-
   const classes = classNames(
     prefixCls,
     hashId,
@@ -232,7 +230,6 @@ const InternalButton: React.ForwardRefRenderFunction<
       [`${prefixCls}-block`]: block,
       [`${prefixCls}-dangerous`]: !!danger,
       [`${prefixCls}-rtl`]: direction === 'rtl',
-      [`${prefixCls}-disabled`]: hrefAndDisabled,
     },
     compactItemClassnames,
     className,
@@ -261,7 +258,9 @@ const InternalButton: React.ForwardRefRenderFunction<
     return wrapSSR(
       <a
         {...linkButtonRestProps}
-        className={classes}
+        className={classNames(classes, {
+          [`${prefixCls}-disabled`]: mergedDisabled,
+        })}
         style={fullStyle}
         onClick={handleClick}
         ref={buttonRef as React.Ref<HTMLAnchorElement>}

components/button/style/index.ts

@@ -115,8 +115,12 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
   };
 };
 
-const genHoverActiveButtonStyle = (hoverStyle: CSSObject, activeStyle: CSSObject): CSSObject => ({
-  '&:not(:disabled)': {
+const genHoverActiveButtonStyle = (
+  btnCls: string,
+  hoverStyle: CSSObject,
+  activeStyle: CSSObject,
+): CSSObject => ({
+  [`&:not(:disabled):not(${btnCls}-disabled)`]: {
     '&:hover': hoverStyle,
     '&:active': activeStyle,
   },
@@ -161,6 +165,7 @@ const genGhostButtonStyle = (
     boxShadow: 'none',
 
     ...genHoverActiveButtonStyle(
+      btnCls,
       {
         backgroundColor: 'transparent',
         ...hoverStyle,
@@ -180,7 +185,7 @@ const genGhostButtonStyle = (
 });
 
 const genSolidDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
-  '&:disabled': {
+  [`&:disabled, &${token.componentCls}-disabled`]: {
     ...genDisabledStyle(token),
   },
 });
@@ -190,7 +195,7 @@ const genSolidButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
 });
 
 const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
-  '&:disabled': {
+  [`&:disabled, &${token.componentCls}-disabled`]: {
     cursor: 'not-allowed',
     color: token.colorTextDisabled,
   },
@@ -206,6 +211,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
   boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`,
 
   ...genHoverActiveButtonStyle(
+    token.componentCls,
     {
       color: token.colorPrimaryHover,
       borderColor: token.colorPrimaryHover,
@@ -229,6 +235,7 @@ const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
     borderColor: token.colorError,
 
     ...genHoverActiveButtonStyle(
+      token.componentCls,
       {
         color: token.colorErrorHover,
         borderColor: token.colorErrorBorderHover,
@@ -260,6 +267,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
   boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`,
 
   ...genHoverActiveButtonStyle(
+    token.componentCls,
     {
       color: token.colorTextLightSolid,
       backgroundColor: token.colorPrimaryHover,
@@ -291,6 +299,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
     boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`,
 
     ...genHoverActiveButtonStyle(
+      token.componentCls,
       {
         backgroundColor: token.colorErrorHover,
       },
@@ -329,6 +338,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   color: token.colorLink,
 
   ...genHoverActiveButtonStyle(
+    token.componentCls,
     {
       color: token.colorLinkHover,
     },
@@ -343,6 +353,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
     color: token.colorError,
 
     ...genHoverActiveButtonStyle(
+      token.componentCls,
       {
         color: token.colorErrorHover,
       },
@@ -358,6 +369,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
 // Type: Text
 const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   ...genHoverActiveButtonStyle(
+    token.componentCls,
     {
       color: token.colorText,
       backgroundColor: token.colorBgTextHover,
@@ -375,6 +387,7 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
 
     ...genPureDisabledButtonStyle(token),
     ...genHoverActiveButtonStyle(
+      token.componentCls,
       {
         color: token.colorErrorHover,
         backgroundColor: token.colorErrorBg,
@@ -387,14 +400,6 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   },
 });
 
-// Href and Disabled
-const genDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
-  ...genDisabledStyle(token),
-  [`&${token.componentCls}:hover`]: {
-    ...genDisabledStyle(token),
-  },
-});
-
 const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
   const { componentCls } = token;
 
@@ -404,7 +409,6 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
     [`${componentCls}-dashed`]: genDashedButtonStyle(token),
     [`${componentCls}-link`]: genLinkButtonStyle(token),
     [`${componentCls}-text`]: genTextButtonStyle(token),
-    [`${componentCls}-disabled`]: genDisabledButtonStyle(token),
   };
 };
 
@@ -528,7 +532,7 @@ export default genComponentStyleHook('Button', (token) => {
     // Block
     genBlockButtonStyle(buttonToken),
 
-    // Group (type, ghost, danger, disabled, loading)
+    // Group (type, ghost, danger, loading)
     genTypeButtonStyle(buttonToken),
 
     // Button Group