diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap index cfe5069794..f32602ef50 100644 --- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -163,6 +163,304 @@ exports[`renders components/upload/demo/basic.tsx extend context correctly 1`] = `; +exports[`renders components/upload/demo/component-token.tsx extend context correctly 1`] = ` + +
+ + + + +
+
+
+
+
+ + + +
+ + xxx.png + + + + +
+
+
+
+
+ + + +
+ + yyy.png + + + + +
+
+
+
+
+ + + +
+ + zzz.png + + + + +
+
+
+
+ +
+
+
+
+ +`; + exports[`renders components/upload/demo/customize-progress-bar.tsx extend context correctly 1`] = ` `; +exports[`renders components/upload/demo/component-token.tsx correctly 1`] = ` + +
+ + + + +
+
+
+
+
+ + + +
+ + xxx.png + + + + +
+
+
+
+
+ + + +
+ + yyy.png + + + + +
+
+
+
+
+ + + +
+ + zzz.png + + + + +
+
+
+ +`; + exports[`renders components/upload/demo/customize-progress-bar.tsx correctly 1`] = ` ( + + + + + +); + +export default App; diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index 4300406e3e..88247f37e8 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -41,6 +41,7 @@ Uploading is the process of publishing information (web pages, text, pictures, v Drag sorting of uploadList Crop image before uploading Customize Progress Bar +Component Token ## API diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 5c523b36fb..dc8042b4dd 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -42,6 +42,7 @@ demo: 上传列表拖拽排序 上传前裁切图片 自定义进度条样式 +组件 Token ## API diff --git a/components/upload/style/index.ts b/components/upload/style/index.ts index 3a00f7cefd..37b42278f8 100644 --- a/components/upload/style/index.ts +++ b/components/upload/style/index.ts @@ -8,7 +8,9 @@ import genRtlStyle from './rtl'; import { resetComponent } from '../../style'; import { genCollapseMotion } from '../../style/motion'; -export interface ComponentToken {} +export interface ComponentToken { + actionsColor: string; +} export interface UploadToken extends FullToken<'Upload'> { uploadThumbnailSize: number; @@ -43,24 +45,30 @@ const genBaseStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Upload', (token) => { - const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token; - const listItemHeightSM = Math.round(fontSize * lineHeight); +export default genComponentStyleHook( + 'Upload', + (token) => { + const { fontSizeHeading3, fontSize, lineHeight, lineWidth, controlHeightLG } = token; + const listItemHeightSM = Math.round(fontSize * lineHeight); - const uploadToken = mergeToken(token, { - uploadThumbnailSize: fontSizeHeading3 * 2, - uploadProgressOffset: listItemHeightSM / 2 + lineWidth, - uploadPicCardSize: controlHeightLG * 2.55, - }); + const uploadToken = mergeToken(token, { + uploadThumbnailSize: fontSizeHeading3 * 2, + uploadProgressOffset: listItemHeightSM / 2 + lineWidth, + uploadPicCardSize: controlHeightLG * 2.55, + }); - return [ - genBaseStyle(uploadToken), - genDraggerStyle(uploadToken), - genPictureStyle(uploadToken), - genPictureCardStyle(uploadToken), - genListStyle(uploadToken), - genMotionStyle(uploadToken), - genRtlStyle(uploadToken), - genCollapseMotion(uploadToken), - ]; -}); + return [ + genBaseStyle(uploadToken), + genDraggerStyle(uploadToken), + genPictureStyle(uploadToken), + genPictureCardStyle(uploadToken), + genListStyle(uploadToken), + genMotionStyle(uploadToken), + genRtlStyle(uploadToken), + genCollapseMotion(uploadToken), + ]; + }, + (token) => ({ + actionsColor: token.colorTextDescription, + }), +); diff --git a/components/upload/style/list.ts b/components/upload/style/list.ts index da17d2e456..82fbaece27 100644 --- a/components/upload/style/list.ts +++ b/components/upload/style/list.ts @@ -59,7 +59,7 @@ const genListStyle: GenerateStyle = (token) => { }, [iconCls]: { - color: token.colorTextDescription, + color: token.actionsColor, transition: `all ${token.motionDurationSlow}`, }, diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 1760b51cfa..c26da6fb1c 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -286,4 +286,9 @@ This document contains the correspondence between all the less variables related | `@typography-title-margin-top` | `titleMarginTop` | - | | `@typography-title-margin-bottom` | `titleMarginBottom` | - | - +### Upload + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@upload-actions-color` | `actionsColor` | - | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 5334fca4f5..2bbaf3a412 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -284,4 +284,9 @@ title: Less 变量迁移 Design Token | `@typography-title-margin-top` | `titleMarginTop` | - | | `@typography-title-margin-bottom` | `titleMarginBottom` | - | - +### Upload 上传 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@upload-actions-color` | `actionsColor` | - |