refactor(Steps): Migrate Steps to Ant Design 5 (#31718)

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) => <Steps {...args} />;
+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' },
+  },
+};

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(<Steps />);
+  expect(container).toBeInTheDocument();
+});

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

superset-frontend/src/components/index.ts

@@ -37,7 +37,6 @@ export {
   Grid,
   Row,
   Skeleton,
-  Steps,
   Tag,
   Tree,
   TreeSelect,

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

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,