refactor(Divider): Migrate Divider to Ant Design 5 (#31607)

superset-frontend/src/components/CronPicker/CronPicker.stories.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { useState, useRef, useCallback } from 'react';
-import { Divider } from 'src/components';
+import { Divider } from 'src/components/Divider';
 import { Input } from 'src/components/Input';
 import { CronPicker, CronError, CronProps } from '.';
 

superset-frontend/src/components/Divider/Divider.stories.tsx

@@ -0,0 +1,52 @@
+/**
+ * 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 { Divider, DividerProps } from 'src/components/Divider';
+
+export default {
+  title: 'Divider',
+  component: Divider,
+};
+
+export const InteractiveDivider = (args: DividerProps) => <Divider {...args} />;
+
+InteractiveDivider.args = {
+  dashed: false,
+  variant: 'solid',
+  orientation: 'center',
+  plain: true,
+  type: 'horizontal',
+};
+
+InteractiveDivider.argTypes = {
+  variant: {
+    control: { type: 'select' },
+    options: ['dashed', 'dotted', 'solid'],
+  },
+  orientation: {
+    control: { type: 'select' },
+    options: ['left', 'right', 'center'],
+  },
+  orientationMargin: {
+    control: { type: 'text' },
+  },
+  type: {
+    control: { type: 'select' },
+    options: ['horizontal', 'vertical'],
+  },
+};

superset-frontend/src/components/Divider/Divider.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 { Divider } from '.';
+
+test('should render', () => {
+  const { container } = render(<Divider />);
+  expect(container).toBeInTheDocument();
+});

superset-frontend/src/components/Divider/index.tsx

@@ -0,0 +1,27 @@
+/**
+ * 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 { Divider as AntdDivider } from 'antd-v5';
+import type { DividerProps } from 'antd-v5/es/divider';
+
+export function Divider(props: DividerProps) {
+  return <AntdDivider {...props} />;
+}
+
+export { DividerProps };

superset-frontend/src/components/index.ts

@@ -34,7 +34,6 @@ export { default as Card } from './Card';
 export {
   AutoComplete,
   Col,
-  Divider,
   Empty,
   Grid,
   Row,

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

@@ -30,7 +30,7 @@ import {
 import Button from 'src/components/Button';
 import ControlHeader from 'src/explore/components/ControlHeader';
 import Modal from 'src/components/Modal';
-import { Divider } from 'src/components';
+import { Divider } from 'src/components/Divider';
 import Icons from 'src/components/Icons';
 import Select from 'src/components/Select/Select';
 import { Tooltip } from 'src/components/Tooltip';
@@ -75,7 +75,7 @@ const ContentStyleWrapper = styled.div`
       width: 100%;
     }
 
-    .ant-divider-horizontal {
+    .antd5-divider-horizontal {
       margin: 16px 0;
     }
 

superset-frontend/src/features/tags/TagModal.tsx

@@ -24,7 +24,7 @@ import AsyncSelect from 'src/components/Select/AsyncSelect';
 import { FormLabel } from 'src/components/Form';
 import { t, styled, SupersetClient } from '@superset-ui/core';
 import { Input } from 'antd';
-import { Divider } from 'src/components';
+import { Divider } from 'src/components/Divider';
 import Button from 'src/components/Button';
 import { Tag } from 'src/views/CRUD/types';
 import { fetchObjectsByTagIds } from 'src/features/tags/tags';

superset-frontend/src/theme/index.ts

@@ -77,6 +77,9 @@ const baseConfig: ThemeConfig = {
       fontWeightStrong: supersetTheme.typography.weights.medium,
       colorBgContainer: supersetTheme.colors.grayscale.light4,
     },
+    Divider: {
+      colorSplit: supersetTheme.colors.grayscale.light3,
+    },
     Input: {
       colorBorder: supersetTheme.colors.secondary.light3,
       colorBgContainer: supersetTheme.colors.grayscale.light5,