feat(tooltip) Create and move to our component (#13061)

Create Tooltip component
Fix Popover positioning calculations
Add margins to popover
Remove @atlaskit/tooltip
Update all components to use the new Tooltip component

Added tooltip actions and reducers for the following functionality: when a user hovers over an element is sees the tooltip for that element and then hovers another element that has a tooltip, instead of using the delay and animations we just unmount the current tooltip and mount the next one immediately
This commit is contained in:
Robert Pintilii
2023-03-17 12:23:51 +02:00
committed by GitHub
parent a89f762a66
commit 00780929e5
46 changed files with 353 additions and 540 deletions

View File

@@ -1,4 +1,3 @@
import Tooltip from '@atlaskit/tooltip';
import React from 'react';
import { connect } from 'react-redux';
@@ -6,6 +5,7 @@ import { translate } from '../../../base/i18n/functions';
import { IconExclamationTriangle } from '../../../base/icons/svg';
import Label from '../../../base/label/components/web/Label';
import { COLORS } from '../../../base/label/constants';
import Tooltip from '../../../base/tooltip/components/Tooltip';
import AbstractInsecureRoomNameLabel, { _mapStateToProps } from '../AbstractInsecureRoomNameLabel';
/**

View File

@@ -6,9 +6,7 @@ import { makeStyles } from 'tss-react/mui';
import { IReduxState } from '../../../app/types';
import { IconRaiseHand } from '../../../base/icons/svg';
import Label from '../../../base/label/components/web/Label';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { Tooltip } from '../../../base/tooltip';
import Tooltip from '../../../base/tooltip/components/Tooltip';
import { open as openParticipantsPane } from '../../../participants-pane/actions.web';
const useStyles = makeStyles()(theme => {

View File

@@ -5,9 +5,7 @@ import { makeStyles } from 'tss-react/mui';
import { getConferenceName } from '../../../base/conference/functions';
import { withPixelLineHeight } from '../../../base/styles/functions.web';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { Tooltip } from '../../../base/tooltip';
import Tooltip from '../../../base/tooltip/components/Tooltip';
const useStyles = makeStyles()(theme => {
return {
@@ -44,13 +42,13 @@ const SubjectText = () => {
const { classes } = useStyles();
return (
<div className = { classes.container }>
<Tooltip
content = { subject }
position = 'bottom'>
<Tooltip
content = { subject }
position = 'bottom'>
<div className = { classes.container }>
<div className = { clsx('subject-text--content', classes.content) }>{subject}</div>
</Tooltip>
</div>
</div>
</Tooltip>
);
};

View File

@@ -5,9 +5,7 @@ import { useDispatch, useSelector } from 'react-redux';
import { IReduxState } from '../../../app/types';
import { IconArrowDown } from '../../../base/icons/svg/index';
import Label from '../../../base/label/components/web/Label';
// eslint-disable-next-line lines-around-comment
// @ts-ignore
import { Tooltip } from '../../../base/tooltip';
import Tooltip from '../../../base/tooltip/components/Tooltip';
import { setTopPanelVisible } from '../../../filmstrip/actions.web';
const ToggleTopPanelLabel = () => {