Talend · jmfrancois · Oct 24, 2023 · Oct 24, 2023 · Oct 24, 2023 · Oct 24, 2023
diff --git a/packages/components/src/AboutDialog/AboutDialog.component.js b/packages/components/src/AboutDialog/AboutDialog.component.js
@@ -2,12 +2,11 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import Dialog from '../Dialog';
-import Icon from '../Icon';
-import Skeleton from '../Skeleton';
 import I18N_DOMAIN_COMPONENTS from '../constants';
 import getDefaultT from '../translate';
 import theme from './AboutDialog.module.scss';
 import { AboutDialogTable, Text } from './AboutDialogTable.component';
+import { Icon } from '@talend/design-system';
 
 function AboutDialog({
 	services,
@@ -61,7 +60,6 @@ function AboutDialog({
 									version,
 									interpolation: { escapeValue: false },
 								})}
-								size={Skeleton.SIZES.xlarge}
 								loading={loading}
 							/>
 						</div>
@@ -75,7 +73,6 @@ function AboutDialog({
 									year: new Date().getFullYear(),
 								})
 							}
-							size={Skeleton.SIZES.large}
 							loading={loading}
 						/>
 					</div>

diff --git a/packages/components/src/AboutDialog/AboutDialogTable.component.js b/packages/components/src/AboutDialog/AboutDialogTable.component.js
@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import Skeleton from '../Skeleton';
 import { getI18nInstance } from '../translate';
 import theme from './AboutDialog.module.scss';
+import { SkeletonParagraph } from '@talend/design-system';
 
 const i18n = getI18nInstance();
 
@@ -12,8 +12,8 @@ export const getColumnHeaders = () => ({
 	version: { key: 'version', label: i18n.t('tui-components:VERSION', { defaultValue: 'Version' }) },
 });
 
