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