sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Make the text copy button use IconButton (#34224)

Browse Source 
* Make the text copy button use IconButton

This obviously should be a shared component, but design is looking at
what it will actually look like long term, so until then, let's at
least make it use compound's IconButton so it gets the hover background
state, and sort out the padding & margins.

Requires https://github.com/element-hq/compound-web/pull/528

* snapshots & add aria-label

* more snapshots

* Remove unnecessary width & height

update other screenshots with expected changes

* One more screenshot

* This really shouldn't be necessary: see what test fails

* Fix test to look in screen for the labels

Because the labels from the tooltip don't go in the container, they
get added to the dom at the top level in a floaty bit.

* update snapshots again

* Fix button size

and also add comment to the other place where we fudge the padding

* Update snapshots

* Align to center

* Screenshots
This commit is contained in:
David Baker
2026-07-17 14:49:53 +00:00
committed by GitHub
parent 67fc33ad98
commit d0a70fb1da
25 changed files with 551 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 47 KiB

apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-with-user-pill-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 53 KiB

apps/web/playwright/snapshots/invite/invite-dialog.spec.ts/invite-dialog-dm-without-user-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 46 KiB

After

Width:  |  Height:  |  Size: 46 KiB

apps/web/playwright/snapshots/right-panel/right-panel.spec.ts/with-long-name-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 60 KiB

apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.3 KiB

apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-smallscreen-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 35 KiB

apps/web/playwright/snapshots/timeline/timeline.spec.ts/edited-code-block-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.3 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

apps/web/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

apps/web/res/css/views/elements/_CopyableText.pcss
+3 -13
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_CopyableText {
align-items: flex-start;
align-items: center;
display: flex;
justify-content: space-between;
width: max-content;
@@ -20,27 +20,17 @@ Please see LICENSE files in the repository root for full details.
border: solid 1px $light-fg-color;
margin-bottom: 10px;
margin-top: 10px;
padding: 10px 0 10px 10px;
padding: 10px;
}
.mx_CopyableText_copyButton {
flex-shrink: 0;
/* using em here to adapt to the local font size */
width: 1em;
height: 1em;
padding-left: 12px;
padding-right: 10px;
display: block;
/* If the copy button is used within a scrollable div, make it stick to the right while scrolling */
position: sticky;
right: 0;
/* center to first line */
top: 0.15em;
background-color: $background;
margin-left: var(--cpd-space-1x);
svg {
width: 1em;
height: 1em;
color: $message-action-bar-fg-color;
display: block;
}
apps/web/res/css/views/right_panel/_UserInfo.pcss
-9
View File
@@ -126,19 +126,10 @@ Please see LICENSE files in the repository root for full details.
}
.mx_CopyableText_copyButton {
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
position: unset;
padding-left: var(--cpd-space-2x);
}
.mx_CopyableText_copyButton::before {
width: 20px;
height: 20px;
background-color: var(--cpd-color-icon-secondary-alpha);
}
}
apps/web/res/css/views/rooms/_EventTile.pcss
-2
View File
@@ -869,8 +869,6 @@ $left-gutter: 64px;
position: absolute;
top: $spacing-8;
right: $spacing-8;
width: 16px;
height: 16px;
visibility: hidden;
&.mx_EventTile_buttonBottom {
apps/web/src/components/views/elements/CopyableText.tsx
+8 -7
View File
@@ -10,10 +10,10 @@ Please see LICENSE files in the repository root for full details.
import React, { useState } from "react";
import classNames from "classnames";
import { CopyIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
import { IconButton } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler";
import { copyPlaintext } from "../../../utils/strings";
import AccessibleButton, { type ButtonEvent } from "./AccessibleButton";
interface IProps extends React.HTMLAttributes<HTMLDivElement> {
children?: React.ReactNode;
@@ -29,7 +29,7 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
}) => {
const [tooltip, setTooltip] = useState<string | undefined>(undefined);
const onCopyClickInternal = async (e: ButtonEvent): Promise<void> => {
const onCopyClickInternal = async (e: React.MouseEvent<HTMLButtonElement>): Promise<void> => {
e.preventDefault();
const text = getTextToCopy();
const successful = !!text && (await copyPlaintext(text));
@@ -43,17 +43,18 @@ export const CopyTextButton: React.FC<Pick<IProps, "getTextToCopy" | "className"
};
return (
<AccessibleButton
element="button"
title={tooltip ?? _t("action|copy")}
<IconButton
tooltip={tooltip ?? _t("action|copy")}
onClick={onCopyClickInternal}
className={className}
onTooltipOpenChange={(open) => {
size="28px"
style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
onTooltipOpenChange={(open: boolean) => {
if (!open) onHideTooltip();
}}
>
{children}
</AccessibleButton>
</IconButton>
);
};
apps/web/test/unit-tests/components/views/beacon/__snapshots__/BeaconListItem-test.tsx.snap
+22 -15
View File
@@ -58,25 +58,32 @@ exports[`<BeaconListItem /> when a beacon is live and has locations renders beac
class="mx_CopyableText mx_ShareLatestLocation_copy"
>
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</div>
apps/web/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap
+22 -15
View File
@@ -98,25 +98,32 @@ exports[`<DialogSidebar /> renders sidebar correctly with beacons 1`] = `
class="mx_CopyableText mx_ShareLatestLocation_copy"
>
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</div>
apps/web/test/unit-tests/components/views/beacon/__snapshots__/ShareLatestLocation-test.tsx.snap
+22 -15
View File
@@ -29,25 +29,32 @@ exports[`<ShareLatestLocation /> renders share buttons when there is a location
class="mx_CopyableText mx_ShareLatestLocation_copy"
>
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</DocumentFragment>
apps/web/test/unit-tests/components/views/dialogs/DevtoolsDialog-test.tsx
+7 -7
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
import React from "react";
import { getByLabelText, getAllByLabelText, render } from "jest-matrix-react";
import { render, screen } from "jest-matrix-react";
import { Room, type MatrixClient } from "matrix-js-sdk/src/matrix";
import userEvent from "@testing-library/user-event";
@@ -49,11 +49,11 @@ describe("DevtoolsDialog", () => {
const user = userEvent.setup();
jest.spyOn(navigator.clipboard, "writeText");
const { container } = getComponent(room.roomId);
getComponent(room.roomId);
const copyBtn = getByLabelText(container, "Copy");
const copyBtn = screen.getByLabelText("Copy");
await user.click(copyBtn);
const copiedBtn = getByLabelText(container, "Copied!");
const copiedBtn = screen.getByLabelText("Copied!");
expect(copiedBtn).toBeInTheDocument();
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(room.roomId);
@@ -64,11 +64,11 @@ describe("DevtoolsDialog", () => {
jest.spyOn(navigator.clipboard, "writeText");
const threadRootId = "$test_event_id_goes_here";
const { container } = getComponent(room.roomId, threadRootId);
getComponent(room.roomId, threadRootId);
const copyBtn = getAllByLabelText(container, "Copy")[1];
const copyBtn = screen.getAllByLabelText("Copy")[1];
await user.click(copyBtn);
const copiedBtn = getByLabelText(container, "Copied!");
const copiedBtn = screen.getByLabelText("Copied!");
expect(copiedBtn).toBeInTheDocument();
expect(navigator.clipboard.writeText).toHaveBeenCalledWith(threadRootId);
apps/web/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap
+22 -16
View File
@@ -34,26 +34,32 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = `
>
Room ID: !id
<button
aria-describedby="react-use-id-1"
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
<div
apps/web/test/unit-tests/components/views/dialogs/devtools/__snapshots__/Users-test.tsx.snap
+286 -195
View File
@@ -12,25 +12,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
>
User ID: @alice:example.com
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -40,25 +47,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
>
Device ID: SIGNED
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -100,25 +114,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
>
ed25519: an_ed25519_public_key
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -128,25 +149,32 @@ exports[`<Users /> should render a single device - signed by owner 1`] = `
>
curve25519: a_curve25519_public_key
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -176,25 +204,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
>
User ID: @alice:example.com
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -204,25 +239,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
>
Device ID: UNSIGNED
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -264,25 +306,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
>
ed25519: an_ed25519_public_key
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -292,25 +341,32 @@ exports[`<Users /> should render a single device - unsigned 1`] = `
>
curve25519: a_curve25519_public_key
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -340,25 +396,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
>
User ID: @alice:example.com
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -368,25 +431,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
>
Device ID: VERIFIED
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -430,25 +500,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
>
ed25519: an_ed25519_public_key
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-3"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -458,25 +535,32 @@ exports[`<Users /> should render a single device - verified by cross-signing 1`]
>
curve25519: a_curve25519_public_key
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-4"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
@@ -506,25 +590,32 @@ exports[`<Users /> should render a single user 1`] = `
>
User ID: @alice:example.com
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</li>
apps/web/test/unit-tests/components/views/messages/__snapshots__/TextualBody-test.tsx.snap
+66 -45
View File
@@ -60,25 +60,32 @@ exports[`<TextualBody /> renders formatted m.text correctly linkification is not
</div>
</pre>
<button
aria-label="Copy"
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</div>
@@ -279,25 +286,32 @@ exports[`<TextualBody /> renders formatted m.text correctly pills do not appear
</div>
</pre>
<button
aria-label="Copy"
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</div>
@@ -486,25 +500,32 @@ num_sqrt = num **
</svg>
</button>
<button
aria-label="Copy"
class="mx_AccessibleButton mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_EventTile_button mx_EventTile_copyButton mx_EventTile_buttonBottom"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</div>
apps/web/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap
+44 -30
View File
@@ -105,25 +105,32 @@ exports[`<UserInfo /> with crypto enabled renders <BasicUserInfo /> 1`] = `
>
customUserIdentifier
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</p>
@@ -408,25 +415,32 @@ exports[`<UserInfo /> with crypto enabled should render a deactivate button for
>
customUserIdentifier
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-2"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</p>
apps/web/test/unit-tests/components/views/right_panel/user_info/__snapshots__/UserInfoHeaderView-test.tsx.snap
+22 -15
View File
@@ -53,25 +53,32 @@ exports[`<UserInfoHeaderView /> renders custom user identifiers in the header 1`
>
customUserIdentifier
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</p>
apps/web/test/unit-tests/components/views/settings/tabs/room/__snapshots__/AdvancedRoomSettingsTab-test.tsx.snap
+22 -15
View File
@@ -43,25 +43,32 @@ exports[`AdvancedRoomSettingsTab should render as expected 1`] = `
>
!room:example.com
<button
aria-label="Copy"
class="mx_AccessibleButton mx_CopyableText_copyButton"
aria-labelledby="react-use-id-1"
class="_icon-button_1215g_8 mx_CopyableText_copyButton"
data-kind="primary"
role="button"
style="--cpd-icon-button-size: 28px; padding: 4px;"
tabindex="0"
>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<div
class="_indicator-icon_147l5_17"
style="--cpd-icon-button-size: 100%;"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
<svg
fill="currentColor"
height="1em"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14 5H5v9h1a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1a1 1 0 1 1-2 0z"
/>
<path
d="M8 10a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2zm2 0v9h9v-9z"
/>
</svg>
</div>
</button>
</span>
</div>
apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AccountUserSettingsTab-test.tsx.snap
+4 -4
View File
@@ -42,14 +42,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
>
<input
autocomplete="email"
id="mx_Field_3"
id="mx_Field_11"
label="Email Address"
placeholder="Email Address"
type="text"
value=""
/>
<label
for="mx_Field_3"
for="mx_Field_11"
>
Email Address
</label>
@@ -154,14 +154,14 @@ exports[`<AccountUserSettingsTab /> 3pids should display 3pid email addresses an
</span>
<input
autocomplete="tel-national"
id="mx_Field_4"
id="mx_Field_12"
label="Phone Number"
placeholder="Phone Number"
type="text"
value=""
/>
<label
for="mx_Field_4"
for="mx_Field_12"
>
Phone Number
</label>
packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.tsx
+1 -1
View File
@@ -191,7 +191,7 @@ export function RoomListHeaderView({ vm }: Readonly<RoomListHeaderViewProps>): J
{canOnlyStartChat ? (
<IconButton
size="28px"
style={{ padding: "4px" }}
style={{ padding: "4px" }} // Work around miscalculated padding on 28px button: https://github.com/element-hq/compound/issues/409
onClick={(e) => vm.createChatRoom(e.nativeEvent)}
tooltip={_t("action|start_chat")}
>