-export function Text({ text = '', loading, size = Skeleton.SIZES.medium }) {
-	return loading ? <Skeleton type={Skeleton.TYPES.text} size={size} /> : text;
+export function Text({ text = '', loading = false }) {
+	return loading ? <SkeletonParagraph /> : text;
 }
 
 export function AboutDialogTable({
@@ -55,7 +55,6 @@ export function AboutDialogTable({
 Text.propTypes = {
 	text: PropTypes.string,
 	loading: PropTypes.bool,
-	size: PropTypes.string,
 };
 
 AboutDialogTable.propTypes = {

diff --git a/packages/components/src/ActionIntercom/Intercom.component.js b/packages/components/src/ActionIntercom/Intercom.component.js
@@ -3,13 +3,12 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { withTranslation } from 'react-i18next';
 
-import TooltipTrigger from '../TooltipTrigger';
-import Icon from '../Icon';
 import IntercomService from './Intercom.service';
 import getDefaultT from '../translate';
 import I18N_DOMAIN_COMPONENTS from '../constants';
 
 import theme from './Intercom.module.scss';
+import { Icon, Tooltip } from '@talend/design-system';
 
 function Intercom({ id, className, config, t, tooltipPlacement }) {
 	const [show, setShow] = useState(false);
@@ -36,7 +35,7 @@ function Intercom({ id, className, config, t, tooltipPlacement }) {
 		: t('TC_INTERCOM_OPEN', { defaultValue: 'Chat with Talend Support' });
 
 	return (
-		<TooltipTrigger label={label} tooltipPlacement={tooltipPlacement}>
+		<Tooltip label={label} tooltipPlacement={tooltipPlacement}>
 			<button
 				data-feature={show ? 'ipc.close' : 'ipc.open'}
 				data-test={show ? 'close' : 'open'}
@@ -48,7 +47,7 @@ function Intercom({ id, className, config, t, tooltipPlacement }) {
 			>
 				<Icon name="talend-bubbles" />
 			</button>
-		</TooltipTrigger>
+		</Tooltip>
 	);
 }
 

diff --git a/packages/components/src/Actions/ActionButton/ActionButton.component.js b/packages/components/src/Actions/ActionButton/ActionButton.component.js
@@ -3,16 +3,21 @@ import classNames from 'classnames';
 import { Button } from '@talend/react-bootstrap';
 import { withTranslation } from 'react-i18next';
 
-import TooltipTrigger from '../../TooltipTrigger';
 import CircularProgress from '../../CircularProgress';
-import Skeleton from '../../Skeleton';
-import Icon from '../../Icon';
 import getPropsFrom from '../../utils/getPropsFrom';
 import theme from './ActionButton.module.scss';
 import I18N_DOMAIN_COMPONENTS from '../../constants';
 import getDefaultT from '../../translate';
-import OverlayTrigger from '../../OverlayTrigger';
-import { SizedIcon } from '@talend/design-system';
+import {
+	Icon,
+	Popover,
+	SizedIcon,
+	SkeletonButton,
+	SkeletonButtonIcon,
+	SkeletonParagraph,
+	Tooltip,
+} from '@talend/design-system';
+import Inject from '../../Inject';
 
 const LEFT = 'left';
 const RIGHT = 'right';
@@ -23,17 +28,7 @@ function getIcon({ icon, iconName, iconTransform, inProgress, loading }) {
 	}
 
 	if (loading) {
-		return (
-			<Skeleton
-				key="icon-skeleton"
-				size="small"
-				type="circle"
-				className={classNames(
-					theme['tc-action-button-skeleton-circle'],
-					'tc-action-button-skeleton-circle',
-				)}
-			/>
-		);
+		return <SkeletonButtonIcon />;
 	}
 
 	if (iconName) {
@@ -57,9 +52,9 @@ function getLabel({ hideLabel, label, loading }) {
 		return null;
 	}
 	if (loading) {
-		return <Skeleton key="label-skeleton" type="text" size="medium" />;
+		return <SkeletonParagraph />;
 	}
-	return <span key="label">{label}</span>;
+	return <span>{label}</span>;
 }
 
 getLabel.propTypes = {
@@ -139,7 +134,7 @@ function ActionButton(props) {
 	}
 
 	if (loading && !link) {
-		return <Skeleton type="button" />;
+		return <SkeletonButton />;
 	}
 
 	const buttonProps = getPropsFrom(Button, rest);
@@ -196,35 +191,28 @@ function ActionButton(props) {
 	);
 	if (hasPopup) {
 		btn = (
-			<OverlayTrigger
-				onClick={rClick}
-				onMouseEnter={rMouseEnter}
-				onMouseLeave={rMouseLeave}
-				overlayRef={overlayRef}
-				overlayId={overlayId}
-				overlayPlacement={overlayPlacement}
-				overlayComponent={props.overlayComponent}
-				getComponent={props.getComponent}
-				preventScrolling={props.preventScrolling}
+			<Popover
+				// onClick={rClick}
+				// onMouseEnter={rMouseEnter}
+				// onMouseLeave={rMouseLeave}
+				// preventScrolling={props.preventScrolling}
+				disclosure={btn}
 			>
-				{btn}
-			</OverlayTrigger>
+				<Inject
+					component={props.overlayComponent}
+					getComponent={props.getComponent}
+					id={overlayId}
+					ref={overlayRef}
+				/>
+			</Popover>
 		);
 	}
 
 	// 2 ways to display the tooltip via props: `hideLabel` and `tooltip`.
 	// warning: when `tooltip` is set to false, then no tooltip even if `hideLabel` is set
 	const shouldDisplayTooltip = (hideLabel || tooltip || tooltipLabel) && tooltip !== false;
 	if (ariaLabel && shouldDisplayTooltip) {
-		btn = (
-			<TooltipTrigger
-				label={ariaLabel}
-				tooltipPlacement={tooltipPlacement}
-				className={tooltipClassName}
-			>
-				{btn}
-			</TooltipTrigger>
-		);
+		btn = <Tooltip label={ariaLabel}>{btn}</Tooltip>;
 	}
 	return btn;
 }
@@ -247,7 +235,6 @@ ActionButton.propTypes = {
 	name: PropTypes.string,
 	onClick: PropTypes.func,
 	iconName: PropTypes.string,
-	tooltipPlacement: OverlayTrigger.propTypes.placement,
 	t: PropTypes.func,
 	tooltip: PropTypes.bool,
 	tooltipLabel: PropTypes.string,

diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js b/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js
@@ -9,16 +9,13 @@ import { DropdownButton, MenuItem } from '@talend/react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import omit from 'lodash/omit';
 import Inject from '../../Inject';
-import OverlayTrigger from '../../OverlayTrigger';
 import theme from './ActionDropdown.module.scss';
-import Tag from '../../Tag';
-import TooltipTrigger from '../../TooltipTrigger';
-import Icon from '../../Icon';
 import wrapOnClick from '../wrapOnClick';
 import CircularProgress from '../../CircularProgress/CircularProgress.component';
 import I18N_DOMAIN_COMPONENTS from '../../constants';
 import getDefaultT from '../../translate';
 import getTabBarBadgeLabel from '../../utils/getTabBarBadgeLabel';
+import { Icon, Tag, Tooltip } from '@talend/design-system';
 
 export const DROPDOWN_CONTAINER_CN = 'tc-dropdown-container';
 
@@ -86,7 +83,7 @@ function renderMutableMenuItem(item, index, getComponent) {
 			{item.badge && (
 				<Tag
 					className={classNames(theme['tc-dropdown-item-badge'], 'tc-dropdown-item-badge')}
-					bsStyle={item.badge.bsStyle || 'default'}
+					variant={item.badge.bsStyle || 'default'}
 				>
 					{getTabBarBadgeLabel(item.badge.label)}
 				</Tag>
@@ -206,7 +203,6 @@ class ActionDropdown extends Component {
 			label,
 			link,
 			onSelect,
-			tooltipPlacement = 'top',
 			tooltipLabel,
 			getComponent,
 			components,
@@ -293,11 +289,7 @@ class ActionDropdown extends Component {
 		);
 
 		if (hideLabel || tooltipLabel || ellipsis) {
-			return (
-				<TooltipTrigger label={tooltipLabel || label} tooltipPlacement={tooltipPlacement}>
-					{dropdown}
-				</TooltipTrigger>
-			);
+			return <Tooltip label={tooltipLabel || label}>{dropdown}</Tooltip>;
 		}
 		return dropdown;
 	}
@@ -336,7 +328,6 @@ ActionDropdown.propTypes = {
 	ellipsis: PropTypes.bool,
 	onToggle: PropTypes.func,
 	onSelect: PropTypes.func,
-	tooltipPlacement: OverlayTrigger.propTypes.placement,
 	tooltipLabel: PropTypes.string,
 	getComponent: PropTypes.func,
 	components: PropTypes.shape({

diff --git a/packages/components/src/Actions/ActionFile/ActionFile.component.js b/packages/components/src/Actions/ActionFile/ActionFile.component.js
@@ -3,11 +3,9 @@ import { Component } from 'react';
 import classNames from 'classnames';
 import { randomUUID } from '@talend/utils';
 
-import TooltipTrigger from '../../TooltipTrigger';
 import CircularProgress from '../../CircularProgress';
-import OverlayTrigger from '../../OverlayTrigger';
-import Icon from '../../Icon';
 import theme from './ActionFile.module.scss';
+import { Icon, Tooltip } from '@talend/design-system';
 
 const LEFT = 'left';
 const RIGHT = 'right';
@@ -39,7 +37,6 @@ class ActionFile extends Component {
 		label: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]),
 		name: PropTypes.string,
 		onChange: PropTypes.func.isRequired,
-		tooltipPlacement: OverlayTrigger.propTypes.placement,
 		tooltip: PropTypes.bool,
 		tooltipLabel: PropTypes.string,
 		'data-feature': PropTypes.string,
@@ -85,7 +82,6 @@ class ActionFile extends Component {
 			name,
 			tooltip,
 			tooltipLabel,
-			tooltipPlacement,
 		} = this.props;
 		if (!available) {
 			return null;
@@ -121,11 +117,7 @@ class ActionFile extends Component {
 			</span>
 		);
 		if (hideLabel || tooltip || tooltipLabel) {
-			return (
-				<TooltipTrigger label={tooltipLabel || label} tooltipPlacement={tooltipPlacement}>
-					{btn}
-				</TooltipTrigger>
-			);
+			return <Tooltip label={tooltipLabel || label}>{btn}</Tooltip>;
 		}
 		return btn;
 	}

diff --git a/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js b/packages/components/src/Actions/ActionIconToggle/ActionIconToggle.component.js
@@ -2,26 +2,13 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Button } from '@talend/react-bootstrap';
 
-import Icon from '../../Icon';
-import TooltipTrigger from '../../TooltipTrigger';
 import getPropsFrom from '../../utils/getPropsFrom';
-import OverlayTrigger from '../../OverlayTrigger';
 
 import theme from './ActionIconToggle.module.scss';
+import { Icon, Tooltip } from '@talend/design-system';
 
 function ActionIconToggle(props) {
-	const {
-		active,
-		tick,
-		className,
-		icon,
-		iconTransform,
-		id,
-		label,
-		tooltipPlacement,
-		buttonRef,
-		...rest
-	} = props;
+	const { active, tick, className, icon, iconTransform, id, label, buttonRef, ...rest } = props;
 
 	const cn = classNames(className, 'tc-icon-toggle', theme['tc-icon-toggle'], {
 		[theme.active]: active,
@@ -31,7 +18,7 @@ function ActionIconToggle(props) {
 	});
 
 	return (
-		<TooltipTrigger label={label} tooltipPlacement={tooltipPlacement}>
+		<Tooltip label={label}>
 			<Button
 				{...getPropsFrom(Button, rest)}
 				id={id}
@@ -43,7 +30,7 @@ function ActionIconToggle(props) {
 			>
 				<Icon name={icon} transform={iconTransform} />
 			</Button>
-		</TooltipTrigger>
+		</Tooltip>
 	);
 }
 
@@ -56,7 +43,6 @@ ActionIconToggle.propTypes = {
 	id: PropTypes.string,
 	label: PropTypes.string.isRequired,
 	onClick: PropTypes.func,
-	tooltipPlacement: OverlayTrigger.propTypes.placement,
 	buttonRef: PropTypes.func,
 };
 

diff --git a/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js b/packages/components/src/Actions/ActionSplitDropdown/ActionSplitDropdown.component.js
@@ -3,10 +3,10 @@ import classNames from 'classnames';
 import { SplitButton, MenuItem } from '@talend/react-bootstrap';
 import { randomUUID } from '@talend/utils';
 import { useTranslation } from 'react-i18next';
-import Icon from '../../Icon';
 import theme from './ActionSplitDropdown.module.scss';
 import wrapOnClick from '../wrapOnClick';
 import I18N_DOMAIN_COMPONENTS from '../../constants';
+import { Icon } from '@talend/design-system';
 
 /**
  * @param {object} props react props

diff --git a/packages/components/src/Actions/Actions.component.js b/packages/components/src/Actions/Actions.component.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import { ButtonGroup } from '@talend/react-bootstrap';
 import classNames from 'classnames';
 import Action from './Action';
-import OverlayTrigger from '../OverlayTrigger';
 import Inject from '../Inject';
 
 function getButtonGroupProps(props) {
@@ -92,7 +91,6 @@ Actions.propTypes = {
 	actions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(Action.propTypes)])),
 	className: PropTypes.string,
 	hideLabel: PropTypes.bool,
-	tooltipPlacement: OverlayTrigger.propTypes.placement,
 	link: PropTypes.bool,
 	...ButtonGroup.propTypes,
 };