demo: fix linear gradient button demo and remove debug flag (#48320)

* demo: fix linear gradient button demo and remove debug flag

* fix active colors

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

@@ -1882,11 +1882,11 @@ exports[`renders components/button/demo/linear-gradient.tsx extend context corre
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary"
+      class="ant-btn ant-btn-primary ant-btn-lg"
       type="button"
     >
       <span>
-        Primary Button
+        Gradient 1
       </span>
     </button>
   </div>
@@ -1894,11 +1894,23 @@ exports[`renders components/button/demo/linear-gradient.tsx extend context corre
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default"
+      class="ant-btn ant-btn-primary ant-btn-lg"
       type="button"
     >
       <span>
-        Default Button
+        Gradient 2
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary ant-btn-lg"
+      type="button"
+    >
+      <span>
+        Gradient 3
       </span>
     </button>
   </div>

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

@@ -1591,11 +1591,11 @@ exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-primary"
+      class="ant-btn ant-btn-primary ant-btn-lg"
       type="button"
     >
       <span>
-        Primary Button
+        Gradient 1
       </span>
     </button>
   </div>
@@ -1603,11 +1603,23 @@ exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn ant-btn-default"
+      class="ant-btn ant-btn-primary ant-btn-lg"
       type="button"
     >
       <span>
-        Default Button
+        Gradient 2
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary ant-btn-lg"
+      type="button"
+    >
+      <span>
+        Gradient 3
       </span>
     </button>
   </div>

components/button/demo/linear-gradient.tsx

@@ -1,26 +1,66 @@
 import React from 'react';
 import { Button, ConfigProvider, Space } from 'antd';
+import { TinyColor } from '@ctrl/tinycolor';
+
+const colors1 = ['#6253E1', '#04BEFE'];
+const colors2 = ['#fc6076', '#ff9a44', '#ef9d43', '#e75516'];
+const colors3 = ['#40e495', '#30dd8a', '#2bb673'];
+const getHoverColors = (colors: string[]) =>
+  colors.map((color) => new TinyColor(color).lighten(5).toString());
+const getActiveColors = (colors: string[]) =>
+  colors.map((color) => new TinyColor(color).darken(5).toString());
 
 const App: React.FC = () => (
-  <ConfigProvider
-    theme={{
-      components: {
-        Button: {
-          colorPrimary: 'linear-gradient(90deg, #FF4E50, #F9D423) !important',
-          primaryShadow: 'none',
-          defaultBg: 'linear-gradient(90deg, #aea4e3, #d3ffe8) !important',
-          defaultShadow: 'none',
-          defaultColor: '#fff !important',
-          lineWidth: 0,
+  <Space>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            colorPrimary: `linear-gradient(135deg, ${colors1.join(', ')})`,
+            colorPrimaryHover: `linear-gradient(135deg, ${getHoverColors(colors1).join(', ')})`,
+            colorPrimaryActive: `linear-gradient(135deg, ${getActiveColors(colors1).join(', ')})`,
+            lineWidth: 0,
+          },
         },
-      },
-    }}
-  >
-    <Space>
-      <Button type="primary">Primary Button</Button>
-      <Button>Default Button</Button>
-    </Space>
-  </ConfigProvider>
+      }}
+    >
+      <Button type="primary" size="large">
+        Gradient 1
+      </Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            colorPrimary: `linear-gradient(90deg,  ${colors2.join(', ')})`,
+            colorPrimaryHover: `linear-gradient(90deg, ${getHoverColors(colors2).join(', ')})`,
+            colorPrimaryActive: `linear-gradient(90deg, ${getActiveColors(colors2).join(', ')})`,
+            lineWidth: 0,
+          },
+        },
+      }}
+    >
+      <Button type="primary" size="large">
+        Gradient 2
+      </Button>
+    </ConfigProvider>
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            colorPrimary: `linear-gradient(116deg,  ${colors3.join(', ')})`,
+            colorPrimaryHover: `linear-gradient(116deg, ${getHoverColors(colors3).join(', ')})`,
+            colorPrimaryActive: `linear-gradient(116deg, ${getActiveColors(colors3).join(', ')})`,
+            lineWidth: 0,
+          },
+        },
+      }}
+    >
+      <Button type="primary" size="large">
+        Gradient 3
+      </Button>
+    </ConfigProvider>
+  </Space>
 );
 
 export default App;

components/button/index.en-US.md

@@ -47,7 +47,7 @@ And 4 other properties additionally.
 <code src="./demo/legacy-group.tsx" debug>Deprecated Button Group</code>
 <code src="./demo/chinese-chars-loading.tsx" debug>Loading style bug</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
-<code src="./demo/linear-gradient.tsx" debug>Gradient Button</code>
+<code src="./demo/linear-gradient.tsx">Gradient Button</code>
 
 ## API
 

components/button/index.zh-CN.md

@@ -50,7 +50,7 @@ group:
 <code src="./demo/legacy-group.tsx" debug>废弃的 Block 组</code>
 <code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
-<code src="./demo/linear-gradient.tsx" debug>渐变按钮</code>
+<code src="./demo/linear-gradient.tsx">渐变按钮</code>
 
 ## API