Skip to content

Commit

Permalink
refactor(ProgressBar): Upgrade ProgressBar to Antd 5 (#29666)
Browse files Browse the repository at this point in the history
  • Loading branch information
geido authored Jul 23, 2024
1 parent cd713a2 commit 3de2b7c
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 21 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
15 changes: 4 additions & 11 deletions superset-frontend/src/components/ProgressBar/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 &&
Expand Down
5 changes: 5 additions & 0 deletions superset-frontend/src/theme/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
},
};

Expand Down

0 comments on commit 3de2b7c

Please sign in to comment.