diff --git a/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx b/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx
index ffab33725530a..62ad8ae203e52 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,37 +25,67 @@ 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: {
+const commonArgTypes = {
+ strokeLinecap: {
control: {
type: 'select',
},
- options: ['normal', 'success', 'exception', 'active'],
+ options: ['round', 'butt', 'square'],
},
- strokeLinecap: {
+ type: {
control: {
type: 'select',
},
- options: ['round', 'square'],
+ options: ['line', 'circle', 'dashboard'],
},
- type: {
+};
+
+InteractiveProgressBar.args = {
+ ...commonArgs,
+ status: 'normal',
+};
+
+InteractiveProgressBar.argTypes = {
+ ...commonArgTypes,
+ status: {
control: {
type: 'select',
},
- options: ['line', 'circle', 'dashboard'],
+ 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 097cbc5630266..1fd2324cf5827 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 308ea035d48cf..ea51101c2638e 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,
+ },
},
};