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,