Fix call react button lingering tooltip
This commit is contained in:
parent
bef5fd6b34
commit
f02a11bc9b
2 changed files with 32 additions and 28 deletions
|
@ -110,10 +110,6 @@
|
|||
margin-block: -5px;
|
||||
}
|
||||
|
||||
.CallControls__ReactButtonContainer--menu-shown .module-tooltip {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.CallControls__OuterSpacer {
|
||||
// Defined in _modules but duplicated here for ease of refactor
|
||||
$local-preview-width: 108px;
|
||||
|
|
|
@ -111,34 +111,42 @@ export function CallingButton({
|
|||
tooltipContent = i18n('icu:CallingButton--more-options');
|
||||
}
|
||||
|
||||
const buttonContent = (
|
||||
<button
|
||||
aria-label={tooltipContent}
|
||||
className={classNames(
|
||||
'CallingButton__icon',
|
||||
`CallingButton__icon--${classNameSuffix}`
|
||||
)}
|
||||
disabled={disabled}
|
||||
id={uniqueButtonId}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
type="button"
|
||||
>
|
||||
<div />
|
||||
</button>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="CallingButton">
|
||||
<Tooltip
|
||||
className="CallingButton__tooltip"
|
||||
wrapperClassName={classNames(
|
||||
'CallingButton__button-container',
|
||||
!isVisible && 'CallingButton__button-container--hidden'
|
||||
)}
|
||||
content={tooltipContent}
|
||||
direction={tooltipDirection}
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<button
|
||||
aria-label={tooltipContent}
|
||||
className={classNames(
|
||||
'CallingButton__icon',
|
||||
`CallingButton__icon--${classNameSuffix}`
|
||||
{tooltipContent === '' ? (
|
||||
<div className="CallingButton__button-container">{buttonContent}</div>
|
||||
) : (
|
||||
<Tooltip
|
||||
className="CallingButton__tooltip"
|
||||
wrapperClassName={classNames(
|
||||
'CallingButton__button-container',
|
||||
!isVisible && 'CallingButton__button-container--hidden'
|
||||
)}
|
||||
disabled={disabled}
|
||||
id={uniqueButtonId}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
type="button"
|
||||
content={tooltipContent}
|
||||
direction={tooltipDirection}
|
||||
theme={Theme.Dark}
|
||||
>
|
||||
<div />
|
||||
</button>
|
||||
</Tooltip>
|
||||
{buttonContent}
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue