diff --git a/packages/common b/packages/common index 3727d58bc9..4b921a1e65 160000 --- a/packages/common +++ b/packages/common @@ -1 +1 @@ -Subproject commit 3727d58bc953ce6664d40bdb04c8f5dd813cf169 +Subproject commit 4b921a1e65dac806859b8abf14f700771a4f03cd diff --git a/packages/components/progress/Progress.tsx b/packages/components/progress/Progress.tsx index 4bb9c72b6e..999c14387d 100644 --- a/packages/components/progress/Progress.tsx +++ b/packages/components/progress/Progress.tsx @@ -213,6 +213,7 @@ const Progress = forwardRef((props, ref) => { [`${statusClassName}`]: status, [`${classPrefix}-progress--over-ten`]: percentage > PLUMP_SEPARATE, [`${classPrefix}-progress--under-ten`]: percentage <= PLUMP_SEPARATE, + [`${classPrefix}-size-s`]: size === 'small', })} style={trackStyle} > @@ -238,6 +239,7 @@ const Progress = forwardRef((props, ref) => { ref={ref} className={classNames(`${classPrefix}-progress--thin`, { [`${statusClassName}`]: status, + [`${classPrefix}-size-s`]: size === 'small', })} >
diff --git a/packages/components/progress/_usage/props.json b/packages/components/progress/_usage/props.json index 8159c465d9..f9c3cec7d0 100644 --- a/packages/components/progress/_usage/props.json +++ b/packages/components/progress/_usage/props.json @@ -5,6 +5,25 @@ "defaultValue": true, "options": [] }, + { + "name": "size", + "type": "enum", + "defaultValue": "medium", + "options": [ + { + "label": "small", + "value": "small" + }, + { + "label": "medium", + "value": "medium" + }, + { + "label": "large", + "value": "large" + } + ] + }, { "name": "theme", "type": "enum", diff --git a/packages/components/progress/defaultProps.ts b/packages/components/progress/defaultProps.ts index ae2a927f96..7045b5856d 100644 --- a/packages/components/progress/defaultProps.ts +++ b/packages/components/progress/defaultProps.ts @@ -4,4 +4,11 @@ import { TdProgressProps } from './type'; -export const progressDefaultProps: TdProgressProps = { label: true, percentage: 0, size: 'medium', theme: 'line' }; +export const progressDefaultProps: TdProgressProps = { + color: '', + label: true, + percentage: 0, + size: 'medium', + theme: 'line', + trackColor: '', +}; diff --git a/packages/components/progress/progress.en-US.md b/packages/components/progress/progress.en-US.md index e20c6f7274..f864a285cb 100644 --- a/packages/components/progress/progress.en-US.md +++ b/packages/components/progress/progress.en-US.md @@ -12,7 +12,7 @@ color | String / Object / Array | '' | Typescript: `string \| Array \| R label | TNode | true | Typescript: `string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N percentage | Number | 0 | \- | N size | String / Number | 'medium' | \- | N -status | String | - | options:success/error/warning/active。Typescript: `StatusEnum` `type StatusEnum = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/progress/type.ts) | N +status | String | - | options: success/error/warning/active。Typescript: `ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/progress/type.ts) | N strokeWidth | String / Number | - | \- | N -theme | String | line | options:line/plump/circle。Typescript: `ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/progress/type.ts) | N +theme | String | line | options: line/plump/circle。Typescript: `ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/progress/type.ts) | N trackColor | String | '' | \- | N diff --git a/packages/components/progress/progress.md b/packages/components/progress/progress.md index 75682f46e3..f61c54076c 100644 --- a/packages/components/progress/progress.md +++ b/packages/components/progress/progress.md @@ -1,6 +1,7 @@ :: BASE_DOC :: ## API + ### Progress Props 名称 | 类型 | 默认值 | 描述 | 必传 @@ -10,8 +11,8 @@ style | Object | - | 样式,TS 类型:`React.CSSProperties` | N color | String / Object / Array | '' | 进度条颜色。示例:'#ED7B2F' 或 'orange' 或 `['#f00', '#0ff', '#f0f']` 或 `{ '0%': '#f00', '100%': '#0ff' }` 或 `{ from: '#000', to: '#000' }` 等。TS 类型:`string \| Array \| Record` | N label | TNode | true | 进度百分比,可自定义。TS 类型:`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/common.ts) | N percentage | Number | 0 | 进度条百分比 | N -size | String / Number | 'medium' | 进度条尺寸,示例:small/medium/large/240。small 值为 72; medium 值为 112;large 值为 160 | N -status | String | - | 进度条状态。可选项:success/error/warning/active。TS 类型:`StatusEnum` `type StatusEnum = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/progress/type.ts) | N +size | String / Number | 'medium' | 进度条尺寸,示例:small/medium/large/240。line 和 plump 只支持 small/medium。circle的尺寸值 small 值为 72; medium 值为 112;large 值为 160 | N +status | String | - | 进度条状态。可选项:success/error/warning/active。TS 类型:`ProgressStatus` `type ProgressStatus = 'success' \| 'error' \| 'warning' \| 'active'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/progress/type.ts) | N strokeWidth | String / Number | - | 进度条线宽。宽度数值不能超过 size 的一半,否则不能输出环形进度 | N -theme | String | line | 进度条风格。值为 line,标签(label)显示在进度条右侧;值为 plump,标签(label)显示在进度条里面;值为 circle,标签(label)显示在进度条正中间。可选项:line/plump/circle。TS 类型:`ThemeEnum` `type ThemeEnum = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/progress/type.ts) | N +theme | String | line | 进度条风格。值为 line,标签(label)显示在进度条右侧;值为 plump,标签(label)显示在进度条里面;值为 circle,标签(label)显示在进度条正中间。可选项:line/plump/circle。TS 类型:`ProgressTheme` `type ProgressTheme = 'line' \| 'plump' \| 'circle'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/packages/components/progress/type.ts) | N trackColor | String | '' | 进度条未完成部分颜色 | N diff --git a/packages/components/progress/type.ts b/packages/components/progress/type.ts index b9b56d7dad..c86e7f5337 100644 --- a/packages/components/progress/type.ts +++ b/packages/components/progress/type.ts @@ -23,14 +23,14 @@ export interface TdProgressProps { */ percentage?: number; /** - * 进度条尺寸,示例:small/medium/large/240。small 值为 72; medium 值为 112;large 值为 160 + * 进度条尺寸,示例:small/medium/large/240。line 和 plump 只支持 small/medium。circle的尺寸值 small 值为 72; medium 值为 112;large 值为 160 * @default 'medium' */ size?: string | number; /** * 进度条状态 */ - status?: StatusEnum; + status?: ProgressStatus; /** * 进度条线宽。宽度数值不能超过 size 的一半,否则不能输出环形进度 */ @@ -39,7 +39,7 @@ export interface TdProgressProps { * 进度条风格。值为 line,标签(label)显示在进度条右侧;值为 plump,标签(label)显示在进度条里面;值为 circle,标签(label)显示在进度条正中间 * @default line */ - theme?: ThemeEnum; + theme?: ProgressTheme; /** * 进度条未完成部分颜色 * @default '' @@ -47,6 +47,6 @@ export interface TdProgressProps { trackColor?: string; } -export type StatusEnum = 'success' | 'error' | 'warning' | 'active'; +export type ProgressStatus = 'success' | 'error' | 'warning' | 'active'; -export type ThemeEnum = 'line' | 'plump' | 'circle'; +export type ProgressTheme = 'line' | 'plump' | 'circle';