Merge branch 'master' into zh-lx-patch-notification

ant-design · Dec 2, 2023 · 85602c3 · 85602c3
2 parents 35fbf0d + 83f969b
commit 85602c3
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 23 deletions.
diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
@@ -44,7 +44,7 @@ const ColorPaletteTool: React.FC = () => {
         text += locale.saturation((s * 100).toFixed(2));
       }
       if (b * 100 < primaryMinBrightness) {
-        text += locale.brightness((s * 100).toFixed(2));
+        text += locale.brightness((b * 100).toFixed(2));
       }
     }
     return (

diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1938,6 +1938,39 @@ Array [
 
 exports[`renders components/button/demo/legacy-group.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/button/demo/linear-gradient.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Primary Button
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Default Button
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders components/button/demo/linear-gradient.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/button/demo/loading.tsx extend context correctly 1`] = `
 <div
   class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"

diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -1645,6 +1645,37 @@ Array [
 ]
 `;
 
+exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Primary Button
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Default Button
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders components/button/demo/loading.tsx correctly 1`] = `
 <div
   class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"

diff --git a/components/button/demo/linear-gradient.md b/components/button/demo/linear-gradient.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义为渐变背景按钮。
+
+## en-US
+
+Buttons with gradient background.
diff --git a/components/button/demo/linear-gradient.tsx b/components/button/demo/linear-gradient.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, ConfigProvider, Space } from 'antd';
+
+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>
+      <Button type="primary">Primary Button</Button>
+      <Button>Default Button</Button>
+    </Space>
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
@@ -48,6 +48,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>
 
 ## API
 

diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
@@ -51,6 +51,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>
 
 ## API
 

diff --git a/components/button/style/index.ts b/components/button/style/index.ts
@@ -155,7 +155,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
       whiteSpace: 'nowrap',
       textAlign: 'center',
       backgroundImage: 'none',
-      backgroundColor: 'transparent',
+      background: 'transparent',
       border: `${token.lineWidth}px ${token.lineType} transparent`,
       cursor: 'pointer',
       transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
@@ -221,7 +221,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
               display: 'inline-block',
               width: token.lineWidth,
               height: `calc(100% + ${token.lineWidth * 2}px)`,
-              backgroundColor: token.colorPrimaryHover,
+              background: token.colorPrimaryHover,
               content: '""',
             },
           },
@@ -240,7 +240,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
                 display: 'inline-block',
                 width: `calc(100% + ${token.lineWidth * 2}px)`,
                 height: token.lineWidth,
-                backgroundColor: token.colorPrimaryHover,
+                background: token.colorPrimaryHover,
                 content: '""',
               },
             },
@@ -280,7 +280,7 @@ const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   cursor: 'not-allowed',
   borderColor: token.borderColorDisabled,
   color: token.colorTextDisabled,
-  backgroundColor: token.colorBgContainerDisabled,
+  background: token.colorBgContainerDisabled,
   boxShadow: 'none',
 });
 
@@ -296,18 +296,18 @@ const genGhostButtonStyle = (
 ): CSSObject => ({
   [`&${btnCls}-background-ghost`]: {
     color: textColor || undefined,
-    backgroundColor: background,
+    background,
     borderColor: borderColor || undefined,
     boxShadow: 'none',
 
     ...genHoverActiveButtonStyle(
       btnCls,
       {
-        backgroundColor: background,
+        background,
         ...hoverStyle,
       },
       {
-        backgroundColor: background,
+        background,
         ...activeStyle,
       },
     ),
@@ -341,7 +341,7 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token
 const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
   ...genSolidButtonStyle(token),
 
-  backgroundColor: token.defaultBg,
+  background: token.defaultBg,
   borderColor: token.defaultBorderColor,
   color: token.defaultColor,
 
@@ -401,19 +401,19 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
   ...genSolidButtonStyle(token),
 
   color: token.primaryColor,
-  backgroundColor: token.colorPrimary,
+  background: token.colorPrimary,
 
   boxShadow: token.primaryShadow,
 
   ...genHoverActiveButtonStyle(
     token.componentCls,
     {
       color: token.colorTextLightSolid,
-      backgroundColor: token.colorPrimaryHover,
+      background: token.colorPrimaryHover,
     },
     {
       color: token.colorTextLightSolid,
-      backgroundColor: token.colorPrimaryActive,
+      background: token.colorPrimaryActive,
     },
   ),
 
@@ -435,17 +435,17 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
   ),
 
   [`&${token.componentCls}-dangerous`]: {
-    backgroundColor: token.colorError,
+    background: token.colorError,
     boxShadow: token.dangerShadow,
     color: token.dangerColor,
 
     ...genHoverActiveButtonStyle(
       token.componentCls,
       {
-        backgroundColor: token.colorErrorHover,
+        background: token.colorErrorHover,
       },
       {
-        backgroundColor: token.colorErrorActive,
+        background: token.colorErrorActive,
       },
     ),
 
@@ -483,7 +483,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
     token.componentCls,
     {
       color: token.colorLinkHover,
-      backgroundColor: token.linkHoverBg,
+      background: token.linkHoverBg,
     },
     {
       color: token.colorLinkActive,
@@ -515,11 +515,11 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
     token.componentCls,
     {
       color: token.colorText,
-      backgroundColor: token.textHoverBg,
+      background: token.textHoverBg,
     },
     {
       color: token.colorText,
-      backgroundColor: token.colorBgTextActive,
+      background: token.colorBgTextActive,
     },
   ),
 
@@ -533,11 +533,11 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
       token.componentCls,
       {
         color: token.colorErrorHover,
-        backgroundColor: token.colorErrorBg,
+        background: token.colorErrorBg,
       },
       {
         color: token.colorErrorHover,
-        backgroundColor: token.colorErrorBg,
+        background: token.colorErrorBg,
       },
     ),
   },

diff --git a/components/config-provider/__tests__/cssinjs.test.tsx b/components/config-provider/__tests__/cssinjs.test.tsx
@@ -30,9 +30,7 @@ describe('ConfigProvider.DynamicTheme', () => {
     expect(
       dynamicStyles.some((style) => {
         const { innerHTML } = style;
-        return (
-          innerHTML.includes('.ant-btn-primary') && innerHTML.includes('background-color:#f00000')
-        );
+        return innerHTML.includes('.ant-btn-primary') && innerHTML.includes('background:#f00000');
       }),
     ).toBeTruthy();
   });