This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 3d3c09d299 chore(Tooltip): Upgrade Tooltip to Ant Design 5 (#31182)
3d3c09d299 is described below
commit 3d3c09d299ccb43a6582f0bedadc844a07e65311
Author: alexandrusoare <[email protected]>
AuthorDate: Sat Nov 30 12:37:40 2024 +0200
chore(Tooltip): Upgrade Tooltip to Ant Design 5 (#31182)
Co-authored-by: Diego Pucci <[email protected]>
---
.../cypress/e2e/chart_list/list.test.ts | 2 +-
.../cypress/e2e/explore/control.test.ts | 11 ++--
.../cypress-base/cypress/support/directories.ts | 2 +-
.../src/components/InfoTooltipWithTrigger.tsx | 3 +-
.../src/components/Tooltip.tsx | 67 ++++++++++------------
.../test/OptionDescription.test.jsx | 1 -
.../src/SqlLab/components/ColumnElement/index.tsx | 2 +-
.../src/SqlLab/components/TableElement/index.tsx | 3 +-
superset-frontend/src/components/Button/index.tsx | 3 +-
.../src/components/InfoTooltip/index.tsx | 3 +-
.../src/components/ListView/ActionsBar.tsx | 3 +-
.../src/components/ListView/CrossLinks.tsx | 2 +-
.../src/components/Tooltip/Tooltip.stories.tsx | 3 +-
.../src/components/Tooltip/Tooltip.test.tsx | 8 +--
superset-frontend/src/components/Tooltip/index.tsx | 40 ++++++-------
.../src/components/TooltipParagraph/index.tsx | 4 +-
.../src/components/TruncatedList/index.tsx | 2 +-
.../src/dashboard/components/SliceHeader/index.tsx | 2 +-
.../components/nativeFilters/FilterCard/Styles.ts | 2 +-
.../FilterCard/TooltipWithTruncation.tsx | 3 +-
superset-frontend/src/dashboard/styles.ts | 4 +-
.../ColorSchemeControl/ColorSchemeLabel.tsx | 2 +-
.../components/DateFunctionTooltip.tsx | 4 +-
.../components/controls/VizTypeControl/VizTile.tsx | 4 +-
.../src/pages/ChartCreation/index.tsx | 2 +-
.../pages/SavedQueryList/SavedQueryList.test.jsx | 4 +-
superset-frontend/src/theme/index.ts | 4 ++
.../TooltipWithTruncation.tsx => types/Action.ts} | 18 +-----
28 files changed, 86 insertions(+), 122 deletions(-)
diff --git a/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
b/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
index 0b05a53d34..4ea519acff 100644
--- a/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/chart_list/list.test.ts
@@ -87,7 +87,7 @@ describe('Charts list', () => {
visitChartList();
cy.getBySel('count-crosslinks').should('be.visible');
cy.getBySel('crosslinks').first().trigger('mouseover');
- cy.get('.ant-tooltip')
+ cy.get('.antd5-tooltip')
.contains('3 - Sample dashboard')
.invoke('removeAttr', 'target')
.click();
diff --git a/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
b/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
index 5fd49efa01..1db90b1968 100644
--- a/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
+++ b/superset-frontend/cypress-base/cypress/e2e/explore/control.test.ts
@@ -99,16 +99,13 @@ describe('Color scheme control', () => {
cy.get('.ant-select-selection-item .color-scheme-label').trigger(
'mouseover',
);
+ cy.get('.color-scheme-tooltip').should('be.visible');
cy.get('.color-scheme-tooltip').contains('Superset Colors');
cy.get('.Control[data-test="color_scheme"]').scrollIntoView();
cy.get('.Control[data-test="color_scheme"] input[type="search"]').focus();
- cy.focused().type('lyftColors{enter}');
- cy.get(
- '.Control[data-test="color_scheme"] .ant-select-selection-item
[data-test="lyftColors"]',
- ).should('exist');
- cy.get('.ant-select-selection-item .color-scheme-label').trigger(
- 'mouseover',
- );
+ cy.focused().type('lyftColors');
+ cy.getBySel('lyftColors').should('exist');
+ cy.getBySel('lyftColors').trigger('mouseover');
cy.get('.color-scheme-tooltip').should('not.exist');
});
});
diff --git a/superset-frontend/cypress-base/cypress/support/directories.ts
b/superset-frontend/cypress-base/cypress/support/directories.ts
index d41d00727b..52285b6ddf 100644
--- a/superset-frontend/cypress-base/cypress/support/directories.ts
+++ b/superset-frontend/cypress-base/cypress/support/directories.ts
@@ -140,7 +140,7 @@ export const sqlLabView = {
tabsNavList: "[class='ant-tabs-nav-list']",
tab: "[class='ant-tabs-tab-btn']",
addTabButton: dataTestLocator('add-tab-icon'),
- tooltip: '.ant-tooltip-content',
+ tooltip: '.antd5-tooltip-content',
tabName: '.css-1suejie',
schemaInput: '[data-test=DatabaseSelector] > :nth-child(2)',
loadingIndicator: '.Select__loading-indicator',
diff --git
a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
index 2f9e127619..5551e94a80 100644
---
a/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
+++
b/superset-frontend/packages/superset-ui-chart-controls/src/components/InfoTooltipWithTrigger.tsx
@@ -18,9 +18,8 @@
*/
import { CSSProperties } from 'react';
import { kebabCase } from 'lodash';
-import { TooltipPlacement } from 'antd/lib/tooltip';
import { t } from '@superset-ui/core';
-import { Tooltip, TooltipProps } from './Tooltip';
+import { Tooltip, TooltipProps, TooltipPlacement } from './Tooltip';
export interface InfoTooltipWithTriggerProps {
label?: string;
diff --git
a/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
b/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
index 042434d169..e89944121b 100644
---
a/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
+++
b/superset-frontend/packages/superset-ui-chart-controls/src/components/Tooltip.tsx
@@ -17,48 +17,41 @@
* under the License.
*/
-import { useTheme, css } from '@superset-ui/core';
-import { Tooltip as BaseTooltip } from 'antd';
-import type { TooltipProps } from 'antd/lib/tooltip';
-import { Global } from '@emotion/react';
+import { useTheme } from '@superset-ui/core';
+import { Tooltip as BaseTooltip } from 'antd-v5';
+import {
+ TooltipProps as BaseTooltipProps,
+ TooltipPlacement as BaseTooltipPlacement,
+} from 'antd-v5/lib/tooltip';
-export type { TooltipProps } from 'antd/lib/tooltip';
+export type TooltipProps = BaseTooltipProps;
+export type TooltipPlacement = BaseTooltipPlacement;
-export const Tooltip = ({ overlayStyle, color, ...props }: TooltipProps) => {
+export const Tooltip = ({
+ overlayStyle,
+ color,
+ ...props
+}: BaseTooltipProps) => {
const theme = useTheme();
const defaultColor = `${theme.colors.grayscale.dark2}e6`;
return (
- <>
- {/* Safari hack to hide browser default tooltips */}
- <Global
- styles={css`
- .ant-tooltip-open {
- display: inline-block;
- &::after {
- content: '';
- display: block;
- }
- }
- `}
- />
- <BaseTooltip
- overlayStyle={{
- fontSize: theme.typography.sizes.s,
- lineHeight: '1.6',
- maxWidth: theme.gridUnit * 62,
- minWidth: theme.gridUnit * 30,
- ...overlayStyle,
- }}
- // make the tooltip display closer to the label
- align={{ offset: [0, 1] }}
- color={defaultColor || color}
- trigger="hover"
- placement="bottom"
- // don't allow hovering over the tooltip
- mouseLeaveDelay={0}
- {...props}
- />
- </>
+ <BaseTooltip
+ overlayStyle={{
+ fontSize: theme.typography.sizes.s,
+ lineHeight: '1.6',
+ maxWidth: theme.gridUnit * 62,
+ minWidth: theme.gridUnit * 30,
+ ...overlayStyle,
+ }}
+ // make the tooltip display closer to the label
+ align={{ offset: [0, 1] }}
+ color={defaultColor || color}
+ trigger="hover"
+ placement="bottom"
+ // don't allow hovering over the tooltip
+ mouseLeaveDelay={0}
+ {...props}
+ />
);
};
diff --git
a/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx
b/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx
index 54aece3919..84c5d39f04 100644
---
a/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx
+++
b/superset-frontend/plugins/legacy-plugin-chart-partition/test/OptionDescription.test.jsx
@@ -53,7 +53,6 @@ describe('OptionDescription', () => {
// Perform delayed mouse hovering so tooltip could pop out
fireEvent.mouseOver(tooltipTrigger);
act(() => jest.runAllTimers());
- fireEvent.mouseOut(tooltipTrigger);
const tooltip = screen.getByRole('tooltip');
expect(tooltip).toBeInTheDocument();
diff --git a/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx
b/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx
index e5f307753b..613fa5dbea 100644
--- a/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx
+++ b/superset-frontend/src/SqlLab/components/ColumnElement/index.tsx
@@ -28,7 +28,7 @@ const StyledTooltip = (props: any) => {
{({ css }) => (
<Tooltip
overlayClassName={css`
- .ant-tooltip-inner {
+ .antd5-tooltip-inner {
max-width: ${theme.gridUnit * 125}px;
word-wrap: break-word;
text-align: center;
diff --git a/superset-frontend/src/SqlLab/components/TableElement/index.tsx
b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
index 824c9ec3c4..bb70587ca6 100644
--- a/superset-frontend/src/SqlLab/components/TableElement/index.tsx
+++ b/superset-frontend/src/SqlLab/components/TableElement/index.tsx
@@ -42,6 +42,7 @@ import { IconTooltip } from 'src/components/IconTooltip';
import ModalTrigger from 'src/components/ModalTrigger';
import Loading from 'src/components/Loading';
import useEffectEvent from 'src/hooks/useEffectEvent';
+import { ActionType } from 'src/types/Action';
import ColumnElement, { ColumnKeyTypeType } from '../ColumnElement';
import ShowSQL from '../ShowSQL';
@@ -326,7 +327,7 @@ const TableElement = ({ table, ...props }:
TableElementProps) => {
const renderHeader = () => {
const element: HTMLInputElement | null = tableNameRef.current;
- let trigger: string[] = [];
+ let trigger = [] as ActionType[];
if (element && element.offsetWidth < element.scrollWidth) {
trigger = ['hover'];
}
diff --git a/superset-frontend/src/components/Button/index.tsx
b/superset-frontend/src/components/Button/index.tsx
index d8e24420fd..8944ef7b81 100644
--- a/superset-frontend/src/components/Button/index.tsx
+++ b/superset-frontend/src/components/Button/index.tsx
@@ -28,9 +28,8 @@ import { mix } from 'polished';
import cx from 'classnames';
import { Button as AntdButton } from 'antd';
import { useTheme } from '@superset-ui/core';
-import { Tooltip } from 'src/components/Tooltip';
+import { Tooltip, TooltipProps } from 'src/components/Tooltip';
import { ButtonProps as AntdButtonProps } from 'antd/lib/button';
-import { TooltipProps } from 'antd/lib/tooltip';
export type OnClickHandler = MouseEventHandler<HTMLElement>;
diff --git a/superset-frontend/src/components/InfoTooltip/index.tsx
b/superset-frontend/src/components/InfoTooltip/index.tsx
index 1f160e47ae..8437251de3 100644
--- a/superset-frontend/src/components/InfoTooltip/index.tsx
+++ b/superset-frontend/src/components/InfoTooltip/index.tsx
@@ -20,6 +20,7 @@
import { styled, useTheme } from '@superset-ui/core';
import { Tooltip } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
+import { ActionType } from 'src/types/Action';
export interface InfoTooltipProps {
iconStyle?: React.CSSProperties;
@@ -38,7 +39,7 @@ export interface InfoTooltipProps {
| 'rightTop'
| 'rightBottom'
| undefined;
- trigger?: string | Array<string>;
+ trigger?: ActionType | ActionType[];
overlayStyle?: any;
bgColor?: string;
viewBox?: string;
diff --git a/superset-frontend/src/components/ListView/ActionsBar.tsx
b/superset-frontend/src/components/ListView/ActionsBar.tsx
index 76f7e02e54..2fd04d5cb5 100644
--- a/superset-frontend/src/components/ListView/ActionsBar.tsx
+++ b/superset-frontend/src/components/ListView/ActionsBar.tsx
@@ -18,9 +18,8 @@
*/
import { ReactElement } from 'react';
import { styled } from '@superset-ui/core';
-import { Tooltip } from 'src/components/Tooltip';
+import { Tooltip, TooltipPlacement } from 'src/components/Tooltip';
import Icons from 'src/components/Icons';
-import { TooltipPlacement } from 'antd/lib/tooltip';
export type ActionProps = {
label: string;
diff --git a/superset-frontend/src/components/ListView/CrossLinks.tsx
b/superset-frontend/src/components/ListView/CrossLinks.tsx
index f7729aa216..25f2ba8272 100644
--- a/superset-frontend/src/components/ListView/CrossLinks.tsx
+++ b/superset-frontend/src/components/ListView/CrossLinks.tsx
@@ -38,7 +38,7 @@ const StyledCrossLinks = styled.div`
width: 100%;
display: flex;
- .ant-tooltip-open {
+ .antd5-tooltip-open {
display: inline;
}
diff --git a/superset-frontend/src/components/Tooltip/Tooltip.stories.tsx
b/superset-frontend/src/components/Tooltip/Tooltip.stories.tsx
index 72d586bb1a..b195a3544a 100644
--- a/superset-frontend/src/components/Tooltip/Tooltip.stories.tsx
+++ b/superset-frontend/src/components/Tooltip/Tooltip.stories.tsx
@@ -17,8 +17,7 @@
* under the License.
*/
import Button from 'src/components/Button';
-import { TooltipProps, TooltipPlacement } from 'antd/lib/tooltip';
-import { Tooltip } from './index';
+import { Tooltip, TooltipPlacement, TooltipProps } from './index';
export default {
title: 'Tooltip',
diff --git a/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
b/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
index ec56561cd6..f38d945240 100644
--- a/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
+++ b/superset-frontend/src/components/Tooltip/Tooltip.test.tsx
@@ -44,17 +44,13 @@ test('renders on hover', async () => {
test('renders with theme', () => {
render(
- <Tooltip title="Simple tooltip" defaultVisible>
+ <Tooltip title="Simple tooltip" defaultOpen>
<Button>Hover me</Button>
</Tooltip>,
);
const tooltip = screen.getByRole('tooltip');
expect(tooltip).toHaveStyle({
- background: `${supersetTheme.colors.grayscale.dark2}e6`,
- });
- expect(tooltip.parentNode?.parentNode).toHaveStyle({
- lineHeight: 1.6,
- fontSize: 12,
+ 'background-color': `${supersetTheme.colors.grayscale.dark2}e6`,
});
});
diff --git a/superset-frontend/src/components/Tooltip/index.tsx
b/superset-frontend/src/components/Tooltip/index.tsx
index 86c616bf95..66f0d8cc46 100644
--- a/superset-frontend/src/components/Tooltip/index.tsx
+++ b/superset-frontend/src/components/Tooltip/index.tsx
@@ -16,31 +16,25 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { useTheme } from '@superset-ui/core';
-import { Tooltip as AntdTooltip } from 'antd';
+import { supersetTheme } from '@superset-ui/core';
+import { Tooltip as AntdTooltip } from 'antd-v5';
import {
- TooltipProps,
+ TooltipProps as AntdTooltipProps,
TooltipPlacement as AntdTooltipPlacement,
-} from 'antd/lib/tooltip';
+} from 'antd-v5/lib/tooltip';
export type TooltipPlacement = AntdTooltipPlacement;
+export type TooltipProps = AntdTooltipProps;
-export const Tooltip = (props: TooltipProps) => {
- const theme = useTheme();
- return (
- <>
- <AntdTooltip
- overlayStyle={{ fontSize: theme.typography.sizes.s, lineHeight: '1.6'
}}
- overlayInnerStyle={{
- display: '-webkit-box',
- overflow: 'hidden',
- WebkitLineClamp: 40,
- WebkitBoxOrient: 'vertical',
- textOverflow: 'ellipsis',
- }}
- color={`${theme.colors.grayscale.dark2}e6`}
- {...props}
- />
- </>
- );
-};
+export const Tooltip = (props: TooltipProps) => (
+ <>
+ <AntdTooltip
+ overlayInnerStyle={{
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ }}
+ color={`${supersetTheme.colors.grayscale.dark2}e6`}
+ {...props}
+ />
+ </>
+);
diff --git a/superset-frontend/src/components/TooltipParagraph/index.tsx
b/superset-frontend/src/components/TooltipParagraph/index.tsx
index 837c895826..f891c2282a 100644
--- a/superset-frontend/src/components/TooltipParagraph/index.tsx
+++ b/superset-frontend/src/components/TooltipParagraph/index.tsx
@@ -17,9 +17,9 @@
* under the License.
*/
import { useState, FC } from 'react';
-
-import { Tooltip, Typography } from 'antd';
+import { Typography } from 'antd';
import { ParagraphProps } from 'antd/es/typography/Paragraph';
+import { Tooltip } from '../Tooltip';
const TooltipParagraph: FC<ParagraphProps> = ({
children,
diff --git a/superset-frontend/src/components/TruncatedList/index.tsx
b/superset-frontend/src/components/TruncatedList/index.tsx
index ccfea582c8..ec764bfb29 100644
--- a/superset-frontend/src/components/TruncatedList/index.tsx
+++ b/superset-frontend/src/components/TruncatedList/index.tsx
@@ -56,7 +56,7 @@ const StyledTruncatedList = styled.div`
width: 100%;
display: flex;
- .ant-tooltip-open {
+ .antd5-tooltip-open {
display: inline;
}
}
diff --git a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
index b02c6eee3e..b281ff320d 100644
--- a/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
+++ b/superset-frontend/src/dashboard/components/SliceHeader/index.tsx
@@ -76,7 +76,7 @@ const ChartHeaderStyles = styled.div`
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
- & > span.ant-tooltip-open {
+ & > span.antd5-tooltip-open {
display: inline;
}
}
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
index 50f4135ca8..695b48d4fa 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/Styles.ts
@@ -33,7 +33,7 @@ export const Row = styled.div`
margin-bottom: 0;
}
- & .ant-tooltip-open {
+ & .antd5-tooltip-open {
display: inline-flex;
}
`};
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
index 51ebd38998..4e3d887cd1 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
+++
b/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
@@ -16,8 +16,7 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { TooltipProps } from 'antd/lib/tooltip';
-import { Tooltip } from 'src/components/Tooltip';
+import { Tooltip, TooltipProps } from 'src/components/Tooltip';
import { TooltipTrigger } from './Styles';
export const TooltipWithTruncation = ({
diff --git a/superset-frontend/src/dashboard/styles.ts
b/superset-frontend/src/dashboard/styles.ts
index bbe7b9d148..7881dbda18 100644
--- a/superset-frontend/src/dashboard/styles.ts
+++ b/superset-frontend/src/dashboard/styles.ts
@@ -93,9 +93,9 @@ export const filterCardPopoverStyle = (theme: SupersetTheme)
=> css`
}
.filter-card-tooltip {
- &.ant-tooltip-placement-bottom {
+ &.antd5-tooltip-placement-bottom {
padding-top: 0;
- & .ant-tooltip-arrow {
+ & .antd5-tooltip-arrow {
top: -13px;
}
}
diff --git
a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
index a14df21a22..73d61143e7 100644
---
a/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
+++
b/superset-frontend/src/explore/components/controls/ColorSchemeControl/ColorSchemeLabel.tsx
@@ -82,7 +82,7 @@ export default function ColorSchemeLabel(props:
ColorSchemeLabelProps) {
overlayClassName="color-scheme-tooltip"
title={tooltipContent}
key={id}
- visible={showTooltip}
+ open={showTooltip}
>
<span
className="color-scheme-option"
diff --git
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
index c4b3fc317b..d2c99a822a 100644
---
a/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
+++
b/superset-frontend/src/explore/components/controls/DateFilterControl/components/DateFunctionTooltip.tsx
@@ -110,12 +110,12 @@ const StyledTooltip = (props: any) => {
{({ css }) => (
<Tooltip
overlayClassName={css`
- .ant-tooltip-content {
+ .antd5-tooltip-content {
min-width: ${theme.gridUnit * 125}px;
max-height: 410px;
overflow-y: scroll;
- .ant-tooltip-inner {
+ .antd5-tooltip-inner {
max-width: ${theme.gridUnit * 125}px;
h3 {
font-size: ${theme.typography.sizes.m}px;
diff --git
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
index c07b8a4c9e..83bb8744ec 100644
---
a/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
+++
b/superset-frontend/src/explore/components/controls/VizTypeControl/VizTile.tsx
@@ -80,8 +80,8 @@ export const VizTile = ({
return (
<Tooltip
title={tooltipTitle}
- onVisibleChange={visible => setTooltipVisible(visible)}
- visible={tooltipVisible && !isTransitioning}
+ onOpenChange={visible => setTooltipVisible(visible)}
+ open={tooltipVisible && !isTransitioning}
placement="top"
mouseEnterDelay={0.4}
>
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx
b/superset-frontend/src/pages/ChartCreation/index.tsx
index 0529834842..4b84351da1 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -149,7 +149,7 @@ const StyledContainer = styled.div`
}
}
- &&&& .ant-tooltip-open {
+ &&&& .antd5-tooltip-open {
display: inline;
}
diff --git a/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
b/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
index 714528994d..5d42862a29 100644
--- a/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
+++ b/superset-frontend/src/pages/SavedQueryList/SavedQueryList.test.jsx
@@ -340,13 +340,13 @@ describe('RTL', () => {
it('renders an "Import Saved Query" tooltip under import button', async ()
=> {
const importButton = await screen.findByTestId('import-button');
userEvent.hover(importButton);
+
waitFor(() => {
- expect(importButton).toHaveClass('ant-tooltip-open');
screen.findByTestId('import-tooltip-test');
const importTooltip = screen.getByRole('tooltip', {
name: 'Import queries',
});
- expect(importTooltip).toBeInTheDocument();
+ expect(importTooltip).toBeVisible();
});
});
diff --git a/superset-frontend/src/theme/index.ts
b/superset-frontend/src/theme/index.ts
index 0716749b93..858f92fe76 100644
--- a/superset-frontend/src/theme/index.ts
+++ b/superset-frontend/src/theme/index.ts
@@ -109,6 +109,10 @@ const baseConfig: ThemeConfig = {
colorPrimaryHover: supersetTheme.colors.primary.base,
colorTextTertiary: supersetTheme.colors.grayscale.light1,
},
+ Tooltip: {
+ fontSize: supersetTheme.typography.sizes.s,
+ lineHeight: 1.6,
+ },
},
};
diff --git
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
b/superset-frontend/src/types/Action.ts
similarity index 66%
copy from
superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
copy to superset-frontend/src/types/Action.ts
index 51ebd38998..7efe166e52 100644
---
a/superset-frontend/src/dashboard/components/nativeFilters/FilterCard/TooltipWithTruncation.tsx
+++ b/superset-frontend/src/types/Action.ts
@@ -16,21 +16,5 @@
* specific language governing permissions and limitations
* under the License.
*/
-import { TooltipProps } from 'antd/lib/tooltip';
-import { Tooltip } from 'src/components/Tooltip';
-import { TooltipTrigger } from './Styles';
-export const TooltipWithTruncation = ({
- title,
- children,
- ...props
-}: TooltipProps) => (
- <Tooltip
- title={title}
- placement="bottom"
- overlayClassName="filter-card-tooltip"
- {...props}
- >
- <TooltipTrigger>{children}</TooltipTrigger>
- </Tooltip>
-);
+export type ActionType = 'hover' | 'focus' | 'click' | 'contextMenu';
