diff --git a/superset-frontend/src/components/Steps/Steps.stories.tsx b/superset-frontend/src/components/Steps/Steps.stories.tsx
new file mode 100644
index 000000000..a2e29d11f
--- /dev/null
+++ b/superset-frontend/src/components/Steps/Steps.stories.tsx
@@ -0,0 +1,72 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { Steps, StepsProps } from '.';
+
+export default {
+ title: 'Steps',
+ component: Steps,
+};
+
+export const InteractiveSteps = (args: StepsProps) => ;
+InteractiveSteps.args = {
+ direction: 'horizontal',
+ initial: 0,
+ labelPlacement: 'horizontal',
+ progressDot: false,
+ size: 'default',
+ status: 'process',
+ type: 'default',
+ items: [
+ {
+ title: 'Step 1',
+ description: 'Description 1',
+ },
+ {
+ title: 'Step 2',
+ description: 'Description 2',
+ },
+ {
+ title: 'Step 3',
+ description: 'Description 3',
+ },
+ ],
+};
+
+InteractiveSteps.argTypes = {
+ direction: {
+ options: ['horizontal', 'vertical'],
+ control: { type: 'select' },
+ },
+ labelPlacement: {
+ options: ['horizontal', 'vertical'],
+ control: { type: 'select' },
+ },
+ size: {
+ options: ['default', 'small'],
+ control: { type: 'select' },
+ },
+ status: {
+ options: ['wait', 'process', 'finish', 'error'],
+ control: { type: 'select' },
+ },
+ type: {
+ options: ['default', 'navigation', 'inline'],
+ control: { type: 'select' },
+ },
+};
diff --git a/superset-frontend/src/components/Steps/Steps.test.tsx b/superset-frontend/src/components/Steps/Steps.test.tsx
new file mode 100644
index 000000000..53418e2f1
--- /dev/null
+++ b/superset-frontend/src/components/Steps/Steps.test.tsx
@@ -0,0 +1,25 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render } from 'spec/helpers/testing-library';
+import { Steps } from '.';
+
+test('should render with default props', () => {
+ const { container } = render();
+ expect(container).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/components/Steps/index.tsx b/superset-frontend/src/components/Steps/index.tsx
new file mode 100644
index 000000000..e582e125c
--- /dev/null
+++ b/superset-frontend/src/components/Steps/index.tsx
@@ -0,0 +1,33 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+/*
+ * Re-exporting of components in src/components to facilitate
+ * their imports by other components.
+ * E.g. import { Select } from 'src/components'
+ */
+
+import { Steps as AntdSteps } from 'antd-v5';
+import { StepsProps as AntdStepsProps } from 'antd-v5/es/steps';
+
+export type StepsProps = AntdStepsProps;
+
+export const Steps: typeof AntdSteps = Object.assign(AntdSteps, {
+ Step: AntdSteps.Step,
+});
diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts
index 45db6f084..50ce180eb 100644
--- a/superset-frontend/src/components/index.ts
+++ b/superset-frontend/src/components/index.ts
@@ -37,7 +37,6 @@ export {
Grid,
Row,
Skeleton,
- Steps,
Tag,
Tree,
TreeSelect,
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
index 4b84351da..5cbce4954 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -30,7 +30,8 @@ import { getUrlParam } from 'src/utils/urlUtils';
import { FilterPlugins, URL_PARAMS } from 'src/constants';
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
import Button from 'src/components/Button';
-import { AsyncSelect, Steps } from 'src/components';
+import { AsyncSelect } from 'src/components';
+import { Steps } from 'src/components/Steps';
import withToasts from 'src/components/MessageToasts/withToasts';
import VizTypeGallery, {
@@ -125,25 +126,25 @@ const StyledContainer = styled.div`
/* The following extra ampersands (&&&&) are used to boost selector specificity */
- &&&& .ant-steps-item-tail {
+ &&&& .antd5-steps-item-tail {
display: none;
}
- &&&& .ant-steps-item-icon {
+ &&&& .antd5-steps-item-icon {
margin-right: ${theme.gridUnit * 2}px;
width: ${theme.gridUnit * 5}px;
height: ${theme.gridUnit * 5}px;
line-height: ${theme.gridUnit * 5}px;
}
- &&&& .ant-steps-item-title {
+ &&&& .antd5-steps-item-title {
line-height: ${theme.gridUnit * 5}px;
}
- &&&& .ant-steps-item-content {
+ &&&& .antd5-steps-item-content {
overflow: unset;
- .ant-steps-item-description {
+ .antd5-steps-item-description {
margin-top: ${theme.gridUnit}px;
padding-bottom: ${theme.gridUnit}px;
}
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts
index f1eefdaa5..1b067aa1a 100644
--- a/superset-frontend/src/theme/index.ts
+++ b/superset-frontend/src/theme/index.ts
@@ -125,6 +125,10 @@ const baseConfig: ThemeConfig = {
handleSizeHover: 10,
handleLineWidthHover: 2,
},
+ Steps: {
+ margin: supersetTheme.gridUnit * 2,
+ iconSizeSM: 20,
+ },
Switch: {
colorPrimaryHover: supersetTheme.colors.primary.base,
colorTextTertiary: supersetTheme.colors.grayscale.light1,