From f3c5d1c608a378cda411c73a69502e0b144b310a Mon Sep 17 00:00:00 2001 From: Mehmet Salih Yavuz Date: Tue, 7 Jan 2025 14:41:19 +0300 Subject: [PATCH] refactor(Steps): Migrate Steps to Ant Design 5 (#31718) --- .../src/components/Steps/Steps.stories.tsx | 72 +++++++++++++++++++ .../src/components/Steps/Steps.test.tsx | 25 +++++++ .../src/components/Steps/index.tsx | 33 +++++++++ superset-frontend/src/components/index.ts | 1 - .../src/pages/ChartCreation/index.tsx | 13 ++-- superset-frontend/src/theme/index.ts | 4 ++ 6 files changed, 141 insertions(+), 7 deletions(-) create mode 100644 superset-frontend/src/components/Steps/Steps.stories.tsx create mode 100644 superset-frontend/src/components/Steps/Steps.test.tsx create mode 100644 superset-frontend/src/components/Steps/index.tsx 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 0000000000000..a2e29d11f93e0 --- /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 0000000000000..53418e2f14788 --- /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 0000000000000..e582e125cf026 --- /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 45db6f084ed2f..50ce180eb392f 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 4b84351da1989..5cbce4954d736 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 f1eefdaa59cea..1b067aa1a00f5 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,