diff --git a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap index 3bfe1c5121..1151d1435d 100644 --- a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -7,7 +7,7 @@ Array [ class="" > , , + + +
+ + + + + +
+
+ + + + + +
+ +`; + +exports[`renders components/button/demo/debug-color-variant.tsx extend context correctly 2`] = `[]`; + exports[`renders components/button/demo/debug-icon.tsx extend context correctly 1`] = ` Array [
@@ -1026,7 +1143,7 @@ Array [ @@ -1755,7 +1872,7 @@ Array [ class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small" > @@ -2108,7 +2225,7 @@ Array [ + + +
+ + + + + +
+
+ + + + + +
+ +`; + exports[`renders components/button/demo/debug-icon.tsx correctly 1`] = ` Array [
@@ -933,7 +1048,7 @@ Array [ @@ -1578,7 +1693,7 @@ Array [ class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small" > @@ -1855,7 +1970,7 @@ Array [
@@ -459,11 +459,11 @@ describe('Button', () => { ); expect(defaultContainer.firstChild).toHaveStyle({ - color: 'rgb(255, 255, 255)', + '--ant-button-solid-text-color': '#fff', }); const { container: darkContainer } = render( - + @@ -471,7 +471,7 @@ describe('Button', () => { ); expect(darkContainer.firstChild).toHaveStyle({ - color: 'rgb(0, 0, 0)', + '--ant-button-solid-text-color': '#000', }); }); }); diff --git a/components/button/button.tsx b/components/button/button.tsx index 3fb4345bcd..a04b6f78f1 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -249,8 +249,11 @@ const InternalCompoundedButton = React.forwardRef< cssVarCls, { [`${prefixCls}-${shape}`]: shape !== 'default' && shape, - [`${prefixCls}-${mergedColorText}`]: mergedColorText, - [`${prefixCls}-${mergedVariant}`]: mergedVariant, + // line(253 - 254): Compatible with versions earlier than 5.21.0 + [`${prefixCls}-${mergedType}`]: mergedType, + [`${prefixCls}-dangerous`]: danger, + [`${prefixCls}-color-${mergedColorText}`]: mergedColorText, + [`${prefixCls}-variant-${mergedVariant}`]: mergedVariant, [`${prefixCls}-${sizeCls}`]: sizeCls, [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType, [`${prefixCls}-background-ghost`]: ghost && !isUnBorderedButtonVariant(mergedVariant), diff --git a/components/button/demo/debug-color-variant.md b/components/button/demo/debug-color-variant.md new file mode 100644 index 0000000000..c0c0fc5dc7 --- /dev/null +++ b/components/button/demo/debug-color-variant.md @@ -0,0 +1,7 @@ +## zh-CN + +调试使用 + +## en-US + +Debug usage diff --git a/components/button/demo/debug-color-variant.tsx b/components/button/demo/debug-color-variant.tsx new file mode 100644 index 0000000000..c99e34511a --- /dev/null +++ b/components/button/demo/debug-color-variant.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import { Button, ConfigProvider, Flex } from 'antd'; +import { createStyles } from 'antd-style'; + +const useSpecStyle = createStyles(({ css }) => ({ + primary: css` + background: #5794f7; + border-color: blue; + color: wheat; + `, + default: css` + border-color: gray; + background: #f5f5f5; + color: #313030; + `, + dashed: css` + border-color: gray; + background: #f5f5f5; + color: #313030; + `, + text: css` + color: gray; + `, + link: css` + color: blue; + `, +})); + +const useOriginalClsStyle = createStyles(({ css }) => ({ + wrapper: css` + .ant-btn-primary { + color: #ec5b56; + } + .ant-btn-default { + color: orange; + } + .ant-btn-dashed { + color: #3976f6; + } + .ant-btn-text { + color: green; + } + .ant-btn-link { + color: #0e98aa; + } + `, +})); + +const App: React.FC = () => { + const { styles: specStyle } = useSpecStyle(); + const { styles: originalClsStyle } = useOriginalClsStyle(); + + return ( + + {/* link color */} + + + + + + + + {/* css specificity */} + + + + + + + + + {/* Compatibility: v < 5.20.1 */} + + + + + + + + + ); +}; + +export default App; diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index d46d4d6472..19eb7c8e0e 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -35,6 +35,7 @@ And 4 other properties additionally. Syntactic sugar Color & Variant +Debug Color & Variant Icon Icon Position Debug Icon diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 765dca8ae7..560622c894 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -38,6 +38,7 @@ group: 语法糖 颜色与变体 +调试颜色与变体 按钮图标 按钮图标位置 调试图标按钮 diff --git a/components/button/style/index.ts b/components/button/style/index.ts index 75808e02a2..7613a72488 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -179,7 +179,7 @@ const genSolidButtonStyle = ( hoverStyle: CSSObject, activeStyle: CSSObject, ): CSSObject => ({ - [`&${token.componentCls}-solid`]: { + [`&${token.componentCls}-variant-solid`]: { color: textColor, background, @@ -194,7 +194,7 @@ const genOutlinedDashedButtonStyle = ( hoverStyle: CSSObject, activeStyle: CSSObject, ) => ({ - [`&${token.componentCls}-outlined, &${token.componentCls}-dashed`]: { + [`&${token.componentCls}-variant-outlined, &${token.componentCls}-variant-dashed`]: { borderColor, background, @@ -203,7 +203,7 @@ const genOutlinedDashedButtonStyle = ( }); const genDashedButtonStyle: GenerateStyle = (token) => ({ - [`&${token.componentCls}-dashed`]: { + [`&${token.componentCls}-variant-dashed`]: { borderStyle: 'dashed', }, }); @@ -214,7 +214,7 @@ const genFilledButtonStyle = ( hoverStyle: CSSObject, activeStyle: CSSObject, ) => ({ - [`&${token.componentCls}-filled`]: { + [`&${token.componentCls}-variant-filled`]: { boxShadow: 'none', background, @@ -229,7 +229,7 @@ const genTextLinkButtonStyle = ( hoverStyle: CSSObject, activeStyle: CSSObject, ) => ({ - [`&${token.componentCls}-${variant}`]: { + [`&${token.componentCls}-variant-${variant}`]: { color: textColor, boxShadow: 'none', @@ -255,22 +255,6 @@ const genDefaultButtonStyle: GenerateStyle = (token) => }, ), - ...genOutlinedDashedButtonStyle( - token, - token.defaultBorderColor, - token.defaultBg, - { - color: token.defaultHoverColor, - borderColor: token.defaultHoverBorderColor, - background: token.defaultHoverBg, - }, - { - color: token.defaultActiveColor, - borderColor: token.defaultActiveBorderColor, - background: token.defaultActiveBg, - }, - ), - ...genDashedButtonStyle(token), ...genFilledButtonStyle( @@ -284,19 +268,6 @@ const genDefaultButtonStyle: GenerateStyle = (token) => }, ), - ...genTextLinkButtonStyle( - token, - token.textTextColor, - 'text', - { - color: token.textTextHoverColor, - background: token.textHoverBg, - }, - { - color: token.textTextActiveColor, - background: token.colorBgTextActive, - }, - ), ...genTextLinkButtonStyle( token, token.textTextColor, @@ -325,18 +296,6 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => boxShadow: token.primaryShadow, - ...genSolidButtonStyle( - token, - token.primaryColor, - token.colorPrimary, - { - background: token.colorPrimaryHover, - }, - { - background: token.colorPrimaryActive, - }, - ), - ...genOutlinedDashedButtonStyle( token, token.colorPrimary, @@ -368,7 +327,7 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => ...genTextLinkButtonStyle( token, - token.colorPrimary, + token.colorLink, 'text', { color: token.colorPrimaryTextHover, @@ -380,19 +339,6 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => }, ), - ...genTextLinkButtonStyle( - token, - token.colorPrimary, - 'link', - { - color: token.colorPrimaryTextHover, - background: token.linkHoverBg, - }, - { - color: token.colorPrimaryTextActive, - }, - ), - ...genGhostButtonStyle( token.componentCls, token.ghostBg, @@ -502,12 +448,76 @@ const genColorButtonStyle: GenerateStyle = (token) => { const { componentCls } = token; return { - [`${componentCls}-default`]: genDefaultButtonStyle(token), - [`${componentCls}-primary`]: genPrimaryButtonStyle(token), - [`${componentCls}-dangerous`]: genDangerousStyle(token), + [`${componentCls}-color-default`]: genDefaultButtonStyle(token), + [`${componentCls}-color-primary`]: genPrimaryButtonStyle(token), + [`${componentCls}-color-dangerous`]: genDangerousStyle(token), }; }; +// =========== Compatible with versions earlier than 5.21.0 =========== +const genCompatibleButtonStyle: GenerateStyle = (token) => ({ + // default + outlined + ...genOutlinedDashedButtonStyle( + token, + token.defaultBorderColor, + token.defaultBg, + { + color: token.defaultHoverColor, + borderColor: token.defaultHoverBorderColor, + background: token.defaultHoverBg, + }, + { + color: token.defaultActiveColor, + borderColor: token.defaultActiveBorderColor, + background: token.defaultActiveBg, + }, + ), + + // default + text + ...genTextLinkButtonStyle( + token, + token.textTextColor, + 'text', + { + color: token.textTextHoverColor, + background: token.textHoverBg, + }, + { + color: token.textTextActiveColor, + background: token.colorBgTextActive, + }, + ), + + // primary + solid + ...genSolidButtonStyle( + token, + token.primaryColor, + token.colorPrimary, + { + background: token.colorPrimaryHover, + color: token.primaryColor, + }, + { + background: token.colorPrimaryActive, + color: token.primaryColor, + }, + ), + + // primary + link + ...genTextLinkButtonStyle( + token, + token.colorLink, + 'link', + { + color: token.colorLinkHover, + background: token.linkHoverBg, + }, + { + color: token.colorLinkActive, + }, + ), +}); + // =============================== Size =============================== const genButtonStyle = (token: ButtonToken, prefixCls = ''): CSSInterpolation => { const { @@ -641,6 +651,9 @@ export default genStyleHooks( // Color genColorButtonStyle(buttonToken), + // https://github.com/ant-design/ant-design/issues/50969 + genCompatibleButtonStyle(buttonToken), + // Button Group genGroupStyle(buttonToken), ]; diff --git a/components/card/__tests__/__snapshots__/index.test.tsx.snap b/components/card/__tests__/__snapshots__/index.test.tsx.snap index f7f6d57872..838b3c0b47 100644 --- a/components/card/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/card/__tests__/__snapshots__/index.test.tsx.snap @@ -378,7 +378,7 @@ exports[`Card title should be vertically aligned 1`] = ` class="ant-card-extra" >