diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx index 04c6e74c6..d7882ccdb 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx +++ b/superset-frontend/plugins/plugin-chart-echarts/src/BigNumber/BigNumberViz.tsx @@ -120,7 +120,7 @@ class BigNumberVis extends PureComponent { className="kicker" style={{ fontSize, - height: maxHeight, + height: 'auto', }} > {text} @@ -156,7 +156,7 @@ class BigNumberVis extends PureComponent { document.body.append(container); const fontSize = computeMaxFontSize({ text, - maxWidth: width - 8, // Decrease 8px for more precise font size + maxWidth: width * 0.9, // reduced it's max width maxHeight, className: 'header-line', container, @@ -174,8 +174,10 @@ class BigNumberVis extends PureComponent {
{ document.body.append(container); fontSize = computeMaxFontSize({ text, - maxWidth: width, + maxWidth: width * 0.9, // max width reduced maxHeight, className: 'subheader-line', container, @@ -356,6 +358,7 @@ export default styled(BigNumberVis)` position: relative; line-height: 1em; white-space: nowrap; + margin-bottom:${theme.gridUnit * 2}px; span { position: absolute; bottom: 0; diff --git a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx index 4093a8feb..30103dafa 100644 --- a/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx +++ b/superset-frontend/src/SqlLab/components/QueryHistory/index.tsx @@ -42,7 +42,7 @@ interface QueryHistoryProps { const StyledEmptyStateWrapper = styled.div` height: 100%; - .ant-empty-image img { + .antd5-empty-image img { margin-right: 28px; } diff --git a/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx b/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx index 221583718..3dfec40bd 100644 --- a/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx +++ b/superset-frontend/src/SqlLab/components/SouthPane/Results.tsx @@ -37,7 +37,7 @@ type Props = { const StyledEmptyStateWrapper = styled.div` height: 100%; - .ant-empty-image img { + .antd5-empty-image img { margin-right: 28px; } diff --git a/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx b/superset-frontend/src/components/CronPicker/CronPicker.stories.tsx index 5ab5a9281..262246b84 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 000000000..c60789849 --- /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 000000000..8148754c0 --- /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 000000000..1e0110c82 --- /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/EmptyState/Empty.test.tsx b/superset-frontend/src/components/EmptyState/Empty.test.tsx new file mode 100644 index 000000000..7c9ace0fc --- /dev/null +++ b/superset-frontend/src/components/EmptyState/Empty.test.tsx @@ -0,0 +1,26 @@ +/** + * 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 { Empty } from './Empty'; + +test('should render', () => { + const { container } = render(); + expect(container).toBeInTheDocument(); +}); diff --git a/superset-frontend/src/components/EmptyState/Empty.tsx b/superset-frontend/src/components/EmptyState/Empty.tsx new file mode 100644 index 000000000..b507027c6 --- /dev/null +++ b/superset-frontend/src/components/EmptyState/Empty.tsx @@ -0,0 +1,29 @@ +/** + * 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 { Empty as AntdEmpty } from 'antd-v5'; +import { EmptyProps } from 'antd-v5/es/empty'; + +export const Empty = Object.assign( + (props: EmptyProps) => , + { + PRESENTED_IMAGE_SIMPLE: AntdEmpty.PRESENTED_IMAGE_SIMPLE, + PRESENTED_IMAGE_DEFAULT: AntdEmpty.PRESENTED_IMAGE_DEFAULT, + }, +); diff --git a/superset-frontend/src/components/EmptyState/index.tsx b/superset-frontend/src/components/EmptyState/index.tsx index 9eb3d9e9d..edc13e622 100644 --- a/superset-frontend/src/components/EmptyState/index.tsx +++ b/superset-frontend/src/components/EmptyState/index.tsx @@ -23,8 +23,8 @@ import { MouseEventHandler as ReactMouseEventHandler, } from 'react'; import { styled, css, SupersetTheme, t } from '@superset-ui/core'; -import { Empty } from 'src/components'; import Button from 'src/components/Button'; +import { Empty } from './Empty'; export enum EmptyStateSize { Small, @@ -60,7 +60,7 @@ const EmptyStateContainer = styled.div` padding: ${theme.gridUnit * 4}px; text-align: center; - & .ant-empty-image svg { + & .antd5-empty-image svg { width: auto; } diff --git a/superset-frontend/src/components/ListView/ListView.test.jsx b/superset-frontend/src/components/ListView/ListView.test.jsx index 35bd2ca07..64869ad67 100644 --- a/superset-frontend/src/components/ListView/ListView.test.jsx +++ b/superset-frontend/src/components/ListView/ListView.test.jsx @@ -22,7 +22,7 @@ import { QueryParamProvider } from 'use-query-params'; import { supersetTheme, ThemeProvider } from '@superset-ui/core'; import Button from 'src/components/Button'; -import { Empty } from 'src/components'; +import { Empty } from 'src/components/EmptyState/Empty'; import CardCollection from 'src/components/ListView/CardCollection'; import { CardSortSelect } from 'src/components/ListView/CardSortSelect'; import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox'; diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx index c9a39e717..30bcb99aa 100644 --- a/superset-frontend/src/components/ListView/ListView.tsx +++ b/superset-frontend/src/components/ListView/ListView.tsx @@ -67,8 +67,8 @@ const ListViewStyles = styled.div` overflow-x: auto; } - .ant-empty { - .ant-empty-image { + .antd5-empty { + .antd5-empty-image { height: auto; } } diff --git a/superset-frontend/src/components/TableView/TableView.tsx b/superset-frontend/src/components/TableView/TableView.tsx index e5879baf6..ff5e00337 100644 --- a/superset-frontend/src/components/TableView/TableView.tsx +++ b/superset-frontend/src/components/TableView/TableView.tsx @@ -20,7 +20,7 @@ import { memo, useEffect, useRef } from 'react'; import { isEqual } from 'lodash'; import { styled, t } from '@superset-ui/core'; import { useFilters, usePagination, useSortBy, useTable } from 'react-table'; -import { Empty } from 'src/components'; +import { Empty } from 'src/components/EmptyState/Empty'; import Pagination from 'src/components/Pagination'; import TableCollection from 'src/components/TableCollection'; import { SortByType, ServerPagination } from './types'; diff --git a/superset-frontend/src/components/index.ts b/superset-frontend/src/components/index.ts index 43c82eb33..95095a4a7 100644 --- a/superset-frontend/src/components/index.ts +++ b/superset-frontend/src/components/index.ts @@ -34,8 +34,6 @@ export { default as Card } from './Card'; export { AutoComplete, Col, - Divider, - Empty, Grid, Row, Skeleton, diff --git a/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx b/superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx index dfba47e3c..a4b0ca3a3 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/home/EmptyState.tsx b/superset-frontend/src/features/home/EmptyState.tsx index 0eac712cc..cbcede55e 100644 --- a/superset-frontend/src/features/home/EmptyState.tsx +++ b/superset-frontend/src/features/home/EmptyState.tsx @@ -18,7 +18,7 @@ */ import { Link } from 'react-router-dom'; import Button from 'src/components/Button'; -import { Empty } from 'src/components'; +import { Empty } from 'src/components/EmptyState/Empty'; import { TableTab } from 'src/views/CRUD/types'; import { styled, t } from '@superset-ui/core'; import { WelcomeTable } from './types'; diff --git a/superset-frontend/src/features/tags/TagModal.tsx b/superset-frontend/src/features/tags/TagModal.tsx index 5ca4fd544..0704e1922 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 a574af0c5..f1eefdaa5 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,