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

Merge remote-tracking branch 'origin/master' into feature-merge-master-12-04

Browse Source
This commit is contained in:
vagusx 2023-12-04 10:32:45 +08:00
commit 71bd883126
20 changed files with 240 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.dumi/theme/common/Color/ColorPaletteToolDark.tsx
View File

@ -44,7 +44,7 @@ const ColorPaletteTool: React.FC = () => {
text += locale.saturation((s * 100).toFixed(2));
}
if (b * 100 < primaryMinBrightness) {
text += locale.brightness((s * 100).toFixed(2));
text += locale.brightness((b * 100).toFixed(2));
}
}
return (

6
.dumi/theme/slots/Header/index.tsx
View File

@ -25,10 +25,10 @@ const RESPONSIVE_SM = 1200;
const locales = {
cn: {
message: 'Galacean Effects · 所见即所得的动效新方案。',
shortMessage: 'Galacean Effects · 所见即所得的动效新方案。',
message: '语雀征文 · 说说你和开源的故事，赢取 Ant Design 精美周边 🎁',
shortMessage: '语雀征文 · 说说你和开源的故事，赢取 Ant Design 精美周边 🎁',
more: '前往了解',
link: 'https://galacean.antgroup.com/effects/',
link: 'https://www.yuque.com/opensource2023',
},
en: {
message: '',

35
README.md
View File

@ -41,6 +41,17 @@ An enterprise-class UI design language and React UI library.
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
[dumi-url]: https://github.com/umijs/dumi
<!-- Copy-paste in your Readme.md file -->
<a href="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats?repo_id=34526884" target="_blank" style="display: block" align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=dark" width="655" height="auto">
<img alt="Performance Stats of ant-design/ant-design - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=light" width="655" height="auto">
</picture>
</a>
<!-- Made with [OSS Insight](https://ossinsight.io/) -->
</div>
[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
@ -83,27 +94,16 @@ pnpm add antd
## 🔨 Usage
```tsx
import React from 'react';
import { Button, DatePicker } from 'antd';
const App = () => (
export default () => (
<>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select date" />
</>
);
export default App;
```
### TypeScript
`antd` is written in TypeScript with complete definitions, check [Usage with create-react-app](https://ant.design/docs/react/use-with-create-react-app) to get started.
## 🌍 Internationalization
Dozens of languages are supported in `antd`, see [i18n](https://ant.design/docs/react/i18n).
## 🔗 Links
- [Home page](https://ant.design/)
@ -146,6 +146,17 @@ Open your browser and visit http://127.0.0.1:8001 , see more at [Development](ht
## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
<!-- Copy-paste in your Readme.md file -->
<a href="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors?repo_id=34526884&limit=30" target="_blank" style="display: block" align="center">
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=34526884&limit=30&image_size=auto&color_scheme=dark" width="655" height="auto">
<img alt="Active Contributors of ant-design/ant-design - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=34526884&limit=30&image_size=auto&color_scheme=light" width="655" height="auto">
</picture>
</a>
<!-- Made with [OSS Insight](https://ossinsight.io/) -->
Let's build a better antd together.
We welcome all contributions. Please read our [Contributing Guide](https://ant.design/docs/react/contributing) first. You can submit any ideas as [Pull Requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub Issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)

1
antd-image-snapshots-main/README.md Normal file
View File

@ -0,0 +1 @@
# antd-image-snapshots

33
components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1942,6 +1942,39 @@ Array [
exports[`renders components/button/demo/legacy-group.tsx extend context correctly 2`] = `[]`;
exports[`renders components/button/demo/linear-gradient.tsx extend context correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary Button
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Default Button
</span>
</button>
</div>
</div>
`;
exports[`renders components/button/demo/linear-gradient.tsx extend context correctly 2`] = `[]`;
exports[`renders components/button/demo/loading.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"

31
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -1649,6 +1649,37 @@ Array [
]
`;
exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-primary"
type="button"
>
<span>
Primary Button
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="button"
>
<span>
Default Button
</span>
</button>
</div>
</div>
`;
exports[`renders components/button/demo/loading.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"

7
components/button/demo/linear-gradient.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
自定义为渐变背景按钮。
## en-US
Buttons with gradient background.

26
components/button/demo/linear-gradient.tsx Normal file
View File

@ -0,0 +1,26 @@
import React from 'react';
import { Button, ConfigProvider, Space } from 'antd';
const App: React.FC = () => (
<ConfigProvider
theme={{
components: {
Button: {
colorPrimary: 'linear-gradient(90deg, #FF4E50, #F9D423) !important',
primaryShadow: 'none',
defaultBg: 'linear-gradient(90deg, #aea4e3, #d3ffe8) !important',
defaultShadow: 'none',
defaultColor: '#fff !important',
lineWidth: 0,
},
},
}}
>
<Space>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
</Space>
</ConfigProvider>
);
export default App;

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

@ -48,6 +48,7 @@ And 4 other properties additionally.
<code src="./demo/legacy-group.tsx" debug>Deprecated Button Group</code>
<code src="./demo/chinese-chars-loading.tsx" debug>Loading style bug</code>
<code src="./demo/component-token.tsx" debug>Component Token</code>
<code src="./demo/linear-gradient.tsx" debug>Gradient Button</code>
## API

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

@ -51,6 +51,7 @@ group:
<code src="./demo/legacy-group.tsx" debug>废弃的 Block 组</code>
<code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
<code src="./demo/component-token.tsx" debug>组件 Token</code>
<code src="./demo/linear-gradient.tsx" debug>渐变按钮</code>
## API

34
components/button/style/index.ts
View File

@ -171,7 +171,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
whiteSpace: 'nowrap',
textAlign: 'center',
backgroundImage: 'none',
backgroundColor: 'transparent',
background: 'transparent',
border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
cursor: 'pointer',
transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
@ -258,7 +258,7 @@ const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
cursor: 'not-allowed',
borderColor: token.borderColorDisabled,
color: token.colorTextDisabled,
backgroundColor: token.colorBgContainerDisabled,
background: token.colorBgContainerDisabled,
boxShadow: 'none',
});
@ -274,18 +274,18 @@ const genGhostButtonStyle = (
): CSSObject => ({
[`&${btnCls}-background-ghost`]: {
color: textColor || undefined,
backgroundColor: background,
background,
borderColor: borderColor || undefined,
boxShadow: 'none',
...genHoverActiveButtonStyle(
btnCls,
{
backgroundColor: background,
background,
...hoverStyle,
},
{
backgroundColor: background,
background,
...activeStyle,
},
),
@ -319,7 +319,7 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token
const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
...genSolidButtonStyle(token),
backgroundColor: token.defaultBg,
background: token.defaultBg,
borderColor: token.defaultBorderColor,
color: token.defaultColor,
@ -379,7 +379,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
...genSolidButtonStyle(token),
color: token.primaryColor,
backgroundColor: token.colorPrimary,
background: token.colorPrimary,
boxShadow: token.primaryShadow,
@ -387,11 +387,11 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
token.componentCls,
{
color: token.colorTextLightSolid,
backgroundColor: token.colorPrimaryHover,
background: token.colorPrimaryHover,
},
{
color: token.colorTextLightSolid,
backgroundColor: token.colorPrimaryActive,
background: token.colorPrimaryActive,
},
),
@ -413,17 +413,17 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
),
[`&${token.componentCls}-dangerous`]: {
backgroundColor: token.colorError,
background: token.colorError,
boxShadow: token.dangerShadow,
color: token.dangerColor,
...genHoverActiveButtonStyle(
token.componentCls,
{
backgroundColor: token.colorErrorHover,
background: token.colorErrorHover,
},
{
backgroundColor: token.colorErrorActive,
background: token.colorErrorActive,
},
),
@ -461,7 +461,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
token.componentCls,
{
color: token.colorLinkHover,
backgroundColor: token.linkHoverBg,
background: token.linkHoverBg,
},
{
color: token.colorLinkActive,
@ -493,11 +493,11 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
token.componentCls,
{
color: token.colorText,
backgroundColor: token.textHoverBg,
background: token.textHoverBg,
},
{
color: token.colorText,
backgroundColor: token.colorBgTextActive,
background: token.colorBgTextActive,
},
),
@ -511,11 +511,11 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
token.componentCls,
{
color: token.colorErrorHover,
backgroundColor: token.colorErrorBg,
background: token.colorErrorBg,
},
{
color: token.colorErrorHover,
backgroundColor: token.colorErrorBg,
background: token.colorErrorBg,
},
),
},

14
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -21734,7 +21734,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
>
<div
class="config-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -21762,7 +21762,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]
>
<div
class="config-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -21790,7 +21790,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
>
<div
class="config-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -21818,7 +21818,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
>
<div
class="config-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -21846,7 +21846,7 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1
>
<div
class="config-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -21874,7 +21874,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
>
<div
class="ant-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -21902,7 +21902,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
>
<div
class="prefix-Progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>

4
components/config-provider/__tests__/cssinjs.test.tsx
View File

@ -30,9 +30,7 @@ describe('ConfigProvider.DynamicTheme', () => {
expect(
dynamicStyles.some((style) => {
const { innerHTML } = style;
return (
innerHTML.includes('.ant-btn-primary') && innerHTML.includes('background-color:#f00000')
);
return innerHTML.includes('.ant-btn-primary') && innerHTML.includes('background:#f00000');
}),
).toBeTruthy();
});

16
components/progress/Line.tsx
View File

@ -5,6 +5,8 @@ import { devUseWarning } from '../_util/warning';
import type { DirectionType } from '../config-provider';
import type { ProgressGradient, ProgressProps, StringGradients } from './progress';
import { getSize, getSuccessPercent, validProgress } from './utils';
import { useContext } from 'react';
import { ConfigContext } from '../config-provider';
interface LineProps extends ProgressProps {
prefixCls: string;
@ -82,6 +84,8 @@ const Line: React.FC<LineProps> = (props) => {
success,
} = props;
const { direction } = useContext(ConfigContext);
const backgroundProps: React.CSSProperties =
strokeColor && typeof strokeColor !== 'string'
? handleGradient(strokeColor, directionConfig)
@ -105,18 +109,26 @@ const Line: React.FC<LineProps> = (props) => {
}
const percentStyle: React.CSSProperties = {
width: `${validProgress(percent)}%`,
width: `100%`,
height,
borderRadius,
clipPath:
direction === 'rtl'
? `inset(0 0 0 ${100 - validProgress(percent)}% round 100px)`
: `inset(0 ${100 - validProgress(percent)}% 0 0 round 100px)`,
...backgroundProps,
};
const successPercent = getSuccessPercent(props);
const successPercentStyle: React.CSSProperties = {
width: `${validProgress(successPercent)}%`,
width: `100%`,
height,
borderRadius,
clipPath:
direction === 'rtl'
? `inset(0 0 0 ${100 - validProgress(successPercent)}% round 100px)`
: `inset(0 ${100 - validProgress(successPercent)}% 0 0 round 100px)`,
backgroundColor: success?.strokeColor,
};

48
components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -533,7 +533,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -562,7 +562,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 50%; height: 6px;"
style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -591,7 +591,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 50%; height: 20px;"
style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -1275,7 +1275,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -1547,7 +1547,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
>
<div
class="ant-progress-bg"
style="width: 99.9%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 0.09999999999999432% 0 0 round 100px);"
/>
</div>
</div>
@ -1559,7 +1559,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
</span>
</div>
<div
aria-valuenow="99"
aria-valuenow="50"
class="ant-progress ant-progress-status-active ant-progress-line ant-progress-show-info ant-progress-default"
role="progressbar"
>
@ -1572,15 +1572,15 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
>
<div
class="ant-progress-bg"
style="width: 99.9%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
<span
class="ant-progress-text"
title="99.9%"
title="50%"
>
99.9%
50%
</span>
</div>
<div
@ -2104,7 +2104,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 30%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);"
/>
</div>
</div>
@ -2129,7 +2129,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -2154,7 +2154,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 70%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 30% 0 0 round 100px);"
/>
</div>
</div>
@ -2197,7 +2197,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 100%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
/>
</div>
</div>
@ -2239,7 +2239,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -2267,7 +2267,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
>
<div
class="ant-progress-bg"
style="width: 30%; height: 6px;"
style="width: 100%; height: 6px; clip-path: inset(0 70% 0 0 round 100px);"
/>
</div>
</div>
@ -2292,7 +2292,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
>
<div
class="ant-progress-bg"
style="width: 50%; height: 6px;"
style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -2317,7 +2317,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
>
<div
class="ant-progress-bg"
style="width: 70%; height: 6px;"
style="width: 100%; height: 6px; clip-path: inset(0 30% 0 0 round 100px);"
/>
</div>
</div>
@ -2360,7 +2360,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
>
<div
class="ant-progress-bg"
style="width: 100%; height: 6px;"
style="width: 100%; height: 6px; clip-path: inset(0 0% 0 0 round 100px);"
/>
</div>
</div>
@ -2410,7 +2410,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 75%; height: 8px; border-radius: 0;"
style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 100px);"
/>
</div>
</div>
@ -2559,11 +2559,11 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 60%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);"
/>
<div
class="ant-progress-success-bg"
style="width: 30%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);"
/>
</div>
</div>
@ -2775,7 +2775,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -2804,7 +2804,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 50%; height: 6px;"
style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -2833,7 +2833,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width: 50%; height: 20px;"
style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>

48
components/progress/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -503,7 +503,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:50%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>
@ -532,7 +532,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:50%;height:6px"
style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>
@ -561,7 +561,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:50%;height:20px"
style="width:100%;height:20px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>
@ -1193,7 +1193,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:0%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 100% 0 0 round 100px)"
/>
</div>
</div>
@ -1461,7 +1461,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
>
<div
class="ant-progress-bg"
style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
style="width:100%;height:8px;clip-path:inset(0 0.09999999999999432% 0 0 round 100px);background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
/>
</div>
</div>
@ -1473,7 +1473,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
</span>
</div>
<div
aria-valuenow="99"
aria-valuenow="50"
class="ant-progress ant-progress-status-active ant-progress-line ant-progress-show-info ant-progress-default"
role="progressbar"
>
@ -1486,15 +1486,15 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
>
<div
class="ant-progress-bg"
style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9, #87d068)"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px);background-image:linear-gradient(to right, #108ee9, #87d068)"
/>
</div>
</div>
<span
class="ant-progress-text"
title="99.9%"
title="50%"
>
99.9%
50%
</span>
</div>
<div
@ -2016,7 +2016,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:30%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 70% 0 0 round 100px)"
/>
</div>
</div>
@ -2041,7 +2041,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:50%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>
@ -2066,7 +2066,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:70%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 30% 0 0 round 100px)"
/>
</div>
</div>
@ -2109,7 +2109,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:100%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 0% 0 0 round 100px)"
/>
</div>
</div>
@ -2151,7 +2151,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:50%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>
@ -2177,7 +2177,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
>
<div
class="ant-progress-bg"
style="width:30%;height:6px"
style="width:100%;height:6px;clip-path:inset(0 70% 0 0 round 100px)"
/>
</div>
</div>
@ -2202,7 +2202,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
>
<div
class="ant-progress-bg"
style="width:50%;height:6px"
style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>
@ -2227,7 +2227,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
>
<div
class="ant-progress-bg"
style="width:70%;height:6px"
style="width:100%;height:6px;clip-path:inset(0 30% 0 0 round 100px)"
/>
</div>
</div>
@ -2270,7 +2270,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
>
<div
class="ant-progress-bg"
style="width:100%;height:6px"
style="width:100%;height:6px;clip-path:inset(0 0% 0 0 round 100px)"
/>
</div>
</div>
@ -2318,7 +2318,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:75%;height:8px;border-radius:0"
style="width:100%;height:8px;border-radius:0;clip-path:inset(0 25% 0 0 round 100px)"
/>
</div>
</div>
@ -2465,11 +2465,11 @@ Array [
>
<div
class="ant-progress-bg"
style="width:60%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 40% 0 0 round 100px)"
/>
<div
class="ant-progress-success-bg"
style="width:30%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 70% 0 0 round 100px)"
/>
</div>
</div>
@ -2622,7 +2622,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:50%;height:8px"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>
@ -2651,7 +2651,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:50%;height:6px"
style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>
@ -2680,7 +2680,7 @@ Array [
>
<div
class="ant-progress-bg"
style="width:50%;height:20px"
style="width:100%;height:20px;clip-path:inset(0 50% 0 0 round 100px)"
/>
</div>
</div>

28
components/progress/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -180,11 +180,11 @@ exports[`Progress render format 1`] = `
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
<div
class="ant-progress-success-bg"
style="width: 10%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 90% 0 0 round 100px);"
/>
</div>
</div>
@ -212,7 +212,7 @@ exports[`Progress render negative progress 1`] = `
>
<div
class="ant-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -240,11 +240,11 @@ exports[`Progress render negative successPercent 1`] = `
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
<div
class="ant-progress-success-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -272,7 +272,7 @@ exports[`Progress render normal progress 1`] = `
>
<div
class="ant-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -300,7 +300,7 @@ exports[`Progress render out-of-range progress 1`] = `
>
<div
class="ant-progress-bg"
style="width: 100%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
/>
</div>
</div>
@ -345,7 +345,7 @@ exports[`Progress render out-of-range progress with info 1`] = `
>
<div
class="ant-progress-bg"
style="width: 100%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
/>
</div>
</div>
@ -445,7 +445,7 @@ exports[`Progress render strokeColor 2`] = `
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -473,7 +473,7 @@ exports[`Progress render strokeColor 3`] = `
>
<div
class="ant-progress-bg"
style="width: 50%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
/>
</div>
</div>
@ -558,11 +558,11 @@ exports[`Progress render successColor progress 1`] = `
>
<div
class="ant-progress-bg"
style="width: 60%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);"
/>
<div
class="ant-progress-success-bg"
style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"
style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px); background-color: rgb(255, 255, 255);"
/>
</div>
</div>
@ -701,7 +701,7 @@ exports[`Progress render trailColor progress 1`] = `
>
<div
class="ant-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
/>
</div>
</div>
@ -729,7 +729,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
>
<div
class="ant-progress-bg"
style="width: 0%; height: 8px;"
style="width: 100%; height: 8px; clip-path: inset(0 0 0 100% round 100px);"
/>
</div>
</div>

2
components/progress/demo/gradient-line.tsx
View File

@ -7,7 +7,7 @@ const conicColors = { '0%': '#87d068', '50%': '#ffe58f', '100%': '#ffccc7' };
const App: React.FC = () => (
<div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
<Progress percent={99.9} strokeColor={twoColors} />
<Progress percent={99.9} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
<Progress percent={50} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
<Space wrap>
<Progress type="circle" percent={90} strokeColor={twoColors} />
<Progress type="circle" percent={100} strokeColor={twoColors} />

5
scripts/visual-regression-report.md Normal file
View File

@ -0,0 +1,5 @@
| expected | actual | diff |
| --- | --- | --- |
| ![master image name](test/fixtures/4a.png) | ![pr image name](test/fixtures/4b.png) | ![diff](test/fixtures/4diff.png) |
| ![master image name](test/fixtures/3a.png) | ![pr image name](test/fixtures/3b.png) | ![diff](test/fixtures/3diff.png) |
| ![master image name](test/fixtures/6a.png) | ![pr image name](test/fixtures/6b.png) | ![diff](test/fixtures/6diff.png) |

6
visual-regression-report.md Normal file
View File

File diff suppressed because one or more lines are too long