feat: migrate less to token for Alert (ant-design#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 <[email protected]> * 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 <[email protected]> Co-authored-by: MadCcc <[email protected]>
peter-boot · Aug 17, 2023 · cdc4e50 · cdc4e50
1 parent 27e54c9
commit cdc4e50
Show file tree

Hide file tree

Showing 9 changed files with 140 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,28 @@
+import { SmileOutlined } from '@ant-design/icons';
+import React from 'react';
+import { Alert, ConfigProvider } from 'antd';
+
+const icon = <SmileOutlined />;
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Alert: {
+          withDescriptionIconSize: 32,
+          withDescriptionPadding: 16,
+        },
+      },
+    }}
+  >
+    <Alert
+      icon={icon}
+      message="Success Tips"
+      description="Detailed description and advices about successful copywriting."
+      type="success"
+      showIcon
+    />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md
@@ -31,6 +31,7 @@ Alert component for feedback.
 <code src="./demo/error-boundary.tsx">ErrorBoundary</code>
 <code src="./demo/custom-icon.tsx" debug>Custom Icon</code>
 <code src="./demo/action.tsx">Custom action</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md
@@ -32,6 +32,7 @@ group:
 <code src="./demo/error-boundary.tsx">React 错误处理</code>
 <code src="./demo/custom-icon.tsx" debug>自定义图标</code>
 <code src="./demo/action.tsx">操作</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

diff --git 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';
-
-export interface ComponentToken {}
+import { genComponentStyleHook } from '../../theme/internal';
+
+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<AlertToken> = (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<AlertToken> = (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<AlertToken> = (token: AlertToken): CSSO
       },
 
       '&-message': {
-        color: colorText,
+        color: colorTextHeading,
       },
 
       [`&${componentCls}-motion-leave`]: {
@@ -97,12 +112,11 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (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<AlertToken> = (token: AlertToken): CSSO
 
       [`${componentCls}-description`]: {
         display: 'block',
+        color: colorText,
       },
     },
 
@@ -229,13 +244,16 @@ export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSS
   genActionStyle(token),
 ];
 
-export default genComponentStyleHook('Alert', (token) => {
-  const { fontSizeHeading3 } = token;
-
-  const alertToken = mergeToken<AlertToken>(token, {
-    alertIconSizeLG: fontSizeHeading3,
-    alertPaddingHorizontal: 12, // Fixed value here.
-  });
-
-  return [genAlertStyle(alertToken)];
-});
+export default genComponentStyleHook(
+  'Alert',
+  (token) => [genAlertStyle(token)],
+  (token) => {
+    const paddingHorizontal = 12; // Fixed value here.
+
+    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
@@ -42,7 +42,35 @@ export default App;
 
 ## Component Token
 
-<!-- ### Alert -->
+## Alert
+
+<!-- prettier-ignore -->
+| 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
@@ -42,7 +42,35 @@ export default App;
 
 ## 组件变量
 
-<!-- ### Alert 警告提示 -->
+## Alert 警告提示
+
+<!-- prettier-ignore -->
+| 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 锚点