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, + }, }, };