refactor(ProgressBar): Upgrade ProgressBar to Antd 5 (apache#29666)

justinpark · Jul 23, 2024 · 3de2b7c · 3de2b7c
1 parent cd713a2
commit 3de2b7c
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 21 deletions.
diff --git 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) => (
-  <ProgressBar {...args} />
+  <AntdThemeProvider>
+    <ProgressBar {...args} type="line" />
+  </AntdThemeProvider>
 );
 
-InteractiveProgressBar.args = {
+export const InteractiveProgressCircle = (args: ProgressBarProps) => (
+  <AntdThemeProvider>
+    <ProgressBar {...args} type="circle" />
+  </AntdThemeProvider>
+);
+
+export const InteractiveProgressDashboard = (args: ProgressBarProps) => (
+  <AntdThemeProvider>
+    <ProgressBar {...args} type="dashboard" />
+  </AntdThemeProvider>
+);
+
+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
@@ -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) => (
   <AntdProgress data-test="progress-bar" {...props} />
 ))`
-  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
@@ -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,
+    },
   },
 };