fix: resolve ghost button lose disabled state when use type='ghost' (#43558)

components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -165,7 +165,7 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
             class="ant-space-item"
           >
             <button
-              class="ant-btn ant-btn-ghost ant-btn-sm"
+              class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost"
               type="button"
             >
               <span>
@@ -247,7 +247,7 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] =
             class="ant-space-item"
           >
             <button
-              class="ant-btn ant-btn-ghost ant-btn-sm ant-btn-dangerous"
+              class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-btn-dangerous"
               type="button"
             >
               <span>

components/alert/__tests__/__snapshots__/demo.test.ts.snap

@@ -165,7 +165,7 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
             class="ant-space-item"
           >
             <button
-              class="ant-btn ant-btn-ghost ant-btn-sm"
+              class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost"
               type="button"
             >
               <span>
@@ -247,7 +247,7 @@ exports[`renders components/alert/demo/action.tsx correctly 1`] = `
             class="ant-space-item"
           >
             <button
-              class="ant-btn ant-btn-ghost ant-btn-sm ant-btn-dangerous"
+              class="ant-btn ant-btn-default ant-btn-sm ant-btn-background-ghost ant-btn-dangerous"
               type="button"
             >
               <span>

components/alert/demo/action.tsx

@@ -30,7 +30,7 @@ const App: React.FC = () => (
       type="warning"
       action={
         <Space>
-          <Button size="small" type="ghost">
+          <Button size="small" ghost>
             Done
           </Button>
         </Space>
@@ -46,7 +46,7 @@ const App: React.FC = () => (
           <Button size="small" type="primary">
             Accept
           </Button>
-          <Button size="small" danger type="ghost">
+          <Button size="small" danger ghost>
             Decline
           </Button>
         </Space>

components/button/index.en-US.md

@@ -67,7 +67,7 @@ Different button styles can be generated by setting Button properties. The recom
 | size | Set the size of button | `large` \| `middle` \| `small` | `middle` |  |
 | styles | Semantic DOM style | Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
-| type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` |  |
+| type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
 | onClick | Set the handler to handle `click` event | (event: MouseEvent) => void | - |  |
 
 It accepts all props which native buttons support.

components/button/index.zh-CN.md

@@ -72,7 +72,7 @@ group:
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` |  |
 | styles | 语义化结构 style | Record<SemanticDOM, CSSProperties> | - | 5.4.0 |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
-| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
+| type | 设置按钮类型 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
 | onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - |  |
 
 支持原生 button 的其他所有属性。

components/button/style/index.ts

@@ -409,6 +409,13 @@ const genTypeButtonStyle: GenerateStyle<ButtonToken> = (token) => {
     [`${componentCls}-dashed`]: genDashedButtonStyle(token),
     [`${componentCls}-link`]: genLinkButtonStyle(token),
     [`${componentCls}-text`]: genTextButtonStyle(token),
+    [`${componentCls}-ghost`]: genGhostButtonStyle(
+      token.componentCls,
+      token.colorBgContainer,
+      token.colorBgContainer,
+      token.colorTextDisabled,
+      token.colorBorder,
+    ),
   };
 };