diff --git a/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx b/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx
index ffab33725..62ad8ae20 100644
--- a/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -16,6 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
+import { AntdThemeProvider } from 'src/components/AntdThemeProvider';
import ProgressBar, { ProgressBarProps } from '.';
export default {
@@ -24,32 +25,39 @@ export default {
};
export const InteractiveProgressBar = (args: ProgressBarProps) => (
-
+
+
+
);
-InteractiveProgressBar.args = {
+export const InteractiveProgressCircle = (args: ProgressBarProps) => (
+
+
+
+);
+
+export const InteractiveProgressDashboard = (args: ProgressBarProps) => (
+
+
+
+);
+
+const commonArgs = {
striped: true,
percent: 90,
showInfo: true,
- status: 'normal',
strokeColor: '#FF0000',
trailColor: '#000',
strokeLinecap: 'round',
type: 'line',
};
-InteractiveProgressBar.argTypes = {
- status: {
- control: {
- type: 'select',
- },
- options: ['normal', 'success', 'exception', 'active'],
- },
+const commonArgTypes = {
strokeLinecap: {
control: {
type: 'select',
},
- options: ['round', 'square'],
+ options: ['round', 'butt', 'square'],
},
type: {
control: {
@@ -58,3 +66,26 @@ InteractiveProgressBar.argTypes = {
options: ['line', 'circle', 'dashboard'],
},
};
+
+InteractiveProgressBar.args = {
+ ...commonArgs,
+ status: 'normal',
+};
+
+InteractiveProgressBar.argTypes = {
+ ...commonArgTypes,
+ status: {
+ control: {
+ type: 'select',
+ },
+ options: ['normal', 'success', 'exception', 'active'],
+ },
+};
+
+InteractiveProgressCircle.args = commonArgs;
+
+InteractiveProgressCircle.argTypes = commonArgTypes;
+
+InteractiveProgressDashboard.args = commonArgs;
+
+InteractiveProgressDashboard.argTypes = commonArgTypes;
diff --git a/superset-frontend/src/components/ProgressBar/index.tsx b/superset-frontend/src/components/ProgressBar/index.tsx
index 097cbc563..1fd2324cf 100644
--- a/superset-frontend/src/components/ProgressBar/index.tsx
+++ b/superset-frontend/src/components/ProgressBar/index.tsx
@@ -17,8 +17,8 @@
* under the License.
*/
import { styled } from '@superset-ui/core';
-import { Progress as AntdProgress } from 'antd';
-import { ProgressProps } from 'antd/lib/progress/progress';
+import { Progress as AntdProgress } from 'antd-v5';
+import { ProgressProps } from 'antd-v5/lib/progress/progress';
export interface ProgressBarProps extends ProgressProps {
striped?: boolean;
@@ -28,18 +28,11 @@ export interface ProgressBarProps extends ProgressProps {
const ProgressBar = styled(({ striped, ...props }: ProgressBarProps) => (
))`
- line-height: 0;
position: static;
- .ant-progress-inner {
+ .antd5-progress-inner {
position: static;
}
- .ant-progress-outer {
- ${({ percent }) => !percent && `display: none;`}
- }
- .ant-progress-text {
- font-size: ${({ theme }) => theme.typography.sizes.s}px;
- }
- .ant-progress-bg {
+ .antd5-progress-bg {
position: static;
${({ striped }) =>
striped &&
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts
index 308ea035d..ea51101c2 100644
--- a/superset-frontend/src/theme/index.ts
+++ b/superset-frontend/src/theme/index.ts
@@ -64,6 +64,11 @@ const baseConfig: ThemeConfig = {
borderRadiusSM: supersetTheme.gridUnit / 2,
defaultBg: supersetTheme.colors.grayscale.light4,
},
+ Progress: {
+ fontSize: supersetTheme.typography.sizes.s,
+ colorText: supersetTheme.colors.text.label,
+ remainingColor: supersetTheme.colors.grayscale.light4,
+ },
},
};