(superset) branch geido/refactor/antd5-progressbar created (now 9fbfc4d2af)

[di...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a change to branch geido/refactor/antd5-progressbar
in repository https://gitbox.apache.org/repos/asf/superset.git


      at 9fbfc4d2af refactor(Progressbar): Upgrade to Antd 5

This branch includes the following new commits:

     new 9fbfc4d2af refactor(Progressbar): Upgrade to Antd 5

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(superset) 01/01: refactor(Progressbar): Upgrade to Antd 5

[di...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

diegopucci pushed a commit to branch geido/refactor/antd5-progressbar
in repository https://gitbox.apache.org/repos/asf/superset.git

commit 9fbfc4d2af6c8217fc1169382f98d8bf00262372
Author: Diego Pucci <di...@gmail.com>
AuthorDate: Tue Jul 23 13:54:26 2024 +0300

    refactor(Progressbar): Upgrade to Antd 5
---
 .../components/ProgressBar/ProgressBar.stories.tsx | 51 +++++++++++++++++-----
 .../src/components/ProgressBar/index.tsx           | 15 ++-----
 superset-frontend/src/theme/index.ts               |  5 +++
 3 files changed, 50 insertions(+), 21 deletions(-)

diff --git a/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx b/superset-frontend/src/components/ProgressBar/ProgressBar.stories.tsx
index ffab337255..62ad8ae203 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) => (
-  <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
index 097cbc5630..1fd2324cf5 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) => (
   <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
index 308ea035d4..ea51101c26 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,
+    },
   },
 };