diff --git a/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx b/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx
index 5ab5a928129b1..262246b8447bf 100644
--- a/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx
+++ b/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 '.';
diff --git a/superset-frontend/src/components/Divider/Divider.stories.tsx b/superset-frontend/src/components/Divider/Divider.stories.tsx
new file mode 100644
index 0000000000000..c60789849efe2
--- /dev/null
+++ b/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) => ;
+
+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'],
+ },
+};
diff --git a/superset-frontend/src/components/Divider/Divider.test.tsx b/superset-frontend/src/components/Divider/Divider.test.tsx
new file mode 100644
index 0000000000000..8148754c0e0ce
--- /dev/null
+++ b/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();
+ expect(container).toBeInTheDocument();
+});
diff --git a/superset-frontend/src/components/Divider/index.tsx b/superset-frontend/src/components/Divider/index.tsx
new file mode 100644
index 0000000000000..1e0110c8233b9
--- /dev/null
+++ b/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 ;
+}
+
+export { DividerProps };
diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts
index 43c82eb334e3a..3bde8dfc46da9 100644
--- a/superset-frontend/src/components/index.ts
+++ b/superset-frontend/src/components/index.ts
@@ -34,7 +34,6 @@ export { default as Card } from './Card';
export {
AutoComplete,
Col,
- Divider,
Empty,
Grid,
Row,
diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
index dfba47e3c9e31..a4b0ca3a3ee99 100644
--- a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx
+++ b/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;
}
diff --git a/superset-frontend/src/features/tags/TagModal.tsx b/superset-frontend/src/features/tags/TagModal.tsx
index 5ca4fd5443599..0704e19225b58 100644
--- a/superset-frontend/src/features/tags/TagModal.tsx
+++ b/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';
diff --git a/superset-frontend/src/theme/index.ts b/superset-frontend/src/theme/index.ts
index a574af0c5e7b1..f1eefdaa59cea 100644
--- a/superset-frontend/src/theme/index.ts
+++ b/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,