mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

feat: migrate less to token for Alert (#42142)

Browse Source 
* 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>
This commit is contained in:
@linhf2023 2023-08-17 15:00:04 +08:00 committed by GitHub
parent 27e54c9e97
commit cdc4e50873
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 138 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/alert/__tests__/demo-extend.test.ts
View File

@ -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'] });

2
components/alert/__tests__/demo.test.ts
View File

@ -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'] });

7
components/alert/demo/component-token.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
自定义组件 Token。
## en-US
Custom component token.

28
components/alert/demo/component-token.tsx Normal file
View File

@ -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;

1
components/alert/index.en-US.md
View File

@ -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

1
components/alert/index.zh-CN.md
View File

@ -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

64
components/alert/style/index.ts
View File

@ -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<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;
export default genComponentStyleHook(
'Alert',
(token) => [genAlertStyle(token)],
(token) => {
const paddingHorizontal = 12; // Fixed value here.
const alertToken = mergeToken<AlertToken>(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`,
};
},
);

30
docs/react/migrate-less-variables.en-US.md
View File

@ -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

30
docs/react/migrate-less-variables.zh-CN.md
View File

@ -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 锚点