mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-15 20:54:59 +08:00
Migrate the majority of TooltipTarget consumers to Compound Tooltip (#12086)
* Migrate the majority of TooltipTarget consumers to Compound Tooltip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshot Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix CSS stacking contexts for Dialogs & PersistedElement Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch to PersistedElement sharing a CSS stacking context for z-index to continue functioning Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix Widget PIP overlay being under the widget and dragging being broken Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix border-radius on widget pip Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix majority of tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix jest retryTimes applying outside of CI Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix remaining tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix React unique key warnings Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix sticker picker Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * id not class Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix widget pip button colour in light theme Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
061c269f36
commit
3bfb33fe48
@ -16,12 +16,12 @@ limitations under the License.
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { ContentHelpers } from "matrix-js-sdk/src/matrix";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import { Icon as ExternalLinkIcon } from "../../../../res/img/external-link.svg";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { makeMapSiteLink, parseGeoUri } from "../../../utils/location";
|
||||
import CopyableText from "../elements/CopyableText";
|
||||
import TooltipTarget from "../elements/TooltipTarget";
|
||||
|
||||
interface Props {
|
||||
latestLocationState?: ContentHelpers.BeaconLocationState;
|
||||
@ -46,11 +46,11 @@ const ShareLatestLocation: React.FC<Props> = ({ latestLocationState }) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<TooltipTarget label={_t("timeline|context_menu|open_in_osm")}>
|
||||
<Tooltip label={_t("timeline|context_menu|open_in_osm")}>
|
||||
<a data-testid="open-location-in-osm" href={mapLink} target="_blank" rel="noreferrer noopener">
|
||||
<ExternalLinkIcon className="mx_ShareLatestLocation_icon" />
|
||||
</a>
|
||||
</TooltipTarget>
|
||||
</Tooltip>
|
||||
<CopyableText className="mx_ShareLatestLocation_copy" border={false} getTextToCopy={() => latLonString} />
|
||||
</>
|
||||
);
|
||||
|
||||
@ -17,12 +17,11 @@ limitations under the License.
|
||||
import React from "react";
|
||||
import { PollStartEvent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
|
||||
import { MatrixEvent } from "matrix-js-sdk/src/matrix";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
|
||||
import { formatLocalDateShort } from "../../../../DateUtils";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import TooltipTarget from "../../elements/TooltipTarget";
|
||||
import { Alignment } from "../../elements/Tooltip";
|
||||
|
||||
interface Props {
|
||||
event: MatrixEvent;
|
||||
@ -37,13 +36,13 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
|
||||
const formattedDate = formatLocalDateShort(event.getTs());
|
||||
return (
|
||||
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItem" onClick={onClick}>
|
||||
<TooltipTarget label={_t("right_panel|poll|view_poll")} alignment={Alignment.Top}>
|
||||
<Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
|
||||
<div className="mx_PollListItem_content">
|
||||
<span>{formattedDate}</span>
|
||||
<PollIcon className="mx_PollListItem_icon" />
|
||||
<span className="mx_PollListItem_question">{pollEvent.question.text}</span>
|
||||
</div>
|
||||
</TooltipTarget>
|
||||
</Tooltip>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
@ -17,6 +17,7 @@ limitations under the License.
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { PollAnswerSubevent } from "matrix-js-sdk/src/extensible_events_v1/PollStartEvent";
|
||||
import { MatrixEvent, Poll, PollEvent, Relations } from "matrix-js-sdk/src/matrix";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import { Icon as PollIcon } from "../../../../../res/img/element-icons/room/composer/poll.svg";
|
||||
import { _t } from "../../../../languageHandler";
|
||||
@ -24,8 +25,6 @@ import { formatLocalDateShort } from "../../../../DateUtils";
|
||||
import { allVotes, collectUserVotes, countVotes } from "../../messages/MPollBody";
|
||||
import { PollOption } from "../../polls/PollOption";
|
||||
import { Caption } from "../../typography/Caption";
|
||||
import TooltipTarget from "../../elements/TooltipTarget";
|
||||
import { Alignment } from "../../elements/Tooltip";
|
||||
|
||||
interface Props {
|
||||
event: MatrixEvent;
|
||||
@ -100,7 +99,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
|
||||
|
||||
return (
|
||||
<li data-testid={`pollListItem-${event.getId()!}`} className="mx_PollListItemEnded" onClick={onClick}>
|
||||
<TooltipTarget label={_t("right_panel|poll|view_poll")} alignment={Alignment.Top}>
|
||||
<Tooltip label={_t("right_panel|poll|view_poll")} side="top" isTriggerInteractive={false}>
|
||||
<div className="mx_PollListItemEnded_content">
|
||||
<div className="mx_PollListItemEnded_title">
|
||||
<PollIcon className="mx_PollListItemEnded_icon" />
|
||||
@ -127,7 +126,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
|
||||
<Caption>{_t("right_panel|poll|final_result", { count: totalVoteCount })}</Caption>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipTarget>
|
||||
</Tooltip>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
@ -16,6 +16,7 @@ limitations under the License.
|
||||
|
||||
import { EventType, RoomType, Room, RoomEvent, ClientEvent } from "matrix-js-sdk/src/matrix";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { shouldShowComponent } from "../../../customisations/helpers/UIComponents";
|
||||
@ -57,7 +58,6 @@ import IconizedContextMenu, {
|
||||
} from "../context_menus/IconizedContextMenu";
|
||||
import SpaceContextMenu from "../context_menus/SpaceContextMenu";
|
||||
import InlineSpinner from "../elements/InlineSpinner";
|
||||
import TooltipTarget from "../elements/TooltipTarget";
|
||||
import { HomeButtonContextMenu } from "../spaces/SpacePanel";
|
||||
|
||||
const contextMenuBelow = (elementRect: DOMRect): MenuProps => {
|
||||
@ -412,9 +412,9 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
|
||||
<aside className="mx_RoomListHeader" aria-label={_t("room|context_menu|title")}>
|
||||
{contextMenuButton}
|
||||
{pendingActionSummary ? (
|
||||
<TooltipTarget label={pendingActionSummary}>
|
||||
<Tooltip label={pendingActionSummary} isTriggerInteractive={false}>
|
||||
<InlineSpinner />
|
||||
</TooltipTarget>
|
||||
</Tooltip>
|
||||
) : null}
|
||||
{canShowPlusMenu && (
|
||||
<ContextMenuTooltipButton
|
||||
|
||||
@ -15,11 +15,10 @@ limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { HTMLProps } from "react";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import { _t } from "../../../../languageHandler";
|
||||
import StyledCheckbox, { CheckboxStyle } from "../../elements/StyledCheckbox";
|
||||
import { Alignment } from "../../elements/Tooltip";
|
||||
import TooltipTarget from "../../elements/TooltipTarget";
|
||||
|
||||
interface Props extends Omit<HTMLProps<HTMLDivElement>, "className"> {
|
||||
selectedDeviceCount: number;
|
||||
@ -41,7 +40,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
|
||||
return (
|
||||
<div className="mx_FilteredDeviceListHeader" {...rest}>
|
||||
{!isSelectDisabled && (
|
||||
<TooltipTarget label={checkboxLabel} alignment={Alignment.Top}>
|
||||
<Tooltip label={checkboxLabel} side="top" isTriggerInteractive={false}>
|
||||
<StyledCheckbox
|
||||
kind={CheckboxStyle.Solid}
|
||||
checked={isAllSelected}
|
||||
@ -50,7 +49,7 @@ const FilteredDeviceListHeader: React.FC<Props> = ({
|
||||
data-testid="device-select-all-checkbox"
|
||||
aria-label={checkboxLabel}
|
||||
/>
|
||||
</TooltipTarget>
|
||||
</Tooltip>
|
||||
)}
|
||||
<span className="mx_FilteredDeviceListHeader_label">
|
||||
{selectedDeviceCount > 0
|
||||
|
||||
@ -31,21 +31,17 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
|
||||
<div
|
||||
class="mx_BeaconListItem_interactions"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
|
||||
tabindex="0"
|
||||
<a
|
||||
data-state="closed"
|
||||
data-testid="open-location-in-osm"
|
||||
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a
|
||||
data-testid="open-location-in-osm"
|
||||
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="mx_ShareLatestLocation_icon"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="mx_ShareLatestLocation_icon"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="mx_CopyableText mx_ShareLatestLocation_copy"
|
||||
>
|
||||
|
||||
@ -64,21 +64,17 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
|
||||
<div
|
||||
class="mx_BeaconListItem_interactions"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
|
||||
tabindex="0"
|
||||
<a
|
||||
data-state="closed"
|
||||
data-testid="open-location-in-osm"
|
||||
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a
|
||||
data-testid="open-location-in-osm"
|
||||
href="https://www.openstreetmap.org/?mlat=51&mlon=41#map=16/51/41"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="mx_ShareLatestLocation_icon"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="mx_ShareLatestLocation_icon"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="mx_CopyableText mx_ShareLatestLocation_copy"
|
||||
>
|
||||
|
||||
@ -2,21 +2,17 @@
|
||||
|
||||
exports[`<ShareLatestLocation /> renders share buttons when there is a location 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
|
||||
tabindex="0"
|
||||
<a
|
||||
data-state="closed"
|
||||
data-testid="open-location-in-osm"
|
||||
href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<a
|
||||
data-testid="open-location-in-osm"
|
||||
href="https://www.openstreetmap.org/?mlat=51&mlon=42#map=16/51/42"
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="mx_ShareLatestLocation_icon"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="mx_ShareLatestLocation_icon"
|
||||
/>
|
||||
</a>
|
||||
<div
|
||||
class="mx_CopyableText mx_ShareLatestLocation_copy"
|
||||
>
|
||||
|
||||
@ -78,8 +78,8 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
|
||||
class="mx_PollListItem"
|
||||
data-testid="pollListItem-$2"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_PomxwKpa"
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
@ -97,14 +97,14 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
|
||||
Where?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="mx_PollListItem"
|
||||
data-testid="pollListItem-$1"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_tmBG4yVC"
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
@ -122,7 +122,7 @@ exports[`<PollHistory /> renders a list of active polls when there are polls in
|
||||
Question?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
@ -6,8 +6,8 @@ exports[`<PollListItem /> renders a poll 1`] = `
|
||||
class="mx_PollListItem"
|
||||
data-testid="pollListItem-$mypoll"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
@ -25,7 +25,7 @@ exports[`<PollListItem /> renders a poll 1`] = `
|
||||
Question?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -6,8 +6,8 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
|
||||
class="mx_PollListItemEnded"
|
||||
data-testid="pollListItem-1"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
@ -40,7 +40,7 @@ exports[`<PollListItemEnded /> renders a poll with no responses 1`] = `
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -6,8 +6,8 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
|
||||
class="mx_FilteredDeviceListHeader"
|
||||
data-testid="test123"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
@ -32,7 +32,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when all devices are sel
|
||||
</div>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="mx_FilteredDeviceListHeader_label"
|
||||
>
|
||||
@ -51,8 +51,8 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
|
||||
class="mx_FilteredDeviceListHeader"
|
||||
data-testid="test123"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
@ -76,7 +76,7 @@ exports[`<FilteredDeviceListHeader /> renders correctly when no devices are sele
|
||||
</div>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="mx_FilteredDeviceListHeader_label"
|
||||
>
|
||||
|
||||
@ -342,8 +342,8 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
|
||||
<div
|
||||
class="mx_FilteredDeviceListHeader"
|
||||
>
|
||||
<div
|
||||
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
@ -367,7 +367,7 @@ exports[`<SessionManagerTab /> goes to filtered list from security recommendatio
|
||||
</div>
|
||||
</label>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
<span
|
||||
class="mx_FilteredDeviceListHeader_label"
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user