From cdc4e508738d1e2cc0ff25d731d9c854e0248c8f Mon Sep 17 00:00:00 2001 From: "@linhf2023" <32009993+linhf123@users.noreply.github.com> Date: Thu, 17 Aug 2023 15:00:04 +0800 Subject: [PATCH] feat: migrate less to token for Alert (#42142) * feat: migrate less to token for Alert * fix: lint * feat(alert): add component token demo * test: add snap * Update docs/react/migrate-less-variables.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> * feat(alert): update token name * feat(alert): update demo * feat: update snap * doc: update migrate * chore: code clean * feat: alert token * chore: code clean * chore: fix lint --------- Co-authored-by: @linhf2023 <32009993+any1024@users.noreply.github.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .../alert/__tests__/demo-extend.test.ts | 2 +- components/alert/__tests__/demo.test.ts | 2 +- components/alert/demo/component-token.md | 7 ++ components/alert/demo/component-token.tsx | 28 ++++++++ components/alert/index.en-US.md | 1 + components/alert/index.zh-CN.md | 1 + components/alert/style/index.ts | 64 ++++++++++++------- docs/react/migrate-less-variables.en-US.md | 30 ++++++++- docs/react/migrate-less-variables.zh-CN.md | 30 ++++++++- 9 files changed, 138 insertions(+), 27 deletions(-) create mode 100644 components/alert/demo/component-token.md create mode 100644 components/alert/demo/component-token.tsx diff --git a/components/alert/__tests__/demo-extend.test.ts b/components/alert/__tests__/demo-extend.test.ts index 1bc1fb5869..e8239ae80a 100644 --- a/components/alert/__tests__/demo-extend.test.ts +++ b/components/alert/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('alert', { skip: ['loop-banner.tsx'] }); +extendTest('alert', { skip: ['loop-banner.tsx', 'component-token.tsx'] }); diff --git a/components/alert/__tests__/demo.test.ts b/components/alert/__tests__/demo.test.ts index 07b6d8ed6a..297254360a 100644 --- a/components/alert/__tests__/demo.test.ts +++ b/components/alert/__tests__/demo.test.ts @@ -1,3 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('alert', { skip: ['loop-banner.tsx'] }); +demoTest('alert', { skip: ['loop-banner.tsx', 'component-token.tsx'] }); diff --git a/components/alert/demo/component-token.md b/components/alert/demo/component-token.md new file mode 100644 index 0000000000..135a6b2770 --- /dev/null +++ b/components/alert/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +自定义组件 Token。 + +## en-US + +Custom component token. diff --git a/components/alert/demo/component-token.tsx b/components/alert/demo/component-token.tsx new file mode 100644 index 0000000000..4e9af03e52 --- /dev/null +++ b/components/alert/demo/component-token.tsx @@ -0,0 +1,28 @@ +import { SmileOutlined } from '@ant-design/icons'; +import React from 'react'; +import { Alert, ConfigProvider } from 'antd'; + +const icon = ; + +const App: React.FC = () => ( + + + +); + +export default App; diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md index f8b0b5dcc8..2f58fc22d9 100644 --- a/components/alert/index.en-US.md +++ b/components/alert/index.en-US.md @@ -31,6 +31,7 @@ Alert component for feedback. ErrorBoundary Custom Icon Custom action +Component Token ## API diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md index 4bfa12cd5a..92819c29d3 100644 --- a/components/alert/index.zh-CN.md +++ b/components/alert/index.zh-CN.md @@ -32,6 +32,7 @@ group: React 错误处理 自定义图标 操作 +组件 Token ## API diff --git a/components/alert/style/index.ts b/components/alert/style/index.ts index 74628f09ae..37267a5156 100644 --- a/components/alert/style/index.ts +++ b/components/alert/style/index.ts @@ -1,13 +1,30 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import type { CSSProperties } from 'react'; import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { genComponentStyleHook } from '../../theme/internal'; -export interface ComponentToken {} +export interface ComponentToken { + // Component token here + /** + * @desc 默认内间距 + * @descEN Default padding + */ + defaultPadding: CSSProperties['padding']; + /** + * @desc 带有描述的内间距 + * @descEN Padding with description + */ + withDescriptionPadding: CSSProperties['padding']; + /** + * @desc 带有描述时的图标尺寸 + * @descEN Icon size with description + */ + withDescriptionIconSize: number; +} type AlertToken = FullToken<'Alert'> & { - alertIconSizeLG: number; - alertPaddingHorizontal: number; + // Custom token here }; const genAlertTypeStyle = ( @@ -35,13 +52,11 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO lineHeight, borderRadiusLG: borderRadius, motionEaseInOutCirc, - alertIconSizeLG, + withDescriptionIconSize, colorText, - paddingContentVerticalSM, - alertPaddingHorizontal, - paddingMD, - paddingContentHorizontalLG, colorTextHeading, + withDescriptionPadding, + defaultPadding, } = token; return { @@ -50,7 +65,7 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO position: 'relative', display: 'flex', alignItems: 'center', - padding: `${paddingContentVerticalSM}px ${alertPaddingHorizontal}px`, // Fixed horizontal padding here. + padding: defaultPadding, wordWrap: 'break-word', borderRadius, @@ -75,7 +90,7 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO }, '&-message': { - color: colorText, + color: colorTextHeading, }, [`&${componentCls}-motion-leave`]: { @@ -97,12 +112,11 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO [`${componentCls}-with-description`]: { alignItems: 'flex-start', - paddingInline: paddingContentHorizontalLG, - paddingBlock: paddingMD, + padding: withDescriptionPadding, [`${componentCls}-icon`]: { marginInlineEnd: marginSM, - fontSize: alertIconSizeLG, + fontSize: withDescriptionIconSize, lineHeight: 0, }, @@ -115,6 +129,7 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO [`${componentCls}-description`]: { display: 'block', + color: colorText, }, }, @@ -229,13 +244,16 @@ export const genAlertStyle: GenerateStyle = (token: AlertToken): CSS genActionStyle(token), ]; -export default genComponentStyleHook('Alert', (token) => { - const { fontSizeHeading3 } = token; +export default genComponentStyleHook( + 'Alert', + (token) => [genAlertStyle(token)], + (token) => { + const paddingHorizontal = 12; // Fixed value here. - const alertToken = mergeToken(token, { - alertIconSizeLG: fontSizeHeading3, - alertPaddingHorizontal: 12, // Fixed value here. - }); - - return [genAlertStyle(alertToken)]; -}); + return { + withDescriptionIconSize: token.fontSizeHeading3, + defaultPadding: `${token.paddingContentVerticalSM}px ${paddingHorizontal}px`, + withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, + }; + }, +); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 6918d0189b..b55c417c50 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -42,7 +42,35 @@ export default App; ## Component Token - +## Alert + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@alert-success-border-color` | `colorSuccessBorder` | Global token | +| `@alert-success-bg-color` | `colorSuccessBg` | Global token | +| `@alert-success-icon-color` | `colorSuccess` | Global token | +| `@alert-info-border-color` | `colorInfoBorder` | Global token | +| `@alert-info-bg-color` | `colorInfoBg` | Global token | +| `@alert-info-icon-color` | `colorInfo` | Global token | +| `@alert-warning-border-color` | `colorWarningBorder` | Global token | +| `@alert-warning-bg-color` | `colorWarningBg` | Global token | +| `@alert-warning-icon-color` | `colorWarning` | Global token | +| `@alert-error-border-color` | `colorErrorBorder` | Global token | +| `@alert-error-bg-color` | `colorErrorBg` | Global token | +| `@alert-error-icon-color` | `colorError` | Global token | +| `@alert-message-color` | `colorTextHeading` | Global token | +| `@alert-text-color` | `colorText` | Global Token | +| `@alert-close-color` | `colorIcon` | Global token | +| `@alert-close-hover-color` | `colorIconHover` | Global token | +| `@alert-padding-vertical` | `defaultPadding` | Control the whole padding | +| `@alert-padding-horizontal` | `defaultPadding` | Control the whole padding | +| `@alert-no-icon-padding-vertical` | - | Deprecated | +| `@alert-with-description-no-icon-padding-vertical` | `withDescriptionPadding` | Control the whole padding | +| `@alert-with-description-padding-vertical` | `withDescriptionPadding` | Control the whole padding | +| `@alert-with-description-padding` | `withDescriptionPadding` | Control the whole padding | +| `@alert-icon-top` | - | Deprecated | +| `@alert-with-description-icon-size` | `withDescriptionIconSize` | - | ### Anchor diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index ad35eeb528..dbb89a7ec6 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -42,7 +42,35 @@ export default App; ## 组件变量 - +## Alert 警告提示 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@alert-success-border-color` | `colorSuccessBorder` | 全局 token | +| `@alert-success-bg-color` | `colorSuccessBg` | 全局 token | +| `@alert-success-icon-color` | `colorSuccess` | 全局 token | +| `@alert-info-border-color` | `colorInfoBorder` | 全局 token | +| `@alert-info-bg-color` | `colorInfoBg` | 全局 token | +| `@alert-info-icon-color` | `colorInfo` | 全局 token | +| `@alert-warning-border-color` | `colorWarningBorder` | 全局 token | +| `@alert-warning-bg-color` | `colorWarningBg` | 全局 token | +| `@alert-warning-icon-color` | `colorWarning` | 全局 token | +| `@alert-error-border-color` | `colorErrorBorder` | 全局 token | +| `@alert-error-bg-color` | `colorErrorBg` | 全局 token | +| `@alert-error-icon-color` | `colorError` | 全局 token | +| `@alert-message-color` | `colorTextHeading` | 全局 token | +| `@alert-text-color` | `colorText` | 全局 Token | +| `@alert-close-color` | `colorIcon` | 全局 token | +| `@alert-close-hover-color` | `colorIconHover` | 全局 token | +| `@alert-padding-vertical` | `defaultPadding` | 统一控制 | +| `@alert-padding-horizontal` | `defaultPadding` | 统一控制 | +| `@alert-no-icon-padding-vertical` | - | 已废弃 | +| `@alert-with-description-no-icon-padding-vertical` | `withDescriptionPadding` | 统一控制 | +| `@alert-with-description-padding-vertical` | `withDescriptionPadding` | 统一控制 | +| `@alert-with-description-padding` | `withDescriptionPadding` | 统一控制 | +| `@alert-icon-top` | - | 已废弃 | +| `@alert-with-description-icon-size` | `withDescriptionIconSize` | - | ### Anchor 锚点