Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Tooltip: migrate remaining tooltips from AccessibleTooltipButton to…
Browse files Browse the repository at this point in the history
… `AccessibleButton` (#12522)

* Use `AccessibleButton` in `RovingAccessibleTooltipButton`

* Update snapshots

* Update @vector-im/compound-web

* Update composer

* Update formating buttons

* Update snapshots

* Update `ContextMenuTooltipButton.tsx`

* Fix placement

* Update tests

* Remove placement

* Update space panel snapshot

* Remove default placement

* Update snapshots

* Update snapshots

* Use kbd

* Update ``@vector-im/compound-web`

* Migrate remaining files

* Remove `AccessibleTooltipButton.tsx`

* Add test to `InteractiveAuthEntryComponents`

* Add test to `InteractiveAuthEntryComponents`

* Back to old RoomList-test.tsx

* Improve `InteractiveAuthEntryComponent` tests

* Review changes
  • Loading branch information
florianduros authored May 17, 2024
1 parent 8f3c8b3 commit 75562b1
Show file tree
Hide file tree
Showing 6 changed files with 114 additions and 139 deletions.
13 changes: 6 additions & 7 deletions src/components/views/auth/InteractiveAuthEntryComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,8 @@ import SettingsStore from "../../../settings/SettingsStore";
import { LocalisedPolicy, Policies } from "../../../Terms";
import { AuthHeaderModifier } from "../../structures/auth/header/AuthHeaderModifier";
import AccessibleButton, { AccessibleButtonKind, ButtonEvent } from "../elements/AccessibleButton";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import Field from "../elements/Field";
import Spinner from "../elements/Spinner";
import { Alignment } from "../elements/Tooltip";
import CaptchaForm from "./CaptchaForm";

/* This file contains a collection of components which are used by the
Expand Down Expand Up @@ -501,15 +499,16 @@ export class EmailIdentityAuthEntry extends React.Component<
{},
{
a: (text: string) => (
<AccessibleTooltipButton
<AccessibleButton
kind="link_inline"
title={
this.state.requested ? _t("auth|uia|email_resent") : _t("action|resend")
}
alignment={Alignment.Right}
onHideTooltip={
onTooltipOpenChange={
this.state.requested
? () => this.setState({ requested: false })
? (open) => {
if (!open) this.setState({ requested: false });
}
: undefined
}
onClick={async (): Promise<void> => {
Expand All @@ -524,7 +523,7 @@ export class EmailIdentityAuthEntry extends React.Component<
}}
>
{text}
</AccessibleTooltipButton>
</AccessibleButton>
),
},
)}
Expand Down
15 changes: 5 additions & 10 deletions src/components/views/beta/BetaCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import SdkConfig from "../../../SdkConfig";
import SettingsFlag from "../elements/SettingsFlag";
import { useFeatureEnabled } from "../../../hooks/useSettings";
import InlineSpinner from "../elements/InlineSpinner";
import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
import { shouldShowFeedback } from "../../../utils/Feedback";

// XXX: Keep this around for re-use in future Betas
Expand All @@ -50,19 +49,15 @@ export const BetaPill: React.FC<IBetaPillProps> = ({
}) => {
if (onClick) {
return (
<AccessibleTooltipButton
<AccessibleButton
className="mx_BetaCard_betaPill"
title={`${tooltipTitle} ${tooltipCaption}`}
tooltip={
<div>
<div className="mx_Tooltip_title">{tooltipTitle}</div>
<div className="mx_Tooltip_sub">{tooltipCaption}</div>
</div>
}
aria-label={`${tooltipTitle} ${tooltipCaption}`}
title={tooltipTitle}
caption={tooltipCaption}
onClick={onClick}
>
{_t("common|beta")}
</AccessibleTooltipButton>
</AccessibleButton>
);
}

Expand Down
118 changes: 0 additions & 118 deletions src/components/views/elements/AccessibleTooltipButton.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ import React, { ComponentProps } from "react";

import { Icon as CaretIcon } from "../../../../../res/img/feather-customised/dropdown-arrow.svg";
import { _t } from "../../../../languageHandler";
import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
import AccessibleButton from "../../elements/AccessibleButton";

type Props<T extends keyof JSX.IntrinsicElements> = Omit<
ComponentProps<typeof AccessibleTooltipButton<T>>,
ComponentProps<typeof AccessibleButton<T>>,
"aria-label" | "title" | "kind" | "className" | "onClick" | "element"
> & {
isExpanded: boolean;
Expand All @@ -36,7 +36,7 @@ export const DeviceExpandDetailsButton = <T extends keyof JSX.IntrinsicElements>
}: Props<T>): JSX.Element => {
const label = isExpanded ? _t("settings|sessions|hide_details") : _t("settings|sessions|show_details");
return (
<AccessibleTooltipButton
<AccessibleButton
{...rest}
aria-label={label}
title={label}
Expand All @@ -47,6 +47,6 @@ export const DeviceExpandDetailsButton = <T extends keyof JSX.IntrinsicElements>
onClick={onClick}
>
<CaretIcon className="mx_DeviceExpandDetailsButton_icon" />
</AccessibleTooltipButton>
</AccessibleButton>
);
};
65 changes: 65 additions & 0 deletions test/components/views/auth/InteractiveAuthEntryComponents-test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/*
* Copyright 2024 The Matrix.org Foundation C.I.C.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

import React from "react";
import { render, screen, waitFor, act } from "@testing-library/react";
import { AuthType } from "matrix-js-sdk/src/interactive-auth";
import userEvent from "@testing-library/user-event";

import { EmailIdentityAuthEntry } from "../../../../src/components/views/auth/InteractiveAuthEntryComponents";
import { createTestClient } from "../../../test-utils";

describe("<EmailIdentityAuthEntry/>", () => {
const renderIdentityAuth = () => {
const matrixClient = createTestClient();

return render(
<EmailIdentityAuthEntry
matrixClient={matrixClient}
loginType={AuthType.Email}
onPhaseChange={jest.fn()}
submitAuthDict={jest.fn()}
fail={jest.fn()}
clientSecret="my secret"
showContinue={true}
inputs={{ emailAddress: "[email protected]" }}
/>,
);
};

test("should render", () => {
const { container } = renderIdentityAuth();
expect(container).toMatchSnapshot();
});

test("should clear the requested state when the button tooltip is hidden", async () => {
renderIdentityAuth();

// After a click on the resend button, the button should display the resent label
screen.getByRole("button", { name: "Resend" }).click();
await waitFor(() => expect(screen.queryByRole("button", { name: "Resent!" })).toBeInTheDocument());
expect(screen.queryByRole("button", { name: "Resend" })).toBeNull();

const resentButton = screen.getByRole("button", { name: "Resent!" });
// Hover briefly the button and wait for the tooltip to be displayed
await userEvent.hover(resentButton);
await waitFor(() => expect(screen.getByRole("tooltip", { name: "Resent!" })).toBeInTheDocument());

// On unhover, it should display again the resend button
await act(() => userEvent.unhover(resentButton));
await waitFor(() => expect(screen.queryByRole("button", { name: "Resend" })).toBeInTheDocument());
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<EmailIdentityAuthEntry/> should render 1`] = `
<div>
<div
class="mx_InteractiveAuthEntryComponents_emailWrapper"
>
<p>
<span>
To create your account, open the link in the email we just sent to
<b>
[email protected]
</b>
.
</span>
</p>
<p
class="secondary"
>
<span>
Did not receive it?
<div
aria-label="Resend"
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
role="button"
tabindex="0"
>
Resend it
</div>
</span>
</p>
</div>
</div>
`;

0 comments on commit 75562b1

Please sign in to comment.