Replace legacy Tooltips with Compound tooltips (#28231)

* Ditch legacy Tooltips in favour of Compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Remove dead code

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Extract markdown CodeBlock into React component

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Upgrade compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

Author: t3chguy

package.json

@@ -79,8 +79,6 @@
         "@types/seedrandom": "3.0.8",
         "oidc-client-ts": "3.1.0",
         "jwt-decode": "4.0.0",
-        "@vector-im/compound-design-tokens": "1.8.0",
-        "@vector-im/compound-web": "7.0.0",
         "@floating-ui/react": "0.26.11",
         "@radix-ui/react-id": "1.1.0",
         "caniuse-lite": "1.0.30001668",
@@ -98,7 +96,7 @@
         "@sentry/browser": "^8.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^1.8.0",
-        "@vector-im/compound-web": "^7.0.0",
+        "@vector-im/compound-web": "^7.1.0",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

playwright/e2e/editing/editing.spec.ts

@@ -263,7 +263,6 @@ test.describe("Editing", () => {
         checkA11y,
     }) => {
         axe.disableRules("color-contrast"); // XXX: We have some known contrast issues here
-        axe.exclude(".mx_Tooltip_visible"); // XXX: this is fine but would be good to fix
 
         await page.goto(`#/room/${room.roomId}`);
 

playwright/e2e/register/register.spec.ts

@@ -96,7 +96,7 @@ test.describe("Registration", () => {
             });
         });
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("_alice");
-        await expect(page.getByRole("alert").filter({ hasText: "Some characters not allowed" })).toBeVisible();
+        await expect(page.getByRole("tooltip").filter({ hasText: "Some characters not allowed" })).toBeVisible();
 
         await page.route("**/_matrix/client/*/register/available?username=bob", async (route) => {
             await route.fulfill({
@@ -108,9 +108,9 @@ test.describe("Registration", () => {
             });
         });
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("bob");
-        await expect(page.getByRole("alert").filter({ hasText: "Someone already has that username" })).toBeVisible();
+        await expect(page.getByRole("tooltip").filter({ hasText: "Someone already has that username" })).toBeVisible();
 
         await page.getByRole("textbox", { name: "Username", exact: true }).fill("foobar");
-        await expect(page.getByRole("alert")).not.toBeVisible();
+        await expect(page.getByRole("tooltip")).not.toBeVisible();
     });
 });

playwright/element-web-test.ts

@@ -345,8 +345,7 @@ export const expect = baseExpect.extend({
 
         if (!options?.showTooltips) {
             css += `
-                [role="tooltip"],
-                .mx_Tooltip_visible {
+                [role="tooltip"] {
                     visibility: hidden !important;
                 }
             `;

res/css/_components.pcss

@@ -217,7 +217,6 @@
 @import "./views/elements/_TagComposer.pcss";
 @import "./views/elements/_TextWithTooltip.pcss";
 @import "./views/elements/_ToggleSwitch.pcss";
-@import "./views/elements/_Tooltip.pcss";
 @import "./views/elements/_UseCaseSelection.pcss";
 @import "./views/elements/_UseCaseSelectionButton.pcss";
 @import "./views/elements/_Validation.pcss";

res/css/views/auth/_PassphraseField.pcss

@@ -16,7 +16,8 @@ progress.mx_PassphraseField_progress {
     border: 0;
     height: 4px;
     position: absolute;
-    top: -12px;
+    top: -10px;
+    left: 0;
 
     @mixin ProgressBarBorderRadius "2px";
     @mixin ProgressBarColour $PassphraseStrengthLow;

res/css/views/elements/_Field.pcss

@@ -164,14 +164,6 @@ Please see LICENSE files in the repository root for full details.
     }
 }
 
-.mx_Field_tooltip {
-    width: 200px;
-}
-
-.mx_Field_tooltip.mx_Field_valid {
-    animation: mx_fadeout 1s 2s forwards;
-}
-
 /* Customise other components when placed inside a Field */
 
 .mx_Field .mx_Dropdown_input {

res/css/views/elements/_MiniAvatarUploader.pcss

@@ -10,18 +10,6 @@ Please see LICENSE files in the repository root for full details.
     position: relative;
     width: min-content;
 
-    /* this isn't a floating tooltip so override some things to not need to bother with z-index and floating */
-    .mx_Tooltip {
-        display: inline-block;
-        position: absolute;
-        z-index: unset;
-        width: max-content;
-        left: 72px;
-        /* top edge starting at 50 % of parent - 50 % of itself -> centered vertically */
-        top: 50%;
-        transform: translateY(-50%);
-    }
-
     .mx_MiniAvatarUploader_indicator {
         position: absolute;
 

res/css/views/elements/_Tooltip.pcss

@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
 
 .mx_Validation {
     position: relative;
+    max-width: 200px;
 }
 
 .mx_Validation_details {